Vextra MCP

🚀 Vextra MCP Server

Model Context Protocol (MCP)に基づくサーバーで、Vextra、Figma、Sketch、SVGのデザインファイルを処理および解析します。

🚀 クイックスタート

Vextra MCP Serverは強力なデザインファイル処理ツールで、AIアシスタント（Cursorなど）にMCPプロトコルを通じてデザインファイルにアクセスし操作する機能を提供します。Vextra、Figma、Sketch、SVGなどの複数のデザインファイル形式をサポートしています。

依存関係のインストール

npm install

開発モード

npm run dev

本番バージョンのビルド

npm run build
npm start

✨ 主な機能

• 🎨 複数フォーマット対応：.vext、.sketch、.fig、.svgファイル形式をサポート
• 📊 レイアウト情報抽出：デザインファイルから詳細なレイアウトと構造情報を取得
• 🖼️ 画像レンダリング：デザインノードを画像としてレンダリング
• 📋 ページ情報クエリ：ページ構造とメタデータを取得
• 🔄 リアルタイム通信：SSE（Server-Sent Events）とHTTP通信をサポート
• 🌐 Cursorとの統合：Cursor AIアシスタントとシームレスに統合

📦 インストール

1. Cursorの設定

Cursorに以下のMCP設定を追加します。

{
  "Vextra MCP": {
    "url": "http://localhost:8080/sse",
    "messageUrl": "http://localhost:8080/messages",
    "type": "sse",
    "headers": {
      "Accept": "text/event-stream",
      "Cache-Control": "no-cache"
    }
  }
}

2. サーバー設定

サーバーはデフォルトでhttp://localhost:8080で起動し、以下のエンドポイントをサポートします。

• GET /sse - SSE接続エンドポイント
• POST /messages - HTTPメッセージエンドポイント

📚 ドキュメント

APIツール

1. Vextraデータの取得

デザインファイルからレイアウト情報と構造データを取得します。

パラメーター:

• filePath (必須): ローカルファイルパス
• pageId (オプション): ページID
• nodeId (オプション): ノードID
• depth (オプション): トラバーサル深度制限

例:

完全なファイル情報を取得
/path/to/file.sketch

特定のページを取得
/path/to/file.sketch/pageId

特定のノードを取得
/path/to/file.sketch/pageId/nodeId

2. Vextra画像の取得

デザインノードを画像としてレンダリングします。

パラメーター:

• filePath (必須): ローカルファイルパス
• pageId (必須): ページID
• nodeIds (必須): ノードIDの配列
• format (オプション): 画像形式 (png, jpg, svg)
• scale (オプション): スケール比率

3. Vextraページ情報の取得

ファイルからページ構造とメタデータを取得します。

パラメーター:

• filePath (必須): ローカルファイルパス

返り値:

• ページIDと名前
• ノード数統計
• ページ構造の概要

💻 使用例

基本的な使用法

Cursorでは以下のように使用できます。

デザインファイルを解析
/path/to/file.sketch

特定のページ情報を取得
/path/to/file.sketch/pageId

ページからすべての画像を抽出
/path/to/file.sketchの最初のページからすべての画像を抽出

高度な使用法

大きなファイルを解析する際に深度を制限
/path/to/large-file.sketchから2層の深度制限でレイアウト情報を取得

バッチ処理
/path/to/design.figのすべてのページのサムネイルを取得

🔧 技術詳細

プロジェクト構造

src/
├── data/           # データ処理モジュール
│   ├── export/     # データエクスポート関連
│   ├── source/     # データソース処理
│   └── vextra.ts   # Vextraサービスのコア
├── mcp/            # MCPツールの実装
│   ├── get_vextra_data.ts
│   ├── get_vextra_images.ts
│   └── get_vextra_pagesinfo.ts
├── middlewares/    # ミドルウェア
└── server.ts       # サーバーエントリーポイント

技術スタック

• Node.js + TypeScript - コアランタイム環境
• Express.js - Webサーバーフレームワーク
• @modelcontextprotocol/sdk - MCPプロトコルサポート
• @kcaitech/vextra-core - Vextraコアライブラリ
• skia-canvas - 画像レンダリングエンジン
• Rollup - ビルドツール

開発ガイド

環境要件

• Node.js >= 16.0.0
• npm >= 8.0.0

開発スクリプト

npm run dev       # 開発モード
npm run build     # 本番バージョンのビルド
npm start         # 本番サーバーの起動

📄 ライセンス

このプロジェクトはAGPL - 3.0ライセンスの下でライセンスされています。詳細はLICENSEファイルを参照してください。

作者

KCai Technology

関連リンク

• Vextra公式ウェブサイト
• Model Context Protocol
• Cursor AI

ご質問やご提案がある場合は、GitHub Issuesを通じてお問い合わせください。