ReactFrame

reactframe-mcp

ReactFrame 用の MCP（Model Context Protocol）サーバーです。ブラウザーを経由することなく、無料の React + Tailwind CSS + Motion コンポーネント、ブロック、ページのソース全体を検索し、コーディングエージェントに直接取り込めます。

reactframe.com/llms.txt と同じ公開データ、および shadcn の CLI がすでに使用している r/<slug>.json レジストリミラーをラップしています。無料コンポーネントはプロジェクトに直接インストールできます。有料コンポーネントは価格付きで検索結果に表示されますが、ここからソースを取得することはできません。そのため、エージェントはプレースホルダーを残し、代わりに get_quote で価格を見積もります。

このツールでサイトを作成する

エージェントに、たとえば 「ReactFrame のコンポーネントを使って、私のコーヒーショップのランディングページを作成してください」 と頼んでみてください。エージェントはカタログからコンポーネントを選び、無料のものをインストールし、有料のものを配置する箇所に印を付け、最後に、そのデザインで使用する有料コンポーネントと価格、All-Access のほうがお得かどうかをまとめた見積もりを提示します。

ツール

• search_components — 名前／説明／カテゴリー／スラッグを対象にキーワード検索します。category、type（element / block / component / page）、freeOnly の各フィルターを利用できます。有料の検索結果には価格が含まれます。
• get_component — スラッグを指定して、無料コンポーネントのソース全体（ファイル、npm 依存関係、インストールコマンド）を shadcn レジストリ形式で取得します。
• get_rebuild_prompt — 再構築用プロンプトが付属する無料コンポーネントについて、すぐに使える「これをゼロから再構築する」AI プロンプトを取得します。
• list_categories — 各カテゴリーのコンポーネント数／ページ数を一覧表示します。検索対象を絞る前に便利です。
• get_quote — ビルドで使用するすべてのコンポーネントとページの価格を一度の呼び出しで確認できます。無料アイテムのインストールコマンド、有料アイテムの価格、有料アイテムの合計金額、All-Access のほうがお得かどうかが含まれます。

Claude Code に追加する

claude mcp add reactframe -- npx -y reactframe-mcp

Cursor／その他の MCP クライアントに追加する

MCP 設定に追加します（例：~/.cursor/mcp.json）。

{
  "mcpServers": {
    "reactframe": {
      "command": "npx",
      "args": ["-y", "reactframe-mcp"]
    }
  }
}

ローカル開発

npm install
npm run build
REACTFRAME_BASE_URL=http://localhost:3000 npm run test:tools

REACTFRAME_BASE_URL を設定すると、デフォルトの https://reactframe.com を上書きできます。開発中は、メインアプリのローカルな npm run dev に向けてください。npm run test:tools は、実際の MCP SDK クライアントを使ってビルド済みサーバーを stdio 経由で起動し、実際のクライアントと同じ方法ですべてのツールを呼び出します。