AgentChat

Full agent chat pane with streamed turns, tool chips, and a composer.

AgentChat is the conversation pane for an agent platform: turns scroll in a message scroller that follows streams while you are pinned to the bottom (with a jump-to-latest button when you are not), user turns render as bubbles, agent turns as streamed markdown with ToolCallChip invocations and quiet reasoning lines, and the composer has a controls slot for ThinkingModelSelect. Typed against the AI SDK’s UIMessage — bring your own useChat transport.

The preview streams a scripted vibe-coding session through the real useChat lifecycle (no model or network): press send to play the next turn.

Start building

Describe a feature and the agent edits the live app, database included.

"use client";

import { useChat } from "@ai-sdk/react";
import type { CSSProperties, ReactNode } from "react";
import { useMemo, useState } from "react";

import { defaultModelId, gatewayModels } from "../model-select/fixtures";
import { ThinkingModelSelect } from "../thinking-model-select/thinking-model-select";
import type { ThinkingEffort } from "../thinking-select/thinking-select";
import { AgentChat } from "./agent-chat";
import { buildAgentConversation } from "./fixtures";

/**
 * Brand marks from theSVG, applied as alpha masks filled with
 * currentColor so they always match the surrounding text color.
 */
const logo = (slug: string) => {
  const url = `url(https://thesvg.org/icons/${slug}/default.svg)`;
  const style: CSSProperties = {
    WebkitMaskImage: url,
    WebkitMaskPosition: "center",
    WebkitMaskRepeat: "no-repeat",
    WebkitMaskSize: "contain",
    maskImage: url,
    maskPosition: "center",
    maskRepeat: "no-repeat",
    maskSize: "contain",
  };

  return <span className="block bg-current" style={style} />;
};

const providerLogos: Record<string, ReactNode> = {
  Alibaba: logo("alibaba"),
  Anthropic: logo("anthropic"),
  Google: logo("google"),
  Meta: logo("meta"),
  OpenAI: logo("openai"),
};

export const AgentChatDemo = () => {
  const chat = useMemo(() => buildAgentConversation(), []);
  const [model, setModel] = useState(defaultModelId);
  const [effort, setEffort] = useState<ThinkingEffort>("medium");
  const { messages, sendMessage, status } = useChat({
    messages: chat.get(0),
    transport: chat.transport(),
  });

  const modelName = gatewayModels.find((entry) => entry.id === model)?.name;

  return (
    <AgentChat
      activeControls={{ effort, model, modelName }}
      className="h-[420px] w-full max-w-md border border-border/60 bg-background"
      controls={
        <ThinkingModelSelect
          effort={effort}
          logos={providerLogos}
          models={gatewayModels}
          onEffortChange={setEffort}
          onValueChange={setModel}
          size="sm"
          value={model}
        />
      }
      messages={messages}
      onSend={() => {
        const next = chat.next(messages);

        if (next) {
          sendMessage({
            ...next,
            metadata: { effort, model, modelName },
          });
        }
      }}
      placeholder="Press send to play the scripted turn…"
      status={status}
    />
  );
};

export default AgentChatDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/agent-chat.json

Usage

import { useChat } from "@ai-sdk/react";
import { AgentChat } from "@/components/neon-ui/agent-chat";

const { messages, sendMessage, status } = useChat({ transport });

<AgentChat
  messages={messages}
  status={status}
  onSend={(text) => sendMessage({ text })}
/>;

Wiring to Neon

Stream a Neon-hosted agent (e.g. a Mastra agent on a Neon Function) directly from the browser with a short-lived JWT, so your app server never sits in the path of the long stream:

const { messages, sendMessage, status } = useChat({
  transport: new DefaultChatTransport({
    api: `${agentUrl}/chat`,
    prepareSendMessagesRequest: async ({ messages }) => ({
      headers: { Authorization: `Bearer ${await getToken()}` },
      body: { messages, model, reasoning_effort: effort },
    }),
  }),
});

Props

PropType

messagesUIMessage[]

Conversation from useChat.

TypeUIMessage[]

statusChatStatus

useChat status: "submitted" | "streaming" | "ready" | "error".

TypeChatStatus

onSend(text: string) => void

Called with the trimmed composer text.

Type(text: string) => void

controls?ReactNode

Slot at the left of the composer's control row, e.g. ThinkingModelSelect.

TypeReactNode

emptyState?ReactNode

Rendered while the conversation is empty.

TypeReactNode

disabled?boolean

Disable the composer, e.g. while an environment provisions.

Typeboolean

Defaultfalse

placeholder?string

Composer placeholder text.

Typestring

Default"Describe a change…"

Model switches

Attach AgentChatTurnMetadata (model, modelName, effort) to user turns via sendMessage metadata. When a turn’s model or effort differs from the previous turn, a quiet “switched to GPT-5.2 · high thinking” marker renders above it — part of the timeline, so it replays with the transcript. Try it in the preview: change the model or effort, then send.

sendMessage({ text }, { metadata: { model, modelName, effort } });

Sub-components

Both are exported for custom layouts.

ChatMessage

One turn from a UIMessage: user turns as bubbles, agent turns as markdown with reasoning and tool lines.

Add auth so each user only sees their own books.

Neon Auth is already wired; I need a user_id column and a filtered query.

Done — books now carry a user_id, and every query filters by the signed-in user from Neon Auth. Sign in as two different users to verify the isolation.

"use client";

import { ChatMessage } from "@neon-ui/registry/components/agent-chat/agent-chat";
import { sampleTurns } from "@neon-ui/registry/components/agent-chat/fixtures";

export default function ChatMessageDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      {sampleTurns.map((message) => (
        <ChatMessage key={message.id} message={message} />
      ))}
    </div>
  );
}

ChatInput

The composer on its own: auto-growing textarea, controls slot, Enter to send.

"use client";

import { ChatInput } from "@neon-ui/registry/components/agent-chat/agent-chat";
import {
  defaultModelId,
  gatewayModels,
} from "@neon-ui/registry/components/model-select/fixtures";
import { ThinkingModelSelect } from "@neon-ui/registry/components/thinking-model-select/thinking-model-select";
import type { ThinkingEffort } from "@neon-ui/registry/components/thinking-select/thinking-select";
import { useState } from "react";

export default function ChatInputDemo() {
  const [model, setModel] = useState(defaultModelId);
  const [effort, setEffort] = useState<ThinkingEffort>("medium");
  const [sent, setSent] = useState<string | null>(null);

  return (
    <div className="w-full max-w-md space-y-3">
      <ChatInput
        className="rounded-lg border"
        controls={
          <ThinkingModelSelect
            effort={effort}
            models={gatewayModels}
            onEffortChange={setEffort}
            onValueChange={setModel}
            size="sm"
            value={model}
          />
        }
        onSend={setSent}
      />
      {sent ? (
        <p className="font-mono text-muted-foreground text-xs">sent: {sent}</p>
      ) : null}
    </div>
  );
}

ChatWorkingIndicator

The busy row: the Neon mark and the status line painted with the same shadcn shimmer gradient, sweeping in sync. Tune both at once with shimmer-duration-* or shimmer-color-* on the wrapper; the grain-resolve NeonLoader remains available standalone. Rendered automatically while a message is submitted; the label is yours.

Agent is working…

Provisioning your database…

Accessibility

The busy marker uses role="status"; the composer is a labeled textarea (Enter sends, Shift+Enter breaks); the scroller preserves reading position during streams and reduced motion is respected throughout.