diff --git a/.changeset/create-chat-hook.md b/.changeset/create-chat-hook.md
new file mode 100644
index 0000000000..aea3db151e
--- /dev/null
+++ b/.changeset/create-chat-hook.md
@@ -0,0 +1,12 @@
+---
+'@tanstack/ai-react': minor
+'@tanstack/ai-solid': minor
+'@tanstack/ai-vue': minor
+'@tanstack/ai-svelte': minor
+---
+
+Chat UI now lives on the framework packages at `@tanstack/ai-react/ui`, `@tanstack/ai-solid/ui`, `@tanstack/ai-vue/ui`, and `@tanstack/ai-svelte/ui`.
+
+Call `useChat(options)` from the framework package. Pass that instance and a typed `components` map to ``. `useChatContext()` reads the same instance from inside `Chat`.
+
+`createChatHook(options)` on the main package still returns a bound `useChat`. It does not take `chatComponents`.
diff --git a/.changeset/deprecate-ai-ui-packages.md b/.changeset/deprecate-ai-ui-packages.md
new file mode 100644
index 0000000000..164cc1c77d
--- /dev/null
+++ b/.changeset/deprecate-ai-ui-packages.md
@@ -0,0 +1,11 @@
+---
+'@tanstack/ai-react-ui': minor
+'@tanstack/ai-solid-ui': minor
+'@tanstack/ai-vue-ui': minor
+---
+
+Deprecated. Import chat UI from `@tanstack/ai-react/ui`, `@tanstack/ai-solid/ui`, or `@tanstack/ai-vue/ui` instead.
+
+These packages re-export the new `/ui` subpath until 1.0.0. `npm install` prints a deprecation warning.
+
+`@tanstack/ai-svelte-ui` was never published. Svelte chat UI lives only on `@tanstack/ai-svelte/ui`.
diff --git a/.changeset/typed-headless-chat-ui.md b/.changeset/typed-headless-chat-ui.md
index db5dfc9eec..14c84dab83 100644
--- a/.changeset/typed-headless-chat-ui.md
+++ b/.changeset/typed-headless-chat-ui.md
@@ -1,9 +1,9 @@
---
'@tanstack/ai-client': minor
-'@tanstack/ai-react-ui': minor
-'@tanstack/ai-solid-ui': minor
-'@tanstack/ai-vue-ui': minor
-'@tanstack/ai-svelte-ui': minor
+'@tanstack/ai-react': minor
+'@tanstack/ai-solid': minor
+'@tanstack/ai-vue': minor
+'@tanstack/ai-svelte': minor
---
Add typed headless `createChatUI()` adapters. Chat options control the types of message parts, tools, structured output, and interrupts. `defineComponents` requires a component for every tool name and every registered interrupt id. `InterruptProps` pins a tool approval or a registered generic interrupt. Old Chat orchestration stays importable and deprecated until 1.0.
diff --git a/README.md b/README.md
index c9bbb8c10d..d524f36907 100644
--- a/README.md
+++ b/README.md
@@ -226,15 +226,15 @@ on.
## Framework Packages
-| Package | What it provides |
-| -------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
-| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
-| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
-| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
-| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
-| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat |
-| `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, `@tanstack/ai-vue-ui` | Headless UI components for chat interfaces |
+| Package | What it provides |
+| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| [`@tanstack/ai-client`](https://tanstack.com/ai/latest/docs/api/ai-client) | Headless chat, realtime, and generation clients |
+| [`@tanstack/ai-react`](https://tanstack.com/ai/latest/docs/api/ai-react) | React hooks including `useChat`, `useRealtimeChat`, and generation hooks |
+| [`@tanstack/ai-solid`](https://tanstack.com/ai/latest/docs/api/ai-solid) | Solid hooks for chat and generations |
+| [`@tanstack/ai-vue`](https://tanstack.com/ai/latest/docs/api/ai-vue) | Vue composables for chat and generations |
+| [`@tanstack/ai-svelte`](https://tanstack.com/ai/latest/docs/api/ai-svelte) | Svelte 5 factories for chat and generations |
+| [`@tanstack/ai-preact`](https://tanstack.com/ai/latest/docs/api/ai-preact) | Preact hooks for chat |
+| `@tanstack/ai-react/ui`, `@tanstack/ai-solid/ui`, `@tanstack/ai-vue/ui`, `@tanstack/ai-svelte/ui` | Headless UI components for chat interfaces. `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, and `@tanstack/ai-vue-ui` are deprecated. |
## Advanced Docs
diff --git a/codemods/ag-ui-compliance/transform.ts b/codemods/ag-ui-compliance/transform.ts
index 37eb154620..d4924f7a90 100644
--- a/codemods/ag-ui-compliance/transform.ts
+++ b/codemods/ag-ui-compliance/transform.ts
@@ -36,11 +36,11 @@ import type {
const FRAMEWORK_USE_CHAT_PACKAGES = new Set([
'@tanstack/ai-react',
- '@tanstack/ai-react-ui',
+ '@tanstack/ai-react/ui',
'@tanstack/ai-vue',
- '@tanstack/ai-vue-ui',
+ '@tanstack/ai-vue/ui',
'@tanstack/ai-solid',
- '@tanstack/ai-solid-ui',
+ '@tanstack/ai-solid/ui',
'@tanstack/ai-preact',
])
diff --git a/docs/api/ai-react.md b/docs/api/ai-react.md
index ff4fafe768..5ee34a4001 100644
--- a/docs/api/ai-react.md
+++ b/docs/api/ai-react.md
@@ -14,7 +14,7 @@ keywords:
React hooks for TanStack AI, providing convenient React bindings for the headless client.
-For a typed headless chat UI, see [React Chat UI](../ui/react) and [Migrate to createChatUI](../migration/create-ui).
+For a typed headless chat UI, see [React Chat UI](../ui/react) and [Chat UI packages](../migration/create-ui).
For React Native, the documented support surface is narrow: `useChat` with chat
connection adapters. React DOM-specific UI packages and TanStack AI devtools UI
are not part of the React Native support surface.
@@ -28,6 +28,27 @@ For a complete native journey, see
npm install @tanstack/ai-react
```
+## `createChatHook(options)`
+
+Bind `chatOptions` once at module scope. Call `useChat()` in the screen to create the instance. Per-call overrides may set `threadId`, `initialMessages`, `live`, and `forwardedProps`. They must not change `tools`, `interrupts`, or `outputSchema`.
+
+```tsx
+import { createChatHook, fetchServerSentEvents } from "@tanstack/ai-react";
+
+const chatOptions = {
+ connection: fetchServerSentEvents("/api/chat"),
+};
+
+const { useChat } = createChatHook(chatOptions);
+
+function ChatScreen() {
+ const chat = useChat({ threadId: "support-1" });
+ return null;
+}
+```
+
+`useChat(chatOptions)` from this package still works when you want to pass the full object at the call site. Rename the bound hook if both are in one file: `const { useChat: useSupportChat } = createChatHook(chatOptions)`.
+
## `useChat(options?)`
Main hook for managing chat state in React with full type safety.
diff --git a/docs/api/ai-solid.md b/docs/api/ai-solid.md
index 3fd64dfb6a..3bada592f7 100644
--- a/docs/api/ai-solid.md
+++ b/docs/api/ai-solid.md
@@ -15,7 +15,7 @@ keywords:
SolidJS primitives for TanStack AI, providing convenient SolidJS bindings for the headless client.
-For a typed headless chat UI, see [Solid Chat UI](../ui/solid) and [Migrate to createChatUI](../migration/create-ui).
+For a typed headless chat UI, see [Solid Chat UI](../ui/solid) and [Chat UI packages](../migration/create-ui).
## Installation
@@ -23,6 +23,27 @@ For a typed headless chat UI, see [Solid Chat UI](../ui/solid) and [Migrate to c
npm install @tanstack/ai-solid
```
+## `createChatHook(options)`
+
+Bind `chatOptions` once at module scope. Call `useChat()` in the screen to create the instance. Per-call overrides may set `threadId`, `initialMessages`, `live`, and `forwardedProps`. They must not change `tools`, `interrupts`, or `outputSchema`.
+
+```tsx
+import { createChatHook, fetchServerSentEvents } from "@tanstack/ai-solid";
+
+const chatOptions = {
+ connection: fetchServerSentEvents("/api/chat"),
+};
+
+const { useChat } = createChatHook(chatOptions);
+
+function ChatScreen() {
+ const chat = useChat({ threadId: "support-1" });
+ return null;
+}
+```
+
+`useChat(chatOptions)` from this package still works when you want to pass the full object at the call site. Rename the bound primitive if both are in one file: `const { useChat: useSupportChat } = createChatHook(chatOptions)`.
+
## `useChat(options?)`
Main primitive for managing chat state in SolidJS with full type safety.
diff --git a/docs/api/ai-svelte.md b/docs/api/ai-svelte.md
index a59e25da52..ba99f6de4e 100644
--- a/docs/api/ai-svelte.md
+++ b/docs/api/ai-svelte.md
@@ -15,7 +15,7 @@ keywords:
Svelte 5 bindings for TanStack AI, providing reactive factory functions for the headless client using Svelte runes.
-For a typed headless chat UI, see [Svelte Chat UI](../ui/svelte) and [Migrate to createChatUI](../migration/create-ui).
+For a typed headless chat UI, see [Svelte Chat UI](../ui/svelte) and [Chat UI packages](../migration/create-ui).
## Installation
@@ -23,6 +23,23 @@ For a typed headless chat UI, see [Svelte Chat UI](../ui/svelte) and [Migrate to
npm install @tanstack/ai-svelte
```
+## `createChatHook(options)`
+
+Bind `chatOptions` once at module scope. Call `createChat()` to create the instance. Per-call overrides may set `threadId`, `initialMessages`, `live`, and `forwardedProps`. They must not change `tools`, `interrupts`, or `outputSchema`.
+
+```ts
+import { createChatHook, fetchServerSentEvents } from "@tanstack/ai-svelte";
+
+const chatOptions = {
+ connection: fetchServerSentEvents("/api/chat"),
+};
+
+const { createChat } = createChatHook(chatOptions);
+const chat = createChat({ threadId: "support-1" });
+```
+
+`createChat(chatOptions)` from this package still works when you want to pass the full object at the call site. Rename the bound factory if both are in one file: `const { createChat: createSupportChat } = createChatHook(chatOptions)`.
+
## `createChat(options)`
Factory function for managing chat state in Svelte 5 with full type safety.
diff --git a/docs/api/ai-vue.md b/docs/api/ai-vue.md
index cd46cf22e6..ffc8336a80 100644
--- a/docs/api/ai-vue.md
+++ b/docs/api/ai-vue.md
@@ -15,7 +15,7 @@ keywords:
Vue composables for TanStack AI, providing convenient Vue 3 bindings for the headless client.
-For a typed headless chat UI, see [Vue Chat UI](../ui/vue) and [Migrate to createChatUI](../migration/create-ui).
+For a typed headless chat UI, see [Vue Chat UI](../ui/vue) and [Chat UI packages](../migration/create-ui).
## Installation
@@ -23,6 +23,24 @@ For a typed headless chat UI, see [Vue Chat UI](../ui/vue) and [Migrate to creat
npm install @tanstack/ai-vue
```
+## `createChatHook(options)`
+
+Bind `chatOptions` once at module scope. Call `useChat()` in the screen to create the instance. Per-call overrides may set `threadId`, `initialMessages`, `live`, and `forwardedProps`. They must not change `tools`, `interrupts`, or `outputSchema`.
+
+```ts
+import { createChatHook, fetchServerSentEvents } from "@tanstack/ai-vue";
+
+const chatOptions = {
+ connection: fetchServerSentEvents("/api/chat"),
+};
+
+const { useChat } = createChatHook(chatOptions);
+
+const chat = useChat({ threadId: "support-1" });
+```
+
+`useChat(chatOptions)` from this package still works when you want to pass the full object at the call site. Rename the bound composable if both are in one file: `const { useChat: useSupportChat } = createChatHook(chatOptions)`.
+
## `useChat(options?)`
Main composable for managing chat state in Vue with full type safety.
diff --git a/docs/config.json b/docs/config.json
index 0b79db5749..a838e2d832 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -219,31 +219,31 @@
"label": "React",
"to": "ui/react",
"addedAt": "2026-08-26",
- "updatedAt": "2026-08-27"
+ "updatedAt": "2026-08-30"
},
{
"label": "Solid",
"to": "ui/solid",
"addedAt": "2026-08-26",
- "updatedAt": "2026-08-27"
+ "updatedAt": "2026-08-30"
},
{
"label": "Vue",
"to": "ui/vue",
"addedAt": "2026-08-26",
- "updatedAt": "2026-08-27"
+ "updatedAt": "2026-08-30"
},
{
"label": "Svelte",
"to": "ui/svelte",
"addedAt": "2026-08-26",
- "updatedAt": "2026-08-27"
+ "updatedAt": "2026-08-30"
},
{
"label": "Custom Adapters",
"to": "ui/custom-adapters",
"addedAt": "2026-08-26",
- "updatedAt": "2026-08-26"
+ "updatedAt": "2026-08-30"
}
]
},
@@ -886,10 +886,10 @@
"updatedAt": "2026-07-22"
},
{
- "label": "createChatUI",
+ "label": "Chat UI packages",
"to": "migration/create-ui",
"addedAt": "2026-08-26",
- "updatedAt": "2026-08-27"
+ "updatedAt": "2026-08-30"
},
{
"label": "From Vercel AI SDK",
diff --git a/docs/migration/create-ui.md b/docs/migration/create-ui.md
index 6a6836231f..8d4baa4fc3 100644
--- a/docs/migration/create-ui.md
+++ b/docs/migration/create-ui.md
@@ -1,44 +1,35 @@
---
-title: Migrate to createChatUI
+title: Chat UI packages
id: migrate-create-ui
order: 5
-description: "Move chat-state ownership out of the old Chat component and onto createChatUI with a typed component map."
+description: "Move from @tanstack/ai-*-ui to the framework /ui subpath. Call useChat and render Chat with a component map."
keywords:
- tanstack ai
- - createChatUI
+ - Chat
- migration
- deprecation
---
-The old `Chat` component owned chat state and lost configured types. `createChatUI` keeps types from your `chatOptions` and leaves `useChat` in your app.
+Change your import from `@tanstack/ai-react-ui` to `@tanstack/ai-react/ui`. Call `useChat(chatOptions)` and render ``.
-This is a semantic migration. There is no codemod.
+The same move applies to Solid, Vue, and Svelte.
+
+> **Deprecated.** `@tanstack/ai-react-ui`, `@tanstack/ai-solid-ui`, and `@tanstack/ai-vue-ui` re-export the new `/ui` subpath until each package's `1.0.0`. `npm install` prints a warning. Import from `/ui` in new code. Svelte never published a `*-ui` package. Use `@tanstack/ai-svelte/ui`.
## What changes
-1. You call `useChat` or `createChat` yourself.
-2. You supply every visible component.
-3. Tool inputs stay optional while they stream.
-4. Tool approvals come from `chat.interrupts`.
-5. Unknown runtime keys can use a fallback or render nothing.
-6. `createChatUI()` must run at module scope so identity stays stable.
+1. Chat UI lives on the framework package: `@tanstack/ai-react/ui`, `@tanstack/ai-solid/ui`, `@tanstack/ai-vue/ui`, `@tanstack/ai-svelte/ui`.
+2. You call `useChat` or `createChat` yourself.
+3. You pass a `components` map into `Chat`.
+4. You supply every visible component. There is no default markup.
## Why
-The old APIs drop configured types, keep unused properties, use a deprecated approval path, cover only part of the message protocol, and own chat state. Two orchestration models duplicate fixes.
-
-## Minimum versions
-
-- `@tanstack/ai-react-ui` 0.9.0
-- `@tanstack/ai-solid-ui` 0.8.0
-- `@tanstack/ai-vue-ui` 0.3.0
-- `@tanstack/ai-svelte-ui` 0.2.0
-
-Old orchestration exports stay importable until each package's `1.0.0`. `TextPart` and `ThinkingPart` stay supported.
+A separate `*-ui` package split chat UI from the framework package. The old `Chat` component also owned chat state and dropped configured types. `Chat` from `/ui` keeps types from your `chatOptions` and leaves state on `useChat`.
## Before
-```tsx
+```tsx ignore
import { fetchServerSentEvents } from '@tanstack/ai-react'
import { Chat, ChatMessages, ChatInput } from '@tanstack/ai-react-ui'
@@ -58,15 +49,13 @@ export function OldChat() {
```tsx
import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI } from '@tanstack/ai-react-ui'
+import { Chat, type ChatUIComponents } from '@tanstack/ai-react/ui'
const chatOptions = {
connection: fetchServerSentEvents('/api/chat'),
}
-const UI = createChatUI(chatOptions)
-
-const components = UI.defineComponents({
+const components = {
layout: ({ renderMessages, renderInput }) => (
{renderMessages()}
@@ -74,9 +63,7 @@ const components = UI.defineComponents({
),
message: ({ renderParts }) => {renderParts()},
- input: () => {
- const chat = UI.useChat()
- return (
+ input: ({ chat }) => (
- )
- },
+ ),
parts: { fallback: () => null },
-})
+} satisfies ChatUIComponents
export function NewChat() {
const chat = useChat(chatOptions)
- return
+ return
}
```
## Steps
1. Move `connection`, `tools`, and `interrupts` into a module-level `chatOptions` object.
-2. Call `createChatUI(chatOptions)` next to that object.
+2. Build a `components` map typed with `ChatUIComponents`.
3. Call `useChat(chatOptions)` in the screen component.
-4. Define `layout`, `message`, `parts`, `tools`, and `interrupts` in `defineComponents`.
-5. Replace `` with ``.
-
-## Gotchas
-
-- A shared `chatOptions` variable does not need `as const`.
-- A mapped tool can read `interrupt` and render the approval itself. That approval stays off the list. A component on `interrupts.tools` uses the list.
-- Generic interrupts live under `interrupts.generic`: a registered id such as `choosePlan`, plus `fallback`. Unbound interrupts use `fallback`.
-- TypeScript requires a `tools` component for every tool name and an `interrupts.generic` component for every interrupt id. `generic.fallback` is optional.
-- Matched `tool-result` parts are hidden in automatic traversal. Unmatched results stay visible.
-- Nested providers use the nearest chat instance.
+4. Render ``.
-See the [React UI guide](../ui/react) for a full map.
+Old orchestration exports stay importable from the deprecated `*-ui` packages until `1.0.0`.
diff --git a/docs/ui/custom-adapters.md b/docs/ui/custom-adapters.md
index d51a4e8f60..10c2c61470 100644
--- a/docs/ui/custom-adapters.md
+++ b/docs/ui/custom-adapters.md
@@ -5,7 +5,7 @@ order: 5
description: "Build a framework adapter on @tanstack/ai-client/ui. The core is types and selectors only."
keywords:
- tanstack ai
- - createChatUI
+ - Chat
- custom adapter
- headless ui
---
@@ -20,7 +20,7 @@ The subpath gives you:
Your adapter owns:
-1. Native components and context
+1. Native components
2. Native reactivity
3. Render callbacks, slots, or snippets
4. Development warnings for missing mapped keys
@@ -29,6 +29,6 @@ Do not add default markup. Do not add a new store. The app owns `useChat` or `cr
Call `selectChatUI({ messages, interrupts, inlineToolNames })`. Automatic traversal skips a `tool-result` only when `matched` is true. Keep unmatched results.
-Warn once per missing runtime key in development. Each build tool detects development mode differently, so the adapter prints the warning.
+Warn once per missing runtime key in development.
-See the [React](./react), [Solid](./solid), [Vue](./vue), and [Svelte](./svelte) adapters for the public names to match: `Chat`, `Provider`, `Messages`, `Message`, `Part`, `Interrupts`, `Interrupt`, and `defineComponents`.
+See the [React](./react), [Solid](./solid), [Vue](./vue), and [Svelte](./svelte) adapters. The public names to match are `Chat` and `ChatUIComponents`.
diff --git a/docs/ui/react.md b/docs/ui/react.md
index 2a05727143..0bad7e7096 100644
--- a/docs/ui/react.md
+++ b/docs/ui/react.md
@@ -2,21 +2,21 @@
title: React Chat UI
id: typed-headless-ui-react
order: 1
-description: "Build a typed, headless React chat UI with createChatUI. Your chat options control the types of tools, parts, and interrupts."
+description: "Render a typed chat tree with Chat and a component map. Your chat options control the types of tools, parts, and interrupts."
keywords:
- tanstack ai
- - createChatUI
+ - Chat
- react
- headless ui
- useChat
- ToolProps
---
-Install `@tanstack/ai-react-ui`, then call `createChatUI(chatOptions)` once at module scope. Your app owns `useChat`. The UI only renders. Call `UI.useChat()` inside a mapped component when it needs live chat. That call is the same value you passed into `UI.Chat`.
+Install `@tanstack/ai-react`. Import `Chat` from `@tanstack/ai-react/ui`. Call `useChat(chatOptions)` in the screen. Pass a module-level `components` object into `Chat`.
You supply every visible component. There is no default markup, style, or copy.
-`defineComponents` needs a `tools` entry for every tool name in `chatOptions`. It also needs an `interrupts.generic` entry for every interrupt id. `generic.fallback` is optional.
+The map needs a `tools` entry for every tool name in `chatOptions`. It also needs an `interrupts.generic` entry for every interrupt id. `generic.fallback` is optional.
## Server
@@ -42,7 +42,7 @@ export async function POST(request: Request) {
```tsx
import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI } from '@tanstack/ai-react-ui'
+import { Chat, type ChatUIComponents } from '@tanstack/ai-react/ui'
import { defineInterrupt, toolDefinition } from '@tanstack/ai'
import { z } from 'zod'
@@ -74,18 +74,9 @@ const chatOptions = {
outputSchema: z.object({ answer: z.string() }),
}
-const UI = createChatUI(chatOptions)
-
-const components = UI.defineComponents({
- layout: function Layout({
- renderMessages,
- renderInterrupts,
- renderInput,
- }) {
- const chat = UI.useChat()
+const components = {
+ layout: ({ chat, renderMessages, renderInterrupts, renderInput }) => {
if (chat.error) return
{chat.error.message}
- if (chat.isLoading && chat.messages.length === 0) return
,
},
},
-})
+} satisfies ChatUIComponents
export function ChatScreen() {
const chat = useChat(chatOptions)
- return
+ return
}
```
## Type a component in its own file
-A tool map grows fast. Move a tool into its own file and type the props with `ToolProps`.
-
-`ToolProps` takes your `chatOptions` type and the tool name. Then `part.input` and `part.output` stay exact.
-
-Part components work the same way. `PartProps` already has a text part. You do not check `part.type`. Use `'structuredOutput'`, `'thinking'`, `'toolResult'`, and the other keys from the `parts` map. `fallback` still sees every part type.
+Use `ToolProps`, `PartProps`, `InterruptProps`, `LayoutProps`, or `InputProps` with `typeof chatOptions`.
```tsx
-import { fetchServerSentEvents } from '@tanstack/ai-react'
-import { createChatUI, type PartProps, type ToolProps } from '@tanstack/ai-react-ui'
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-const getWeather = toolDefinition({
- name: 'getWeather',
- description: 'Look up weather',
- inputSchema: z.object({ city: z.string() }),
- outputSchema: z.object({ temperature: z.number() }),
-}).client()
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- tools: [getWeather],
-}
+import type { ToolProps } from '@tanstack/ai-react/ui'
+import type { chatOptions } from './options'
export function WeatherTool({
part,
- result,
}: ToolProps) {
- if (part.state === 'awaiting-input') return
- )
-}
-
-export function TextPart({ part }: PartProps) {
- return
{part.content}
-}
-
-const UI = createChatUI(chatOptions)
-
-export const components = UI.defineComponents({
- layout: ({ renderMessages }) => renderMessages(),
- message: ({ renderParts }) => {renderParts()},
- parts: { text: TextPart, fallback: () => null },
- tools: { getWeather: WeatherTool },
-})
-```
-
-1. Put `chatOptions` in a shared module.
-2. Import `ToolProps` or `PartProps` from `@tanstack/ai-react-ui`.
-3. Type the component with `ToolProps` or `PartProps`.
-4. Pass that component into `tools.getWeather` or `parts.text`.
-
-For an interrupt, use `InterruptProps`. Pass a tool name or a registered interrupt id as the second type argument. Then you do not check `interrupt.kind`.
-
-- A tool approval: `InterruptProps`. Then `interrupt.toolName` is `'purchaseItem'`.
-- A registered generic interrupt: `InterruptProps`. Then `interrupt.payload` and `interrupt.resolveInterrupt` match the definition.
-
-```tsx
-import { fetchServerSentEvents } from '@tanstack/ai-react'
-import { createChatUI, type InterruptProps } from '@tanstack/ai-react-ui'
-import { defineInterrupt } from '@tanstack/ai'
-import { z } from 'zod'
-
-const choosePlan = defineInterrupt({
- id: 'choosePlan',
- payloadSchema: z.object({ title: z.string() }),
- responseSchema: z.string(),
-})
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- interrupts: [choosePlan],
-}
-
-export function ChoosePlan({
- interrupt,
-}: InterruptProps) {
- return (
-
- )
-}
-
-const UI = createChatUI(chatOptions)
-
-export const components = UI.defineComponents({
- layout: ({ renderInterrupts }) => renderInterrupts(),
- message: ({ renderParts }) => {renderParts()},
- parts: { fallback: () => null },
- interrupts: {
- generic: {
- choosePlan: ChoosePlan,
- },
- },
-})
-```
-
-Other prop types from the same package:
-
-- `LayoutProps`
-- `MessageProps`
-- `InputProps`
-- `PartProps` with a part key such as `'text'`
-- `InterruptProps` for tool approvals, registered generic interrupts, and `generic.fallback`. Pass a tool name or interrupt id as the second type argument.
-
-## Read chat from `UI.useChat()`
-
-Mapped components do not receive `chat` as a prop. Call `UI.useChat()` inside a component when it needs live chat. That call opts the component into chat re-renders. Nested children can call it too.
-
-```tsx
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI } from '@tanstack/ai-react-ui'
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
-}
-
-const UI = createChatUI(chatOptions)
-
-function StatusLine() {
- const chat = UI.useChat()
- if (chat.error) return
{chat.error.message}
- if (chat.isLoading) return
Loading
- return
{chat.messages.length} messages
-}
-
-const components = UI.defineComponents({
- layout: ({ renderMessages, renderInput }) => (
-
-
- {renderMessages()}
- {renderInput()}
-
- ),
- message: ({ renderParts }) => {renderParts()},
- parts: { fallback: () => null },
-})
-
-export function ChatScreen() {
- const chat = useChat(chatOptions)
- return
-}
-```
-
-Call `UI.useChat()` only inside `UI.Chat` or `UI.Provider`. A call outside that tree throws.
-
-`useChat(chatOptions)` from `@tanstack/ai-react` still owns the state. `UI.useChat()` only reads the instance that you passed into the provider.
-
-## Tool approvals: inline or list
-
-A tool with `needsApproval: true` can render its approval in two places.
-
-### Inline, next to the tool
-
-Read `interrupt` on the tool. Render the approval in that same component. Do not register `interrupts.tools` for that name. A mapped tool keeps its approval off the list.
-
-`interrupt` is already the approval for that tool name. You do not check `interrupt.kind`.
-
-```tsx
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI, type ToolProps } from '@tanstack/ai-react-ui'
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-const purchaseItem = toolDefinition({
- name: 'purchaseItem',
- description: 'Buy an item',
- needsApproval: true,
- inputSchema: z.object({ item: z.string() }),
- outputSchema: z.object({ ok: z.boolean() }),
-}).client()
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- tools: [purchaseItem],
-}
-
-const UI = createChatUI(chatOptions)
-
-function PurchaseItem({
- part,
- interrupt,
-}: ToolProps) {
- return (
-
}
```
-To split the approval into its own file, type it with `InterruptProps`. Render that component from the tool.
-
-### List, in `renderInterrupts()`
-
-Register the approval under `interrupts.tools`. That component appears in the interrupt list. Do not also render `interrupt` on the tool unless you want it in both places.
-
-```tsx
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI } from '@tanstack/ai-react-ui'
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-const purchaseItem = toolDefinition({
- name: 'purchaseItem',
- description: 'Buy an item',
- needsApproval: true,
- inputSchema: z.object({ item: z.string() }),
- outputSchema: z.object({ ok: z.boolean() }),
-}).client()
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- tools: [purchaseItem],
-}
-
-const UI = createChatUI(chatOptions)
-
-const components = UI.defineComponents({
- layout: ({ renderMessages, renderInterrupts }) => (
-
- {renderMessages()}
- {renderInterrupts()}
-
- ),
- message: ({ renderParts }) => {renderParts()},
- parts: { fallback: () => null },
- tools: {
- purchaseItem: ({ part }) =>
{part.input?.item}
,
- },
- interrupts: {
- tools: {
- purchaseItem: ({ interrupt }) => (
-
- ),
- },
- },
-})
-
-export function ListApprovalChat() {
- const chat = useChat(chatOptions)
- return
-}
-```
+`layout` and `input` receive `chat` as a prop. Nested children can call `useChatContext()` inside `Chat`.
-## Generic interrupts
+## Tool approvals
-Generic interrupts always render in the list (`renderInterrupts()` / ``). They never render inside a tool.
+A mapped tool that is not listed under `interrupts.tools` keeps its approval off the list. Read `interrupt` on the tool.
-Map them under `interrupts.generic`:
-
-- A registered id such as `choosePlan`: the component for that definition
-- `fallback`: every other list interrupt, including an unknown generic id and an unbound interrupt this chat does not own
-
-```tsx
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI } from '@tanstack/ai-react-ui'
-import { defineInterrupt } from '@tanstack/ai'
-import { z } from 'zod'
-
-const choosePlan = defineInterrupt({
- id: 'choosePlan',
- payloadSchema: z.object({ title: z.string() }),
- responseSchema: z.string(),
-})
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- interrupts: [choosePlan],
-}
-
-const UI = createChatUI(chatOptions)
-
-const components = UI.defineComponents({
- layout: ({ renderInterrupts }) => renderInterrupts(),
- message: ({ renderParts }) => {renderParts()},
- parts: { fallback: () => null },
- interrupts: {
- generic: {
- choosePlan: ({ interrupt }) => (
-
- ),
- fallback: ({ interrupt }) =>
- interrupt.kind === 'unbound' ? (
-
Paused elsewhere: {interrupt.reason}
- ) : (
-
{interrupt.reason}
- ),
- },
- },
-})
-
-export function GenericInterruptChat() {
- const chat = useChat(chatOptions)
- return
-}
-```
-
-You can mix this map with `interrupts.tools` in the same `defineComponents` call.
-
-## Manual traversal
-
-```tsx
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
-import { createChatUI } from '@tanstack/ai-react-ui'
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
-}
-
-const UI = createChatUI(chatOptions)
-
-const components = UI.defineComponents({
- layout: ({ renderMessages }) => renderMessages(),
- message: ({ renderParts }) => {renderParts()},
- parts: { fallback: () => null },
-})
-
-export function ManualChat() {
- const chat = useChat(chatOptions)
- return (
-
-
- {(messages) =>
- messages.map((message) => (
-
- {(parts) =>
- parts.map((part, index) => (
- {part.key}
- ))
- }
-
- ))
- }
-
-
- )
-}
-```
+If you register `interrupts.tools.purchaseItem`, that component renders in `renderInterrupts()` instead.
-Unknown runtime tool names warn once in development and render nothing. Add a `parts.fallback` for unknown part types.
+Generic interrupts always render in the list.
-See also [Solid](./solid), [Vue](./vue), [Svelte](./svelte), and [custom adapters](./custom-adapters).
+Unknown runtime tool names warn once in development and render nothing. Add `parts.fallback` for unknown part types.
diff --git a/docs/ui/solid.md b/docs/ui/solid.md
index b5fcaeb36e..1c52e96a92 100644
--- a/docs/ui/solid.md
+++ b/docs/ui/solid.md
@@ -2,18 +2,18 @@
title: Solid Chat UI
id: typed-headless-ui-solid
order: 2
-description: "Build a typed, headless Solid chat UI with createChatUI. Accessors stay tracked. Your app owns useChat."
+description: "Render a typed chat tree with Chat and a component map. Keep accessors tracked."
keywords:
- tanstack ai
- - createChatUI
+ - Chat
- solid
- headless ui
- ToolProps
---
-Install `@tanstack/ai-solid-ui`, then call `createChatUI(chatOptions)` once at module scope. Do not destructure reactive props.
+Install `@tanstack/ai-solid`. Import `Chat` from `@tanstack/ai-solid/ui`. Call `useChat(chatOptions)` in the screen. Pass a module-level `components` object into `Chat`. Do not destructure reactive props.
-`defineComponents` needs a `tools` entry for every tool name in `chatOptions`. It also needs an `interrupts.generic` entry for every interrupt id. `generic.fallback` is optional.
+> **Deprecated.** Do not install `@tanstack/ai-solid-ui`. That package re-exports this subpath until 1.0.0. See [Chat UI packages](../migration/create-ui).
The server route matches the [React page](./react). Use `gpt-5.6` on the OpenAI text adapter.
@@ -21,7 +21,7 @@ The server route matches the [React page](./react). Use `gpt-5.6` on the OpenAI
```tsx
import { fetchServerSentEvents, useChat } from '@tanstack/ai-solid'
-import { createChatUI } from '@tanstack/ai-solid-ui'
+import { Chat, type ChatUIComponents } from '@tanstack/ai-solid/ui'
import { toolDefinition } from '@tanstack/ai'
import { z } from 'zod'
@@ -37,9 +37,7 @@ const chatOptions = {
tools: [getWeather],
}
-const UI = createChatUI(chatOptions)
-
-const components = UI.defineComponents({
+const components = {
layout: (props) => (
<>
{props.renderMessages()}
@@ -54,100 +52,12 @@ const components = UI.defineComponents({
tools: {
getWeather: (props) => {props.part.input?.city},
},
-})
+} satisfies ChatUIComponents
-export function ChatScreen() {
+export function Support() {
const chat = useChat(chatOptions)
- return
-}
-```
-
-## Type a component in its own file
-
-Use `ToolProps` the same way as React. Keep the `props` object so Solid can track it.
-
-```tsx
-import { fetchServerSentEvents } from '@tanstack/ai-solid'
-import { createChatUI, type ToolProps } from '@tanstack/ai-solid-ui'
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-const getWeather = toolDefinition({
- name: 'getWeather',
- description: 'Look up weather',
- inputSchema: z.object({ city: z.string() }),
- outputSchema: z.object({ temperature: z.number() }),
-}).client()
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- tools: [getWeather],
-}
-
-export function WeatherTool(
- props: ToolProps,
-) {
- return {props.part.input?.city}
+ return
}
-
-const UI = createChatUI(chatOptions)
-
-export const components = UI.defineComponents({
- layout: (props) => props.renderMessages(),
- message: (props) => {props.renderParts()},
- parts: { fallback: () => null },
- tools: { getWeather: WeatherTool },
-})
```
-Part components use `PartProps`. Then `part` is already a text part.
-
-Interrupt components use `InterruptProps`. Then `interrupt.payload` matches the definition.
-
-Mapped components do not receive `chat` as a prop. Call `UI.useChat()` when a component needs live chat. That call opts the component into chat updates. Nested children can call it too.
-
-## Read chat from `UI.useChat()`
-
-```tsx
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-solid'
-import { createChatUI } from '@tanstack/ai-solid-ui'
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
-}
-
-const UI = createChatUI(chatOptions)
-
-function StatusLine() {
- const chat = UI.useChat()
- return
{chat.messages.length} messages
-}
-
-const components = UI.defineComponents({
- layout: (props) => (
- <>
-
- {props.renderMessages()}
-
- ),
- message: (props) => {props.renderParts()},
- parts: { fallback: () => null },
-})
-
-export function ChatScreen() {
- const chat = useChat(chatOptions)
- return
-}
-```
-
-Call `UI.useChat()` only inside `UI.Chat` or `UI.Provider`.
-
-## Interrupts
-
-Tool approvals sit in the tool when you read `props.interrupt`. Put a component on `interrupts.tools` to send that approval to the list instead. Generic interrupts always sit in the list under `interrupts.generic`: `{ choosePlan, fallback }`. An unbound interrupt uses `fallback`. Branch on `interrupt.kind === 'unbound'` if the copy must differ.
-
-The full map is on the [React page](./react).
-
-Manual list: `{(messages) => {messages().length}}`.
-
-Pass `props.chat`, `props.part`, and `props.renderParts()` without destructure.
+Use `ToolProps` the same way as React. Keep the `props` object so Solid can track it. `layout` and `input` receive `chat` as a prop. Nested children can call `useChatContext()` inside `Chat`.
diff --git a/docs/ui/svelte.md b/docs/ui/svelte.md
index 1fea54dca2..c1f13a4c9d 100644
--- a/docs/ui/svelte.md
+++ b/docs/ui/svelte.md
@@ -2,18 +2,16 @@
title: Svelte Chat UI
id: typed-headless-ui-svelte
order: 4
-description: "Build a typed, headless Svelte 5 chat UI with createChatUI, snippets, and static components."
+description: "Render a typed chat tree with Chat, snippets, and a component map."
keywords:
- tanstack ai
- - createChatUI
+ - Chat
- svelte
- headless ui
- ToolProps
---
-Install `@tanstack/ai-svelte-ui`. Call `createChatUI(chatOptions)` once. Pass `{ui}`, `{chat}`, and `{components}` into `UIChat`.
-
-`defineComponents` needs a `tools` entry for every tool name in `chatOptions`. It also needs an `interrupts.generic` entry for every interrupt id. `generic.fallback` is optional.
+Install `@tanstack/ai-svelte`. Import `Chat` from `@tanstack/ai-svelte/ui`. Call `createChat(chatOptions)` in the page. Pass `{chat}` and `components` into `Chat`.
The server route matches the [React page](./react). Use `gpt-5.6` on the OpenAI text adapter.
@@ -21,81 +19,31 @@ The server route matches the [React page](./react). Use `gpt-5.6` on the OpenAI
```svelte
-
-
-```
-
-`Layout.svelte` receives snippets `messages`, `interrupts`, and `input`. `Message.svelte` receives snippet `parts`. A tool with an approval receives prop `interrupt`.
-
-## Type a component in its own file
-
-Type the `$props()` of a tool file with `ToolProps`. Share the same `chatOptions` module that you pass to `createChatUI`.
-
-```svelte
-
-
-{part.input?.city}
-```
-
-Part components use `PartProps`. Then `part` is already a text part.
-
-Interrupt components use `InterruptProps`. Then `interrupt.payload` matches the definition.
-
-Mapped components do not receive `chat` as a prop. Call `ui.useChat()` when a component needs live chat. That call opts the component into chat updates. Nested children can call it too.
-
-## Read chat from `ui.useChat()`
-
-Import the same `ui` descriptor in a child file. Call `ui.useChat()` only under `UIChat` or `UIProvider`.
-
-```svelte
-
-
{chat.messages.length} messages
+
```
-`createChat(chatOptions)` owns the state. `ui.useChat()` reads the instance you passed into `UIChat`. A call outside that tree throws.
-
-## Interrupts
-
-Tool approvals sit in the tool when you read the `interrupt` prop. Put a component on `interrupts.tools` to send that approval to the list instead. Generic interrupts always sit in the list under `interrupts.generic`: `{ choosePlan, fallback }`. An unbound interrupt uses `fallback`. Branch on `interrupt.kind === 'unbound'` if the copy must differ.
+Layout receives a `chat` prop and `messages`, `interrupts`, and `input` snippets. Message receives a `parts` snippet.
-The full map is on the [React page](./react).
+Type a tool file with `ToolProps`. Share the same `chatOptions` module that you pass to `createChat`.
diff --git a/docs/ui/vue.md b/docs/ui/vue.md
index 0624e31bb6..5e80a2c8e1 100644
--- a/docs/ui/vue.md
+++ b/docs/ui/vue.md
@@ -2,18 +2,18 @@
title: Vue Chat UI
id: typed-headless-ui-vue
order: 3
-description: "Build a typed, headless Vue chat UI with createChatUI and static primitives. Slots replace render callbacks."
+description: "Render a typed chat tree with Chat and a component map. Slots replace render callbacks."
keywords:
- tanstack ai
- - createChatUI
+ - Chat
- vue
- headless ui
- ToolProps
---
-Install `@tanstack/ai-vue-ui`. Call `createChatUI(chatOptions)` once. Pass the descriptor as `ui` into `UIChat`, `UIProvider`, and the other static primitives.
+Install `@tanstack/ai-vue`. Import `Chat` from `@tanstack/ai-vue/ui`. Call `useChat(chatOptions)` in the screen. Pass a `components` object into `Chat`. Layout uses `messages`, `interrupts`, and `input` slots. Message uses a `parts` slot.
-`defineComponents` needs a `tools` entry for every tool name in `chatOptions`. It also needs an `interrupts.generic` entry for every interrupt id. `generic.fallback` is optional.
+> **Deprecated.** Do not install `@tanstack/ai-vue-ui`. That package re-exports this subpath until 1.0.0. See [Chat UI packages](../migration/create-ui).
The server route matches the [React page](./react). Use `gpt-5.6` on the OpenAI text adapter.
@@ -22,7 +22,7 @@ The server route matches the [React page](./react). Use `gpt-5.6` on the OpenAI
```ts
import { defineComponent, h } from 'vue'
import { fetchServerSentEvents, useChat } from '@tanstack/ai-vue'
-import { createChatUI, UIChat } from '@tanstack/ai-vue-ui'
+import { Chat } from '@tanstack/ai-vue/ui'
import { toolDefinition } from '@tanstack/ai'
import { z } from 'zod'
@@ -38,13 +38,13 @@ const chatOptions = {
tools: [getWeather],
}
-const ui = createChatUI(chatOptions)
-
-const components = ui.defineComponents({
+const components = {
layout: defineComponent((_, { slots }) => () =>
- h('div', [slots.messages?.(), slots.interrupts?.(), slots.input?.()]),
+ h('main', [slots.messages?.(), slots.input?.()]),
+ ),
+ message: defineComponent((_, { slots }) => () =>
+ h('article', slots.parts?.()),
),
- message: defineComponent((_, { slots }) => () => h('article', slots.parts?.())),
parts: {
fallback: defineComponent({
props: ['part'],
@@ -61,110 +61,14 @@ const components = ui.defineComponents({
},
}),
},
-})
-
-export default defineComponent({
- setup() {
- const chat = useChat(chatOptions)
- return () => h(UIChat, { ui, chat, components })
- },
-})
-```
-
-Layout uses slots `messages`, `interrupts`, and `input`. Message uses slot `parts`. Manual lists use the default slot on `UIMessages` with `{ messages }`.
-
-## Type a component in its own file
-
-Use `ToolProps` on the component props. Share the same `chatOptions` object that you pass to `createChatUI`.
-
-```ts
-import { defineComponent, h } from 'vue'
-import { fetchServerSentEvents } from '@tanstack/ai-vue'
-import { createChatUI, type ToolProps } from '@tanstack/ai-vue-ui'
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-const getWeather = toolDefinition({
- name: 'getWeather',
- description: 'Look up weather',
- inputSchema: z.object({ city: z.string() }),
- outputSchema: z.object({ temperature: z.number() }),
-}).client()
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
- tools: [getWeather],
-}
-
-export const WeatherTool = defineComponent(
- (props: ToolProps) => {
- return () => h('strong', props.part.input?.city)
- },
-)
-
-const ui = createChatUI(chatOptions)
-
-export const components = ui.defineComponents({
- layout: defineComponent((_, { slots }) => () =>
- h('div', [slots.messages?.(), slots.interrupts?.(), slots.input?.()]),
- ),
- message: defineComponent((_, { slots }) => () => h('article', slots.parts?.())),
- parts: { fallback: defineComponent(() => () => null) },
- tools: { getWeather: WeatherTool },
-})
-```
-
-Part components use `PartProps`. Then `part` is already a text part.
-
-Interrupt components use `InterruptProps`. Then `interrupt.payload` matches the definition.
-
-Mapped components do not receive `chat` as a prop. Call `ui.useChat()` when a component needs live chat. That call opts the component into chat updates. Nested children can call it too.
-
-## Read chat from `ui.useChat()`
-
-Call `ui.useChat()` inside a child of `UIChat` or `UIProvider`.
-
-```ts
-import { defineComponent, h } from 'vue'
-import { fetchServerSentEvents, useChat } from '@tanstack/ai-vue'
-import { createChatUI, UIChat } from '@tanstack/ai-vue-ui'
-
-const chatOptions = {
- connection: fetchServerSentEvents('/api/chat'),
}
-const ui = createChatUI(chatOptions)
-
-const StatusLine = defineComponent({
- setup() {
- const chat = ui.useChat()
- return () => {
- const messages = Array.isArray(chat.messages) ? chat.messages : []
- return h('p', String(messages.length) + ' messages')
- }
- },
-})
-
-const components = ui.defineComponents({
- layout: defineComponent((_, { slots }) => () =>
- h('main', [h(StatusLine), slots.messages?.()]),
- ),
- message: defineComponent((_, { slots }) => () => h('article', slots.parts?.())),
- parts: { fallback: defineComponent(() => () => null) },
-})
-
export default defineComponent({
setup() {
const chat = useChat(chatOptions)
- return () => h(UIChat, { ui, chat, components })
+ return () => h(Chat, { chat, components })
},
})
```
-`useChat(chatOptions)` from `@tanstack/ai-vue` owns the state. `ui.useChat()` reads the instance you passed into `UIChat`.
-
-## Interrupts
-
-Tool approvals sit in the tool when you read the `interrupt` prop. Put a component on `interrupts.tools` to send that approval to the list instead. Generic interrupts always sit in the list under `interrupts.generic`: `{ choosePlan, fallback }`. An unbound interrupt uses `fallback`. Branch on `interrupt.kind === 'unbound'` if the copy must differ.
-
-The full map is on the [React page](./react).
+Use `ToolProps` on a tool component's props. `input` receives `chat` as a prop.
diff --git a/examples/README.md b/examples/README.md
index d23370be39..2e03103fdd 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -164,7 +164,7 @@ A React SPA that connects to **Go, Rust, PHP, Zig, Bash, and Python chat servers
**Tech Stack:**
- React + Vite (SPA)
-- `@tanstack/ai-react` + `@tanstack/ai-react-ui`
+- `@tanstack/ai-react` + `@tanstack/ai-react/ui`
- Go chat server (`net/http`, `:8001`)
- Rust chat server (Axum, `:8002`)
- PHP chat server (built-in server + curl, `:8003`)
diff --git a/examples/ag-ui/README.md b/examples/ag-ui/README.md
index 770997aaf1..38f4bd949e 100644
--- a/examples/ag-ui/README.md
+++ b/examples/ag-ui/README.md
@@ -8,7 +8,7 @@ This example shows that any backend can serve `@tanstack/ai-react` clients as lo
| Layer | Stack |
| ------------- | ------------------------------------------------------------------------ |
-| Client | React, Vite, `@tanstack/ai-react`, `@tanstack/ai-react-ui` |
+| Client | React, Vite, `@tanstack/ai-react`, `@tanstack/ai-react/ui` |
| Go server | `net/http`, hand-rolled AG-UI SSE, OpenAI/Anthropic streaming on `:8001` |
| Rust server | Axum, hand-rolled AG-UI SSE, OpenAI/Anthropic streaming on `:8002` |
| PHP server | Built-in PHP server + curl, hand-rolled AG-UI SSE on `:8003` |
diff --git a/examples/ag-ui/package.json b/examples/ag-ui/package.json
index 5be67b3556..3e8c09fcd0 100644
--- a/examples/ag-ui/package.json
+++ b/examples/ag-ui/package.json
@@ -21,7 +21,6 @@
"dependencies": {
"@tanstack/ai-client": "workspace:*",
"@tanstack/ai-react": "workspace:*",
- "@tanstack/ai-react-ui": "workspace:*",
"react": "^19.2.3",
"react-dom": "^19.2.3"
},
diff --git a/examples/ag-ui/src/App.tsx b/examples/ag-ui/src/App.tsx
index 84b0f5180e..95bfee6534 100644
--- a/examples/ag-ui/src/App.tsx
+++ b/examples/ag-ui/src/App.tsx
@@ -1,43 +1,38 @@
-import { useEffect, useMemo, useState } from 'react'
+import { createContext, useContext, useEffect, useMemo, useState } from 'react'
import { fetchServerSentEvents, useChat } from '@tanstack/ai-react'
import type { ConnectionAdapter } from '@tanstack/ai-react'
-import { ChatMessage, createChatUI } from '@tanstack/ai-react-ui'
+import { Chat } from '@tanstack/ai-react/ui'
+import type { ChatUIComponents } from '@tanstack/ai-react/ui'
-const UI = createChatUI({})
+const LabelsContext = createContext({ placeholder: '', emptyLabel: '' })
-function AgUiChat({
- connection,
- placeholder,
- emptyLabel,
-}: {
- connection: ConnectionAdapter
- placeholder: string
- emptyLabel: string
-}) {
- const chat = useChat({ connection })
- const [draft, setDraft] = useState('')
- const components = UI.defineComponents({
- layout: ({ renderMessages, renderInput }) => {
- const current = UI.useChat()
- return (
-
- 
- 
- 
- 
- 
- 
-
-
- 
- 
-