Your AI models and agents can securely connect to our official MCP server to access data from your Supernova design system.
The MCP server is built to discover, structure, and relay design system data to LLMs over a secure connection. It gives you programmatic access to everything in Supernova — design tokens, components, documentation, and assets — whether created natively or imported.
To make it immediately usable by any LLM, the MCP server intelligently formats your design system data. Documentation is converted into clean Markdown, token references are fully resolved (even across deeply nested relationships), and other system-aware optimizations are applied —capabilities made possible by Supernova’s deep understanding of your design system.
How to connect to Supernova MCP?
- Authorised users in your design system can access it using OAuth login.
- For teams using SSO, anyone who connects through MCP OAuth will be automatically added to your workspace if they were not there already.
Here's a quick guide for getting started in some popular AI tools:
- CTRL/CMD + SHIFT + P and search for MCP: Add Server.
- Select HTTP (HTTP or Server-Sent Events).
- Enter the following URL:
https://mcp.supernova.io/mcp/ds/{ID}
- Enter the name Supernova and hit enter.
- Activate the server using MCP: List Servers and selecting Supernova, and selecting Start Server.
- Complete login flow in the browser.
Replace the {ID} with a desired design system ID you want to use in your specific project.
- CTRL/CMD + , to open Cursor settings.
- Navigate to MCP & Integrations.
- Select New MCP Server → Add a Custom MCP Server.
- Paste the following JSON into the mcp.json that will open:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/{ID}",
}
}
}
Replace the {ID} with a desired design system ID you want to use in your specific project.
- CTRL/CMD + , to open Windsurf settings.
- Under Scroll to Cascade -> MCP servers
- Select Add Server → Add custom server
- Add the following:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/{ID}",
"type": "http"
}
}
}
Replace the {ID} with a desired design system ID you want to use in your specific project.
Team, Enterprise (Claude.ai)
- Navigate to Settings in the sidebar on web or desktop
- Scroll to Connectors at the bottom and click Add more
- In the prompt enter:
- Integration name: Supernova
- Integration URL: https://mcp.supernova.io/mcp/ds/{ID}
- Make sure to enable the tools in any new chats
Claude for Desktop
- Open the file ~/Library/Application Support/Claude/claude_desktop_config.json
- Add the following and restart the Claude desktop app:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/{ID}",
"type": "http"
}
}
}
Replace the {ID} with a desired design system ID you want to use in your specific project.
Advanced setup and configuration
Getting the design system ID
Some tools require using a specific URL that contains the design system ID, to identify which design system should be used.
To find your design system ID, navigate to your design system in app.supernova.io and copy the ID from the URL.
For example, for the following URL, The ID is 60216:
https://app.supernova.io/5568-supernova/60216-my-design-system/…
Use your ID with the full configuration, depending on your provider, like this:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/60216",
}
}
}
Specifying datasets
By default, the MCP server will pull from all datasets at the same time. If you have multiple datasets in Supernova, you can also choose a specific dataset you would like to use.
You can specify a dataset with an additional url attribute:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/{ds-id}?datasetId={dataset-id}",
}
}
}
Your dataset ID can be also obtained the same way as the design system ID. In the following URL, you can find this ID followed by the name of your dataset (or default if you are not using multiple datasets):
https://app.supernova.io/5568-supernova/60216-my-design-system/382-version/1283-default/
In this example, the full configuration would look like this:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/60216?datasetId=1283",
}
}
}
Tool function list
The following functions are currently available. They come with sufficient descriptions such that the tools should automatically pick up when to use them without any additional prompting needed.
|
get_asset_detail |
Fetches detailed info about a specific asset, like its properties, metadata, and any linked data. |
|---|---|
|
get_asset_list |
Pulls a list of all assets in the design system, including basic overviews like names and types. |
|
get_code_component_detail |
Gets in-depth details on a code component, such as its code snippets, dependencies, and usage examples. |
|
get_code_component_list |
Lists out all code components available, with summaries like names, versions, and brief descriptions. |
|
get_design_system_component_detail |
Provides metadata details for a component, like its status, tags, and cross-references. |
|
get_design_system_component_list |
Lists metadata for all components, giving an overview of the entire component library. |
|
get_documentation_page_content |
Grabs the content of a specific documentation page, formatted nicely (e.g., as markdown). |
|
get_documentation_page_list |
Lists all documentation pages, including titles, slugs, and hierarchy. |
|
get_figma_component_detail |
Retrieves full details on a Figma component, including its structure, variants, and export options. |
|
get_figma_component_list |
Returns a list of all Figma components, with key info like names, IDs, and categories. |
|
get_me |
Checks which account you are logged in to. |
|
get_storybook_story_detail |
Get detail of a Storybook story in the design system. |
|
get_storybook_story_list |
Get all names and IDs of Storybook stories in the design system. |
|
get_token_list |
Pulls the full list of design tokens, including values, references, and groupings (e.g., colors, spacing). |