Build an AI Chatbot with Nuxt, Nuxt UI, and AI SDK

Building AI-powered applications has never been more accessible. This guide walks through creating a full-featured AI chatbot using Nuxt, Nuxt UI, and the Vercel AI SDK. Each step is explained in detail so you understand how every piece works together.

What we're building

By the end of this tutorial, you'll have a fully functional AI chatbot with:

• Streaming responses that appear in real-time as the AI generates them
• A beautiful chat interface built with Nuxt UI's purpose-built chat components
• Markdown rendering for rich AI responses with code highlighting
• Multi-model support allowing users to switch between OpenAI, Anthropic, and Google models
• Server-side AI integration using Nitro API routes and the AI SDK

Prerequisites

Before we start, make sure you have:

• Node.js 20+ installed
• A Vercel AI Gateway API key (provides access to multiple AI providers through a single endpoint)

Project setup

Start by creating a new Nuxt project:

npx nuxi@latest init nuxt-ai-chat
cd nuxt-ai-chat

Installing dependencies

Install Nuxt UI and the AI-specific dependencies:

pnpm add @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod

yarn add @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod

npm install @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod

bun add @nuxt/ui tailwindcss @comark/nuxt @shikijs/langs @nuxthub/core drizzle-orm drizzle-kit @libsql/client ai @ai-sdk/vue zod

Configuration

Update your nuxt.config.ts to register the modules:

export default defineNuxtConfig({
  modules: ["@nuxt/ui", "@comark/nuxt", "@nuxthub/core"],

  hub: {
    db: "sqlite",
  },

  css: ["~/assets/css/main.css"],
});