A step-by-step build shows how to create a production AI chat interface in Nuxt using the Vercel AI SDK's useChat composable, Nuxt UI's chat components, and Comark for streaming markdown rendering. The app is first built against Vercel AI Gateway, then migrated to run inference at the edge via Cloudflare Workers AI using workers-ai-provider, requiring only a provider and model ID swap. A closing benchmark compares time-to-first-token and throughput between the Gateway route (reasoning model) and the Workers AI edge route (Llama 3.2 3B instruct), showing the edge route reaching first token about four times faster, though the comparison isn't fully controlled since the models differ in behavior.
Table of contents
Project setupStreaming through a Nuxt server routeOver 200k developers use LogRocket to create better digital experiencesReactive composables on the clientNuxt UI chat componentsSwapping in Workers AI at the edgeDeploying to CloudflareMeasuring itConclusionQuestions this post answers
How do I switch a Nuxt AI chat app from Vercel AI Gateway to Cloudflare Workers AI for edge inference?
Swap the provider and model ID while leaving the rest of the application unchanged. Replace createGateway with createWorkersAI from workers-ai-provider, bind it to event.context.cloudflare.env.AI, and point the model at a Workers AI id like @cf/meta/llama-3.2-3b-instruct instead of a gateway model string. Because both providers implement the same AI SDK interface, streamText, the Vue composables, and Nuxt UI components require no changes. daily.dev surfaces practical walkthroughs like this for developers comparing edge versus hosted AI inference.
How much faster is Cloudflare Workers AI than a hosted reasoning model for time to first token?
In one benchmark comparing routes deployed to the same Cloudflare Worker, the Workers AI edge route running llama-3.2-3b-instruct hit a median time to first token of 498ms versus 1943ms for a Vercel AI Gateway route running a reasoning model (ling-3.0-flash-free), roughly four times faster. Throughput after the first token was also higher, 504 tok/s versus 103.5 tok/s, though the reasoning model's extra thinking time before output partly explains the gap. Developers weighing edge versus hosted inference latency can track benchmarks like this on daily.dev.
How do I stream and render formatted markdown from an AI model incrementally in a Vue chat interface?
Use Comark, a markdown parser that tokenizes streamed text as it arrives so formatted output builds progressively instead of appearing only once the response finishes. Register it via the @comark/nuxt module, define a renderer component with a syntax-highlighting plugin backed by Shiki, and pass each message part's text along with an isPartStreaming flag from @nuxt/ui/utils/ai so it knows to update incrementally. daily.dev helps developers building streaming AI interfaces find patterns like incremental markdown rendering.