Getting Started 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

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" />

// 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);