mcpField
A
ai-elements

ai-elements

github.com/crafter-stationデザイン・UI52653 回インストール11 週間前に更新
リポジトリ

ai-elements について

Vercel AI SDKのパターンに沿ったAI UIコンポーネント集で、チャット、エージェント、デバッグ画面を作る開発者向けです。チャット、エージェント、マルチエージェント、開発ツールに分類され、shadcnコマンドで追加できます。

主な機能

  1. 01チャット UI コンポーネント
  2. 02ツール呼び出し、推論、計画の表示
  3. 03マルチエージェントの協調状況の表示
  4. 04リクエストとストリームのデバッグ機能
  5. 05shadcnコマンドによるコンポーネント追加

活用シーン

  1. 01アプリにAIチャット画面を構築
  2. 02エージェントのツール呼び出しと実行計画を表示
  3. 03マルチエージェントの状態ダッシュボードを作成
  4. 04リクエスト、プロンプト、ストリーム応答を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/crafter-station/elements --skill ai-elements

インストール後、Claude Code で/ai-elementsを入力して読み込まれたか確認します。

詳細

AI Elements

4つのサブカテゴリにわたる35個のAI UIコンポーネントです。Vercel AI SDKのパターン向けに構築されています。

インストール方法

npx shadcn@latest add @elements/ai-{name}

チャット（11個のコンポーネント）

会話型UIのプリミティブです。

コンポーネントインストール
チャット（フル）@elements/ai-chat
チャット入力@elements/ai-chat-input
メッセージバブル@elements/ai-message-bubble
メッセージ@elements/ai-messages
モデルセレクター@elements/ai-model-selector
レスポンスアクション@elements/ai-response-actions
ストリーミングテキスト@elements/ai-streaming-text
提案アクション@elements/ai-suggested-actions
温度スライダー@elements/ai-temperature-slider
思考インジケーター@elements/ai-thinking-indicator
トークンカウンター@elements/ai-token-counter

エージェント型（8個のコンポーネント）

ツールの使用、推論、計画のためのUIです。

コンポーネントインストール
アーティファクト@elements/ai-artifact
思考の連鎖@elements/ai-chain-of-thought
確認@elements/ai-confirmation
計画@elements/ai-plan
推論@elements/ai-reasoning
ソース@elements/ai-sources
タスクリスト@elements/ai-task-list
ツール呼び出し@elements/ai-tool-call

マルチエージェント（8個のコンポーネント）

エージェントのオーケストレーションとモニタリング向けです。

コンポーネントインストール
エージェントコンテキスト@elements/ai-agent-context
エージェント一覧@elements/ai-agent-roster
エージェントのステータス@elements/ai-agent-status
ガードレール@elements/ai-guardrails
引き継ぎチェーン@elements/ai-handoff-chain
メモリービューアー@elements/ai-memory-viewer
パイプライン@elements/ai-pipeline
ルーティングインジケーター@elements/ai-routing-indicator

開発者ツール（8個のコンポーネント）

AIのデバッグと検査向けです。

コンポーネントインストール
会話ツリー@elements/ai-conversation-tree
レイテンシーメーター@elements/ai-latency-meter
モデル情報@elements/ai-model-info
プロンプト差分@elements/ai-prompt-diff
リクエストインスペクター@elements/ai-request-inspector
ストリームデバッガー@elements/ai-stream-debugger
トークンビューアー@elements/ai-token-viewer
ツールインスペクター@elements/ai-tool-inspector

クイックパターン

# Chat interface
npx shadcn@latest add @elements/ai-chat @elements/ai-chat-input @elements/ai-message-bubble @elements/ai-messages @elements/ai-streaming-text

# Agentic UI
npx shadcn@latest add @elements/ai-tool-call @elements/ai-reasoning @elements/ai-plan @elements/ai-confirmation

# Multi-agent dashboard
npx shadcn@latest add @elements/ai-agent-roster @elements/ai-agent-status @elements/ai-pipeline @elements/ai-handoff-chain

# AI debugging
npx shadcn@latest add @elements/ai-request-inspector @elements/ai-stream-debugger @elements/ai-token-viewer

探す

https://tryelements.dev/docs/ai-elements をご覧ください。

コンポーネントが見つかりませんか？

事前入力済みのGitHub issueを作成します：

https://github.com/crafter-station/elements/issues/new?title=[Component%20Request]%20Add%20AI%20{Name}&labels=enhancement,ai-elements

コメント

Markdown 対応