YourSaaS

Add a streaming AI chat interface to your dashboard in ~10 minutes. Supports OpenAI and Anthropic via the Vercel AI SDK.

What's Included

File	Description
`ai-chat-page.tsx`	Server component wrapper — renders the chat inside a page layout
`chat-interface.tsx`	Client component — uses `useChat` from `@ai-sdk/react` for streaming
`chat-message.tsx`	Message bubble — user (right, primary) vs assistant (left, muted)
`lib/features/ai.ts`	`getAIModel()` factory — reads `AI_PROVIDER` and returns the correct model

Prerequisites

An API key from OpenAI or Anthropic.

Setup

Install dependencies

pnpm add ai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/react

Add environment variables

# Pick one provider
AI_PROVIDER="openai"           # or "anthropic"

OPENAI_API_KEY="sk-..."
# ANTHROPIC_API_KEY="sk-ant-..."

# Optional: override the default model
# AI_MODEL="gpt-4o"

Create the API route

Create app/api/ai/chat/route.ts:

import { streamText } from "ai"
import { getAIModel } from "@/lib/features/ai"
import { getRequiredSession } from "@/lib/auth-utils"

export async function POST(req: Request) {
  try {
    await getRequiredSession()
    const { messages } = await req.json()

    const result = streamText({
      model: getAIModel(),
      system: "You are a helpful assistant.",
      messages,
    })

    return result.toDataStreamResponse()
  } catch (error) {
    if (error instanceof Error && error.message === "UNAUTHORIZED") {
      return Response.json({ success: false, error: "Unauthorized" }, { status: 401 })
    }
    return Response.json({ success: false, error: "Failed to generate response" }, { status: 500 })
  }
}

Add to your dashboard

// app/(dashboard)/dashboard/chat/page.tsx
import { AIChatPage } from "@/components/features/ai-chat/ai-chat-page"

export default function ChatPage() {
  return <AIChatPage />
}

Environment Variables

Variable	Required	Description
`AI_PROVIDER`	Yes	`"openai"` or `"anthropic"`
`OPENAI_API_KEY`	If OpenAI	OpenAI API key (`sk-...`)
`ANTHROPIC_API_KEY`	If Anthropic	Anthropic API key (`sk-ant-...`)
`AI_MODEL`	No	Override default model (`gpt-4o` or `claude-sonnet-4-20250514`)

Verification

Start dev: pnpm dev
Navigate to /dashboard/chat
Send a message — you should see a streaming response appear word by word
Check Network tab → /api/ai/chat should return a streamed response
Try signing out and hitting the endpoint directly — should return 401