---
title: "Connect Your AI Agent"
sidebarTitle: "AI Connector (MCP)"
description: "Give Claude, Cursor, VS Code and other AI agents read-only access to your deeepSpace design system through the AI Connector (MCP server): components, Figma ↔ code mappings, design vs code differences and design tokens."
keywords: "deeepspace mcp, ai connector, model context protocol, claude code mcp, cursor mcp, vs code mcp, design tokens for ai"
icon: "bot"
---

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

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

## 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](/guides/sync) and [compared](/guides/compare); for tokens: the style guide synced from the Figma plugin

## Server address

```text
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](#sign-in)).

## Add it to your AI tool

<Tabs>
  <Tab title="Claude Code">
    Add the server from your terminal:

    ```bash
    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.
  </Tab>
  <Tab title="Claude Desktop">
    1. Open **Settings → Connectors**.
    2. Choose **Add custom connector**.
    3. Name it `deeep` and enter the URL `https://mcp.deeepspace.com/mcp`.
    4. Select **Connect**: your browser opens the deeepSpace sign-in page.
  </Tab>
  <Tab title="Cursor">
    Add the server to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (one project):

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

    In **Settings → MCP**, select **Login** next to **deeep** to open the deeepSpace sign-in page.
  </Tab>
  <Tab title="VS Code">
    Add the server to `.vscode/mcp.json` in your workspace:

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

    Or from a terminal:

    ```bash
    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.
  </Tab>
</Tabs>

<Tip>
**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.
</Tip>

## Sign in

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

<Steps>
  <Step title="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.
  </Step>
  <Step title="Enter your email">
    Use the email of your deeepSpace account and select **Send code**.
  </Step>
  <Step title="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.
  </Step>
</Steps>

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`).

### Tools without browser sign-in

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:

```text
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

<CardGroup cols={2}>
  <Card title="Build with the system" icon="hammer">
    "Build a settings form with the components and tokens of my Fintech Design System project."
  </Card>
  <Card title="Use the right tokens" icon="ruler">
    "Which spacing and radius tokens does the Fintech Design System define? Use them in this card."
  </Card>
  <Card title="Fix a drift" icon="git-compare">
    "How does ButtonSecondary differ from its design? Fix the code to match."
  </Card>
  <Card title="Find the code" icon="file-code">
    "Which code component and file implement the Figma ButtonDanger?"
  </Card>
</CardGroup>

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](/reference/ai-connector-tools).

## Troubleshooting

<AccordionGroup>
  <Accordion title="&quot;Sign in to deeepSpace to use this server&quot;">
    Your tool isn't signed in yet, or its login expired and couldn't be renewed. Start the sign-in again from the tool (for example `/mcp` → **Authenticate** in Claude Code).
  </Accordion>
  <Accordion title="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.
  </Accordion>
  <Accordion title="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](/guides/compare)).
  </Accordion>
  <Accordion title="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.
  </Accordion>
</AccordionGroup>