mcpField
U
useVyre Context

useVyre Context

ローカル
usevyre.com開発ツール712 週間前に更新

useVyre Context について

useVyre Contextは、useVyreコンポーネントを扱う開発者やAIコーディングツール向けのMCPサーバーです。コード生成の参考として、コンポーネントのプロパティ、バリアント、デザイントークン、例、アンチパターンを提供します。

主な機能

  1. 01コンポーネント情報と例の取得
  2. 02有効なプロパティと値の一覧
  3. 03プロパティ値の検証
  4. 04用途に合うコンポーネントの提案
  5. 05デザイントークンとアンチパターンの検索

活用シーン

  1. 01Buttonの有効なバリアントの確認
  2. 02実装前のプロパティ値の検証
  3. 03UI要件に合うコンポーネントの選択
  4. 04デザイントークンと既知の問題の確認

MCP 対応

このサーバーは、Claude Desktopや他のMCPクライアントにuseVyreのコンポーネント情報と検証ツールを提供します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"gapra-usevyre-context": {
"command": "npx",
"args": [
"-y",
"@usevyre/mcp-server"
]
}
}
}
起動コマンドnpx -y @usevyre/mcp-server

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@usevyre/mcp-server1.0.3

ツール

8

掲載時のツール一覧 · 2 週間前に更新

パラメーター型必須説明
componentstringはいコンポーネント名(例:'Button'、'Badge'、'Card')

詳細

@usevyre/mcp-server

useVyre 用の MCP(Model Context Protocol)サーバーです。Claude Desktop やその他の MCP クライアントから、コンポーネントのコンテキスト、有効なプロパティ、アンチパターンにリアルタイムでアクセスできます。

npm MIT License

セットアップ — 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_contextAI コンテキストブロック全体(すべてのコンポーネントとトークン)
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" })

ドキュメント

usevyre.com/docs/ai-tooling/mcp-server

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。