useVyre Context について
useVyre Contextは、useVyreコンポーネントを扱う開発者やAIコーディングツール向けのMCPサーバーです。コード生成の参考として、コンポーネントのプロパティ、バリアント、デザイントークン、例、アンチパターンを提供します。
主な機能
- 01コンポーネント情報と例の取得
- 02有効なプロパティと値の一覧
- 03プロパティ値の検証
- 04用途に合うコンポーネントの提案
- 05デザイントークンとアンチパターンの検索
活用シーン
- 01Buttonの有効なバリアントの確認
- 02実装前のプロパティ値の検証
- 03UI要件に合うコンポーネントの選択
- 04デザイントークンと既知の問題の確認
MCP 対応
このサーバーは、Claude Desktopや他のMCPクライアントにuseVyreのコンポーネント情報と検証ツールを提供します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
8掲載時のツール一覧 · 2 週間前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| component | string | はい | コンポーネント名(例:'Button'、'Badge'、'Card') |
詳細
@usevyre/mcp-server
useVyre 用の MCP(Model Context Protocol)サーバーです。Claude Desktop やその他の MCP クライアントから、コンポーネントのコンテキスト、有効なプロパティ、アンチパターンにリアルタイムでアクセスできます。
セットアップ — Claude Desktop
~/Library/Application Support/Claude/claude_desktop_config.json に追加します。
{
"mcpServers": {
"usevyre": {
"command": "npx",
"args": ["-y", "@usevyre/mcp-server"]
}
}
}
Claude Desktop を再起動します。useVyre のツールがツールパネルに表示されます。
利用可能なツール
| ツール | 説明 |
|---|---|
get_component_info | コンポーネントの完全なコンテキスト — プロパティ、バリエーション、アンチパターン、例 |
get_valid_props | コンポーネントで有効なプロパティ名と値の一覧 |
check_valid_prop_value | コードを生成する前に、指定したプロパティ値を検証します |
suggest_component | 用途に合ったコンポーネントを探します |
get_token_info | 名前またはカテゴリからデザイントークンを検索します |
get_full_context | AI コンテキストブロック全体(すべてのコンポーネントとトークン) |
get_anti_patterns | 既知のハルシネーションパターンをすべて取得します。コンポーネントで絞り込むこともできます |
get_version_info | パッケージのバージョンとコンテキストの有効性に関する情報 |
プロンプトの例
"What are the valid variants for the Button component?"
→ get_valid_props({ component: "Button" })
"Is variant='error' valid on Alert?"
→ check_valid_prop_value({ component: "Alert", prop: "variant", value: "error" })
"What component should I use for a search box?"
→ suggest_component({ useCase: "search box with keyboard navigation" })
ドキュメント
コメント
Markdown 対応
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。