プロジェクトで AI Elements をセットアップする手順を、そしてアプリケーションで AI Elements コンポーネントを使用する方法を学習します。

AI Elements : セットアップ, 使用方法, スキル

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

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

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

AI Elements : セットアップ, 使用方法, スキル

セットアップ

AI Elements をプロジェクトにインストールして実行します。このガイドはプロジェクトで AI Elements をセットアップする手順を説明します。

前提条件

AI Elements をインストールする前に、環境がこれらの要件を満たしていることを確実にしてください :

Node.js 18 or later
React 19
Next.js 14+ (App Router 推奨)
AI SDK がインストール及び構成設定されている
プロジェクトで shadcn/ui が初期化されている
Tailwind CSS 4

ℹ️ If you don’t have shadcn/ui installed, running any AI Elements install command will automatically set it up for you.

AI Gateway (推奨)

モデルアクセスには AI Gateway の使用を勧めます、複数のモデルプロバイダーに対する単一の API キー、組み込みのフォールバックサポート、統一課金, 等を提供するためです。

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

AI Elements CLI を使用してコンポーネントを追加します :

npx ai-elements@latest add message

pnpm dlx ai-elements@latest add message

Or use the shadcn CLI:

npx shadcn@latest add @ai-elements/message

pnpm dlx shadcn@latest add @ai-elements/message

コンポーネントはデフォルトで @/components/ai-elements/ に追加されます。

インストールの検証

コンポーネントをインストールしたら、動作することを検証します :

components ディレクトリにコンポーネントファイルが存在していることを確認します。

page にインポートして使用します :

app/page.tsx

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

export default function Page() {
  return (
    <Message from="assistant">
      <MessageContent>
        <MessageResponse>Hello, world!</MessageResponse>
      </MessageContent>
    </Message>
  );
}

開発サーバを実行して、コンポーネントがレンダリングされることを確認します。

使用方法

アプリケーションで AI Elements コンポーネントを使用する方法を学習します。

AI Elements コンポーネントをインストールしたら、他の React コンポーネントのようにアプリケーションでインポートして使用できます。コンポーネントは (ライブラリで隠されずに) コードベースの一部として追加されますので、使用感は非常に自然です。

例

AI Elements コンポーネントをインストール後、他の React コンポーネントのようにアプリケーションでそれらを使用できます。例えば :

conversation.tsx

"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 SDK との統合例

app/page.tsx

'use client';

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

export default function Chat() {
  const [input, setInput] = useState('');
  const { messages, sendMessage } = useChat();
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {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>
      ))}

      <form
        onSubmit={e => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput('');
        }}
      >
        <input
          className="fixed dark:bg-zinc-900 bottom-0 w-full max-w-md p-2 mb-8 border border-zinc-300 dark:border-zinc-800 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={e => setInput(e.currentTarget.value)}
        />
      </form>
    </div>
  );
}

拡張性

すべての AI Elements コンポーネントは可能な限り多くのプリミティブ属性を持ちます。例えば、Message コンポーネントは HTMLAttributes<HTMLDivElement> を拡張していますので、div がサポートする任意の props を渡すことができます。これはコンポーネントを独自のスタイルや機能で拡張することを容易にします。

カスタマイズ

インストール後、追加のセットアップは必要ありません。コンポーネントのスタイル (Tailwind CSS クラス) は既に統合されています。アプリケーションのコンポーネントの操作をすぐに開始できます。

例えば、Message の角丸を削除したい場合は、components/ai-elements/message.tsx に移動して以下のように rounded-lg を削除できます :

components/ai-elements/message.tsx

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

スキル

AI コーディングエージェントを AI Elements に関する知識で強化します、具体的には AI コーディングエージェントに AI Elements の使用方法の手続き的な知識を提供するスキルを保守しています。

スキルは AI コーディングエージェントを強化する精選された知識パッケージです。スキルをインストールすると、エージェントは特定のライブラリ、パターンやベストプラクティスに関するコンテキストを取得しますので、より効果的に支援できるようになります。

AI Elements スキルは以下のようにインストールします :

npx skills add vercel/ai-elements

# pnpm dlx skills add vercel/ai-elements

インストールすれば、エージェントは以下を理解できるようになります :

AI Elements コンポーネントのインストール方法と使用方法
構成可能なコンポーネントパターン
AI SDK 統合の慣例
shadcn/ui のテーマ設定とスタイリング
よくある問題のトラブルシューティング

以上

月	火	水	木	金	土	日
						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