MCP Server

DaFink UI ships a built-in Model Context Protocol server hosted at /api/mcp. Connect it to Claude or any MCP-compatible AI tool and it will have live access to every component spec, design token, and pattern, so it uses the actual DaFink UI API instead of guessing.

What the server exposes

resourcedafink://components

Full registry for every component: slug, name, category, description, props table, usage code, and dependency list.

resourcedafink://tokens

Every design token (colors, spacing, motion, typography) as a structured JSON object.

resourcedafink://patterns

The list of design pattern documents: accessibility guidelines, interactive state rules, and the visual design philosophy.

resourcedafink://rules

The list of project rule documents: coding standards, component creation rules, token usage, commit conventions, and more.

toolget_component_spec

Returns the full spec.md for a named component: variants, interactive states, accessibility notes, and design guidance.

toolget_component_registry_entry

Returns the registry entry for a component: working usage code, structured props, npm dependencies, and category. Accepts name or slug.

toolsearch_components

Searches name, slug, category, and description. Use when you know what you need but not the exact component name, e.g. "loading indicator".

toollist_by_category

Lists components by category. Pass a category name like "Overlay" to filter, or omit to get all components grouped by category.

toolget_pattern

Returns a named pattern document by slug, e.g. "accessibility" or "design".

toolget_rule

Returns a project rule document by name, e.g. "new-component", "code", or "tokens".

Connecting to Claude

Claude Desktop

Add an entry to your claude_desktop_config.json. On macOS this file lives at ~/Library/Application Support/Claude/claude_desktop_config.json.

{
  "mcpServers": {
    "dafink-ui": {
      "type": "http",
      "url": "https://ui.ryangarfinkel.dev/api/mcp"
    }
  }
}

Claude Code

Add the same entry to your .claude/settings.json (project-level) or ~/.claude/settings.json (global).

{
  "mcpServers": {
    "dafink-ui": {
      "type": "http",
      "url": "https://ui.ryangarfinkel.dev/api/mcp"
    }
  }
}

Other MCP clients

Any client that supports the MCP Streamable HTTP transport can connect directly to https://ui.ryangarfinkel.dev/api/mcp. This includes Cursor, Windsurf, and any other tool that supports remote MCP servers.

Built-in prompts

The server ships three curated prompts that wire up the right tool calls automatically. Invoke them from any MCP client that supports prompts.

use-component

Fetches both the spec and registry entry for a component, then returns the import path, a working example, and the key props.

create-component

Pulls in the new-component rules, coding standards, accessibility patterns, and design philosophy before generating all required files.

find-component

Searches the registry by use case and recommends the best component(s) with a usage example.

How it changes your workflow

Without the MCP server, asking an AI to "build a form using DaFink UI" is a gamble. It may hallucinate prop names, invent variants that don't exist, or use an old API it saw in training data.

With the server connected, Claude can call get_component_registry_entry("Form") before writing any code. It gets a working import, a runnable usage example, the exact prop table, and the component's dependencies: not prose, but structured data it can use directly.

When the right component isn't obvious, search_components("date picker") finds it. When rules matter, get_rule("new-component") returns the current spec, not whatever the model was trained on.

Keeping specs current

Each component has a spec.md file alongside its source code. The MCP server reads these files at request time; there is no cache to invalidate. When you update a component and update its spec, the server immediately returns the new information.

The spec format is documented in rules/new-component.md. Every spec must include: a one-line description, a props table, an interactive states section, accessibility notes, and the install command.