Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "chatbot",
"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
"remoteUser": "node",
"forwardPorts": [3000],
"portsAttributes": {
"3000": {
"label": "Next.js dev server",
"onAutoForward": "notify"
}
},
"mounts": [
"source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
],
"containerEnv": {
"COREPACK_ENABLE_DOWNLOAD_PROMPT": "0",
"NEXT_TELEMETRY_DISABLED": "1"
},
"postCreateCommand": "corepack enable && corepack prepare pnpm@10.32.1 --activate && pnpm install",
"customizations": {
"vscode": {
"extensions": [
"biomejs.biome",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss",
"ms-playwright.playwright"
],
"settings": {
"typescript.tsdk": "node_modules/typescript/lib"
}
}
}
}
20 changes: 8 additions & 12 deletions .env.example
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
# generate a random secret: https://generate-secret.vercel.app/32 or `openssl rand -base64 32`
AUTH_SECRET=****

# required for non-vercel deployments, vercel uses OIDC automatically
# https://vercel.com/ai-gateway
AI_GATEWAY_API_KEY=****

# https://vercel.com/docs/vercel-blob
BLOB_READ_WRITE_TOKEN=****

# https://vercel.com/docs/postgres
POSTGRES_URL=****

# https://vercel.com/docs/redis
REDIS_URL=****
# Keep false while reviewing UI architecture. Set true when the app should
# require Microsoft Entra login before opening chat routes.
AUTH_REQUIRED=false

# Microsoft Entra ID / Azure AD auth.
AUTH_MICROSOFT_ENTRA_ID_ID=****
AUTH_MICROSOFT_ENTRA_ID_SECRET=****
AUTH_MICROSOFT_ENTRA_ID_TENANT_ID=****
11 changes: 11 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
node_modules
.pnpm-store
.next
out
build
coverage
pnpm-lock.yaml
tsconfig.tsbuildinfo
test-results
playwright-report
blob-report
7 changes: 7 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"endOfLine": "lf",
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all"
}
2 changes: 1 addition & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"recommendations": ["biomejs.biome"]
"recommendations": ["biomejs.biome", "esbenp.prettier-vscode"]
}
80 changes: 19 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,71 +1,29 @@
<a href="https://chatbot.ai-sdk.dev/demo">
<img alt="Chatbot" src="app/(chat)/opengraph-image.png">
<h1 align="center">Chatbot</h1>
</a>
# Chatbot UI

<p align="center">
Chatbot (formerly AI Chatbot) is a free, open-source template built with Next.js and the AI SDK that helps you quickly build powerful chatbot applications.
</p>
Next.js chat UI built around the Vercel AI SDK client state, currently running in UI-only mode.

<p align="center">
<a href="https://chatbot.ai-sdk.dev/docs"><strong>Read Docs</strong></a> ·
<a href="#features"><strong>Features</strong></a> ·
<a href="#model-providers"><strong>Model Providers</strong></a> ·
<a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
<a href="#running-locally"><strong>Running locally</strong></a>
</p>
<br/>
## Current Mode

## Features
- Chat streaming is served by a local AI SDK-compatible stub in `/api/chat`.
- Chat history, votes, persisted messages, artifact persistence, suggestions, uploads, and model listing are not implemented in this UI layer.
- Authentication shell is handled with Auth.js / NextAuth and Microsoft Entra ID. Chat routes stay open while `AUTH_REQUIRED=false`; set `AUTH_REQUIRED=true` when login should be enforced.
- PostgreSQL, Drizzle, Redis, Vercel Blob, Vercel BotID, Vercel OTel, and Vercel AI Gateway are not part of the active app runtime.

- [Next.js](https://nextjs.org) 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](https://ai-sdk.dev/docs/introduction)
- Unified API for generating text, structured objects, and tool calls with LLMs
- Hooks for building dynamic chat and generative user interfaces
- Supports OpenAI, Anthropic, Google, xAI, and other model providers via AI Gateway
- [shadcn/ui](https://ui.shadcn.com)
- Styling with [Tailwind CSS](https://tailwindcss.com)
- Component primitives from [Radix UI](https://radix-ui.com) for accessibility and flexibility
- Data Persistence
- [Neon Serverless Postgres](https://vercel.com/marketplace/neon) for saving chat history and user data
- [Vercel Blob](https://vercel.com/storage/blob) for efficient file storage
- [Auth.js](https://authjs.dev)
- Simple and secure authentication

## Model Providers

This template uses the [Vercel AI Gateway](https://vercel.com/docs/ai-gateway) to access multiple AI models through a unified interface. Models are configured in `lib/ai/models.ts` with per-model provider routing. Included models: Mistral, Moonshot, DeepSeek, OpenAI, and xAI.

### 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](https://ai-sdk.dev/docs/introduction), you can also switch to direct LLM providers like [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Cohere](https://cohere.com/), and [many more](https://ai-sdk.dev/providers/ai-sdk-providers) with just a few lines of code.

## Deploy Your Own

You can deploy your own version of Chatbot to Vercel with one click:

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/templates/next.js/chatbot)

## Running locally

You will need to use the environment variables [defined in `.env.example`](.env.example) to run Chatbot. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/projects/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`
## Running Locally

```bash
pnpm install
pnpm db:migrate # Setup database or apply latest database changes
pnpm dev
```

Your app template should now be running on [localhost:3000](http://localhost:3000).
The app runs on [localhost:3000](http://localhost:3000) by default.

## Backend Integration

When the production backend contract is ready, wire `/api/chat` to the backend streaming endpoint and add explicit frontend fetch clients for the backend-owned resources:

- chat list/history
- persisted messages
- feedback/votes
- artifact documents and suggestions
- uploads/attachments
84 changes: 0 additions & 84 deletions app/(auth)/actions.ts

This file was deleted.

26 changes: 0 additions & 26 deletions app/(auth)/api/auth/guest/route.ts

This file was deleted.

Loading