Dreamy UI has a MCP server that you can use to get information about the components and patterns.

The Dreamy UI has a Model Context Protocol server that provides AI assistants (like Claude Code, Cursor, and Copilot) with access to the Dreamy UI component library.

The Dreamy UI MCP exposes the following tools to AI agents:

• list_components: List or search all components (id, name, description, recipe/pattern). Pass optional query to filter.
• get_component: LLM-ready API reference — props, styling variants (variant / size / scheme), compound exports, install/import, and a primary usage example. Start here before writing UI code.
• get_component_examples: All official docs code snippets for a component (variants, sizes, controlled mode, etc.).
• get_component_source: Full component + recipe/pattern source when customizing internals.

Aliases: get_components → list_components, get_component_example → get_component_examples.

• list_docs: List non-component docs (guide, ai-agents, frameworks, theming, hooks). Optional query to filter. Component docs are excluded — use component tools for those.
• get_doc: Fetch a docs page as markdown by id (e.g. theming/tokens, guide/installation). Use when skills / other tools do not cover the question.

1. list_components (optionally with query) to discover what exists
2. get_component for each component you will use
3. get_component_examples if you need more patterns
4. list_docs / get_doc for theming, setup, frameworks, hooks, or other non-component docs
5. get_component_source only when editing styles or internals

The MCP server currently supports only stdio transport and is published at @dreamy-ui/mcp.

The fastest way to configure AI clients is with the CLI:

pnpm dlx dreamy add-mcp

Or target specific clients:

pnpm dlx dreamy add-mcp --client cursor,vscode

Supported clients: claude, cursor, vscode, windsurf, codex.

In the .cursor/mcp.json file at the root of your project, add the following configuration:

{
  "mcpServers": {
    "dreamy-ui": {
      "command": "npx",
      "args": ["-y", "@dreamy-ui/mcp"]
    }
  }
}

In the .vscode/mcp.json file at the root of your project, add the MCP server block:

{
  "servers": {
    "dreamy-ui": {
      "command": "npx",
      "args": ["-y", "@dreamy-ui/mcp"]
    }
  }
}

The MCP server is now ready to use. Click on Start on the MCP server.

Run the following command in your terminal to add the Dreamy UI MCP server:

claude mcp add dreamy-ui -- npx -y @dreamy-ui/mcp

The MCP server is now ready to use. Start a Claude Code session by running claude.

1. Navigate to "Settings" > "Windsurf Settings" > "Cascade"
2. Click the "Manage MCPs" button, then click the "View raw config" button.
3. Add the following to the MCP configuration file (.codeium/windsurf/mcp_config.json):

{
  "mcpServers": {
    "dreamy-ui": {
      "command": "npx",
      "args": ["-y", "@dreamy-ui/mcp"]
    }
  }
}

1. Go to Settings > Open Settings
2. In the settings.json file, add MCP server as a new context server

{
  "context_servers": {
    "dreamy-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "@dreamy-ui/mcp"]
    }
  }
}

To run the MCP server in a local or development environment using a custom MCP client, you need to add the MCP server to the client's configuration file.

{
  "mcpServers": {
    "dreamy-ui": {
      "command": "npx",
      "args": ["-y", "@dreamy-ui/mcp"]
    }
  }
}