Svelte and Nuxt Setup

Purpose and Scope

This page helps SvelteKit and Nuxt developers build the same first streaming chat agent shown in the AI SDK getting started flow, while understanding how the framework packages fit the shared API model. Both quickstarts start from a new application, install the core library and a framework binding package, configure a Vercel AI Gateway key, add a server endpoint, and connect a streaming user interface. The important idea is that the model call remains provider agnostic: the server route uses the AI SDK core generation and stream helpers, while the client package supplies framework-native UI bindings. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx

The Svelte and Nuxt guides deliberately use Vercel AI Gateway as the first provider path. Gateway lets the example access a model such as Anthropic Claude through one API key, and the docs emphasize that you can later switch to another provider by changing the installed provider package or the selected model. That makes the framework setup a practical introduction to the SDK’s broader design: application code sends standardized messages, the server converts those messages into model messages, and the response returns as a UI message stream. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx

Relevant Source Files

• content/docs/02-getting-started/04-svelte.mdx — Defines the Svelte quickstart, including prerequisites, dependency installation, environment variable handling, the SvelteKit endpoint, and the streaming chat route pattern.
• content/docs/02-getting-started/05-nuxt.mdx — Defines the Vue.js Nuxt quickstart, including Nuxt project creation, runtime configuration, API key loading, and the server API route pattern.
• packages/svelte/package.json — Declares the published Svelte integration package, its Svelte peer dependency, exports, build scripts, dependencies on the core AI package, and Node engine requirement.
• packages/vue/package.json — Declares the published Vue integration package used by Nuxt applications, including exports, Vue peer dependency, dependency on the core AI package, and Node engine requirement.

Core Primitives

The quickstarts introduce a compact set of primitives that repeat across AI SDK applications. A UI message is the framework-facing conversation record exchanged with the browser. Model messages are the normalized form passed to the model call after conversion. The streaming text operation starts the model request and exposes a stream. The UI message stream helpers adapt that stream into the protocol consumed by framework UI hooks and components. Gateway is the provider factory used in these examples, and it receives the API key from each framework’s server-only configuration mechanism. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx

For SvelteKit and Nuxt, keep the boundary clear: the browser owns the interactive chat experience, but the server owns the provider key and model request. The route accepts messages from the client, converts them, calls the selected Gateway model, and returns a streaming response. This shape keeps secrets out of the client bundle and keeps provider selection centralized. It also means the same route can later gain tools, stronger validation, persistence, telemetry, or provider options without changing the high-level client contract. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx

SvelteKit Setup Flow

Start a SvelteKit project with the documented Svelte command, enter the generated directory, then install the core package, the Svelte binding package, and the schema library used by the tutorial. The Svelte guide lists Node.js twenty two or newer, pnpm, and a Vercel AI Gateway API key as prerequisites. It installs the Svelte package as a development dependency in the example command, alongside the core package and Zod. The manifest for the published Svelte integration also requires Node twenty two or newer and declares Svelte as a peer dependency, matching the quickstart’s modern SvelteKit baseline. Sources: content/docs/02-getting-started/04-svelte.mdx, packages/svelte/package.json

npx sv create my-ai-app
cd my-ai-app
pnpm add -D ai @ai-sdk/svelte zod

The SvelteKit API key setup uses a project root environment file named .env.local with AI_GATEWAY_API_KEY. The guide calls out an important Vite behavior: environment variables are not automatically placed onto process environment access in the same way many server frameworks expose them. The route therefore imports the key from SvelteKit’s private environment module and passes it into the Gateway factory. This is not just a syntax detail; it is the mechanism that keeps the key server-only while still giving the route an explicit credential. Sources: content/docs/02-getting-started/04-svelte.mdx

AI_GATEWAY_API_KEY=xxxxxxxxx

Create the SvelteKit endpoint at src/routes/api/chat/+server.ts. The documented route imports the streaming text function, UI message type, message conversion helper, Gateway creator, UI stream response creator, and conversion helper from the core package. On a POST request, it reads the incoming messages, converts them to model messages, streams text from the Gateway model, and returns a UI message stream response. If type errors appear around the private environment variable or route function, the guide notes that running the dev server can resolve generated type information. Sources: content/docs/02-getting-started/04-svelte.mdx

