For AI developers

Using with Cursor / Copilot

1. Open a component, template, or ML block page (e.g. Components → Button, Templates → Prompt input bar, ML → ML Model Performance Dashboard).
2. Switch to the Code tab.
3. Copy the snippet and paste it into your app. Imports use @/components/ui/<name>; ensure your project has the same alias or update the paths.

Manifest API for AI tools

GET /api/manifest returns a JSON catalog of all components, templates, ML blocks, and recipes for use by AI tools. The response includes:

• components — slug, name, description, category, importPath, code, and optional examples (title + code). When present: props, dependencies, whenToUse, alternatives.
• templates — slug, name, description, type (block or page), code, optional examples, and when present patternCategory (e.g. Streaming, Tool use).
• ml — ML blocks (slug, name, description, type, category, code, optional examples). Use for dashboards, charts, model management, training, inference, etc. Install with npx ai-scaffold-kit add @ml/<slug>; see ML Components for the list.
• voice — Voice / ElevenLabs-style components (slug, name, description, installCommand). Use for orbs, waveforms, speech input, transcript viewer, etc. Install with npx ai-scaffold-kit add @voice/<slug>; see Components → Eleven Labs for the list.
• recipes — slug, name, description, blockSlugs (ordered), layoutHint. Use for full-screen flows; GET /api/recipes/<slug> returns blocks with code for each.

You can fetch the manifest from the same origin as this site (e.g. https://yoursite.com/api/manifest) to let an AI assistant list and suggest components and templates with correct copy-paste snippets.

Optional: ?version=0.3.0 or Accept: application/vnd.design-system.v1+json for versioned responses.

Context and Cursor rule

A curated context block tells an AI assistant which components and templates to use and when.GET /api/context returns { markdown, cursorRule }. Use ?format=markdown for plain markdown.

For Cursor: add a project rule (e.g. in .cursor/rules) or paste the cursorRule from the response so the assistant uses this design system when building UI.

Building dashboards (ML)

ML components are production-ready with typed props and optional demo defaults. The Code tab and CLI-installed snippet match the live component API. When building dashboards: pass your API data as props (e.g. metrics, accuracyCurve for the performance dashboard); use ./shared/chart-theme for charts so colors respect your design tokens. Add loading/error boundaries when wiring async data.

MCP server (all IDEs)

Use the design system from any MCP-capable IDE (Cursor, Claude Desktop, Windsurf, Continue, etc.) by adding the Scaffold-kit MCP server. The server exposes tools: get_manifest, get_component, get_template, get_context, get_tokens, list_recipes, get_recipe, list_ml.

Run: npx ai-scaffold-kit mcp. Configure your IDE to spawn this with stdio using the same command / args / env below (config file location is IDE-specific).

• Cursor: ~/.cursor/mcp.json or project .cursor/mcp.json
• Claude Desktop: app config directory (see Claude Desktop docs)
• Windsurf / Continue: same config; see each IDE’s MCP docs for the config path

// Example: Cursor mcp.json — add to mcpServers
"scaffold-kit": {
  "command": "npx",
  "args": ["ai-scaffold-kit", "mcp"],
  "env": {
    "SCAFFOLD_KIT_BASE_URL": "https://www.techwithcare.in"
  }
}

// Local instance: use "http://localhost:3000" for SCAFFOLD_KIT_BASE_URL

Design tokens (copy-paste)

Paste design tokens (CSS variables for colors, radius, glass) so copied components look consistent. Fetch GET /api/tokens for a ready-to-paste CSS snippet, or see Design tokens for the full snippet and usage.