SakaniUI

AI & MCP

Sakani UI is built to be used by AI assistants as well as people: a contract they can read, and a server they can ask.

The manifest

sakaniui.com/manifest.json (also shipped as @sakaniui/react/manifest.json) lists every exported component and block with its import path, props, types, allowed values, defaults and required props, plus every design token. It is generated from the TypeScript source on each build, so it always matches the installed version. If a prop, value or token is not in it, it does not exist.

import manifest from '@sakaniui/react/manifest.json';

const button = manifest.components.find((c) => c.name === 'Button');
button.props;                    // name, type, values, default, required, description
button.contract.requiredProps;   // ['children']

requiresAccessibleName is true when a required prop (an aria-label or alt text) is the only thing that names the control. An assistant must not drop it.

{
  "name": "IconButton",
  "kind": "component",
  "category": "Core",
  "import": "@sakaniui/react",
  "summary": "...",
  "props": [
    { "name": "icon", "type": "IconComponent", "required": true },
    { "name": "variant", "type": "\"destructive\" | \"primary\" | ...", "values": ["destructive", "primary"], "default": "primary", "required": false },
    { "name": "aria-label", "type": "string", "required": true }
  ],
  "contract": { "requiredProps": ["icon", "aria-label"], "requiresAccessibleName": true }
}

The MCP server

The package includes a small Model Context Protocol server. It runs locally, has no dependencies and answers from the installed version. Add it to your editor's MCP config (Cursor, Windsurf, Claude Desktop, ...):

{
  "mcpServers": {
    "sakaniui": {
      "command": "npx",
      "args": ["-y", "-p", "@sakaniui/react", "sakaniui-mcp"]
    }
  }
}

In Claude Code:

claude mcp add sakaniui -- npx -y -p @sakaniui/react sakaniui-mcp

Tools

  • search_components: find a component or block by what you need, e.g. “date picker”.
  • get_component: the full contract for one component before writing JSX.
  • list_components: browse everything, filtered by kind or category.
  • get_tokens: the design tokens that exist, filtered by group.
  • check_usage: validates the props you are about to use: missing required props, values outside an enum, props that do not exist.
  • get_guide: sections of the AGENTS.md guide, such as “When nothing fits”.

The guide

The manifest says what exists; AGENTS.md says why and when not to use it. Read it at /llms-full.txt, or index everything from /llms.txt.

PreviousTokensNextButton