Systra Tools

Systra Tools

620 以上の本番環境対応 React + Tailwind セクションと要素を
MCP 経由でコーディングエージェントから検索できます。

---

Systra Tools は、ヒーロー、料金表、ベンチグリッド、ダッシュボード、フッターなど、620 以上の React と Tailwind のセクションおよび要素を収録したライブラリです。このリポジトリは MCP 経由でコーディングエージェントに接続するため、Claude、Cursor、VS Code からライブラリを検索し、セクションを単一の TSX ファイルとしてプロジェクトに追加できます。

各コンポーネントがインポートするのは react、framer-motion、lucide-react のみで、視差効果の軽減設定にも対応しています。6 つのコンポーネントはキーなしで取得できます。https://systra.tools/mcp で Premium キーを取得すると、ライブラリ全体、画像ライブラリ、ページのレシピを利用できます。

インストール

Cursor

上のボタンをクリックするか、cursor.directory からプラグインを追加するか、~/.cursor/mcp.json で手動設定してください。

{
  "mcpServers": {
    "systra-tools": {
      "url": "https://systra.tools/api/mcp",
      "headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }
    }
  }
}

Claude Code

/plugin marketplace add systra-tools/systra-tools-plugin
/plugin install systra-tools@systra

VS Code、Windsurf、その他 MCP に対応するツール

HTTP MCP サーバーを https://systra.tools/api/mcp に接続し、キーを Authorization: Bearer <key> として送信してください。

キー

systra.tools/mcp でキーを作成し、環境変数 SYSTRA_MCP_KEY に設定してください。無料アカウントでは一部のコンポーネントを利用できます。すべての機能を利用するには Premium が必要です。キーをコミットしないでください。

エージェントが利用できる機能

ツール	機能
list_categories	件数付きの 25 カテゴリー
list_components, search_components	意図に合ったセクションを検索
get_component	ソース全体を取得
list_recipes, get_recipe	23 種類のレシピを掲載した、順序付きのページ
list_styles, get_style, get_component_styled	実在ブランドの色とフォントを適用した同じコンポーネント
list_images, search_images	永続 URL 付きの画像
list_posts, get_post	ソーシャル投稿テンプレート

最大カテゴリー：elements（78）、heroes（76）、features（38）、interaktiv（29）、gallery（25）、gsap（22）、stats（22）、trust（19）、dashboard（18）。

このリポジトリの内容

ルール 1 つ、スキル 2 つ、MCP の設定です。プラグインはこれだけで構成されています。コンポーネントライブラリ自体は MCP サーバーの背後にあります。

ライセンス

このリポジトリの設定は MIT ライセンスです。MCP サーバー経由で取得するコンポーネントは別途ライセンスされています。詳細は https://systra.tools/terms をご覧ください。