AI SDK は、開発者が AI で強化されたアプリケーションを構築するのを支援するように設計された、強力な Typescript ライブラリです。
このクイックスタートでは、Vue.js (Nuxt) をベースに、ストリーミング・チャットインターフェイスを備えた単純なエージェントを構築します。

Vercel AI SDK 6.x : Getting Started – Vue.js (Nuxt) クイックスタート

作成 : Masashi Okumura (@classcat.com)
作成日時 : 01/11/2026
バージョン : ai@6.0.27

* 本記事は ai-sdk.dev/docs の以下のページを参考にしています :

Getting Started : Vue.js (Nuxt) Quickstart

* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。

Vercel AI SDK 6.x : Getting Started – Vue.js (Nuxt) クイックスタート

AI SDK は、開発者が AI で強化されたアプリケーションを構築するのを支援するように設計された、強力な Typescript ライブラリです。

このクイックスタート・チュートリアルでは、ストリーミング・チャットインターフェイスを備えた単純なエージェントを構築します。その過程で、独自プロジェクトで SDK を利用するための基礎となる主要コンセプトとテクニックを学習します。

前提条件

このクイックスタートに従うには、以下が必要です :

Node.js 18+ と pnpm がローカル開発マシンにインストールされていること
Vercel AI Gateway API キー

アプリケーションのセットアップ

まず、新しい Nuxt アプリケーションを作成します。このコマンドは my-ai-app という名前の新しいディレクトリを作成し、その中に基本的な Nuxt アプリケーションをセットアップします。

pnpm create nuxt my-ai-app

新たに作成されたディレクトリに移動します :

cd my-ai-app

依存関係のインストール

ai と @ai-sdk/vue をインストールします。Vercel AI Gateway プロバイダーは ai パッケージでリリースされています。

pnpm add ai @ai-sdk/vue zod

Vercel AI Gateway API キーの設定

プロジェクトルートに .env ファイルを作成して Vercel AI Gateway API キーを追加します。このキーは、Vercel AI Gateway サービスを使用するアプリケーションを認証するために使用されます。

touch .env

Edit the .env file:

NUXT_AI_GATEWAY_API_KEY=xxxxxxxxx

xxxxxxxxx を実際の Vercel AI Gateway API キーで置き換え、nuxt.config.ts 内に環境変数を設定します :

nuxt.config.ts

export default defineNuxtConfig({
  // rest of your nuxt config
  runtimeConfig: {
    aiGatewayApiKey: '',
  },
});

ℹ️ このガイドは Nuxt のランタイム config を使用して API キーを管理します。環境変数の NUXT_ プレフィックスは Nust がそれをランタイム config に自動的にロードすることを可能にします。AI Gateway Provider はまたデフォルトの AI_GATEWAY_API_KEY 環境変数をサポートしながら、このアプローチは Nuxt configuration システムとのより良い統合を提供します。

API route の作成

API route, server/api/chat.ts を作成して、以下のコードを追加します :

server/api/chat.ts

import {
  streamText,
  UIMessage,
  convertToModelMessages,
  createGateway,
} 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 result.toUIMessageStreamResponse();
  });
});

このコードで何が起きているか見てみましょう。

ai パッケージの createGateway 関数を使用して gateway プロバイダー・インスタンスを作成します。
イベントハンドラを定義して、リクエストのボディからメッセージを抽出します。messages 変数はユーザとチャットボット間の会話の履歴を含み、チャットボットに次の生成を行うために必要なコンテキストを提供します。messages は UIMessage 型で、これはアプリケーション UI で使用するために設計されています – それらはメッセージ履歴全体とタイムスタンプのような関連メタデータを含みます。
ai パッケージからインポートした streamText を呼び出します。この関数は configuration オブジェクト受け取ります、これは (ステップ 1 で定義された) model プロバイダーと (ステップ 2 で定義された) messages を含みます。モデルの動作を更にカスタマイズするために追加の設定を渡すこともできます。messages キーは ModelMessage[] 配列を想定しています。この型は、タイムスタンプや送信者情報のようなメタデータを含まないという点で UIMessage とは異なります。これらの型の間で変換するため、convertToModelMessages 関数を使用します、これは UI 固有のメタデータを除去して UIMessage[] 配列を (モデルが想定する) ModelMessage[] 形式に変換します。
streamText 関数は StreamTextResult を返します。この結果オブジェクトは toUIMessageStreamResponse 関数を含みます、これは結果をストリーミングされたレスポンスオブジェクトに変換します。
結果をクライアントに返して、レスポンスをストリーミングします。

