This version was released on September 18, 2025.
Your AI models and agents can now tap into our official MCP server to securely pull in data from the Supernova design system. We've built it to stick to the full spec, and it's hosted and run centrally so you don't have to worry about hosting it locally.
Right now, the MCP server focuses on discovering and relaying data to your LLMs over a secure connection. That lets you grab everything you've created or imported into Supernova—like design tokens, components, docs, and assets—with more features on the way. For the moment, it can't make changes to data inside Supernova, but we're open to adding that down the line based on your feedback.
Cursor now knows all about what you do in Supernova. Neat!
The MCP server smartly formats the data to make it super easy for any LLM to handle. For instance, it turns docs into clean markdown automatically, resolves token references and values even for very deep references, and pulls off other handy tricks that only come from Supernova's deep knowledge of your design system.
How to connect to Supernova MCP?
Connecting uses a standard authenticated OAuth flow, so only folks authorised under your design system can get in (and will lose access when you remove them right away, making this very secure, and recommended, approach to handling your sensitive data).
Here's a quick guide for hooking it up 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 Integrations 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
Free, Pro (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.
Getting the design system ID
Since you can use our MCP server to access data from any design system you have available, there needs to be a way how to specify which one is supposed to be used when running the LLM.
To get the specific design system ID, navigate to app.supernova.io, select the desired design system and copy the ID from the URL. For example, for URL:
https://app.supernova.io/5568-supernova/60216-my-design-system/…
The ID is 60216. Use your ID with the full configuration, depending on your provider, like this:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/60216",
}
}
}
Specifying data set
Many of you are using multiple datasets (originally brands) for various purposes - supporting multiple platforms, multiple brands, multiple facets of the design system etc. By default, MCP server will pull from all datasets at the same time. However, there is a way to specify this behavior also, by using additional url attribute, like this:
{
"mcpServers": {
"supernova": {
"url": "https://mcp.supernova.io/mcp/ds/{ds-id}?datasetId={dataset-id}",
}
}
}
Dataset ID can be obtained the same way as the design system ID, except here you are looking for fourth attribute (followed by the name of your data set, or default for the default one)
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_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_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_node_structure: Dives into the structure of a Figma node, showing layers, properties, and relationships.
- get_image_description_from_url: Generates a description of an image based on its URL, useful for accessibility or quick overviews. For now, only works on images coming from get_documentation_page_content function (meaning our MCP server can also read content of your documentation images/illustrations, and use it for the knowledge retrieval).
- get_design_component_detail: Provides metadata details for a component, like its status, tags, and cross-references.
- get_design_component_list: Lists metadata for all components, giving an overview of the entire component library.
- get_token_list: Pulls the full list of design tokens, including values, references, and groupings (e.g., colors, spacing).
Usage limits
There are no realistic limits for the MCP server you can hit usage-wise (hold my LLM says some developer out there, we know). MCP server and the data retrieval follows the permissions set in your admin interface. MCP server access is free for everyone until the end of the year, after which it will be bundled with (redacted - some mega announcements soon!).
SSO auto-add fanciness!
The MCP server is already amazing as-is, but we added one more juicy thing for your absolute convenience. For the teams using the SSO, we’ve made it such that anyone who connects through the MCP OAuth (and assuming you have enabled the option yourself), they’ll be automatically added to your workspace if they were not there already.
Plain and simple, this means you can just publish your MCP setting guide somewhere visible to everyone, and every developer can login with their SSO and use the MCP to their liking - even if they have not interacted with Supernova before.
What’s next?
Whew, another big release for this month, alongside the Supernova Portal we announced 2 weeks ago! And now.. for the grand finale - stay tuned!