Chatbot

An advanced, feature-rich chatbot template built with Next.js and the AI SDK.

Introduction · Tech Stack · New Features · Getting Started · Deployment

Introduction

This project builds upon Chatbot (formerly AI Chatbot) , a free, open-source template built with Next.js and the AI SDK. We've extended it with powerful new features, including personalized persistent memory, RAG-powered web search, and an incognito mode.

Tech Stack

Frontend & Framework

• Next.js - React framework with App Router
  • React Server Components (RSCs) and Server Actions
  • Advanced routing and performance optimization
• React - UI library for building interactive components
• shadcn/ui - High-quality, customizable UI components
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component primitives

AI & Language Models

• AI SDK - Unified API for working with LLMs
  • Text generation and structured object creation
  • Tool calls and dynamic UI hooks
• Vercel AI Gateway - Unified interface for multiple model providers
  • Default: OpenAI GPT-4.1 Mini
  • Also supports: Anthropic, Google, xAI, and more

Backend & Database

• Node.js - JavaScript runtime
• Neon Serverless Postgres - Cloud-native database
  • Chat history persistence
  • User data storage
• Vercel Blob - Scalable file storage

Authentication & Security

• Clerk - Modern authentication and user management
  • Social login (OAuth)
  • Email authentication
  • User profile management

Development & Testing

• TypeScript - Type-safe JavaScript (97% of codebase)
• Playwright - End-to-end testing framework

New Features

🧠 Personalized Persistent Memory

Keep track of user preferences, conversation context, and interaction history across sessions. The chatbot learns from past conversations and provides more personalized responses over time.

Benefits:

• Contextual responses tailored to each user
• Reduced redundancy in explanations
• Better continuity across multiple conversations
• Improved user experience with preference retention

🔍 RAG by Web Search

Retrieval-Augmented Generation powered by real-time web search capabilities. Get up-to-date information and ground responses in current web content.

Benefits:

• Access to current information and real-time data
• Reduced hallucinations through web-sourced facts
• Ability to cite sources for transparency
• Support for knowledge-intensive queries

🕵️ Incognito Mode

Privacy-focused mode for users who want to chat without creating a persistent history or logging in.

Benefits:

• No account required for quick interactions
• Conversations are not saved
• Full feature access in temporary mode
• Enhanced privacy for sensitive discussions

---

Core Features

• Modern Architecture

  • Next.js App Router with Server Components
  • RSCs and Server Actions for optimal performance

• Multiple Model Providers

  • Vercel AI Gateway support for unified access
  • Direct provider integration available (OpenAI, Anthropic, Cohere, etc.)

• Data Persistence

  • Neon Serverless Postgres for reliable data storage
  • Vercel Blob for efficient file management

• Enterprise Authentication

  • Clerk integration for secure user management
  • Support for email and OAuth authentication

• Developer Experience

  • TypeScript for type safety
  • Comprehensive E2E testing with Playwright
  • Well-documented codebase

Model Providers

This template uses the Vercel AI Gateway to access multiple AI models through a unified interface. The default model is OpenAI GPT-4.1 Mini.

AI Gateway Authentication

For Vercel deployments: Authentication is handled automatically via OIDC tokens.

For non-Vercel deployments: You need to provide an AI Gateway API key by setting the AI_GATEWAY_API_KEY environment variable in your .env.local file.

With the AI SDK, you can also switch to direct LLM providers like OpenAI, Anthropic, Cohere, and others by configuring your environment variables accordingly.

Getting Started

Prerequisites

• Node.js 18+ or Bun
• A Vercel account (for deployment)
• Clerk account for authentication
• Neon account for database

Environment Variables

Copy .env.example to .env.local and fill in your credentials:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key_here
CLERK_SECRET_KEY=your_secret_here

# AI Gateway
AI_GATEWAY_API_KEY=your_api_key_here

# Database
DATABASE_URL=your_neon_postgres_url

# Vercel Blob (optional)
BLOB_READ_WRITE_TOKEN=your_token_here

Note: Do not commit your .env.local file. It contains sensitive credentials.

Installation

1. Install dependencies:

pnpm install

2. Set up the database:

pnpm db:migrate

3. Start the development server:

pnpm dev

Your app should now be running on localhost:3000.

Deployment

Deploy to Vercel

The easiest way to deploy is with one click:

Manual Deployment

1. Install Vercel CLI:

npm i -g vercel

2. Link your local instance:

vercel link

3. Pull environment variables:

vercel env pull

4. Deploy:

vercel deploy

Authentication Setup

Clerk Configuration

This app uses Clerk for authentication. There are no legacy Auth.js or NextAuth routes.

Required Environment Variables:

Variable	Purpose
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Browser-side Clerk SDK (required)
CLERK_SECRET_KEY	Server-side Clerk API

Setup Steps:

1. Create a Clerk account and application
2. Enable sign-in methods (email, OAuth providers, etc.)
3. Configure redirect URLs in Clerk Dashboard for your deployment domains
4. Add allowed redirect URLs like /, /login, /chat/*

Testing:

• tests/e2e/auth.test.ts - Sign-in without session
• tests/e2e/chat.test.ts - Chat UI with session
• tests/e2e/api.test.ts - API endpoints with authentication

Running Tests

E2E Tests with Playwright

pnpm test:e2e

This runs end-to-end tests covering authentication flows and chat functionality.

License

MIT

Support

For issues, feature requests, or contributions, please visit the GitHub repository.