Figjam MCP

Give your coding agent access to your Figjam data.

Implement collaborative whiteboarding features with AI assistance.

Overview

The Figjam MCP (Model Context Protocol) server enables AI-powered coding tools like Cursor to understand and interact with your Figjam whiteboard data. This allows for seamless integration of Figjam content into your development workflow, making it easier to implement collaborative features and maintain design consistency.

How it works

1. Open your IDE's chat (e.g. agent mode in Cursor)
2. Paste a link to a Figjam board or specific node
3. Ask Cursor to perform actions with the Figjam content - e.g., implement features, analyze structure, or extract content
4. The MCP server fetches relevant metadata from Figjam and provides it to your AI coding assistant

This MCP server is specifically designed to work with Cursor. It processes and simplifies Figjam API responses to provide only the most relevant information to the AI model, ensuring more accurate and focused assistance.

Features

• Content Extraction: Get structured content from Figjam boards
• Hierarchy Analysis: Understand the structure and relationships between elements
• Node-specific Access: Target specific elements within a board
• Real-time Updates: Stay in sync with Figjam board changes
• Type-safe Implementation: Built with TypeScript for reliable development

Getting Started

Prerequisites

• Node.js (v16 or higher)
• A Figjam account
• An IDE that supports MCP (e.g., Cursor)

Installation

1. Clone the repository and install dependencies:

git clone https://github.com/yourusername/figjam-mcp.git
cd figjam-mcp
npm install
# or
yarn install

2. Build the project:

npm run build
# or
yarn build

3. Configure your IDE's MCP settings by adding the following to your configuration file:

{
  "mcpServers": {
    "Figjam-mcp": {
      "command": "node",
      "args": [
        "/path/to/figjam-mcp/dist/index.js"
      ],
      "env": {
        "FIGJAM_API_TOKEN": "your-figjam-api-token"
      }
    }
  }
}

Note: Replace /path/to/figjam-mcp with your actual installation path and your-figjam-api-token with your Figjam API token. You can get an API token from the Figjam developer portal.

Environment Variables

The MCP server requires the following environment variable:

• FIGJAM_API_TOKEN: Your Figjam API access token

Windows Configuration

For Windows users, use the following configuration, adjusting the path format accordingly:

{
  "mcpServers": {
    "Figjam-mcp": {
      "command": "node",
      "args": [
        "C:\\Users\\YourUsername\\figjam-mcp\\dist\\index.js"
      ],
      "env": {
        "FIGJAM_API_TOKEN": "your-figjam-api-token"
      }
    }
  }
}

Note: Make sure to use double backslashes \\ in the path for Windows configurations.

Usage

Once configured, you can interact with your Figjam boards directly through your IDE's AI assistant. Here are some example commands:

"Get content from this Figjam board: [URL]"
"Show me the structure of this board"
"Extract all sticky notes from this board"
"Get specific node content with ID: [NODE-ID]"

Development

To contribute or modify the MCP server:

1. Clone the repository
2. Install dependencies:

npm install
# or
yarn install

3. Build the project:

npm run build
# or
yarn build

API Reference

The MCP server provides several key endpoints for Figjam interaction:

• getFigjamContent: Get content from a specific board or node
• getFigjamStructure: Get the hierarchical structure of a board
• getFigjamNodes: Get specific node types from a board

Contributing

Contributions are welcome! Please read our Contributing Guidelines for details on our code of conduct and the process for submitting pull requests.

License

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

Acknowledgments

• Thanks to the Figjam team for their excellent API
• Inspired by the Figma Context MCP project
• Built with support from the AI coding tools community

Support

For support, please:

• Open an issue in the GitHub repository
• Join our community Discord
• Check the documentation for common solutions

Built with ❤️ for the AI-assisted development community