{chat.messages.map((message) => ( ))}

{chat.error ?

{chat.error.message}

: null}

{ event.preventDefault() const text = input.trim() if (!text || generating) { return } setInput('') void chat.sendMessage({ text }) }} >

setInput(event.target.value)}
          value={input}
        />
        <button disabled={!input.trim() || generating} type="submit">
          {generating ? 'Generating…' : 'Send'}
        </button>
      </form>
    </main>
  )
}

function Message({ message }: { message: V0UIMessage }) {
  return (
    <article>
      <h2>{message.role === 'user' ? 'You' : 'v0'}</h2>

{message.parts.map((part, index) => {
        const key = `${message.id}:${index}`

if (part.type === 'text') {
          return <p key={key}>{part.text}</p>
        }

if (part.type === 'reasoning') {
          return (
            <details key={key}>
              <summary>Reasoning</summary>
              <p>{part.text}</p>
            </details>
          )
        }

if (part.type === 'file') {
          return (
            <p key={key}>
              <a href={part.url}>{part.filename ?? 'Attachment'}</a>
            </p>
          )
        }

if (part.type === 'data-v0-tool-call') {
          const tool = part.data

return (
            <details key={key}>
              <summary>
                {tool.name} · {tool.status}
              </summary>

{tool.input !== undefined ? (
                <pre>
                  <code>{JSON.stringify(tool.input, null, 2)}</code>
                </pre>
              ) : null}

{tool.output !== undefined ? (
                <pre>
                  <code>{JSON.stringify(tool.output, null, 2)}</code>
                </pre>
              ) : null}
            </details>
          )
        }

return null
      })}
    </article>
  )
}
```

The `key` on `ChatRuntime` gives each chat its own `useChat` state and transport. When v0 creates a chat from the first message, `onChatCreated` receives its ID. Use that callback to update your URL or application state.

### Render rich message parts

AI SDK represents a message as an ordered `parts` array. Render the array in order instead of relying on a single message string so the transcript can include prose, reasoning, attachments, and agent activity.

`V0Transport` maps v0 parts as follows:

| v0 part              | AI SDK UI part                                                                                        |
| -------------------- | ----------------------------------------------------------------------------------------------------- |
| `text`               | `text`                                                                                                |
| `thinking`           | `reasoning`                                                                                           |
| Attachment           | `file`                                                                                                |
| `tool-call`          | `data-v0-tool-call`                                                                                   |
| Other agent activity | `data-v0-file-read`, `data-v0-file-edit`, `data-v0-search`, `data-v0-bash`, or `data-v0-agent-action` |

For a tool call, its name, status, input, and output are available on `part.data`. The example renders them in a disclosure, but you can replace that with tool-specific UI by switching on `part.data.name`.

Some tool calls require user approval before the agent can continue. See [Handling Agent Interactions](/docs/api/v2/guides/handling-agent-interactions) to detect and resolve permission requests.

## Add the backend routes

The frontend above expects three backend URLs. The create and send routes return v0's SSE response, while the messages route also supports `GET` for history.

<Callout type="warning">
  The examples below focus only on forwarding requests. In every route, authenticate your application user before calling v0. For routes containing a `chatId`, also verify that the user owns or may access that chat. Keep this relationship in your own database or trusted server-written metadata; never trust ownership information supplied by the browser.
</Callout>

### Create a chat

```typescript title="app/api/v0/chats/route.ts"
import { v0, type ChatsCreateStreamData } from 'v0'

export async function POST(request: Request) {
  const body = (await request.json()) as ChatsCreateStreamData['body']
  const result = await v0.chats.createStream(body)

return result.toResponse()
}
```

### Load history and send messages

A single route can handle both operations because `useMessages` sends a `GET`, while `V0Transport` sends a `POST`.

```typescript title="app/api/v0/chats/[chatId]/messages/route.ts"
import { v0, type MessagesSendStreamData } from 'v0'

export async function GET(
  request: Request,
  { params }: { params: Promise<{ chatId: string }> },
) {
  const { chatId } = await params
  const cursor = new URL(request.url).searchParams.get('cursor')
  const result = await v0.messages.list({
    chatId,
    limit: 50,
    ...(cursor ? { cursor } : {}),
  })

return Response.json(result.error ?? result.data ?? null, {
    status: result.response.status,
  })
}

export async function POST(
  request: Request,
  { params }: { params: Promise<{ chatId: string }> },
) {
  const { chatId } = await params
  const body = (await request.json()) as MessagesSendStreamData['body']
  const result = await v0.messages.sendStream({ chatId, ...body })

return result.toResponse()
}
```

v0 returns persisted history newest first. Keep that order in the backend response; `toV0UIMessages` reverses it for display.

### Resume an interrupted stream

```typescript title="app/api/v0/chats/[chatId]/resume/route.ts"
import { v0 } from 'v0'

export async function POST(
  _request: Request,
  { params }: { params: Promise<{ chatId: string }> },
) {
  const { chatId } = await params
  const result = await v0.chats.resume({ chatId })

return result.toResponse()
}
```

`shouldResumeV0Chat(history)` asks AI SDK to call this route only when the newest persisted assistant message is unfinished. See [Resuming Streams](/docs/api/v2/guides/resuming-streams) for reconnection behavior and error handling.

## Show the generated app

The interface above renders the conversation. To embed the generated application beside it, follow [Accessing Previews](/docs/api/v2/guides/accessing-previews) and apply the same authentication and `chatId` authorization rules to the preview route.

---

For a semantic overview of all documentation, see [/docs/sitemap.md](/docs/sitemap.md)

For an index of all available documentation, see [/docs/llms.txt](/docs/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/docs/agents.md](/docs/agents.md)