Provides tools and guidelines for building applications using the Salt Design System, JP Morgan Chase's open-source React component library.
Enables converting Figma design descriptions or screenshots into Salt Design System code via specialized agent skills.
Supports building applications using the Salt Design System's library of React components, usage guidelines, and accessibility rules.
Provides access to Storybook example code for Salt Design System components to help agents generate accurate UI code.
Exposes TypeScript prop interfaces for Salt components, ensuring type-safe implementation and accurate property usage.
Includes skills for scaffolding new Salt Design System applications configured with Vite.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Salt MCP show me the props and a code example for the Salt Button component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server and Agent Skills for building applications with the Salt Design System — JP Morgan Chase's open-source React component library.
This project gives AI agents access to Salt DS knowledge so they can help you build Salt applications accurately, using the right components, props, patterns, and best practices — instead of guessing.
MCP Tools let agents look things up on the fly:
Component APIs, props, and examples
Usage guidelines and accessibility rules
Design patterns (forms, navigation, search, etc.)
Foundations (density, spacing, color, typography)
Agent Skills give agents step-by-step instructions for common tasks:
Scaffolding a new Salt app
Building page layouts
Creating forms
Implementing UI patterns
Converting Figma designs to Salt code
Related MCP server: figmad-mcp
Node.js (v18+)
An MCP-compatible client or an agent that supports the Agent Skills standard (e.g. VS Code with GitHub Copilot, Claude Code, Cursor, Gemini CLI, Windsurf)
A local clone of the Salt DS repository:
git clone --depth 1 https://github.com/jpmorganchase/salt-ds.git ~/Code/salt-ds# Clone this repo
git clone https://github.com/feesch/salt-mcp.git
cd salt-mcp
# Install dependencies
npm install
# Build
npm run buildThe repo includes a .mcp.json file that Claude Code and some other clients auto-discover. For other clients, configure the server manually:
Create or edit .vscode/mcp.json in your project:
{
"servers": {
"salt-mcp": {
"type": "stdio",
"command": "node",
"args": ["/absolute/path/to/salt-mcp/build/index.js"]
}
}
}Replace /absolute/path/to/salt-mcp with the actual path where you cloned this repo. Then open Copilot Chat in Agent mode to use the tools.
The .mcp.json file in the repo root is auto-discovered — no extra config needed. Alternatively, add to your project's .claude/settings.json:
{
"mcpServers": {
"salt-mcp": {
"command": "node",
"args": ["./build/index.js"]
}
}
}Add to your client's MCP configuration:
{
"mcpServers": {
"salt-mcp": {
"command": "node",
"args": ["/absolute/path/to/salt-mcp/build/index.js"]
}
}
}Refer to your client's documentation for the config file location.
Copy the skills/ directory into the location your agent expects:
Claude Code: Copy into .claude/skills/ in your project or home directory
Cursor: Copy into .cursor/skills/
VS Code / GitHub Copilot: Skills are not yet natively supported — use the MCP tools directly, or paste skill content into your Copilot Chat prompt as instructions
Other agents: See your agent's documentation for the skills directory
Skills follow the open Agent Skills standard and work with any compatible agent.
Tool | Description |
| Test that the server is running |
| List all Salt components (core, lab, or both) |
| Get the TypeScript props interface for a component |
| Get Storybook example code for a component |
| Search components by keyword |
| Get usage guidelines, accessibility rules, patterns, and foundations |
Skills are portable instruction sets that guide agents through multi-step tasks. They follow the Agent Skills standard.
Skill | Description |
| Scaffold a new React app with Salt DS (SaltProvider, theme, Vite) |
| Build page layouts using Salt layout components |
| Build forms following Salt's form pattern |
| Build any of 20+ Salt UI patterns (search, navigation, wizard, etc.) |
| Convert a Figma design (screenshot or description) into Salt code |
The MCP tools read from your local Salt DS clone at runtime, so they automatically reflect any updates. Skills contain some static mapping tables but always instruct agents to verify via the tools.
To pull the latest Salt DS changes:
git -C ~/Code/salt-ds pullNo rebuild of salt-mcp is needed — the tools will return updated data immediately.
npm run build # Compile TypeScript
npm test # Run unit tests (37 tests via Vitest)
npm run test:watch # Run tests in watch modesalt-mcp/
src/
index.ts # MCP server with tools
helpers.ts # Shared helpers and security functions
helpers.test.ts # Unit tests (Vitest)
skills/ # Agent Skills (agentskills.io standard)
salt-app/SKILL.md
salt-page/SKILL.md
salt-form/SKILL.md
salt-pattern/SKILL.md
salt-figma/SKILL.md
.mcp.json # Shareable MCP server config
package.json
tsconfig.jsonSalt Design System — official site
Salt DS GitHub — source code
Model Context Protocol — MCP specification
Agent Skills — open standard for portable agent skills
Get Storybook example code for a Salt component. Returns the story source showing how to use the component.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name in kebab-case (e.g. 'button', 'combo-box') or PascalCase (e.g. 'Button') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses that the tool returns story source code, which is useful behavioral context. However, it doesn't mention potential limitations such as availability of examples for all components, error handling, or format of the returned code, leaving gaps in transparency for a tool with no annotation support.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is front-loaded and concise, consisting of two sentences that directly state the purpose and output. Every sentence adds value without redundancy, making it efficient and easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool has no annotations and no output schema, the description provides basic purpose and output information but lacks details on return format, error cases, or dependencies. For a simple tool with one parameter and high schema coverage, it's minimally adequate but could be more complete by addressing behavioral aspects like what happens if the component doesn't have an example.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with the parameter 'component' fully documented in the schema. The description adds no additional parameter semantics beyond what the schema provides, such as examples of valid component names or constraints. Baseline score of 3 is appropriate as the schema handles the parameter documentation adequately.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('Get Storybook example code') and resource ('for a Salt component'), and distinguishes it from siblings by specifying it returns story source for component usage examples. This is precise and differentiates from tools like 'get-component-props' or 'get-salt-docs'.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage context by mentioning 'Storybook example code' and 'showing how to use the component,' suggesting it's for learning component implementation. However, it lacks explicit guidance on when to use this tool versus alternatives like 'get-component-props' or 'search-components,' leaving the agent to infer based on the purpose.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get the props/API definition for a specific Salt component. Returns the TypeScript interface with JSDoc comments.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component name in kebab-case (e.g. 'button', 'combo-box') or PascalCase (e.g. 'Button', 'ComboBox') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the return format ('TypeScript interface with JSDoc comments'), which is useful, but fails to address other critical aspects such as error handling (e.g., what happens if the component doesn't exist), performance considerations, or any side effects. This leaves significant gaps in understanding the tool's behavior.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that efficiently conveys the tool's purpose and return value without unnecessary details. It is front-loaded with the core action and resource, making it easy to parse and understand quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (one parameter, no output schema, no annotations), the description is minimally adequate. It explains what the tool does and what it returns, but lacks details on error conditions, performance, or usage context. For a simple read operation, this is acceptable but leaves room for improvement in guiding the agent effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, with the parameter 'component' fully documented in the input schema. The description does not add any additional semantic information beyond what the schema provides, such as examples of valid component names or constraints. However, since the schema adequately covers the parameter, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('Get') and resource ('props/API definition for a specific Salt component'), and specifies the return type ('TypeScript interface with JSDoc comments'). However, it does not explicitly differentiate from sibling tools like 'get-component-example' or 'get-salt-docs', which may also retrieve component-related information, leaving some ambiguity about uniqueness.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives such as 'get-component-example' or 'search-components'. It lacks context about prerequisites, typical use cases, or exclusions, leaving the agent to infer usage based solely on the tool name and description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get Salt Design System documentation including usage guidelines, best practices, accessibility rules, and patterns. Use this to answer questions about how and when to use Salt components, design foundations (density, spacing, color, typography), and UI patterns (forms, navigation, search).
| Name | Required | Description | Default |
|---|---|---|---|
| topic | Yes | The topic to look up. Can be a component name (e.g. 'button', 'dialog'), a pattern (e.g. 'forms', 'navigation', 'search'), or a foundation (e.g. 'density', 'spacing', 'color', 'typography') | |
| section | No | Which section to retrieve. 'usage' for guidelines and rules, 'accessibility' for a11y and keyboard info, 'examples' for code examples, 'all' for everything. Only applies to component topics. | usage |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It discloses that the tool retrieves documentation (a read-only operation) and mentions content types like accessibility rules, which hints at behavioral scope. However, it lacks details on rate limits, authentication needs, error handling, or response format, leaving gaps for a tool with no annotation coverage.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two concise sentences, front-loaded with the core purpose and followed by specific usage guidance. Every word contributes to clarity without redundancy, making it efficient and well-structured for quick understanding.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (2 parameters, no output schema, no annotations), the description is mostly complete. It covers purpose, usage, and content scope adequately. However, it lacks details on behavioral aspects like response format or limitations, which would be helpful since no output schema is provided.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already fully documents both parameters (topic and section). The description adds minimal value beyond the schema by implying the tool covers 'design foundations' and 'UI patterns', which aligns with the topic parameter's description. Baseline score of 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description explicitly states the verb 'Get' and resource 'Salt Design System documentation', specifying content types like usage guidelines, best practices, accessibility rules, and patterns. It clearly distinguishes from siblings by focusing on documentation retrieval rather than examples (get-component-example), properties (get-component-props), listing (list-components), or searching (search-components).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit guidance on when to use this tool: 'Use this to answer questions about how and when to use Salt components, design foundations, and UI patterns.' It implicitly suggests alternatives by mentioning specific content types (e.g., 'examples' for code examples, which might be better served by get-component-example), though it doesn't name siblings directly.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Say hello — use this to test that the Salt MCP server is working
| Name | Required | Description | Default |
|---|---|---|---|
| name | No | Your name |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It describes the core behavior ('Say hello') and purpose ('test that the Salt MCP server is working'), which implies a safe, read-only operation. However, it doesn't disclose any behavioral traits like error conditions, response format, or whether it has side effects. For a simple tool with no annotations, this is adequate but minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise (one sentence) and front-loaded with the core purpose ('Say hello') followed by the usage context. Every word earns its place, with no redundant information. This is optimal for a simple tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (single optional parameter, no annotations, no output schema), the description is reasonably complete. It explains what the tool does and when to use it, which covers the essentials for a testing tool. However, it doesn't mention what the output looks like (e.g., a greeting message), which would be helpful since there's no output schema.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the single parameter 'name' documented as 'Your name.' The description doesn't add any parameter information beyond what the schema provides. According to the rules, when schema_description_coverage is high (>80%), the baseline is 3 even with no param info in the description, which applies here.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Say hello' (specific verb) to 'test that the Salt MCP server is working' (resource/context). It distinguishes itself from sibling tools like 'get-component-example' or 'list-components' by focusing on a simple greeting function rather than component retrieval or documentation. However, it doesn't explicitly differentiate from all siblings in a comparative way.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides clear context for when to use this tool: 'use this to test that the Salt MCP server is working.' This gives a specific scenario (testing connectivity/functionality) that distinguishes it from the component-related sibling tools. It doesn't explicitly state when NOT to use it or name alternatives, but the implied usage is sufficiently clear for this simple tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List all available Salt Design System components. Returns component names from both core (stable) and lab (experimental) packages.
| Name | Required | Description | Default |
|---|---|---|---|
| package | No | Which package to list: 'core', 'lab', or 'all' | all |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses that the tool returns component names from both packages, which is useful behavioral context. However, it does not mention potential limitations like pagination, rate limits, or authentication needs, leaving gaps for a read operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences, front-loaded with the main purpose and efficiently adding detail about packages. Every sentence earns its place with no wasted words, making it highly concise and well-structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's low complexity (one optional parameter) and no output schema, the description is mostly complete for a list operation. It explains what is returned but could benefit from mentioning output format or any behavioral traits like sorting. However, it adequately covers the core functionality.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema fully documents the 'package' parameter with enum values and default. The description adds no additional parameter semantics beyond what the schema provides, meeting the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the verb ('List') and resource ('Salt Design System components'), specifying both core (stable) and lab (experimental) packages. It distinguishes from siblings like 'search-components' by indicating it returns 'all available' components without filtering.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for retrieving all components, but does not explicitly state when to use this tool versus alternatives like 'search-components' or 'get-component-props'. It provides clear context about what it returns but lacks explicit exclusions or named alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Search Salt components by keyword. Searches component names and directory names.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search keyword (e.g. 'input', 'layout', 'nav', 'date') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure. It mentions the search scope (names and directories) but doesn't cover critical aspects like whether this is a read-only operation, if it requires authentication, rate limits, pagination, or what the output format looks like. The description is minimal and lacks behavioral context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise with two sentences that directly state the tool's purpose and scope. There is no wasted language, and it is front-loaded with the core functionality. Every sentence earns its place by adding specific value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of a search tool with no annotations and no output schema, the description is incomplete. It doesn't explain what the search returns (e.g., list of components, metadata), how results are structured, or any behavioral traits. For a tool with one parameter but significant implicit behavior, this is inadequate.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with the 'query' parameter well-documented in the schema itself. The description adds no additional parameter semantics beyond what the schema provides, such as search syntax or examples beyond the schema's examples. Baseline 3 is appropriate as the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Search') and target resource ('Salt components by keyword'), specifying it searches both component names and directory names. However, it doesn't explicitly differentiate from sibling tools like 'list-components' or 'get-salt-docs' beyond the search functionality.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like 'list-components' (which might list all components without searching) or 'get-salt-docs' (which might retrieve documentation). There's no mention of prerequisites, exclusions, or specific contexts for usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Every tool has a clearly distinct purpose with no ambiguity: get-component-example retrieves example code, get-component-props provides API definitions, get-salt-docs returns documentation, hello is a test tool, list-components enumerates components, and search-components performs keyword searches. There is no overlap in functionality that could cause misselection.
The naming is mostly consistent with a verb_noun pattern (e.g., get-component-example, list-components, search-components), but the 'hello' tool deviates as a single-word, non-descriptive name. This minor inconsistency slightly reduces predictability, though the other tools follow a clear convention.
With 6 tools, the count is well-scoped for a Salt Design System server, covering key operations like listing, searching, retrieving examples, props, and documentation, plus a test tool. Each tool earns its place without being excessive or insufficient for the domain.
The tool surface is largely complete for accessing Salt Design System resources, covering listing, searching, and retrieving examples, props, and documentation. A minor gap is the lack of tools for interactive operations like modifying or testing components, but core informational workflows are well-covered without dead ends.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Serves your design system and coding standards to coding agents, so they stop guessing.
Git-backed platform for skills, tools, and context for AI agents
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/feesch/salt-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
