An Open-Source AI Chatbot Template Built With Next.js and the AI SDK by Vercel.
- Composio + AI SDK
- Composio for providing tools across 300+ apps.
- Managed authentication for secure user connections.
- Unified API for generating text, structured objects, and tool calls with LLMs
- Braintrust
- Advanced observability and monitoring for your AI apps.
- shadcn/ui
- Styling with Tailwind CSS
- Component primitives from Radix UI for accessibility and flexibility
- Data Persistence
- Vercel Postgres powered by Neon for saving chat history and user data
- Vercel Blob for efficient file storage
- NextAuth.js
- Simple and secure authentication
This template showcases how to use Composio and the AI SDK to build an AI chatbot with access to third-party APIs (like Gmail, Google Calendar) as tools. Composio manages connections to third-party APIs and handles the authentication flow for the users.
It also uses Braintrust for observability and monitoring.
- Clone this repository
- Install dependencies:
pnpm install - Create a Composio account and get a Composio API key from Composio. Save it in the
.env - Create an integration for Google Calendar and Gmail in Composio.
- Save the integration IDs in the
.envfile - Run the development server:
pnpm run dev
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.