Skip to main content

Next.js Chat UI

This example demonstrates a full-stack Next.js application using the Vercel AI SDK and the @caesura-io/ai-sdk middleware.

Source Code: caesura-io/examples-sdk-js/examples/next-ai-sdk-chat

What this shows​

A chat interface that streams model responses from OpenAI (gpt-5.4-mini) and visibly surfaces the injected Caesura analyses, recommendations, and credit usage in a live side-panel.

When to use it: Use the @caesura-io/ai-sdk package when you are building a modern web application with the Vercel AI SDK and want to observe Caesura's background activity in your frontend.

Prerequisites​

  • Node.js v22 or higher
  • An OpenAI API key
  • A Caesura API key (see Authentication)

Setup​

  1. Clone the examples repository.
  2. Navigate to the example directory: 
    cd examples/next-ai-sdk-chat
  3. Copy the example environment file: 
    cp .env.example .env.local
  4. Fill in your OPENAI_API_KEY and CAESURA_API_KEY in .env.local. Ensure your Caesura environment base URL is correctly set if you are not using the default.
  5. Install dependencies: 
    npm install

Run​

Start the development server:

npm run dev

Open http://localhost:3000 with your browser.

What you'll see​

As you chat, the model streams its responses in the main window. In the right-hand panel, you will see raw events emitted by the Caesura middleware:

  • request: When the SDK queries the Caesura backend.
  • response: The analysis/recommendation returned by Caesura, including response duration.
  • buffered: When a recommendation is buffered locally.
  • injected: When a buffered recommendation is finally injected into the LLM prompt.
  • skipped / deduped: When the SDK optimizes and skips redundant API calls.

Data Flow​

Because Caesura operates as a middleware/proxy, it is important to understand where your data goes:

  • Provider API Key (OpenAI): Sent only to OpenAI. It is never sent to the Caesura backend. In frontend apps like this one, this key remains securely on the server.
  • Conversation Content: Sent to the Caesura backend for analysis, and to the provider for language model generation.
  • Caesura API Key: Sent only to the Caesura backend.