Astryx ドキュメント MCP サーバー & AI エージェントスキル

Meta Astryx Design System 向けの包括的な Model Context Protocol (MCP) サーバーおよび AI エージェントスキルです。このプロジェクトは、スクレイピングされたドキュメント、コンポーネント仕様、StyleX ガイド、CLI リファレンスをインデックス化し、AI アシスタントやコーディングエージェント（Claude Desktop、Cursor、Project IDX、Gemini CLI、Antigravity、Windsurf）向けに構造化されたツールとプロンプトガイドラインを公開します。

🚀 機能と MCP ツール

MCP サーバーは、stdio 上で4つのツールを公開します：

1. search_astryx_docs

   • 説明: Astryx のすべてのドキュメント、ガイド、コンポーネント API にわたる全文検索およびキーワード検索。

   • パラメータ: query: string（例：'Button'、'defineTheme'、'StyleX'、'asChild'）。

2. get_astryx_component

   • 説明: 特定のコンポーネントの使用ガイドライン、プロップインターフェース、インポート、コード例を取得します。

   • パラメータ: componentName: string（例：'Button'、'AppShell'、'Table'、'Avatar'、'Dialog'、'Input'）。

3. get_theme_guide

   • 説明: 6つの組み込みテーマ（Neutral、Butter、Stone、Gothic、Y2K、Matcha）、CSS 変数デザイントークン、および defineTheme によるカスタムテーマ定義に関する情報を取得します。

   • パラメータ: themeName?: string（例：'butter'、'neutral'、'defineTheme'）。

4. get_cli_commands

   • 説明: @astryxdesign/cli とコマンド（init、doctor、template、manifest、theme build、swizzle）のドキュメント。

   • パラメータ: command?: string（例：'init'、'doctor'、'template'、'manifest'、'theme build'、'swizzle'）。

🤖 Astryx エージェントスキル（astryx-skill）

astryx-skill/SKILL.md に配置されたこのスキルは、信頼できるコーディングパターンとルールを提供します：

• サブパスインポート: import { Button } from '@astryxdesign/core/Button';

• カスケードレイヤー: @layer astryx-base の下で @import '@astryxdesign/core/astryx.css'; を強制します。

• StyleX オーバーライド: 任意のインラインスタイルの代わりに、xstyle プロップを介して StyleX を使用します。

• テーマプロバイダー: 標準化された <Theme mode="system" theme={neutralTheme}> の適用構造。

🌐 インタラクティブな紹介ウェブサイト

index.html にインタラクティブなプレゼンテーションウェブサイトが含まれており、次の機能を備えています：

• ライブテーマエクスプローラー: 6つの Astryx デザインテーマ（Neutral、Butter、Stone、Gothic、Y2K、Matcha）をテストできます。

• コンポーネントプレイグラウンド: リアルタイムの TSX コード生成を備えたインタラクティブなプロップコントロール。

• MCP サーバー Stdio シミュレーター: インタラクティブな検索ツールのテストランナー。

• ワンクリック公開マトリックス: GitHub Pages、Vercel、Netlify、Cloudflare Pages の簡単なセットアップ。

🛠️ はじめに

前提条件

• Node.js >= 18.0.0

• npm / pnpm / yarn

インストール

git clone https://github.com/georgemathunjaga/astryx-mcp-and-skill.git
cd astryx-mcp-and-skill
npm install

ビルドと実行

# Build TypeScript and bundle crawl data to dist/
npm run build

# Start the MCP server using node (stdio)
npm start

# Run in development mode with live TypeScript compilation
npm run dev

# Run automated integration tests
npm test

🔌 AI IDE およびクライアントへの接続

1. Claude Desktop

claude_desktop_config.json に以下を追加します：

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "astryx-docs": {
      "command": "node",
      "args": ["E:/workspace/public-repos/astryx-mcp/dist/index.js"]
    }
  }
}

2. Google Project IDX / Gemini CLI / Cursor

プロジェクトの .cursor/mcp.json または mcp.json に追加します：

{
  "mcpServers": {
    "astryx-docs": {
      "command": "node",
      "args": ["E:/workspace/public-repos/astryx-mcp/dist/index.js"]
    }
  }
}

📂 プロジェクト構造

astryx-mcp/
├── astryx-skill/             # Astryx Agent Skill instructions
│   ├── SKILL.md
│   └── astryx-skill.md
├── index.html                # Interactive Intro Website
├── styles.css                # Master CSS Design System
├── app.js                    # Interactive Website Logic & MCP Simulator
├── dist/                     # Compiled JavaScript output & assets
│   ├── index.js
│   └── data/
│       └── astryx_crawl.json
├── src/
│   ├── data/
│   │   └── astryx_crawl.json # Crawled Astryx documentation dataset
│   └── index.ts              # MCP Server definition and tool handlers
├── test/
│   └── mcp-test.js           # MCP Stdio verification suite
├── package.json
├── tsconfig.json
└── README.md

📄 ライセンス

MIT