Using with AI

Spectrum Design Data publishes Model Context Protocol (MCP) servers so AI assistants can query design tokens, component schemas, and Spectrum 2 documentation directly from tools like Cursor.

MCP Servers

@adobe/spectrum-design-data-mcp

Design tokens and component API schemas. Enables AI to look up token values, find tokens by use case, validate component props, and get schema definitions.

npm: @adobe/spectrum-design-data-mcp

Token tools: query-tokens, query-tokens-by-value, get-token-details, get-component-tokens

Schema tools: list-components, get-component-schema, validate-component-props, search-components-by-feature

Cursor config (single server):

{
  "mcpServers": {
    "spectrum-design-data": {
      "command": "npx",
      "args": ["-y", "@adobe/spectrum-design-data-mcp"]
    }
  }
}

@adobe/s2-docs-mcp

Spectrum 2 component documentation and design guidelines. Use when the AI needs S2 docs (scraped from the Spectrum site and stored in this repo).

npm: @adobe/s2-docs-mcp

Tools: list-s2-components, get-s2-component, search-s2-docs, get-s2-stats, find-s2-component-by-use-case

Cursor config (single server): Use a local path to the repo, or install and run from the repo. Example:

{
  "mcpServers": {
    "s2-docs": {
      "command": "npx",
      "args": ["-y", "@adobe/s2-docs-mcp"]
    }
  }
}

If you run from source, point args to tools/s2-docs-mcp/src/cli.js inside your clone.

Cursor IDE setup

Add both servers to .cursor/mcp.json so the AI can use tokens, schemas, and S2 docs in the same session:

{
  "mcpServers": {
    "spectrum-design-data": {
      "command": "npx",
      "args": ["-y", "@adobe/spectrum-design-data-mcp"]
    },
    "s2-docs": {
      "command": "npx",
      "args": ["-y", "@adobe/s2-docs-mcp"]
    }
  }
}

Restart Cursor after changing MCP config.

More context in chat:

• @Files — Reference docs/s2-docs/ or docs/markdown/ so the AI can read those files directly.
• @Docs — If this site (or another Spectrum doc site) is indexed in Cursor, add it via @Docs → Add new doc for searchable documentation.

Other AI resources

• llms.txt — At the repo root, llms.txt describes the project layout, design tokens, component schemas, and common tasks for LLMs.
• Generated markdown — The docs/markdown/ directory holds auto-generated markdown from tokens, component schemas, and the design-system registry, used by the docs site and for chatbot indexing. Regenerate with moon run markdown-generator:generate.

See also: React Spectrum — Using with AI for React Spectrum’s own AI integration (S2 component implementation docs, icons, illustrations).