agent-elements

Agent Elements スキル

Agent Elements でチャット UI とエージェント UI を構築するための、プロジェクトに対応したコンテキストです。 https://agent-elements.21st.dev にある、オープンソースの shadcn レジストリです。

このスキルでできること

このスキルを読み込むと、次のことが分かります。

1. このレジストリは shadcn 互換です。 各コンポーネントは npx shadcn@latest add https://agent-elements.21st.dev/r/<component>.json でインストールします。ファイルは components/agent-elements/ に配置されます（ライブラリ内部の components/ プレフィックスは取り除かれます。詳しくは「パス」を参照してください）。
2. API は Vercel AI SDK を中心に型定義されています。 メッセージは ai の UIMessage[]、ステータスは ChatStatus です。useChat() を そのまま接続できます。
3. コンポーネントカタログ全体と、API の形式および組み合わせルール（以下の各セクションを参照してください）。
4. テーマ設定上の注意点 — Agent Elements が依存する Tailwind トークンです。

検出

次のいずれかに当てはまる場合、このプロジェクトは「Agent Elements 対応」と見なしてください。

• components/agent-elements/ がディスク上に存在する
• components.json に Agent Elements へのエイリアスまたはレジストリ参照が含まれている
• package.json の依存関係に ai と @tabler/icons-react が含まれており、ユーザーが Agent Elements に言及している

フォルダーがまだ存在しない場合は、必要に応じて次のコマンドでインストールしてください。

npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json

agent-chat は registryDependencies を介して、必要な他のすべてのコンポーネント（MessageList、InputBar、ツールレンダラー、共有ユーティリティ）を間接的に取り込みます。

パス（インストール後の配置）

shadcn add の実行後、ファイルは次の構成で @/components/agent-elements/ に配置されます。

components/agent-elements/
  agent-chat.tsx
  message-list.tsx
  input-bar.tsx
  markdown.tsx
  user-message.tsx
  error-message.tsx
  text-shimmer.tsx
  spiral-loader.tsx
  input/
    attachment-button.tsx
    send-button.tsx
    file-attachment.tsx
    suggestions.tsx
    model-picker.tsx
    mode-selector.tsx
  tools/
    bash-tool.tsx
    edit-tool.tsx
    search-tool.tsx
    todo-tool.tsx
    plan-tool.tsx
    tool-group.tsx
    subagent-tool.tsx
    mcp-tool.tsx
    thinking-tool.tsx
    generic-tool.tsx
  question/
    question-tool.tsx
  hooks/use-tool-complete.ts
  utils/cn.ts
  types.ts

インポートのルール： 必ず正確なファイルからインポートし、バレルからインポートしないでください。

// ✅
import { AgentChat } from "@/components/agent-elements/agent-chat";
import { BashTool } from "@/components/agent-elements/tools/bash-tool";

// ❌ — no barrel exists
import { AgentChat } from "@/components/agent-elements";

コンポーネントカタログ

チャット領域

• AgentChat — チャット全体を包むシェルです。MessageList と InputBar を描画し、toolRenderers でツール呼び出しを処理します。また、任意の suggestions を含む空状態を表示します。Props：messages、status、onSend、onStop、toolRenderers?、suggestions?、attachments?、classNames?、slots?。
• MessageList — 会話履歴のみを表示します。入力バーを別の場所に配置する場合に使用してください。toolRenderers と showCopyToolbar を受け取ります。
• UserMessage / ErrorMessage / Markdown — 低レベルのメッセージ要素です。 Markdown は安全にストリーミング表示します（外部リンクにはデフォルトで rel="noreferrer" が設定されます）。

入力

• InputBar — メッセージ入力欄です。Props：status、onSend({ content })、onStop、 value? と onChange?（制御モード）、削除ハンドラー付きの attachedImages／attachedFiles、leftActions／rightActions スロット、suggestions?、questionBar?、infoBar?。
• Suggestions — 空状態またはインライン表示用のクイックプロンプトチップです。
• ModelPicker / ModeSelector — leftActions に組み込むことを想定して設計されています。どちらもシンプルな { id, name, version? } ／ { id, label, icon?, description? } 形式を受け取ります。CLAUDE_MODELS はインポートしないでください。これは削除済みです。独自の配列を指定してください。
• SendButton / AttachmentButton / FileAttachment — カスタムの入力欄を構築する場合は、単体でも使用できます。

ツールカード

