{chat.error.message}
+ if (chat.isLoading && chat.messages.length === 0) returnLoading
+ if (chat.messages.length === 0) returnEmpty
+ return ( +{part.content}
: null), + structuredOutput: ({ part }) => + part.type === 'structured-output' ? ( +{part.raw}
+ ) : null,
+ toolResult: ({ part }) =>
+ part.type === 'tool-result' ? {String(part.content)} : null,
+ fallback: ({ part }) => {part.type},
+ },
+ tools: {
+ getWeather: ({ part, result }) => {
+ if (part.state === 'awaiting-input') return Waiting
+ if (part.state === 'input-streaming') returnStreaming input
+ if (part.state === 'input-complete') return{part.input?.city}
+ if (part.state === 'approval-requested') returnNeed approval
+ if (part.state === 'approval-responded') returnResponded
+ if (part.state === 'error') returnError
+ return ( ++ {part.input?.city}: {String(part.output?.temperature ?? result?.content)} +
+ ) + }, + purchaseItem: ({ part, renderInterrupt }) => ( +{interrupt.reason}
, + }, + }, +}) + +export function ChatScreen() { + const chat = useChat(chatOptions) + returnWaiting
+ if (part.state === 'input-streaming') returnStreaming input
+ if (part.state === 'error') returnError
+ return ( ++ {part.input?.city}: {String(part.output?.temperature ?? result?.content)} +
+ ) +} + +const UI = createUI(chatOptions) + +export const components = UI.defineComponents({ + layout: ({ renderMessages }) => renderMessages(), + message: ({ renderParts }) =>{chat.error.message}
+ if (chat.isLoading) returnLoading
+ return{chat.messages.length} messages
+} + +const components = UI.defineComponents({ + layout: ({ renderMessages, renderInput }) => ( +Paused elsewhere: {interrupt.reason}
+ ) : ( +{interrupt.reason}
+ ), + }, + }, +}) + +export function GenericInterruptChat() { + const chat = useChat(chatOptions) + return{chat.messages.length} messages
+} + +const components = UI.defineComponents({ + layout: (props) => ( + <> +{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 can sit in the tool (`placement: 'inline'` plus the `renderInterrupt` snippet) or in the list (a direct component). 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). diff --git a/docs/ui/vue.md b/docs/ui/vue.md new file mode 100644 index 0000000000..de35f5845f --- /dev/null +++ b/docs/ui/vue.md @@ -0,0 +1,161 @@ +--- +title: Vue Chat UI +id: typed-headless-ui-vue +order: 3 +description: "Build a typed, headless Vue chat UI with createUI and static primitives. Slots replace render callbacks." +keywords: + - tanstack ai + - createUI + - vue + - headless ui + - ToolProps +--- + +Install `@tanstack/ai-vue-ui`. Call `createUI(chatOptions)` once. Pass the descriptor as `ui` into `UIChat`, `UIProvider`, and the other static primitives. + +The server route matches the [React page](./react). Use `gpt-5.2` on the OpenAI text adapter. + +## Client + +```ts +import { defineComponent, h } from 'vue' +import { fetchServerSentEvents, useChat } from '@tanstack/ai-vue' +import { createUI, UIChat } 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], +} + +const ui = createUI(chatOptions) + +const components = ui.defineComponents({ + layout: defineComponent((_, { slots }) => () => slots.messages?.()), + message: defineComponent((_, { slots }) => () => h('article', slots.parts?.())), + parts: { + fallback: defineComponent({ + props: ['part'], + setup(props) { + return () => h('span', props.part.type) + }, + }), + }, + tools: { + getWeather: defineComponent({ + props: ['part'], + setup(props) { + return () => h('strong', props.part.input?.city) + }, + }), + }, + interrupts: { generic: { fallback: defineComponent(() => () => null) } }, +}) + +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 `createUI`. + +```ts +import { defineComponent, h } from 'vue' +import { fetchServerSentEvents } from '@tanstack/ai-vue' +import { createUI, 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{current.error.message}
+ ) : current.messages.length === 0 ? ( +{props.part.content}
: null, + }, + }) + + return{part.content}
+{/if} diff --git a/examples/ts-svelte-chat/src/routes/svelte-ui/Layout.svelte b/examples/ts-svelte-chat/src/routes/svelte-ui/Layout.svelte new file mode 100644 index 0000000000..1dab0ceebb --- /dev/null +++ b/examples/ts-svelte-chat/src/routes/svelte-ui/Layout.svelte @@ -0,0 +1,35 @@ + + +Welcome to the Vue UI Demo!
-
- This view uses
- @tanstack/ai-vue-ui
- components.
-
Send a message to get started.
-{chat.messages.length}
+ }, + message: ({ renderParts }) => renderParts(), + parts: { fallback: () => null }, + }) + + const inner = createChatResult({ messages: [messageWithToolResults] }) + const outer = createChatResult({ messages: [] }) + const markup = renderToStaticMarkup( +1
') + + function Broken() { + UI.useChat() + return null + } + expect(() => renderToStaticMarkup(