MCP Server

The Model Context Protocol (MCP) is an open standard that allows AI assistants like Claude, Cursor, and other AI-powered tools to securely connect with external data sources and systems. Think of it as a "universal remote" that lets your AI tools access real-world data and functionality.

DeDevs UI Design Registry supports MCP to supercharge your development workflow across various domains, giving your AI assistant detailed knowledge about our specialized components for AI interfaces, blockchain applications, and developer portfolios.

Installation Guide

Step 1: Choose Your AI Tool

First, make sure you're using an AI development tool that supports MCP:

• Claude Desktop (Free - recommended for beginners)
• Cursor (AI-powered code editor)
• Windsurf by Codeium (AI development platform)
• Other MCP-compatible tools

Step 2: Locate Your Configuration File

Depending on your AI tool, you'll need to edit one of these files:

• Claude Desktop: .cursor/mcp.json
• Cursor: .cursor/mcp.json
• Windsurf: .codeium/windsurf/mcp_config.json
• Other tools: Check your tool's MCP documentation

Step 3: Add DeDevs UI Design Registry Configuration

Copy and paste this configuration into your MCP config file:

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

Step 4: Restart Your AI Tool

Close and reopen your AI application for the changes to take effect.

Step 5: Verify the Connection

Test the integration by asking your AI assistant:

"What DeDevs UI Design Registry components are available for building an AI chat interface?"

If successful, your AI should be able to list and explain our specialized chatbot interface components!

Multiple MCP Servers

You can use DeDevs UI Design Registry alongside other MCP servers:

{
  "mcpServers": {
    "dedevs-ui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://ui.dedevs.com/api/mcp/mcp"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"]
    },
    "filesystem": {
      "command": "npx", 
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
    }
  }
}

Usage Examples

Getting Chatbot Component Information

Ask your AI assistant:

Show me how to use the DeDevs UI Design Registry MessageBubble component with different variants

Expected response will include current documentation and code examples for our specialized chat interface components.

Building Conversational Interfaces

Help me create an AI assistant chat interface using DeDevs UI Design Registry components

Your AI can suggest appropriate conversation components like MessageList, UserInput, and ThinkingIndicator with implementation code.

Reasoning Visualization

How can I display my AI's chain-of-thought reasoning using DeDevs UI Design Registry?

Get specific guidance on implementing components that visualize AI reasoning steps and source attribution.

Styling Guidance

What are the recommended spacing tokens for chat message threads in DeDevs UI Design Registry?

Get up-to-date information about design tokens and styling conventions specifically for chat interfaces.

Security and Privacy

Data Handling

• The DeDevs UI Design Registry MCP server only provides public component documentation
• No personal conversation data or code is transmitted to our servers
• All communication happens through your chosen AI tool's security layer, protecting sensitive chat content

Authentication

• No authentication required for public component information
• Future premium AI interface components may require API keys
• Always use official DeDevs UI Design Registry MCP endpoints