TanStack AI

Keep the SDK hook in charge and render its projected messages through Ghost.

Use the native connection

Install the checked @tanstack/ai, @tanstack/ai-client and @tanstack/ai-react versions in stability. Supply a real ConnectionAdapter, such as your application’s HTTP or AG-UI connection. It owns the request, stream and cancellation. Follow AI installation for styles and view peers. The same MessageParts composition also accepts plain data.

tanstack-conversation.tsx

12345678910111213141516171819202122import { useChat } from "@tanstack/ai-react";
import type { ConnectionAdapter } from "@tanstack/ai-client";
import { createTanStackAdapter } from "@ghost-ui/core/chat-adapter-tanstack";
import { useChatAdapter } from "@ghost-ui/core/chat-runtime-react";
import { Button } from "@ghost-ui/core/components/button";
import { Message, MessageBody } from "@ghost-ui/core/components/message";
import { MessageParts } from "@ghost-ui/core/components/message-parts";
const adapter = createTanStackAdapter();
export function TanStackConversation({ connection }: { connection: ConnectionAdapter }) {
  const chat = useChat({ connection });
  const runtime = useChatAdapter(adapter, chat, { identity: { threadId: "brief", revision: 0 } });
  const { messages, controller } = runtime;
  return <section aria-label="Conversation">
    {messages.map(message => <Message key={message.id} actor={message.actor} aria-label={message.actor}><MessageBody>
      <MessageParts parts={message.parts} />
    </MessageBody></Message>)}
    <Button type="button" disabled={runtime.capabilities.send.support !== "supported" || !runtime.capabilities.send.available}
      onClick={() => void controller.send({ text: "Summarize the brief", attachments: [] })}>Summarize</Button>
    {controller.status === "streaming" && <Button type="button" onClick={() => void controller.stop?.()}>Stop</Button>}
    {controller.error && <p role="alert">Could not complete the request.</p>}
  </section>;
}

Commands and extension points

The hook owns messages and transport. Ghost binds text send, stop and latest-answer regeneration; optional setMessages enables local edit/resubmit. Editing truncates local history before resending, so reconcile persistence and a failed resend in your application. Native tool schemas, execution, request authentication and storage remain outside Ghost.

Supply the adapter's normalization options for deliberate part mappings and reasoning summaries. Supply runtime availability to disable actions for application policy. Attachments need the explicit outbound converter described in runtime integration; unsupported files are rejected rather than dropped.

Troubleshooting and native APIs

A missing answer usually indicates a protocol/transport mismatch. Inspect native errors first, then capability support/availability. Keep one hook owner per context and advance the identity revision on replacement. Retain the native hook for capabilities whose semantics are richer than a generic message command.

TanStack AI documentation covers connection adapters, client tools and state. The AG-UI connection is optional; direct AG-UI preserves an existing HttpAgent client.

AG-UI through a TanStack connection

Keep this route when TanStack already owns your chat client. Supply your authenticated endpoint and real thread ID. The connection decodes AG-UI through TanStack; it does not adopt a second native AG-UI client. For an existing HttpAgent and its shared state, choose the direct client.

ag-ui-conversation.tsx

12345678910111213141516171819202122232425262728293031323334import { useMemo, useState } from "react";
import { fetchServerSentEvents, useChat } from "@tanstack/ai-react";
import { createTanStackAdapter } from "@ghost-ui/core/chat-adapter-tanstack";
import { useChatAdapter } from "@ghost-ui/core/chat-runtime-react";
import { Message, MessageBody } from "@ghost-ui/core/components/message";
import { MessageParts } from "@ghost-ui/core/components/message-parts";
import { Button } from "@ghost-ui/core/components/button";

const adapter = createTanStackAdapter();
type Props = { endpoint: string; threadId: string; revision: number; fetchClient?: typeof fetch };
export function AgUiConversation({ endpoint, threadId, revision, fetchClient }: Props) {
  const connection = useMemo(() => fetchServerSentEvents(endpoint, { fetchClient }), [endpoint, fetchClient]);
  const chat = useChat({ connection, threadId });
  const [commandError, setCommandError] = useState<string>();
  const runtime = useChatAdapter(adapter, {
    messages: chat.messages, status: chat.status, error: chat.error,
    sendMessage: chat.sendMessage, stop: chat.stop,
  }, { identity: { threadId, revision } });
  const { messages, controller } = runtime;
  async function send() {
    setCommandError(undefined);
    try { await controller.send({ text: "Summarize the brief", attachments: [] }); }
    catch { setCommandError("Could not send the request."); }
  }
  return <section aria-label="Conversation">
    {messages.map(message => <Message key={message.id} actor={message.actor}><MessageBody>
      <MessageParts parts={message.parts} />
    </MessageBody></Message>)}
    <Button disabled={runtime.capabilities.send.support !== "supported" || !runtime.capabilities.send.available}
      onClick={() => void send()}>Summarize</Button>
    {(controller.status === "submitting" || controller.status === "streaming") && <Button onClick={() => void controller.stop?.()}>Stop</Button>}
    {(commandError || controller.error) && <p role="alert">{commandError || "Could not complete the request."}</p>}
  </section>;
}