Next.js Chat UI

A streaming Next.js chat using the Vercel AI SDK and @caesura-io/ai-sdk. The activity panel displays complete analysis values, lifecycle events, and cumulative reported credits for the local chat.

Source and full walkthrough: next-ai-sdk-chat.

Run

Requires Node.js 22+, an OpenAI API key, and a CaesuraO API key. Clone the examples repository, then:

cd examples/next-ai-sdk-chat
npm ci
cp .env.example .env.local
# Set OPENAI_API_KEY and CAESURA_API_KEY in .env.local.
npm run dev

Open localhost:3000. The SDK defaults to https://api.caesurao.com; normally omit CAESURA_BASE_URL.

Conversation lifecycle

useChat keeps a stable local chat ID and sends growing dialogue history. The route passes that ID as providerOptions.caesura.conversationId. With autoCreateConversation: true, the middleware creates a backend conversation before the first eligible analysis and reuses it for that label.

Reloading the page starts a new chat. To keep a conversation across server restarts, use explicit conversation creation.

Persistence is enabled by default. Set CAESURA_PERSIST=false and restart to analyze without backend saving; stable chat IDs still keep local guidance separate.

Activity panel

The example uses mode: 'sync' so analysis completes before model streaming begins and its events can be included in the HTTP response. Switching to background mode alone does not guarantee that late events will reach this panel after the response closes.

The panel shows analysis requests and responses, guidance, errors, and credits. It displays the full analysis, whether JSON or text.

Provider and CaesuraO API keys stay server-side. Dialogue goes to both services; analysis events are streamed to the example UI.