Next.js AI Chatbot

An Open-Source AI Chatbot Template Built With Next.js and the AI SDK by Vercel.

Features · Model Providers · Deploy Your Own · Running locally

Features

• 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
  • Vercel Postgres powered by Neon for saving chat history and user data
  • Vercel Blob for efficient file storage
• NextAuth.js
  • Simple and secure authentication

Model Providers

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.

Deploy Your Own

You can deploy your own version of the Next.js AI Chatbot to Vercel with one click:

Running locally

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 .env file or it will expose secrets that will allow others to control access to your various AI and authentication provider accounts.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
3. Download your environment variables: vercel env pull

pnpm install
pnpm dev

Your app template should now be running on localhost:3000.

Blockchain Data Integration

This project includes integration with Cryo MCP to provide blockchain data querying capabilities. The chatbot can:

• Query blockchain datasets (blocks, transactions, logs, etc.)
• Run SQL queries on blockchain data
• Get information about the latest Ethereum block
• List available blockchain datasets

Setup

Option 1: Docker Compose (recommended)

Run the entire stack (Next.js app, PostgreSQL, and Cryo MCP) with one command:

docker-compose up -d

This will start:

• Next.js application on port 3000
• PostgreSQL database on port 5432
• Cryo MCP server on port 8000

All the services are properly connected and configured to work together.

Option 2: Local Development with Docker Services

If you prefer developing the Next.js app locally:

1. Start just the supporting services:

   docker-compose up -d postgres cryo-mcp

2. Update your local .env file:

   POSTGRES_URL=postgres://postgres:postgres@localhost:5432/onchain_perplexity
   

3. Run the Next.js app locally:

   pnpm install
   pnpm run db:migrate
   pnpm run dev

Usage Examples

You can ask the chatbot questions like:

• "What is the latest Ethereum block number?"
• "Show me transactions from the latest 100 blocks"
• "Run a SQL query to find the blocks with the highest gas used in the last 1000 blocks"
• "What blockchain datasets can I query?"