import {
  streamText,
  type UIMessage,
  convertToModelMessages,
  createGateway,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';
 
import { AI_GATEWAY_API_KEY } from '$env/static/private';
 
const gateway = createGateway({
  apiKey: AI_GATEWAY_API_KEY,
});
 
export async function POST({ request }) {
  const { messages }: { messages: UIMessage[] } = await request.json();
 
  const result = streamText({
    model: gateway('anthropic/claude-sonnet-4.5'),
    messages: await convertToModelMessages(messages),
  });
 
  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

Nuxt Setup Flow

The Nuxt quickstart follows the same product flow with Vue framework conventions. Create a new Nuxt application, enter the project, and install the core package, the Vue binding package, and Zod. The published Vue integration is the package used for Nuxt applications; its manifest exports a module entry with type definitions, declares Vue as a peer dependency, depends on the core AI package, and requires Node twenty two or newer. The guide’s dependency command installs regular dependencies, which matches Nuxt’s application style for runtime client composables. Sources: content/docs/02-getting-started/05-nuxt.mdx, packages/vue/package.json

pnpm create nuxt my-ai-app
cd my-ai-app
pnpm add ai @ai-sdk/vue zod

Nuxt uses runtime configuration for the Gateway key rather than importing from a SvelteKit private environment module. The guide creates a root .env file with a NUXT_ prefixed variable, then adds a matching runtime config field in nuxt.config.ts. The prefix allows Nuxt to load the value into runtime configuration, while the server route reads it through the framework helper. The docs also note that Gateway supports a default AI Gateway environment variable, but the Nuxt path is preferred because it integrates cleanly with Nuxt’s configuration system. Sources: content/docs/02-getting-started/05-nuxt.mdx

NUXT_AI_GATEWAY_API_KEY=xxxxxxxxx

export default defineNuxtConfig({
  runtimeConfig: {
    aiGatewayApiKey: '',
  },
});

Create the Nuxt server route at server/api/chat.ts. The documented route uses a lazy event handler to read runtime configuration once, verifies that the API key exists, creates the Gateway provider, and then defines an event handler that reads the request body. From that point, the model call mirrors the SvelteKit route: read UI messages, convert them to model messages, call the Gateway model with the streaming text function, and return the stream through the UI message response helper. The explicit missing-key check gives Nuxt developers an early, actionable failure instead of a later provider authentication error. Sources: content/docs/02-getting-started/05-nuxt.mdx

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  createGateway,
  createUIMessageStreamResponse,
  toUIMessageStream,
} from 'ai';
 
export default defineLazyEventHandler(async () => {
  const apiKey = useRuntimeConfig().aiGatewayApiKey;
  if (!apiKey) throw new Error('Missing AI Gateway API key');
 
  const gateway = createGateway({
    apiKey: apiKey,
  });
 
  return defineEventHandler(async (event: any) => {
    const { messages }: { messages: UIMessage[] } = await readBody(event);
 
    const result = streamText({
      model: gateway('anthropic/claude-sonnet-4.5'),
      messages: await convertToModelMessages(messages),
    });
 
    return createUIMessageStreamResponse({
      stream: toUIMessageStream({ stream: result.stream }),
    });
  });
});

System-to-Code Mapping

The manifests show that the framework packages are thin integration packages rather than independent model providers. The Svelte package publishes Svelte-specific exports, depends on the workspace core package, and lists Svelte as a peer dependency. The Vue package likewise exports a typed module, depends on the core package, and lists Vue as a peer dependency, with an additional runtime dependency used by that integration. This layout is why the server route examples import model and stream helpers from the core package while the framework package handles the application’s UI layer. Sources: packages/svelte/package.json, packages/vue/package.json

Implementation Details and Edge Cases

Treat the Gateway API key as a server secret in both frameworks. In SvelteKit, that means using the private environment import documented by the guide. In Nuxt, it means using runtime configuration and the NUXT_ prefixed variable. Do not move the key into client-side configuration or a public runtime field just to make the route compile. If the endpoint cannot authenticate, verify the file name, variable name, framework configuration, and whether the development server has been restarted after adding environment variables. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx

The selected model string is intentionally isolated inside the Gateway call. That single line is the provider choice for these starter applications, while the surrounding request and response flow remains stable. You can keep the same message conversion and stream response shape when trying a different Gateway model, and the docs also point readers toward installing provider packages when they want direct provider setup. This separation is valuable during early development because framework wiring, streaming behavior, and provider selection can be debugged independently. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx

Package Reference

Use the package reference to align application setup with the published integration constraints. A SvelteKit application should satisfy the Svelte peer range expected by the Svelte binding, while a Nuxt application should satisfy the Vue peer range expected by the Vue binding. Both packages depend on the core ai package in the repository, which matches the quickstarts importing server-side model functions from the core package. Both package manifests also publish type declarations, so TypeScript projects should get typed imports once dependencies are installed and framework-generated types are up to date. Sources: packages/svelte/package.json, packages/vue/package.json

Next Steps

After the route is working, expand the example in the same order the SDK documentation uses elsewhere: add tools, persist messages, tune provider options, and introduce stronger validation around incoming messages. If your immediate goal is a chatbot, continue with the UI chatbot and stream protocol pages so the client side is clear. If your goal is model behavior, continue with providers, prompts, tools, and streaming foundations. If your application needs another model provider, keep the route structure and change the provider setup deliberately rather than rewriting the framework integration from scratch. Sources: content/docs/02-getting-started/04-svelte.mdx, content/docs/02-getting-started/05-nuxt.mdx