@razorpay/blade-mcp v0.2.3

Blade MCP

Blade MCP is a Model Context Protocol (MCP) server that implements Razorpay's Design Guidelines and allows you to build Web Interfaces using Blade Design System.

Available Tools

Prerequisites

• Node.js 18.x or higher (install using NVM)

Integrations

Cursor or VS Code

Create or update your mcp.json file with:

{
  "mcpServers": {
    "blade-mcp": {
      "command": "npx",
      "args": ["-y", "@razorpay/blade-mcp@latest"]
    }
  }
}

Claude Desktop

Add the following to claude_desktop_config.json:

{
  "mcpServers": {
    "blade-mcp": {
      "command": "npx",
      "args": ["-y", "@razorpay/blade-mcp@latest"]
    }
  }
}

!NOTE

• Learn about how to configure MCP servers in Claude Desktop
• If you're using nvm, you might want to follow these steps instead of npx
• Learn how to install Claude Desktop

How to use

• Follow Integrations Guide to configure MCP servers in Cursor
• Open Cursor, Click "Open Project" and select an empty folder
• Press CMD + I (or CTRL + I) to open Cursor's chat
• Type "Hi blade" and get started

Can you create a signup form with best UX practices using Blade?

The AI agents will use the MCP server to retrieve components and generate appropriate code.

Local Development Setup

Clone the repository

# Clone the repository
git clone https://github.com/razorpay/blade.git
cd blade

# Install dependencies
yarn

# Navigate to the MCP server package
cd packages/blade-mcp

# Build the package
yarn build

Local Development with Cursor

For local development with Cursor, update your mcp.json with the local path:

{
  "blade-mcp": {
    "command": "node",
    "args": ["<<USER_PATH>>/blade/packages/blade-mcp/dist/server.js"]
  }
}

Replace the <<USER_PATH>> with your actual local path to the repository.

Contributing

We welcome contributions! See CONTRIBUTING.md for details.

License

MIT © Razorpay