プロバイダーの選択

AI SDK は、ファーストパーティ、OpenAI 互換、コミュニティパッケージを通して、数十のモデルプロバイダーをサポートしています。

このクイックスタートは、デフォルトのグローバルプロバイダーである Vercel AI Gateway プロバイダーを使用します。これは、モデル設定で単純な文字列を使用してモデルにアクセスできることを意味します :

Gateway

model: "openai/gpt-4o-mini";

Provider

model: openai("gpt-4o-mini");

2 つの同等な方法で、ゲートウェイ・プロバイダーを明示的にインポートして使用することもできます :

// Option 1: Import from 'ai' package (included by default)
import { gateway } from 'ai';
model: gateway('anthropic/claude-sonnet-4.5');

// Option 2: Install and import from '@ai-sdk/gateway' package
import { gateway } from '@ai-sdk/gateway';
model: gateway('anthropic/claude-sonnet-4.5');

Wire up the UI

LLM にクエリーできる API route を実装したので、次にフロントエンドをセットアップします。AI SDK の UI パッケージはチャットインターフェイスの複雑さを一つのフック、useChat に抽象化しています。

チャットメッセージのリストを表示してユーザメッセージの入力を提供するには、ルートページ (pages/index.vue) を以下のコードで更新します :

pages/index.vue

<script setup lang="ts">
import { Chat } from "@ai-sdk/vue";
import { ref } from "vue";

const input = ref("");
const chat = new Chat({});

const handleSubmit = (e: Event) => {
    e.preventDefault();
    chat.sendMessage({ text: input.value });
    input.value = "";
};


<template>
    <div>
        <div v-for="(m, index) in chat.messages" :key="m.id ? m.id : index">
            {{ m.role === "user" ? "User: " : "AI: " }}
            <div
                v-for="(part, index) in m.parts"
                :key="`${m.id}-${part.type}-${index}`"
            >
                <div v-if="part.type === 'text'">{{ part.text }}</div>
            </div>
        </div>

        <form @submit="handleSubmit">
            <input v-model="input" placeholder="Say something..." />
        </form>
    </div>
</template>

ℹ️ If your project has app.vue instead of pages/index.vue, delete the app.vue file and create a new pages/index.vue file with the code above.

このページは useChat フックを利用します、これはデフォルトでは先に作成した API route (/api/chat) を使用します。このフックは、ユーザ入力とフォーム送信を処理する関数と状態を提供します。useChat フックは複数のユティリティ関数と状態変数を提供します :

messages – 現在のチャットメッセージ (id, role と parts プロパティを持つオブジェクトの配列)。
sendMessage – メッセージを chat API に送信する関数。

このコンポーネントはローカル状態 (ref) を使用して入力フィールド値を管理し、入力テキストを引数に sendMessage を呼び出し、入力フィールドをクリアすることでフォーム送信を処理します。

LLM のレスポンスはメッセージ parts 配列を通してアクセスできます。各メッセージは、モデルがレスポンスで生成したすべてを表す parts の順序付けられた配列を含みます。これらのパーツは、後でみるような plain テキスト、推論トークン等を含むことができます。parts 配列はモデルの出力のシークエンスを保持し、生成された順序で各コンポーネントを表示または処理することを可能にします。

アプリケーションの実行

これで、チャットボットに必要なものすべてを構築しました！アプリケーションを起動するには、次のコマンドを使用します :

pnpm run dev

ブラウザで http://localhost:3000 を開いてください。入力フィールドを見るはずです。メッセージを入力してテストすると、AI チャットボットがリアルタイムに応答するのを確認できます。AI SDK は、Nuxt で AI チャットインターフェイスを素早く簡単に構築できます。

以上

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31