A hands-on walkthrough shows how to build a full-stack AI streaming chat feature in Nuxt using the Vercel AI SDK's @ai-sdk/vue composables (useChat, useCompletion, useObject), Nuxt UI's prebuilt chat components, and Comark for live Markdown rendering. It covers scaffolding a Nuxt app, routing model calls through Vercel AI Gateway for a hosted baseline, then swapping to Cloudflare Workers AI via the workers-ai-provider for edge inference with minimal code changes. A benchmark comparing both routes shows the edge route reaching first token about four times faster (498ms vs 1943ms) though throughput differences partly reflect model behavior differences rather than pure transport speed. The guide ends with deploying via Wrangler to Cloudflare's edge network.
Table of contents
How do you set up Nuxt and Vercel AI SDK in 2026?How to stream AI responses using Nuxt server routes?How does the useChat composable work in Vue?How to style AI chat in Nuxt UI?Over 200k developers use LogRocket to create better digital experiencesHow to run Cloudflare Workers AI at the edge with Nuxt?How do you deploy to Cloudflare?How fast is edge AI streaming in Nuxt?ConclusionQuestions this post answers
How do I switch a Nuxt AI chat app from Vercel AI Gateway to Cloudflare Workers AI for edge inference?
Swap only the provider and model ID since workers-ai-provider implements the same AI SDK interface as the gateway provider. Replace createGateway with createWorkersAI bound to event.context.cloudflare.env.AI, point the Nitro preset to cloudflare_module, and declare an AI binding in wrangler.jsonc. The streaming code, composables, and UI components require no changes. Developers wiring edge AI inference into Nuxt apps can track SDK and provider changes on daily.dev.
What is the performance difference between Vercel AI Gateway and Cloudflare Workers AI for streaming inference?
In a benchmark against a deployed Cloudflare Worker, the Workers AI edge route (llama-3.2-3b-instruct) reached first token in a median of 498ms versus 1943ms for the Gateway route (ling-3.0-flash-free), roughly four times faster. Throughput was also higher at 504 tok/s versus 103.5 tok/s, though part of the gap reflects the Gateway model being a reasoning model rather than a pure transport difference. Teams choosing between hosted and edge AI inference can compare real benchmarks like this on daily.dev.
How does the useChat composable from @ai-sdk/vue work in a Nuxt component?
Calling useChat() with no arguments posts to /api/chat by default and returns reactive state including messages, sendMessage, and status. The messages ref updates on every streamed chunk so the template re-renders token by token, and each message's parts array must be iterated separately to render text and reasoning parts through different branches. Vue developers building streaming chat interfaces can find implementation patterns like this on daily.dev.