AI Elements : 概要

Posted on by Masashi Okumura

AI Elements は、shadcn/ui の上に構築されたコンポーネント・ライブラリで、AI ネイティブ・アプリケーションを素早く構築するのに役立ちます。

AI Elements : 概要

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

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

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

 

 

AI Elements : 概要

AI Elements は、shadcn/ui の上に構築されたコンポーネント・ライブラリで、AI ネイティブ・アプリケーションを素早く構築するのに役立ちます。

 

概要

AI Elements は、会話、メッセージ、コードブロック、推論表示 等のような AI アプリケーション向けに特に設計された、事前構築済み、カスタマイズ可能な React コンポーネントを提供します。CLI が、これらのコンポーネントを Next.js プロジェクトに簡単に追加します。

 

インストール

AI Elements CLI は npx で直接使用することも、グローバルにインストールすることもできます :

# Use directly (recommended)
npx ai-elements@latest

# Or using shadcn cli
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json

 

前提条件

AI Elements を使用する前に、プロジェクトがこれらの要件を満たしていることを確認してください :

  • Node.js 18 or later
  • AI SDK がインストールされた Next.js プロジェクト
  • プロジェクトで shadcn/ui が初期化されていること (npx shadcn@latest init)
  • Tailwind CSS が設定されている (AI Elements は CSS 変数モードのみをサポート)

 

使用方法

すべてのコンポーネントのインストール

すべての利用可能な AI Elements コンポーネントを一度にインストールします :

npx ai-elements@latest

このコマンドは :

  • shadcn/ui を (まだ構成設定されていない場合には) セットアップします。

  • すべての AI ELements コンポーネントを構成設定済みの components ディレクトリにインストールします。

  • 必要な依存関係をプロジェクトに追加します。

 

特定のコンポーネントのインストール

add コマンドを使用して個々のコンポーネントをインストールします :

npx ai-elements@latest add <component-name>

例 :

# Install the message component
npx ai-elements@latest add message

# Install the conversation component
npx ai-elements@latest add conversation

# Install the code-block component
npx ai-elements@latest add code-block

 

オルタナティブ: shadcn CLI による利用

標準の shadcn/ui CLI を使用してコンポーネントをインストールすることもできます :

# Install all components
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/all.json

# Install a specific component
npx shadcn@latest add https://elements.ai-sdk.dev/api/registry/message.json

 

クイックスタート例

コンポーネントをインストールしたら、React アプリケーションでそれらを使用できます :

"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";

export default function Chat() {
  const { messages } = useChat();

  return (
    <Conversation>
      <ConversationContent>
        {messages.map((message, index) => (
          <Message key={index} from={message.role}>
            <MessageContent>
              <MessageResponse>{message.content}</MessageResponse>
            </MessageContent>
          </Message>
        ))}
      </ConversationContent>
    </Conversation>
  );
}

 

How It Works

AI Elements CLI:

  1. パッケージマネージャ (npm, pnpm, yarn, or bun) を自動検出します。

  2. https://elements.ai-sdk.dev/api/registry/registry.json からコンポーネント・レジストリを取得します。

  3. 内部的には shadcn/ui CLI を使用してコンポーネントをインストールします。

  4. 依存関係を追加して既存の shadcn/ui セットアップと統合します。

コンポーネントは構成設定された shadcn/ui components ディレクトリ (通常は @/components/ai-elements/) にインストールされ、コードベースの一部となり、完全なカスタマイズを可能にします。

 

Configuration

AI Elements は既存の shadcn/ui 設定を使用します。コンポーネントは components.json ファイルで指定されたディレクトリにインストールされます。

 

推奨セットアップ

ベストなエクスペリエンスのために、以下を勧めます :

  • AI Gateway: Vercel AI Gateway をセットアップし、AI_GATEWAY_API_KEY を .env.local に追加します。

  • CSS 変数: テーマ設定のために shadcn/ui の CSS 変数モードを使用してください。

  • TypeScript: より良い開発エクスペリエンスのために TypeScript を有効にしてください。

 

以上