AINDF — Claude Code MCP server: what it does, how to install
A read-only MCP server over a single AINDF design-system bundle. Agents browse components, slots and presets, then validate screens against those contracts.
claude mcp add aindf-kit -- npx -y @ai-native-design-framework/kitWhat AINDF does
The aindf mcp process speaks MCP over stdio and serves one design-system bundle. That bundle comes from aindf bundle, which seals a content hash (bundleSha256) so screens stay pinned to one revision. Run bundle first; there is nothing for the server to hand out otherwise.
Seven tools are exposed read-only: list-by-facet, slot-accepts, applicable-modifiers, get-preset, get-ds, get-component and validate-screen. Each ships with a title plus MCP hints such as readOnlyHint, so the client can tell that nothing gets written. Validation runs against closed contracts: props are fixed, a slot accepts a limited set of components, tokens only point downward through the layers.
Two more tools, submit-screen and request-extension, belong to an endpoint with staging, need an author token, and stage drafts that nobody has accepted yet. A local run has neither, so your agent hands back a ScreenSpec or tells you what is missing. The package carries no design system of its own, and a builder receipt is not a signature.
What it helps with
- see which components a given slot will take
- validate a screen against the bundle before building
- pull a component contract with its template and props
- find which modifiers apply to a role
- check which design-system revision a screen is pinned to
Example prompts for the agent
- List the components in this bundle that accept the
actionsslot - Run
validate-screenonsettings.screen.jsonand show me what fails - Which modifiers can I apply to the button here?
How to install AINDF
Platform CLI
claude mcp add aindf-kit -- npx -y @ai-native-design-framework/kitPlatform CLI
codex mcp add aindf-kit -- npx -y @ai-native-design-framework/kitConfig file
{
"mcpServers": {
"aindf-kit": {
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}Config file
{
"servers": {
"aindf-kit": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ai-native-design-framework/kit"
]
}
}
}Platform CLI
gemini mcp add aindf-kit npx -y @ai-native-design-framework/kitStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about AINDF
How do I install AINDF in Claude Code?
Run claude mcp add aindf-kit -- npx -y @ai-native-design-framework/kit. The client then starts the server through npx whenever it connects.
What does AINDF actually do?
It gives an agent the contents of one design-system bundle: components with their props and slots, applicable modifiers, presets. A separate tool checks a written screen against those contracts.
Why can't the agent submit a screen itself?
submit-screen and request-extension are offered only by an endpoint with staging, and they require an author token. The local aindf mcp run is read-only with seven tools, so the result comes back to you.
