AI SDK

Streaming AI chat with live Comark rendering

chat.post.ts

import { convertToModelMessages, streamText } from 'ai'

export default defineEventHandler(async (event) => {
  const { messages } = await readBody(event)

  const result = streamText({
    model: 'anthropic/claude-sonnet-4.6',
    system: `You are a helpful Comark assistant. Always respond using Comark syntax.
Call fetchComarkSkill to learn the syntax and fetchComponents to discover available UI components.`,
    messages: await convertToModelMessages(messages),
    stopWhen: stepCountIs(4),
  })

  return result.toUIMessageStreamResponse()
})

How it works

server/api/chat.post.ts — streamText to stream the Markdown response from the model
app/pages/index.vue — Chat from @ai-sdk/vue + <Comark :streaming="isPartStreaming(part)" caret> for live per-part rendering

On the client, <Comark> parses and renders the Markdown response and receives :streaming="isPartStreaming(part)" for accurate per-part streaming state.

Setup

cp .env.example .env
# Add your AI_GATEWAY_API_KEY

pnpm install
pnpm dev