Chat SDK is a free, open-source template built with Next.js, the AI SDK, and Electron, designed to integrate seamlessly with MCP host applications for building powerful desktop chatbot experiences.
Read Docs · Features · Model Providers · Deploy Your Own · Running locally
- Initial release with Next.js 14 and Electron integration
- Default package manager must be npm to navigate packages in the packed file
- Add commands with postfix 'e',
dev:e,build:eandstart:efor build and dev with Electronpnpm build && pnpm build:e && pnpm start:efor building and running application
- Implemented basic chat functionality with Antrophic AI providers
- Added MCP Integration
- Loading MCP servers from config file
- Human-in-the-loop for asking permission
- Customizable UI components for MCP tools
- Patched code from the origin code
- Trouble shootings for Development
- Removed next-electron-rsc dependency that was disabling RSC and enabling MCP client from running server-side
- Added @vercel/mcp-adapter example MCP server
- Add WebLLM for LocalLLM.
- You might need 'pnpm exec playwright install' to finish the web-llm-middelware installation
- Next.js App Router
- Advanced routing for seamless navigation and performance
- React Server Components (RSCs) and Server Actions for server-side rendering and increased performance
- AI SDK
- Unified API for generating text, structured objects, and tool calls with LLMs
- Hooks for building dynamic chat and generative user interfaces
- Supports xAI (default), OpenAI, Fireworks, and other model providers
- shadcn/ui
- Styling with Tailwind CSS
- Component primitives from Radix UI for accessibility and flexibility
- Data Persistence
- Neon Serverless Postgres for saving chat history and user data
- Vercel Blob for efficient file storage
- Auth.js
- Simple and secure authentication
This template ships with xAI grok-2-1212 as the default chat model. However, with the AI SDK, you can switch LLM providers to OpenAI, Anthropic, Cohere, and many more with just a few lines of code.
You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:
You will need to use the environment variables defined in .env.example to run Next.js AI Chatbot. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.
Note: You should not commit your
.envfile or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.
- Install Vercel CLI:
npm i -g vercel - Link local instance with Vercel and GitHub accounts (creates
.verceldirectory):vercel link - Download your environment variables:
vercel env pull
pnpm install
pnpm devYour app template should now be running on localhost:3000.