Composio AI Chatbot Template

An Open-Source AI Chatbot Template Built With Next.js, Anthropic Claude, and Composio Integration.

Features · Tech Stack · Running locally · Composio

Features

• Real-time AI Chat - Powered by Anthropic Claude models (claude-4-sonnet)
• Multiple Artifacts - Support for code, documents, images, and spreadsheets
• File Processing - Upload and process various document types
• Chat History - Public/private visibility with persistent storage
• User Interactions - Voting and suggestions system
• Multi-modal Input - Text, voice, and file inputs
• Third-party Integrations - Access to 300+ apps via Composio
• User Registration Flow - Mandatory registration form with email notifications

Tech Stack

• Next.js 15 - App Router with React Server Components
• AI SDK - Anthropic Claude integration
• Composio - Third-party app integrations (300+ apps)
• Drizzle ORM - PostgreSQL database
• Auth.js - Authentication system
• shadcn/ui - UI components with Tailwind CSS

Deploy your own

You can deploy your version with one click:

Running locally

Prerequisites

• Node.js 18+
• PostgreSQL database
• pnpm package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd chat

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Add your configuration:

   • Composio API key from app.composio.dev
   • Plunk API key from useplunk.com for email notifications
   • Database connection details
   • Authentication providers (Google, GitHub, etc.)
   • Anthropic API key for Claude models

4. Run database migrations

   pnpm db:migrate

5. Start the development server

   pnpm dev

Visit http://localhost:3000 to see your application.

Development Commands

Command	Description
pnpm dev	Start development server with Turbo
pnpm build	Run database migrations and build production app
pnpm lint	Run Next.js and Biome linting with auto-fix
pnpm format	Format code with Biome
pnpm test	Run Playwright e2e tests
pnpm db:migrate	Run database migrations
pnpm db:generate	Generate Drizzle migrations
pnpm db:studio	Open Drizzle Studio for database inspection
pnpm db:push	Push schema changes to database

Project Structure

chat/
├── app/
│   ├── (auth)/          # Authentication routes and components
│   ├── (chat)/          # Main chat interface and API routes
│   └── api/             # API endpoints
├── artifacts/           # Different artifact types (code, image, text, sheet)
├── components/          # Reusable UI components
├── lib/
│   ├── ai/              # AI model configuration and tools
│   └── db/              # Database schema and utilities
├── hooks/               # Custom React hooks
└── tests/               # Playwright e2e tests

Composio Integration

This template integrates with Composio to provide seamless access to 300+ third-party applications. Users can connect their accounts and use them as powerful tools within the chat interface.

Key Integration Features

• OAuth Management - Secure connection to user accounts
• Tool Execution - Direct API calls from chat interface
• Real-time Updates - Live data synchronization
• Multi-app Workflows - Chain actions across different platforms

For detailed Composio documentation, see composio-docs.md.

Architecture

Core Stack

• Next.js 15 with App Router and React Server Components
• AI SDK for LLM integration with Anthropic Claude models
• Drizzle ORM with PostgreSQL for data persistence
• Auth.js for authentication
• shadcn/ui components with Tailwind CSS

AI Integration

• Default model: claude-4-sonnet-20250514 for chat, claude-3-5-haiku-latest for titles
• Configurable via /lib/ai/providers.ts
• Test environment uses mock models from /lib/ai/models.test.ts
• AI tools defined in /lib/ai/tools/

User Registration Flow

• Mandatory Registration: All users must complete a registration form before accessing the application
• Required Fields: Full name and email address (company name and contact number are optional)
• Email Notifications: Registration details are automatically sent to the configured email address using Plunk
• Redirect Logic: Users are automatically redirected to /registration if they haven't completed the form
• Cookie-based Tracking: Registration completion is tracked via secure cookies for performance

Database Schema

• Uses Drizzle ORM with PostgreSQL
• Core tables: User, Chat, Message_v2, Document, Vote, Suggestion
• Migration files in /lib/db/migrations/
• The Message table is deprecated in favor of Message_v2

Contributing

Please refer to CLAUDE.md for development guidelines and best practices.

License

MIT

---

Built with ❤️ using Composio