Production-ready AI chatbot with personalized responses powered by assistant-ui and Kontext SDK.
- Beautiful UI built with assistant-ui composable primitives and shadcn/ui
- Personalized AI responses tailored to each user via Gmail context
- Production-ready with streaming, auto-scroll, and error handling
- Privacy-first design with user-controlled data and one-click disconnect
- Responsive design for desktop and mobile
- Node.js 18+
- OpenAI API key
- Kontext API keys (get yours at dashboard.kontext.dev)
# Clone the repository
git clone https://github.com/co-browser/assistant-ui-kontext-starter
cd assistant-ui-kontext-starter
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local- Add your API keys to
.env.local:
# Kontext SDK
NEXT_PUBLIC_KONTEXT_API_KEY=ktextXXXXXXXXXXXXXXXX
KONTEXT_API_KEY=ktextXXXXXXXXXXXXXXXX
# OpenAI
OPENAI_API_KEY=sk-XXXXXXXXXXXXXXXXXX- Configure allowed origins in your Kontext Dashboard:
- Development:
http://localhost:3000 - Production:
https://your-domain.com
- Development:
npm run devOpen http://localhost:3000 to view the application.
- Gmail Connection: Users authorize Gmail access through Kontext OAuth flow
- Context Processing: Kontext extracts relevant context from emails in the background
- Personalized Responses: AI responses are enhanced with user-specific context
- Privacy Control: Users can disconnect anytime, triggering complete data deletion
- What it does: Sends your latest message as
userQueryso the backend retrieves turn-specific context (e.g., a clean, deduped list of projects/legal/docs) without changing your saved persona. - When to enable: Targeted asks like “List all my projects/legal/docs/visa” or “Give exhaustive details on …”.
- When to disable: Open-ended chat, brainstorming, or when you want broader background context.
- Signals: Response headers show
X-Kontext-UserQuery: 1|0andX-Kontext-TurnContext: 1|0for quick validation.
├── app/
│ ├── api/chat/route.ts # AI endpoint with Kontext integration
│ ├── assistant.tsx # Main chat UI component
│ └── layout.tsx # App layout with KontextProvider
├── components/
│ ├── kontext-provider.tsx # Kontext SDK provider wrapper
│ ├── kontext-connect-button.tsx # Gmail connection interface
│ └── assistant-ui/ # Chat UI components
├── hooks/
│ └── useKontextCookie.tsx # Cookie management for authentication
└── lib/
└── kontext-store.ts # Client-side state management
The starter is configured for OpenAI. To use another provider:
- Install the provider package:
npm install @ai-sdk/anthropic- Update
app/api/chat/route.ts:
import { anthropic } from "@ai-sdk/anthropic";
const result = streamText({
model: anthropic("claude-3-sonnet"),
messages: modelMessages,
});Configure privacy levels in app/api/chat/route.ts:
const context = await persona.getContext({
userId,
task: 'chat',
privacyLevel: 'strict', // Options: 'strict' | 'moderate' | 'none'
});- Tailwind CSS v4 with PostCSS. Core imports live in
app/globals.css(@import "tailwindcss";). - Component styling follows shadcn/ui patterns in
components/ui/*. - Customize theme tokens and CSS variables in
app/globals.css. - PostCSS is configured in
postcss.config.mjs.
Configure these in your deployment platform:
| Variable | Description |
|---|---|
NEXT_PUBLIC_KONTEXT_API_KEY |
Client-side Kontext API key |
KONTEXT_API_KEY |
Server-side Kontext API key |
OPENAI_API_KEY |
OpenAI API key |
This is a standard Next.js application and can be deployed to any platform that supports Node.js:
- Railway
- Render
- AWS Amplify
- Netlify
- Self-hosted
MIT
Contributions are welcome. Please submit pull requests with:
- Clear description of changes
- Updated documentation
- Test coverage for new features