AIKit
アトミックデザインの原則に基づいたAIチャット構築のための柔軟なReactコンポーネントライブラリ。
AIKit · 
Atomic Design の原則に基づいて構築された、AI チャット用の UI コンポーネントライブラリです。
説明
@gravity-ui/aikit は、あらゆる複雑さの AI チャットを構築するための、柔軟で拡張性の高い React コンポーネントライブラリです。このライブラリは、そのまま使用することも、ニーズに合わせてカスタマイズすることもできる、すぐに使えるコンポーネントセットを提供します。
主な特徴
- 🎨 Atomic Design — アトムからページまで、明確なコンポーネント階層
- 🔧 SDK 非依存 — 特定の AI SDK に依存しません
- 🎭 2 レベルのアプローチ — すぐに使えるコンポーネント + カスタマイズ用のフック
- 🎨 CSS 変数 — コンポーネントのオーバーライドなしで簡単なテーマ設定
- 📦 TypeScript — 最初から完全な型安全性
- 🔌 拡張可能 — カスタムメッセージタイプの登録システム
プロジェクト構造
src/
├── components/
│ ├── atoms/ # 基本的な分割不可能な UI 要素
│ ├── molecules/ # アトムの簡単なグループ
│ ├── organisms/ # ロジックを持つ複雑なコンポーネント
│ ├── templates/ # 完全なレイアウト
│ └── pages/ # データとの完全な統合
├── hooks/ # 一般的な目的のフック
├── types/ # TypeScript の型
├── utils/ # ユーティリティ
└── themes/ # CSS テーマと変数
インストール
npm install @gravity-ui/aikit
クイックスタート
import { ChatContainer } from '@gravity-ui/aikit';
import type { ChatType, TChatMessage } from '@gravity-ui/aikit';
function App() {
const [messages, setMessages] = useState<TChatMessage[]>([]);
const [chats, setChats] = useState<ChatType[]>([]);
const [activeChat, setActiveChat] = useState<ChatType | null>(null);
return (
<ChatContainer
chats={chats}
activeChat={activeChat}
messages={messages}
onSendMessage={async (data) => {
// 送信ロジックをここに記述
console.log('Message:', data.content);
}}
onSelectChat={setActiveChat}
onCreateChat={() => {
// 新しいチャットを作成
}}
onDeleteChat={(chat) => {
// チャットを削除
}}
/>
);
}
アーキテクチャ
このライブラリは Atomic Design の原則に基づいて構築されています。
🔹 アトム (Atoms)
ビジネスロジックを持たない、基本的な分割不可能な UI 要素です。
ActionButton— ツールチップが統合されたボタンAlert— バリアントを持つアラートメッセージChatDate— 相対日付での日付フォーマットContextIndicator— トークンコンテキストの使用状況インジケーターContextItem— 削除アクション付きのコンテキストラベルDiffStat— コード変更統計の表示Disclaimer— 注意書きテキストコンポーネントInlineCitation— テキストの引用Loader— ローディングインジケーターMarkdownRenderer— Yandex Flavored Markdown レンダラーMessageBalloon— メッセージラッパーShimmer— ローディングアニメーション効果SubmitButton— ステータス付きの送信ボタンToolIndicator— ツール実行ステータスインジケーター
🔸 モレキュール (Molecules)
アトムの簡単な組み合わせです。
BaseMessage— すべてのメッセージタイプの基本ラッパーButtonGroup— 方向サポート付きのボタングループInputContext— コンテキスト管理PromptInputBody— 自動拡張可能なテキストエリアPromptInputFooter— アクションアイコンと送信ボタン付きのフッターPromptInputHeader— コンテキストアイテムとインジケーター付きのヘッダーPromptInputPanel— カスタムコンテンツ用のパネルコンテナSuggestions— クリック可能な提案ボタンTabs— 削除機能付きのナビゲーションタブToolFooter— アクション付きのツールメッセージフッターToolHeader— アイコンとアクション付きのツールメッセージヘッダー
🔶 オーガニズム (Organisms)
内部ロジックを持つ複雑なコンポーネントです。
AssistantMessage— AI アシスタントメッセージHeader— チャットヘッダーMessageList— メッセージリストPromptInput— メッセージ入力フィールドThinkingMessage— AI の思考プロセスToolMessage— ツールの実行UserMessage— ユーザーメッセージ
📄 テンプレート (Templates)
完全なレイアウトです。
ChatContent— メインのチャットコンテンツEmptyContainer— 空の状態History— チャット履歴
📱 ページ (Pages)
完全な統合です。
ChatContainer— 完全に組み立てられたチャット
ドキュメント
テスト
このプロジェクトでは、ビジュアルリグレッションテストのために Playwright Component Testing を使用しています。
テストの実行
重要: すべてのテストは、異なる環境間でのスクリーンショットの一貫性を確保するために、Docker 経由で実行する必要があります。
# Docker ですべてのコンポーネントテストを実行する (推奨)
npm run playwright:docker
# Docker でスクリーンショットのベースラインを更新する
npm run playwright:docker:update
# Docker で grep パターンを使用して特定のテストを実行する
npm run playwright:docker -- --grep "@ComponentName"
# 必要に応じて Docker キャッシュをクリアする
npm run playwright:docker:clear-cache
ローカルテスト (Linux のみ)
Linux を使用している場合は、ローカルでテストを実行できます。
# Playwright ブラウザをインストールする (一度だけ実行)
npm run playwright:install
# すべてのコンポーネントテストを実行する
npm run playwright
# スクリーンショットのベースラインを更新する
npm run playwright:update
詳細なテストドキュメントについては、Playwright ガイドを参照してください。
開発
開発およびコントリビューションに関する手順は、CONTRIBUTING.md で確認できます。
ライセンス
MIT
ライブラリについて
