Skip to main content

​
Overview

Model Context Protocol (MCP) allows you to reference your Spine canvas directly in other applications like Cursor, Lovable, Replit, ChatGPT, and Claude Code. Once configured, simply paste your canvas URL into any of these tools, and they can access all your canvas content, blocks, and context.

​
How It Works

MCP enables Spine to share canvas data with MCP-compatible applications. Once you’ve configured the MCP server in your tool, you can paste any Spine canvas URL to give that tool access to all the blocks, connections, and context on that canvas.

​
Setting Up MCP

Setup instructions vary by platform. Follow the guide for your specific application below.
Enterprise / Custom Deployments: If you’re on an enterprise plan with a custom deployment, the MCP URL may differ from the standard URL shown in these instructions. Please reach out to our support team at [email protected] to get the correct MCP URL for your deployment.

​
Enterprise / Custom Deployments

If your organization has an enterprise plan with a custom deployment (such as a dedicated instance), you’ll need to use a different MCP URL than the standard https://mcp.getspine.ai/mcp shown in these instructions. To get your custom MCP URL:
  1. Contact our support team at [email protected]
  2. Provide your organization name or account details
  3. Our team will provide you with the correct MCP URL for your deployment
  4. Use this custom URL in place of the standard URL in all the platform-specific setup instructions below
Once you have your custom MCP URL, follow the same setup instructions for your platform, but replace https://mcp.getspine.ai/mcp with your organization’s custom MCP URL.

​
Cursor

  1. Locate or Create MCP Configuration File:
    • macOS/Linux: ~/.cursor/mcp.json
    • Windows: %USERPROFILE%\.cursor\mcp.json
    • If the file doesn’t exist, create it.
  2. Edit the Configuration File:
    • Open mcp.json in a text editor
    • Add the following configuration:
    {
  "mcpServers": {
    "spine-ai": {
      "url": "https://mcp.getspine.ai/mcp"
    }
  }
}
    • Save the file
  3. Alternative: Use Cursor Settings:
    • Open Cursor Settings (Cmd+, / Ctrl+,)
    • Navigate to Settings → MCP (or Features → MCP)
    • Click “Add new global MCP server”
    • Enter the configuration above
  4. Restart Cursor – Fully quit and restart Cursor to apply the changes

​
Lovable

  1. Open Lovable Settings – Navigate to Settings → MCP Servers (or Settings → Integrations → MCP)
  2. Add Spine Server – Scroll down to “Your MCP Servers” section
  3. Set Up Spine – Click “Set up” or “Add MCP Server”
  4. Enter Configuration:
    • Server Name: spine-ai
    • Server URL: https://mcp.getspine.ai/mcp
  5. Save and Verify – Click “Save” or “Connect” and verify “Spine” appears in your connected services

​
Replit

Replit uses install links with base64-encoded configuration to add MCP servers.
  1. Generate Install Link (if available):
    • Visit Replit’s MCP install links documentation to generate a custom install link
    • The install link format uses base64-encoded JSON with: 
      {
  "displayName": "Spine AI",
  "baseUrl": "https://mcp.getspine.ai/mcp"
}
  2. Use Install Link:
    • Click the generated install link or share it with users
    • This will automatically configure the MCP server in Replit
  3. Manual Configuration (Alternative):
    • Open your Replit project
    • Navigate to Settings → Integrations or look for MCP settings
    • Add a new MCP server with:
      • Display Name: Spine AI
      • Base URL: https://mcp.getspine.ai/mcp
    • Save the configuration

​
ChatGPT

  1. Enable Developer Mode:
    • Click your profile icon → Settings & Beta
    • Navigate to Settings → Apps → Advanced
    • Toggle on Developer mode
  2. Create a Custom Connector:
    • Navigate to a new chat and click the + icon.
    • Click “More” and then “Add sources”
    • Click “Add” then “Connect More”. Then, in advanced settings, click “Create App”.
    • Fill in the details:
      • Connector Name: Spine AI
      • Description: Access your Spine canvases and send them to ChatGPT
      • Connector URL: https://mcp.getspine.ai/mcp
    • Click Create. It will prompt you to authenticate. Follow the steps then you’ll be back in ChatGPT.
  3. Enable in Chat:
    • Open a new chat in ChatGPT
    • Click the + button near the message composer
    • Select Developer mode and toggle on your Spine AI connector
  4. Verify – Test by pasting a Spine canvas URL into your ChatGPT conversation

​
Claude Code

Claude Code uses the claude mcp add command to configure MCP servers via the command line.
  1. Add the Spine MCP Server:
    • Open your terminal
    • Run the following command: 
      claude mcp add --transport http spine-ai https://mcp.getspine.ai/mcp
    • This configures the Spine MCP server with the name spine-ai
  2. Alternative: Manual Configuration File:
    • You can also manually edit your MCP configuration file
    • Project scope (shared with team): Create or edit .mcp.json in your project root
    • User scope (personal): Edit the user-level MCP configuration file
    • Add the following configuration: 
      {
  "mcpServers": {
    "spine-ai": {
      "type": "http",
      "url": "https://mcp.getspine.ai/mcp"
    }
  }
}
  3. Verify Configuration:
    • List your configured MCP servers: 
      claude mcp list
    • You should see spine-ai in the list
    • Get details about the server: 
      claude mcp get spine-ai
  4. Use in Claude Code:
    • Start a new conversation in Claude Code
    • Paste your Spine canvas URL directly into the chat
    • Claude Code will automatically use the MCP server to access your canvas content
Configuration Scopes:
  • --scope local (default): Available only to you in the current project
  • --scope project: Shared with everyone in the project via .mcp.json file
  • --scope user: Available to you across all projects

​
How to Use

Once MCP is configured in your application:
  1. Get Your Canvas URL – In Spine, open the canvas you want to reference and copy its URL from your browser’s address bar
  2. Paste the URL – Simply paste the canvas URL into your tool (Cursor, Lovable, Replit, ChatGPT, or Claude Code)
  3. Access Canvas Content – The tool can now reference and use all the content from that canvas, including:
    • All blocks – Every block on your canvas
    • Block content – Text, outputs, and data from each block
    • Connections – All context passing relationships between blocks
    • Block metadata – Block types, models used, and configuration settings
    • Canvas structure – The overall organization and layout information
The tool will have access to your canvas content and can use it as context in conversations or development workflows.

​
Troubleshooting

Connection Issues:
  • Verify the URL is correct: https://mcp.getspine.ai/mcp
  • Ensure the receiving application supports MCP
  • Check your internet connection
  • Make sure the JSON configuration is properly formatted
Server Not Connecting:
  • Verify the MCP server configuration matches the exact format shown above
  • Check that MCP is enabled in your application settings
  • Some applications may require a restart after configuration
Canvas Not Accessible:
  • Verify you have permission to access the canvas in Spine
  • Check that the canvas isn’t archived or deleted
  • Ensure the canvas URL is correct and complete
  • Make sure you’re logged into Spine in your browser
  • Verify the MCP server is properly configured and the connection is active