AI-Chat is a Next.js project that provides a chat interface with AI capabilities. It uses the Mintbase Wallet for user authentication and the OpenAI GPT-4 model for generating chat responses.
Tooling:
Author:
To get started with the project, you need to install the dependencies first. Run the following command in your terminal:
pnpm install
After installing the dependencies, you can start the development server:
pnpm run dev
Then, open http://localhost:3000 with your browser to see the result.
Checkout .env.example and create a local env file (.env.local) with:
MB_API_KEY=
The main chat component is located in /src/components/chat.tsx. It uses the useChat hook from the Vercel ai package to manage the chat state. Messages are sent to the server using the append function:
const { append, messages, isLoading } = useChat({
api: "/api/chat-completion",
})
const sendMessage = (message: string) => {
append({ role: "user", content: message })
}The API route for chat completion is defined in /src/app/api/chat-completion/route.ts. It sends a POST request to the Mintbase API with the chat messages:
export async function POST(req: Request) {
const body = await req.json()
const { messages } = body
const response = await fetch(
"https://mintbase-wallet-git-ai-relayer-credits-mintbase.vercel.app/api/ai/v1/router/chat",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.MB_API_KEY}`,
},
body: JSON.stringify({
model: "openai/gpt-4-1106-preview",
messages: messages,
}),
}
)
return new StreamingTextResponse(response.body!)The application uses the Mintbase Wallet for user authentication. The ConnectWallet component in `/src/components/connect-wallet.tsx`` provides a button for connecting and disconnecting the wallet:
export function ConnectWallet() {
const { connect, disconnect, isConnected } = useMbWallet()
return (
<>
<Button
className="w-[100px] hidden md:flex"
onClick={() => {
if (isConnected) {
disconnect()
} else {
connect()
}
}}
>
{isConnected ? "Disconnect" : "Connect"}
</Button>
<Button
size="sm"
className="w-[100px] md:hidden"
onClick={() => {
if (isConnected) {
disconnect()
} else {
connect()
}
}}
>
{isConnected ? "Disconnect" : "Connect"}
</Button>
</>
);
}- Support: Join the Telegram
- Twitter: @mintbase