Chat — Integration Guide

Overview

The Chat feature provides a fully-featured AI chat interface with streaming responses, multi-model support, system prompts, and conversation history. It's the core interaction surface of ChimerAI.

Quick Start

npx chimerai add chat

This scaffolds:

app/chat/page.tsx — chat UI with model & prompt selectors
app/api/chat/route.ts — streaming API route (Vercel AI SDK)
components/chat/ — ChatMessage, MessageInput, ModelSelector components

Architecture

User Input → /api/chat → AI Provider (OpenAI / Anthropic / …) → Streaming Response → UI

The API route uses the Vercel AI SDK streamText helper, which supports:

OpenAI (GPT-4o, GPT-4o Mini, GPT-3.5 Turbo, …)
Anthropic (Claude 3.5 Sonnet, Claude 3 Haiku, …)
Google (Gemini 1.5 Pro, Gemini 1.5 Flash, …)
Custom / local models via the OpenAI-compatible endpoint

Environment Variables

Variable	Description
`OPENAI_API_KEY`	Required for OpenAI models
`ANTHROPIC_API_KEY`	Required for Anthropic models
`GOOGLE_GENERATIVE_AI_API_KEY`	Required for Google models
`DATABASE_URL`	Prisma DB — stores conversation history

API Route

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages, modelId, systemPrompt } = await req.json();

  const result = await streamText({
    model: openai(modelId ?? 'gpt-4o-mini'),
    system: systemPrompt,
    messages,
  });

  return result.toDataStreamResponse();
}

Storing Conversation History

Use Prisma to persist messages:

await prisma.message.createMany({
  data: messages.map((m) => ({
    role: m.role,
    content: m.content,
    conversationId,
  })),
});

System Prompts

System prompts customise the AI's persona and behaviour. ChimerAI stores prompts in the database and exposes them via /api/prompts.

const { data: prompts } = useSWR('/api/prompts', fetcher);