AI Elements : Vercel AI フロントエンド・スタック

Posted on by Masashi Okumura

Vercel は AI 駆動型アプリケーションを構築するための完全なスタックを提供しています。各パーツが組み合わさる方法が説明されます。

AI Elements : Vercel AI フロントエンド・スタック

作成 : Masashi Okumura (@classcat.com)
作成日時 : 02/26/2026
バージョン : ai-elements@1.8.4

* 本記事は elements.ai-sdk.dev/doc の以下のページを参考にし、独自に翻訳した上でまとめ直しています :

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

 

 

AI Elements : Vercel AI フロントエンド・スタック

Vercel は AI 駆動型アプリケーションを構築するための完全なスタックを提供しています。各パーツが組み合わさる方法は以下になります :

 

スタック

 

AI Gateway

AI Gateway は、AI モデルへの単一のアクセスポイントです。

 

What It Does

  • 統合 API – OpenAI, Anthropic, Google 等への一つの API キー

  • キャッシュ – 同一のリクエストをキャッシュすることでコストを削減

  • レート制限 – 不正利用 (abuse) からアプリケーションを保護する

  • 可観測性 (Observability) – 使用量、遅延、コストの監視

  • フォールバック – バックアップモデルで自動的に再試行

 

セットアップ

AI_GATEWAY_API_KEY を環境に追加 :

.env.local

AI_GATEWAY_API_KEY=your_api_key_here

そしてモデル文字列 e.g. anthropic/claude-sonnet-4.5 を指定して、AI SDK でそれを利用します。

 

AI SDK

AI SDK は AI インタラクションの基盤を提供します。

 

コア機能

  • ストリーミング – 任意のモデルからのレスポンスをストリーミング

  • ツール呼び出し – モデルに関数を呼び出すことを可能にします

  • 構造化出力 – 型付きレスポンスの取得

  • マルチモーダル – テキスト、画像、ファイルを処理

 

React フック

example.tsx

"use client";

import { useChat } from "@ai-sdk/react";

function Chat() {
  const [text, setText] = useState("");
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/chat",
    }),
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    sendMessage({ text: text });
    setText("");
  };

  return (
    <form onSubmit={handleSubmit}>
      {messages.map((m) => (
        <div key={m.id}>{m.content}</div>
      ))}
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </form>
  );
}

 

サーバ統合

app/api/chat/route.ts

import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "anthropic/claude-sonnet-4.5",
    system: "You are a helpful assistant.",
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

 

AI Elements

AI ELements は AI SDK の上に UI レイヤーを提供します。

 

What It Adds

  • 事前構築済みコンポーネント – Message, Conversation, PromptInput 等

  • ストリーミング・サポート – コンポーネントは部分的なコンテンツを適切に処理します

  • 構成可能なデザイン – 必要な UI を正確に構築します

  • テーマの統合 – 既存の shadcn/ui セットアップで動作します

 

統合例

app/chat/page.tsx

"use client";

import { useChat } from "@ai-sdk/react";
import {
  Conversation,
  ConversationContent,
} from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputProvider,
  PromptInputSubmit,
  PromptInputTextarea,
} from "@/components/ai-elements/prompt-input";

export default function ChatPage() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: "/api/chat",
    }),
  });

  const handleSubmit = (message: { text: string }) => {
    sendMessage({ text: message.text });
  };

  return (
    <div className="h-screen flex flex-col">
      <Conversation className="flex-1">
        <ConversationContent>
          {messages.map((message) => (
            <Message key={message.id} from={message.role}>
              <MessageContent>
                {message.parts.map((part, i) =>
                  part.type === "text" ? (
                    <MessageResponse key={i}>{part.text}</MessageResponse>
                  ) : null,
                )}
              </MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>

      <PromptInputProvider>
        <PromptInput onSubmit={handleSubmit} className="p-4">
          <PromptInputBody>
            <PromptInputTextarea placeholder="Type a message..." />
          </PromptInputBody>
          <PromptInputFooter>
            <PromptInputSubmit status={status} />
          </PromptInputFooter>
        </PromptInput>
      </PromptInputProvider>
    </div>
  );
}

 

Putting It Together

完全なフローは :

  1. ユーザーが AI Elements の PromptInput に入力します

  2. React フック (useChat) はメッセージを API ルートに送信します

  3. AI SDK は AI Gatewayt 経由のモデルからのレスポンスをストリーミングします

  4. AI Elements は MessageResponse でストリーミング・レスポンスをレンダリングします

各レイヤーはそれぞれの役割を処理します :

レイヤー 役割 (Responsibility)
AI Gateway モデルアクセス、キャッシュ、可観測性 (observability)
AI SDK ストリーミング、フック、サーバー統合
AI Elements UIコンポーネント、テーマ設定、アクセシビリティ

この分離は、任意のレイヤーを個別に置き換えられることを意味しています。異なるモデルプロバイダーを使用したり、カスタムフックを構築したり、独自のコンポーネントを作成できます – スタックの柔軟性が維持されます。

 

以上