Build a Solana Agent Kit chat interface with NextJS
# Clone the repository npm install -g degit degit sendaifun/solana-agent-kit/tree/main/examples/agent-kit-nextjs-langchain agent-kit-nextjs-langchain cd agent-kit-nextjs-langchain # Install dependencies pnpm install
.env.local
OPENAI_API_KEY=your_openai_key RPC_URL=your_solana_rpc_url SOLANA_PRIVATE_KEY=your_wallet_private_key_base58
pnpm dev
├── app/ │ ├── api/ │ │ └── chat/ │ │ └── route.ts # API endpoint for chat │ ├── components/ │ │ ├── chat.tsx # Chat interface │ │ └── message.tsx # Message component │ └── page.tsx # Main page ├── public/ │ └── images/ # Static assets └── package.json
// app/components/chat.tsx export function Chat() { const { messages, input, handleInputChange, handleSubmit } = useChat(); return ( <div className="flex flex-col h-full"> <Messages messages={messages} /> <Input value={input} onChange={handleInputChange} onSubmit={handleSubmit} /> </div> ); }
// app/api/chat/route.ts export async function POST(req: Request) { const { messages } = await req.json(); const solanaKit = new SolanaAgentKit( process.env.SOLANA_PRIVATE_KEY!, process.env.RPC_URL!, process.env.OPENAI_API_KEY ); return StreamingTextResponse(response); }
import { Chat } from '@/components/chat'; export default function Home() { return ( <div className="container"> <Chat /> </div> ); }
// Add custom styles to chat component <Chat className="rounded-lg shadow-lg" />
OPENAI_API_KEY
RPC_URL
SOLANA_PRIVATE_KEY
// app/api/chat/route.ts const agent = new SolanaAgentKit({ temperature: 0.7, maxTokens: 1000, // Add custom settings });
// Add new tool to agent const customTool = { name: 'custom_tool', description: 'Custom functionality', execute: async (input) => { // Implementation } }; agent.addTool(customTool);
Was this page helpful?