Vextra MCP

🚀 Vextra MCP Server

A server based on the Model Context Protocol (MCP) for processing and parsing Vextra/Figma/Sketch/SVG design files, enabling AI assistants to access and manipulate design resources.

🚀 Quick Start

Install Dependencies

npm install

Development Mode

npm run dev

Build Production Version

npm run build
npm start

✨ Features

• 🎨 Multi-format Support: Supports .vext, .sketch, .fig, .svg file formats.
• 📊 Layout Information Extraction: Retrieves detailed layout and structure information from design files.
• 🖼️ Image Rendering: Renders design nodes as images.
• 📋 Page Information Query: Retrieves page structure and metadata.
• 🔄 Real-time Communication: Supports SSE (Server-Sent Events) and HTTP communication.
• 🌐 Cursor Integration: Seamlessly integrates with Cursor AI assistant.

📦 Installation

The installation process mainly involves installing dependencies. Follow the steps in the "Quick Start" section:

npm install

💻 Usage Examples

Basic Usage

In Cursor, you can use it like this:

Parse design file
/path/to/file.sketch

Get specific page information
/path/to/file.sketch/pageId

Extract all images from a page
Extract all images from the first page of /path/to/file.sketch

Advanced Usage

Limit depth when analyzing large files
Get layout information from /path/to/large-file.sketch with depth limit of 2 layers

Batch processing
Get thumbnails for all pages in /path/to/design.fig

📚 Documentation

Configuration

1. Configure Cursor

Add the following MCP configuration in Cursor:

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

2. Server Configuration

The server starts by default at http://localhost:8080 and supports the following endpoints:

• GET /sse - SSE connection endpoint
• POST /messages - HTTP message endpoint

API Tools

1. Get Vextra Data

Retrieves layout information and structure data from design files.

Parameters:

• filePath (required): Local file path
• pageId (optional): Page ID
• nodeId (optional): Node ID
• depth (optional): Traversal depth limit

Examples:

Get complete file information
/path/to/file.sketch

Get specific page
/path/to/file.sketch/pageId

Get specific node
/path/to/file.sketch/pageId/nodeId

2. Get Vextra Images

Renders design nodes as images.

Parameters:

• filePath (required): Local file path
• pageId (required): Page ID
• nodeIds (required): Array of node IDs
• format (optional): Image format (png, jpg, svg)
• scale (optional): Scale ratio

3. Get Vextra Pages Info

Retrieves page structure and metadata from files.

Parameters:

• filePath (required): Local file path

Returns:

• Page IDs and names
• Node count statistics
• Page structure overview

🔧 Technical Details

Project Structure

src/
├── data/           # Data processing modules
│   ├── export/     # Data export related
│   ├── source/     # Data source processing
│   └── vextra.ts   # Vextra service core
├── mcp/            # MCP tool implementations
│   ├── get_vextra_data.ts
│   ├── get_vextra_images.ts
│   └── get_vextra_pagesinfo.ts
├── middlewares/    # Middlewares
└── server.ts       # Server entry point

Tech Stack

• Node.js + TypeScript - Core runtime environment
• Express.js - Web server framework
• @modelcontextprotocol/sdk - MCP protocol support
• @kcaitech/vextra-core - Vextra core library
• skia-canvas - Image rendering engine
• Rollup - Build tool

Development Guide

Environment Requirements

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

Development Scripts

npm run dev       # Development mode
npm run build     # Build production version
npm start         # Start production server

📄 License

This project is licensed under the AGPL-3.0 License - see the LICENSE file for details.

Author

KCai Technology

Related Links

• Vextra Official Website
• Model Context Protocol
• Cursor AI

If you have any questions or suggestions, please contact us through GitHub Issues.