1# Chat Layout
2 
3Build AI chat interfaces with message streams, reasoning, tool calling, and Vercel AI SDK integration.
4 
5## When to use
6 
7- AI chatbot interfaces
8- Customer support chat
9- Any conversational UI with streaming responses
10 
11## Setup
12 
13### Install dependencies
14 
15**Nuxt:**
16 
17```bash
18pnpm add ai @ai-sdk/gateway @ai-sdk/vue @comark/nuxt
19```
20 
21**Vue (Vite):**
22 
23```bash
24pnpm add ai @ai-sdk/gateway @ai-sdk/vue @comark/vue
25```
26 
27### Register Comark module
28 
29**Nuxt:**
30 
31```ts [nuxt.config.ts]
32export default defineNuxtConfig({
33  modules: [
34    '@nuxt/ui',
35    '@comark/nuxt'
36  ]
37})
38```
39 
40**Vue (Vite):** No module registration needed, import directly from `@comark/vue`.
41 
42> `@comark/nuxt` (or `@comark/vue` for Vue projects) provides the `Comark` component used to render AI responses as streaming Markdown, it incrementally renders tokens as they arrive and automatically enables Nuxt UI's prose components.
43 
44### Dark mode for syntax highlighting
45 
46When using the `highlight` plugin, add the following CSS to your stylesheet:
47 
48```css [main.css]
49html.dark .shiki span {
50  color: var(--shiki-dark) !important;
51  background-color: var(--shiki-dark-bg) !important;
52  font-style: var(--shiki-dark-font-style) !important;
53  font-weight: var(--shiki-dark-font-weight) !important;
54  text-decoration: var(--shiki-dark-text-decoration) !important;
55}
56```
57 
58### Server endpoint
59 
60Using [Vercel AI Gateway](https://vercel.com/ai-gateway) (recommended):
61 
62```ts [server/api/chat.post.ts]
63import { streamText, convertToModelMessages } from 'ai'
64import { gateway } from '@ai-sdk/gateway'
65 
66export default defineEventHandler(async (event) => {
67  const { messages } = await readBody(event)
68 
69  return streamText({
70    model: gateway('anthropic/claude-sonnet-4.6'),
71    system: 'You are a helpful assistant.',
72    messages: await convertToModelMessages(messages)
73  }).toUIMessageStreamResponse()
74})
75```
76 
77Or with a direct provider (e.g., `pnpm add @ai-sdk/openai`):
78 
79```ts [server/api/chat.post.ts]
80import { streamText, convertToModelMessages } from 'ai'
81import { openai } from '@ai-sdk/openai'
82 
83export default defineEventHandler(async (event) => {
84  const { messages } = await readBody(event)
85 
86  return streamText({
87    model: openai('gpt-5-nano'),
88    system: 'You are a helpful assistant.',
89    messages: await convertToModelMessages(messages)
90  }).toUIMessageStreamResponse()
91})
92```
93 
94## Component tree
95 
96```
97UDashboardPanel
98├── #header → UDashboardNavbar
99├── #body → UContainer → UChatMessages
100│                         ├── #content → UChatReasoning, UChatTool, Comark
101│                         └── #indicator (loading)
102└── #footer → UContainer → UChatPrompt
103                            └── UChatPromptSubmit
104```
105 
106## Full page chat
107 
108```vue [pages/chat/[id].vue]
109<script setup lang="ts">
110import { isReasoningUIPart, isTextUIPart, isToolUIPart, getToolName } from 'ai'
111import { Chat } from '@ai-sdk/vue'
112import { isPartStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'
113import highlight from '@comark/nuxt/plugins/highlight'
114 
115definePageMeta({ layout: 'dashboard' })
116 
117const input = ref('')
118 
119const chat = new Chat({
120  onError(error) {
121    console.error(error)
122  }
123})
124 
125function onSubmit() {
126  if (!input.value.trim()) return
127  chat.sendMessage({ text: input.value })
128  input.value = ''
129}
130</script>
131 
132<template>
133  <UDashboardPanel>
134    <template #header>
135      <UDashboardNavbar title="Chat" />
136    </template>
137 
138    <template #body>
139      <UContainer>
140        <UChatMessages :messages="chat.messages" :status="chat.status">
141          <template #content="{ message }">
142            <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
143              <UChatReasoning
144                v-if="isReasoningUIPart(part)"
145                :text="part.text"
146                :streaming="isPartStreaming(part)"
147              >
148                <Comark
149                  :markdown="part.text"
150                  :streaming="isPartStreaming(part)"
151                  :plugins="[highlight()]"
152                  class="*:first:mt-0 *:last:mb-0"
153                />
154              </UChatReasoning>
155 
156              <UChatTool
157                v-else-if="isToolUIPart(part)"
158                :text="getToolName(part)"
159                :streaming="isToolStreaming(part)"
160              />
161 
162              <template v-else-if="isTextUIPart(part)">
163                <Comark
164                  v-if="message.role === 'assistant'"
165                  :markdown="part.text"
166                  :streaming="isPartStreaming(part)"
167                  :plugins="[highlight()]"
168                  class="*:first:mt-0 *:last:mb-0"
169                />
170                <p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">
171                  {{ part.text }}
172                </p>
173              </template>
174            </template>
175          </template>
176        </UChatMessages>
177      </UContainer>
178    </template>
179 
180    <template #footer>
181      <UContainer class="pb-4 sm:pb-6">
182        <UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
183          <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
184        </UChatPrompt>
185      </UContainer>
186    </template>
187  </UDashboardPanel>
188</template>
189```
190 
191## Key components
192 
193- `UChatMessages` — scrollable message list with auto-scroll. Props: `messages`, `status`. Slots: `#content` (per message), `#actions`, `#indicator`.
194- `UChatMessage` — individual bubble. Props: `message`, `side` (`'left'`/`'right'`).
195- `UChatReasoning` — collapsible reasoning block. Auto-opens during streaming, auto-closes when done. Use `isPartStreaming(part)` from `@nuxt/ui/utils/ai`.
196- `UChatTool` — tool invocation status. Use `isToolStreaming(part)`. Variants: `'inline'` (default), `'card'`.
197- `UChatPrompt` — enhanced textarea. Accepts all Textarea props + `error` prop.
198- `UChatPromptSubmit` — submit button with automatic status handling (send/stop/reload).
199- `UChatPalette` — layout wrapper for chat inside overlays.
200 
201## Chat in a modal
202 
203```vue
204<UModal v-model:open="isOpen">
205  <template #content>
206    <UChatPalette>
207      <UChatMessages :messages="chat.messages" :status="chat.status" />
208 
209      <template #prompt>
210        <UChatPrompt v-model="input" @submit="onSubmit">
211          <UChatPromptSubmit :status="chat.status" />
212        </UChatPrompt>
213      </template>
214    </UChatPalette>
215  </template>
216</UModal>
217```
218 
219## With model selector
220 
221```vue
222<UChatPrompt v-model="input" @submit="onSubmit">
223  <UChatPromptSubmit :status="chat.status" />
224 
225  <template #footer>
226    <USelect
227      v-model="model"
228      :icon="models.find(m => m.value === model)?.icon"
229      placeholder="Select a model"
230      variant="ghost"
231      :items="models"
232    />
233  </template>
234</UChatPrompt>
235```
236 
237## Conversation sidebar
238 
239Combine with dashboard layout for a ChatGPT-like interface:
240 
241```vue [layouts/dashboard.vue]
242<template>
243  <UDashboardGroup>
244    <UDashboardSidebar collapsible resizable>
245      <template #header>
246        <UButton icon="i-lucide-plus" label="New chat" block />
247      </template>
248 
249      <template #default>
250        <UNavigationMenu :items="conversations" orientation="vertical" />
251      </template>
252    </UDashboardSidebar>
253 
254    <slot />
255  </UDashboardGroup>
256</template>
257```
258