MCP Server

The Model Context Protocol (MCP) is an open standard that lets AI assistants read structured context from external sources. BladewindUI runs a remote MCP server at https://bladewindui.com/mcp/server that exposes the full component documentation to any MCP-compatible AI tool.

This means tools like Claude Desktop, Cursor, and VS Code Copilot can answer questions about BladewindUI components, generate correct usage examples, and look up attribute names and defaults — with no copy-pasting, no repo cloning, and no local setup required.

What Is Available

The MCP server exposes two types of context:

• Resources — one resource per component (e.g. bladewindui://docs/button), plus an index at bladewindui://docs/index. Each resource is the full Markdown documentation for that component including usage examples and attribute tables.
• Tools — three callable tools the AI can invoke: list_components, get_component_docs, and search_components.

Claude Desktop

Claude Desktop communicates with MCP servers over stdio, so connecting to a remote HTTP server requires a small proxy called mcp-remote. You will need Node.js installed on your machine.

Open your Claude Desktop configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the following entry inside mcpServers, replacing /usr/local/bin/npx with the full path to npx on your machine (run which npx in your terminal to find it):

{
  "mcpServers": {
    "bladewindui": {
      "command": "/usr/local/bin/npx",
      // "command": "npx", use this on Windows or if npx is in your PATH
      "args": ["-y", "mcp-remote", "https://bladewindui.com/mcp/server"]
    }
  }
}

    

Save the file and restart Claude Desktop fully (quit and reopen — do not just close the window). Once connected, a hammer icon will appear at the bottom of a new chat showing the available tools. You can then ask questions like "Show me all the attributes for the BladewindUI table component" or "How do I use the filepicker with automatic uploads?" and Claude will read the answer directly from the docs.

Cursor

Open Cursor Settings → MCP and click Add new global MCP server, or edit ~/.cursor/mcp.json directly:

{
  "mcpServers": {
    "bladewindui": {
      "type": "http",
      "url": "https://bladewindui.com/mcp/server"
    }
  }
}

    

For a project-scoped setup — useful when you want every developer on a team to get BladewindUI context automatically — create .cursor/mcp.json at the root of your Laravel project and commit it to version control. The format is identical to the global config above.

VS Code (GitHub Copilot)

Open User Settings (JSON) via Cmd/Ctrl + Shift + P → Preferences: Open User Settings (JSON) and add:

{
  "github.copilot.chat.mcpServers": {
    "bladewindui": {
      "type": "http",
      "url": "https://bladewindui.com/mcp/server"
    }
  }
}

    

Available Tools

Once connected, the AI can call three tools against the BladewindUI MCP server:

Example Prompts

Once your editor is connected, try prompts like these in the AI chat:

• "List all BladewindUI components."
• "How do I use the BladewindUI table component with pagination and sorting?"
• "What attributes does the filepicker accept?"
• "Show me a BladewindUI modal that confirms a destructive action."
• "Search BladewindUI docs for anything related to dark mode."
• "Generate a BladewindUI dashboard card with a statistic and an icon."