すべてのツールカードは、AI SDK の Extract<UIMessage["parts"][number], { type: \tool-` }>型のpart プロパティを受け取ります。AgentChat／MessageListのtoolRenderers` で登録します。

<AgentChat
  toolRenderers={{
    Bash: BashTool,
    Edit: EditTool,
    Write: EditTool,      // Write reuses EditTool
    Search: SearchTool,
    WebSearch: SearchTool,
    TodoWrite: TodoTool,
    PlanWrite: PlanTool,
    Task: SubagentTool,
    Thinking: ThinkingTool,
  }}
/>

利用可能なカード：

• BashTool — コマンドと標準出力を表示します。折りたたみ可能です。
• EditTool — 差分カードです。input.old_string／input.new_string または output.structuredPatch をサポートし、input.approval による承認フッターも表示できます。
• SearchTool — 検索結果をグループ化して表示します。results を渡すか、output.results を使用します。
• TodoTool — input.todos と output.oldTodos の差分を表示する ToDo リストです。
• PlanTool — 承認／却下フッター付きで、プランのタイトルと概要を表示します。
• ToolGroup — 連続するツール呼び出しを 1 行にまとめます。
• SubagentTool — ネストされたツールを含むサブエージェントのタスクです。
• McpTool — 汎用 MCP ツールの出力です。mcpInfo を取得するには、 @/components/agent-elements/tools/tool-registry の parseMcpToolType を使用します。
• ThinkingTool — 折りたたみ可能な推論行です。
• GenericTool — 未知のツール用のフォールバックです。
• QuestionTool — 単一選択／複数選択／テキスト回答に対応する確認質問です。

ストリーミング状態

• TextShimmer — きらめくステータスラベルです。
• SpiralLoader — Lottie のスパイラルです。数秒かかる読み込み状態に使用します。

構成パターン

ツール表示を備えたフルチャット（最も一般的）

"use client";

import { AgentChat } from "@/components/agent-elements/agent-chat";
import { BashTool } from "@/components/agent-elements/tools/bash-tool";
import { EditTool } from "@/components/agent-elements/tools/edit-tool";
import { SearchTool } from "@/components/agent-elements/tools/search-tool";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, status, sendMessage, stop } = useChat();
  return (
    <AgentChat
      messages={messages}
      status={status}
      onSend={({ content }) => sendMessage({ text: content })}
      onStop={stop}
      toolRenderers={{
        Bash: BashTool,
        Edit: EditTool,
        Write: EditTool,
        Search: SearchTool,
      }}
    />
  );
}

モードとモデルのピッカーを備えた入力欄

import { InputBar } from "@/components/agent-elements/input-bar";
import { ModeSelector } from "@/components/agent-elements/input/mode-selector";
import { ModelPicker } from "@/components/agent-elements/input/model-picker";
import { IconBulb, IconCursor } from "@tabler/icons-react";

const modes = [
  { id: "agent", label: "Agent", icon: IconCursor },
  { id: "plan", label: "Plan", icon: IconBulb },
];
const models = [
  { id: "sonnet", name: "Sonnet", version: "4.6" },
  { id: "opus", name: "Opus", version: "4.7" },
];

<InputBar
  status="ready"
  onSend={handleSend}
  onStop={handleStop}
  leftActions={
    <>
      <ModeSelector modes={modes} defaultValue="agent" />
      <ModelPicker models={models} defaultValue="sonnet" />
    </>
  }
/>

カスタムツールレンダラー

toolRenderers の値は、{ part, chatStatus } を受け取る React コンポーネントです。任意の UI を返せます。フォールバック用の枠として GenericTool を再利用してください。

テーマ設定

Agent Elements は以下の Tailwind CSS 変数（shadcn スタイル）を読み取ります。利用側のテーマから削除したり、名前を変更したりしないでください。

• --an-foreground、--an-background、--an-primary-color
• 標準の shadcn トークン：--background、--foreground、--border、 --muted、--muted-foreground、--accent、--primary など。

コンポーネントをカスタマイズするには、インストールしたファイルを編集するだけです。ラップするよりも、その方法をおすすめします。コードはすでにあなたのものです。

Agent Elements を使用しないほうがよい場合

• assistant-ui、ai-elements、copilotkit、または別のキットを使用しているプロジェクト — 混在させないでください。
• ツール呼び出しやプランを一切表示しないチャット UI — InputBar と独自のメッセージ表示だけで十分な場合があります。その場合は AgentChat を省略してください。
• React < 19 または Tailwind < v4 — コンポーネントはどちらにも依存します。

よくある質問への簡単な回答

• 「このプロジェクトに Agent Elements を追加する」 → components.json がない場合は npx shadcn@latest init を実行し、その後 npx shadcn@latest add https://agent-elements.21st.dev/r/agent-chat.json を実行します。
• 「デフォルトの SendButton の見た目を変更する」 → components/agent-elements/input/send-button.tsx を直接編集します。トークンは --an-* CSS 変数にあります。
• 「カスタムツールを表示する」 → toolRenderers でそのタイプを割り当てます。未知のツールには GenericTool をフォールバックとして使用します。
• 「useChat と併用する」 → messages と status をそのまま渡し、 sendMessage／stop を onSend({ content })／onStop に変換します。

レジストリの参照先

• インデックス：https://agent-elements.21st.dev/r/index.json
• コンポーネントごと：https://agent-elements.21st.dev/r/<id>.json
• すべてのドキュメントをまとめたファイル： https://agent-elements.21st.dev/llms-full.txt