ai-elements

AI Elements

AI Elementsは、shadcn/uiを基盤に構築されたコンポーネントライブラリおよびカスタムレジストリで、AIネイティブアプリケーションをより速く構築できるよう支援します。会話、メッセージなどの事前構築済みコンポーネントを提供します。

AI Elementsのインストールは簡単で、いくつかの方法があります。最速でセットアップするには専用のCLIコマンドを使用できます。また、すでにshadcnのワークフローを採用している場合は、標準のshadcn/ui CLIを通じて統合できます。

IMPORTANT: すべてのCLIコマンドは、プロジェクトのパッケージランナーを使って実行してください。npx ai-elements@latest、pnpm dlx ai-elements@latest、またはbunx --bun ai-elements@latestのいずれかを、プロジェクトのpackageManagerに基づいて選択します。以下の例ではnpx ai-elements@latestを使用していますが、プロジェクトに適したランナーに置き換えてください。

前提条件

AI Elementsをインストールする前に、環境が以下の要件を満たしていることを確認してください。

• Node.js、バージョン18以降
• AI SDKがインストールされたNext.jsプロジェクト。
• プロジェクトにインストール済みのshadcn/ui。まだインストールしていない場合は、インストールコマンドを実行すると自動的にインストールされます。
• AI Gatewayの使用と、env.localへのAI_GATEWAY_API_KEYの追加も強くおすすめします。これにより、各プロバイダーのAPIキーを個別に使用する必要がなくなります。AI Gatewayでは、モデルを試せるように月あたり5ドル分の利用枠も提供されます。APIキーはこちらから取得できます。

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

AI Elements CLIまたはshadcn/ui CLIを使用して、AI Elementsのコンポーネントをインストールできます。どちらを使っても、選択したコンポーネントのコードと必要な依存関係がプロジェクトに追加されます。

CLIはコンポーネントのコードをダウンロードし、プロジェクトのディレクトリ（通常はcomponentsフォルダー）に統合します。デフォルトでは、AI Elementsのコンポーネントは@/components/ai-elements/ディレクトリ（またはshadcnのコンポーネント設定で指定したフォルダー）に追加されます。

コマンドの実行後、ファイルが追加されたことを示す確認メッセージがターミナルに表示されます。その後、コード内でコンポーネントを使用できます。

使用方法

AI Elementsのコンポーネントをインストールしたら、ほかのReactコンポーネントと同じようにインポートして、アプリケーションで使用できます。コンポーネントはライブラリに隠されるのではなく、コードベースの一部として追加されるため、自然な感覚で使用できます。

例

AI Elementsのコンポーネントをインストールした後は、ほかのReactコンポーネントと同じようにアプリケーションで使用できます。たとえば、次のようにします。

"use client";

import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import { useChat } from "@ai-sdk/react";

const Example = () => {
  const { messages } = useChat();

  return (
    <>
      {messages.map(({ role, parts }, index) => (
        <Message from={role} key={index}>
          <MessageContent>
            {parts.map((part, i) => {
              switch (part.type) {
                case "text":
                  return (
                    <MessageResponse key={`${role}-${i}`}>
                      {part.text}
                    </MessageResponse>
                  );
              }
            })}
          </MessageContent>
        </Message>
      ))}
    </>
  );
};

export default Example;

上の例では、AI ElementsディレクトリからMessageコンポーネントをインポートし、JSXに含めています。次に、MessageContentおよびMessageResponseサブコンポーネントと組み合わせています。コードはプロジェクト内にあるため、自分で記述した場合と同じようにコンポーネントのスタイルや設定を変更できます。コンポーネントのファイルを開いて動作を確認したり、独自に変更したりすることもできます。

拡張性

AI Elementsの各コンポーネントは、可能な限り多くのプリミティブ属性を受け取ります。たとえば、MessageコンポーネントはHTMLAttributes<HTMLDivElement>を拡張しているため、divがサポートするあらゆるpropsを渡せます。これにより、独自のスタイルや機能を簡単に追加できます。

カスタマイズ

インストール後、追加のセットアップは不要です。コンポーネントのスタイル（Tailwind CSSクラス）とスクリプトはすでに統合されています。アプリ内ですぐにコンポーネントを操作できます。

たとえば、Messageの角丸をなくしたい場合は、components/ai-elements/message.tsxを開き、次のようにrounded-lgを削除します。

export const MessageContent = ({
  children,
  className,
  ...props
}: MessageContentProps) => (
  <div
    className={cn(
      "flex flex-col gap-2 text-sm text-foreground",
      "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground group-[.is-user]:px-4 group-[.is-user]:py-3",
      className
    )}
    {...props}
  >
    <div className="is-user:dark">{children}</div>
  </div>
);

トラブルシューティング

コンポーネントにスタイルが適用されないのはなぜですか？

プロジェクトが Tailwind 4 で shadcn/ui を正しく使用できるよう設定されていることを確認してください。つまり、Tailwind をインポートし、shadcn/ui のベーススタイルを含む globals.css ファイルが必要です。

AI Elements CLI を実行しましたが、プロジェクトに何も追加されませんでした

次の点を確認してください。

• 現在の作業ディレクトリが、プロジェクトのルート（package.json がある場所）であること。
• （shadcn 形式の設定を使用している場合）components.json ファイルが正しく設定されていること。
• AI Elements CLI の最新バージョンを使用していること。

npx ai-elements@latest

それでも解決しない場合は、お気軽に GitHub でイシューを作成してください。

テーマの切り替えが機能せず、アプリがライトモードのままです

アプリが shadcn/ui と AI Elements が想定するものと同じ data-theme システムを使用していることを確認してください。デフォルトの実装では、<html> 要素の data-theme 属性を切り替えます。tailwind.config.js で、それに応じて class または data- セレクターが使用されていることを確認してください。

コンポーネントのインポート時に「module not found」エラーが発生します

ファイルが存在することを確認してください。存在する場合は、tsconfig.json に @/ の適切なパスエイリアスが設定されていることを確認してください。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

AI コーディングアシスタントが AI Elements のコンポーネントにアクセスできません

1. 設定ファイルの構文が有効な JSON であることを確認してください。
2. AI ツールで指定しているファイルパスが正しいことを確認してください。
3. 変更後にコーディングアシスタントを再起動してください。
4. 安定したインターネット接続があることを確認してください。

まだ解決しませんか？

これらの回答で解決しない場合は、GitHub でイシューを作成してください。担当者が喜んでサポートします。

利用可能なコンポーネント

各コンポーネントの詳しいドキュメントについては、references/ フォルダーを参照してください。