FewTone UI

MCP server

Connect your AI coding assistant to FewTone UI. It can then find the component that fits what you're building, read its docs, props and examples, and install it in your project with the shadcn CLI, without you copying anything. Quickest way: press Copy prompt and paste it into your assistant, and it sets itself up.

The server is free and needs no key or account. It only reads the component catalogue: it never sees or changes your code. Your assistant runs the install command in your project, as it would any other.

https://ui.fewtone.com/mcp

Connect your assistant

Claude Code

Run this in your project:

claude mcp add --transport http fewtone-ui https://ui.fewtone.com/mcp

Add --scope user to use it in every project.

Cursor

Add the server to .cursor/mcp.json in your project, or to ~/.cursor/mcp.json for every project:

{
  "mcpServers": {
    "fewtone-ui": {
      "url": "https://ui.fewtone.com/mcp"
    }
  }
}

VS Code (GitHub Copilot)

Add the server to .vscode/mcp.json in your project:

{
  "servers": {
    "fewtone-ui": {
      "type": "http",
      "url": "https://ui.fewtone.com/mcp"
    }
  }
}

Windsurf

Add the server to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "fewtone-ui": {
      "serverUrl": "https://ui.fewtone.com/mcp"
    }
  }
}

Claude desktop app and claude.ai

Open Settings → Connectors, choose Add custom connector, name it FewTone UI and paste https://ui.fewtone.com/mcp as the URL.

Other assistants

Any assistant that supports remote MCP servers (Streamable HTTP) can use the URL above. For one that only runs local servers, connect through mcp-remote:

{
  "mcpServers": {
    "fewtone-ui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://ui.fewtone.com/mcp"]
    }
  }
}

Try it

Ask your assistant in plain words. For example:

  • "Which FewTone UI component should I use to confirm before deleting an account?"
  • "Add a FewTone UI date picker to the booking form."
  • "Show me the props of the FewTone UI Tabs and an example with icons."
  • "Install the FewTone UI button, dialog and toast with pnpm."

Mention FewTone UI in the request the first time, so your assistant knows to use the server.

Tools

ToolWhat it does
search_componentsFinds the components that fit a need, from keywords or a description of what you're building
list_componentsLists every component by category, or one category
get_componentA component's docs: when to use it, the install command, usage, every prop, its examples, and optionally its source
get_component_exampleThe code of one of a component's examples
get_install_commandOne shadcn CLI command for one or more components, for pnpm, npm, yarn or bun

Components install with the shadcn CLI, so the project needs components.json. See Installation for setting up a new project.

With the shadcn MCP server

FewTone UI is a shadcn registry, so shadcn's own MCP server can browse and install it too. Add the registry to components.json:

{
  "registries": {
    "@fewtone": "https://ui.fewtone.com/r/{name}.json"
  }
}

The FewTone UI server knows more about each component, such as when to use it and its examples, so you can connect both.

Next steps