Vextra MCP Server

A server based on Model Context Protocol (MCP) for processing and parsing Vextra/Figma/Sketch/SVG design files.

Overview

Vextra MCP Server is a powerful design file processing tool that provides AI assistants (like Cursor) with the ability to access and manipulate design files through the MCP protocol. It supports multiple design file formats including Vextra, Figma, Sketch, and SVG.

Key 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

Quick Start

Install Dependencies

npm install

Development Mode

npm run dev

Build Production Version

npm run build
npm start

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

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

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

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

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

A server based on Model Context Protocol that processes and parses design files (Vextra/Figma/Sketch/SVG), enabling AI assistants to access and manipulate design content.

Related MCP Servers

Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
16
13
TypeScript
MIT License
Figma MCP Server
mohammeduvaiz
-
security
F
license
-
quality
A Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.
Last updated -
81
1
TypeScript
Figma MCP Server
xxflux
A
security
F
license
A
quality
A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
Last updated -
5
966
3
JavaScript
TouchDesigner MCP
8beeeaaat
-
security
A
license
-
quality
A Model Context Protocol server that enables AI agents to control and operate TouchDesigner projects through creation, modification, and querying of nodes and project structures.
Last updated -
145
69
TypeScript
MIT License

View all related MCP servers

Vextra MCP Server