Connect Your AI Agent

The AI Connector is deeepSpace’s MCP server (Model Context Protocol). Once connected, your AI agent can read your design system while it works, so the code it writes uses your real components and tokens instead of guesses. What your agent can read:

Components: every Figma component of a project, its variants and properties
Figma ↔ code mappings: which code component builds each design component, and its source file
Design vs code differences: the latest comparison of a component, variant by variant
Design tokens: colors, typography, and the spacing, radius, size and shadow tokens synced from your Figma variables and effect styles
Project context: settings, versions, the connected Git repository, comments

Read-only: the AI Connector never changes anything in deeepSpace. Your agent only sees the workspaces and projects your account can open.

Prerequisites

Before connecting, make sure you have:

A deeepSpace account, with access to the project your agent should read
An AI tool that supports remote MCP servers over HTTP (Claude Code, Claude Desktop, Cursor, VS Code…)
For mappings and differences: components synced and compared; for tokens: the style guide synced from the Figma plugin

Server address

https://mcp.deeepspace.com/mcp

The connection uses the Streamable HTTP transport. You sign in with your deeepSpace account the first time (see Sign in).

Add it to your AI tool

Claude Code
Claude Desktop
Cursor
VS Code

Add the server from your terminal:

claude mcp add --transport http deeep https://mcp.deeepspace.com/mcp

Then, in Claude Code, run /mcp, select deeep and choose Authenticate. Your browser opens the deeepSpace sign-in page.

Open Settings → Connectors.
Choose Add custom connector.
Name it deeep and enter the URL https://mcp.deeepspace.com/mcp.
Select Connect: your browser opens the deeepSpace sign-in page.

Add the server to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project):

{
  "mcpServers": {
    "deeep": {
      "url": "https://mcp.deeepspace.com/mcp"
    }
  }
}

In Settings → MCP, select Login next to deeep to open the deeepSpace sign-in page.

Add the server to .vscode/mcp.json in your workspace:

{
  "servers": {
    "deeep": {
      "type": "http",
      "url": "https://mcp.deeepspace.com/mcp"
    }
  }
}

Or from a terminal:

code --add-mcp '{"name":"deeep","type":"http","url":"https://mcp.deeepspace.com/mcp"}'

Start the server from mcp.json (or MCP: List Servers) and approve the sign-in when VS Code asks. Use it from Copilot Chat in Agent mode.

Other tools: any MCP client that supports remote servers over HTTP with OAuth sign-in works the same way: give it the server address above.

The first time your AI tool connects, it opens deeepSpace’s sign-in page in your browser:

Check the request

The page shows Connect to deeepSpace and the name of the app asking for access. Only continue if you started this from your own AI tool.

Enter your email

Use the email of your deeepSpace account and select Send code.

Enter the 6-digit code

The code arrives by email and expires after 5 minutes. Once it’s accepted, you’re sent back to your AI tool, already connected.

Your AI tool keeps you signed in and renews the login by itself. To disconnect, remove the server from the tool (for example claude mcp remove deeep). If your MCP client can’t open a browser sign-in, it can sign in from the chat instead: send the header X-Deeep-Login: chat with its requests. Two extra tools then appear: deeep-connect emails you a code, and deeep-verify checks it. The login stays on the server for that session; it’s never shown in the conversation.

Find your project

Most tools take a project UUID. It’s in the address of your project in deeepSpace:

https://app.deeepspace.com/project/1a2b3c4d-5e6f-4a7b-8c9d-0e1f2a3b4c5d
                                   └──────────── project UUID ───────────┘

You can also just name the project: your agent can list your workspaces (fetch-all-workspaces) and their projects (get-all-projects) to find it.

What to ask

Build with the system

“Build a settings form with the components and tokens of my Fintech Design System project.”

Use the right tokens

“Which spacing and radius tokens does the Fintech Design System define? Use them in this card.”

Fix a drift

“How does ButtonSecondary differ from its design? Fix the code to match.”

Find the code

“Which code component and file implement the Figma ButtonDanger?”

The server also offers two ready-made prompts your tool may show:

Implement a deeepSpace component (implement-component): build a component with the project’s tokens, colors and typography instead of hard-coded values.
Check design vs code drift (check-design-drift): compare a project’s design components with their linked code and list what differs.

For every tool and what it returns, see the AI Connector tools reference.

Troubleshooting

A project or component can't be found

The tools only see what your account can open in deeepSpace. Check the project UUID, and that your account is a member of that project’s workspace.

Differences say NOT_LINKED or NOT_COMPARED

The design component isn’t linked to a code component yet, or it hasn’t been compared. Link it in deeepSpace, then run deeep sync (see Compare design and code).

No spacing, radius or shadow tokens

These come from your Figma number variables and effect styles. Sync your style guide from the deeepSpace Figma plugin to send them.

Get Started

Reference

Connect Your AI Agent

Prerequisites

Server address

Add it to your AI tool

Find your project

What to ask

Build with the system

Use the right tokens

Fix a drift

Find the code

Troubleshooting

​Prerequisites

​Server address

​Add it to your AI tool

​Sign in

​Tools without browser sign-in

​Find your project

​What to ask

Build with the system

Use the right tokens

Fix a drift

Find the code

​Troubleshooting

Prerequisites

Server address

Add it to your AI tool

Sign in

Tools without browser sign-in

Find your project

What to ask

Troubleshooting