Installation

Install and configure React components from Evo React Components

Installing the React components Docs

Install React components from Evo React Components

The React components are based on Shadcn, so use the Shadcn installation instructions to configure your project to use them with the following additions:

Before adding any components, add the EVO styles by running the following command:

npx shadcn@latest add https://registry.eds.access-evo.com/eds-style.json

When adding a component, use the full registry path (not just the component name). For example:

npx shadcn@latest add https://registry.eds.access-evo.com/r/button.json

Configuring the MCP server

Configure the MCP server for AI tool integration

The MCP server is at https://func-eds-registry-mcp-poc-uks-ejaje4faexb7dkew.uksouth-01.azurewebsites.net/api/mcp. It's an HTTP streamable MCP, so it'll work in most MCP compatible AI tools.

MCP with Claude

Claude web and Claude desktop are already configured with this MCP server if you have the Enterprise license.

MCP with VS Code

To add the MCP server to a VS Code (with GitHub Copilot) project, follow the VS Code docs. Then update your mcp.json file with the following:

{
  "servers": {
    "evo-components": {
      "type": "streamableHttp",
      "url": "https://func-eds-registry-mcp-poc-uks-ejaje4faexb7dkew.uksouth-01.azurewebsites.net/api/mcp",
      "timeout": 30000,
      "retry": {
        "maxAttempts": 3,
        "delay": 1000
      }
    }
  }
}

Note: If you are using other VS Code based tools (e.g., Cursor), the JSON is the same but the "servers" field may be "mcpServers".

Tip: You usually have to restart VS Code to enable it to recognize and use a new MCP server.

MCP with Devin

To configure the MCP for your Devin organization, carry out the following steps:

Go to Settings > MCP Marketplace
In "Installed MCPs", check if "Evo Design System" or "EVO Components" is already installed. If not, continue with the steps
Click the "Add Your Own" option (you may need to be a Devin admin to do this)
Fill in the following fields:
- Server Name: EVO React Components
- Transport Type: HTTP
- Server URL: https://func-eds-registry-mcp-poc-uks-ejaje4faexb7dkew.uksouth-01.azurewebsites.net/api/mcp
- Authentication: None
- Custom Headers: timeout: 30000

How to Use MCP in Prompts

Best practices to get the best results

🎯 Effective Prompts

                  # For listing components:
                  "List all shadcn/ui components from Evo React Components"
                  
                  # For specific search:
                  "Search for dashboard components from Evo React Components"
                  
                  # For installation:
                  "How do I install the dashboard component from Evo React Components?"
                  
                  # For code examples:
                  "Show me an example of using the KPI component from EDS"
                  
                  # For setup:
                  "Configure a Next.js project with EDS theme"

💡 Prompt Tips

• Specify source: Mention “Evo React Components” or “Evo Design System”
• Be clear: Describe exactly what type of component you're looking for
• Ask for examples: Request code and installation instructions
• Mention framework: Next.js, Vite, etc. for specific configurations

⚡ Quick Commands

Short Commands:

• “EDS components list”
• “Install EDS button”
• “EDS theme setup”

Detailed Commands:

• “Show me all EDS components”
• “How to install button from EDS”
• “Setup EDS theme for my project”

Adding an AI agent rule

Configure AI agents to automatically use EVO React components

To force your AI agent to use the EVO React components (where appropriate), you can give it a rule. A rule is just a saved AI prompt that can be referenced when you ask AI to do something.

Note: Different AI tools may use different terminology for 'rule' (e.g., Devin calls it a "playbook").

Here's a simple but effective rule that won't consume many tokens:

When implementing UI components ALWAYS use the evo-components MCP server to check Evo React Components for existing components. They are shadcn-based components.

If an appropriate EVO component exists, add it to the project and use it.

In the rule configuration, set it so that the AI agent always uses this rule without explicit prompt references.

Note: Different AI tools have different locations for their rules. Here are a few of the common ones:

VS Code (GitHub Copilot) - .github/copilot-instructions.md
Cursor - .cursor/rules/your-rule.mdc

Need help? Check out the official shadcn/ui documentation for more detailed guides.