21st.dev Magic + Microsoft Copilot Studio: Complete MCP Integration
21st.dev Magic is a MCP server that Create crafted UI components inspired by the best 21st.dev design engineers..
When integrated with Microsoft Copilot Studio, you can:
- Generate crafted UI components using AI design patterns
- Live preview of generated components
- Full TypeScript support for generated components
This guide provides step-by-step instructions to set up 21st.dev Magic in Microsoft Copilot Studio, including configuration, examples, and troubleshooting.
What You'll Achieve
After completing this setup:
- 21st.dev Magic will be fully integrated and operational
- You can use 21st.dev Magic tools directly in Microsoft Copilot Studio
- All 21st.dev Magic capabilities will be available for your workflows
- Access to 4 different tools
Prerequisites
Before starting, ensure you have:
- 21st.dev account
- API key
- 21st.dev Magic API key for authentication
- Microsoft Copilot Studio installed and configured
- Compatible operating system (Web Browser, Microsoft 365)
Installation
Step 1: Install 21st.dev Magic
Manual installation steps:
- Generate API key from 21st.dev Magic Console
- Add configuration to IDE-specific JSON config
- Restart IDE to load MCP server
Configuration
Step 2: Configure Microsoft Copilot Studio
- Enable Generative Orchestration
Generative Orchestration must be enabled in your Copilot Studio environment to use MCP
Visit: https://learn.microsoft.com/en-us/microsoft-copilot-studio/agent-extend-action-mcp
Note: This is a prerequisite - MCP will not work without it
- Access Copilot Studio
Log in to Microsoft Copilot Studio with appropriate permissions to create and configure agents
Visit: https://copilotstudio.microsoft.com
Note: Requires organizational access or trial subscription
- Navigate to Connectors
In Copilot Studio, go to the Connectors section where you can add new integrations
Note: Location may vary based on interface updates
- Create MCP Connector
Click "Add Connector" and select "Model Context Protocol (MCP)" from the available connector types
Note: Use the YAML schema template provided by Copilot Studio
- Configure {server_name} Connection
Fill in the YAML schema with {server_name} server details including command, arguments, and environment variables
21st.dev magic
Note: Copilot Studio dynamically reflects changes as tools and resources are updated on the MCP server
- Add Tools to Agent
Once connected, add the MCP server tools and resources to your specific agent through the Copilot Studio UI
Note: Currently supports Tools and Resources (Prompts not yet supported)
- Test Agent Capabilities
Test your agent to verify it can access and use the {server_name} tools correctly
Configuration Details
Connect MCP server to Microsoft Copilot Studio:
Step 1: Create YAML Connector Schema
In Copilot Studio, navigate to the connectors section and create a new MCP connector using the YAML schema template:
# MCP Connector Configuration for 21st.dev Magic
name: 21st.dev Magic-mcp-connector
description: Create crafted UI components inspired by the best 21st.dev design engineers.
mcp_server:
command: 21st.dev magic
args:
env: "API_KEY": "your-21st-dev-api-key"
Step 2: Add to Agent
Once connected, add the MCP server's tools and resources to your Copilot Studio agent through the UI.
Examples
Once configured, you can use 21st.dev Magic in Microsoft Copilot Studio:
Create Navigation Bar
Generate a modern responsive navigation component
Ask Microsoft Copilot Studio: "/ui create a modern navigation bar with responsive design"
Expected Result: Responsive navigation component with mobile menu, logo placement, and styling
Generate Dashboard Card
Create a dashboard card with metrics display
Ask Microsoft Copilot Studio: "/ui design a dashboard card showing user analytics with charts"
Expected Result: Card component with chart integration, metrics display, and responsive layout
Build Form Component
Create a contact form with validation
Ask Microsoft Copilot Studio: "/ui create a contact form with validation and modern styling"
Expected Result: Form component with input validation, error states, and submit handling
Design Landing Hero
Generate a landing page hero section
Ask Microsoft Copilot Studio: "/ui build a hero section for a SaaS product with CTA buttons"
Expected Result: Hero component with headline, description, call-to-action buttons, and background
Testing Your Setup
- Launch Microsoft Copilot Studio
- Verify 21st.dev Magic is available in the tools list
- Test basic 21st.dev Magic functionality
Troubleshooting
Common Issues
API Key Invalid
Symptoms: Authentication errors, Access denied messages, Server connection failures
Cause: Invalid or expired API key
Solution:
- Generate new API key from 21st.dev Magic Console
- Update API_KEY in IDE configuration
- Restart IDE to reload configuration
IDE Not Detecting MCP Server
Symptoms: MCP commands not available, Server not listed in IDE
Cause: Incorrect configuration file or location
Solution:
- Verify config file is in correct location for your IDE
- Check JSON syntax in configuration file
- Restart IDE after configuration changes
- Use CLI installation for automatic setup
Component Generation Fails
Symptoms: Empty responses, Error messages during generation
Cause: Network issues or service limitations
Solution:
- Check internet connectivity
- Verify API key has sufficient quota
- Try simpler prompts initially
- Contact support if issues persist
TypeScript Errors in Generated Code
Symptoms: Type errors, Compilation failures
Cause: Missing dependencies or type definitions
Solution:
- Install required TypeScript dependencies
- Update @types packages
- Configure TypeScript strict mode properly
- Import necessary type definitions
Generative Orchestration Not Available
Symptoms: MCP option not visible, Cannot add MCP connectors
Cause: Generative Orchestration is not enabled for your environment
Solution:
- Contact your Microsoft 365 administrator
- Enable Generative Orchestration in tenant settings
- Verify your subscription includes Copilot Studio with MCP support
- Check Microsoft Learn documentation for enablement steps
MCP Connector Connection Failed
Symptoms: Connector shows "Disconnected" status, Tools not available to agent
Cause: MCP server not accessible or configuration error
Solution:
- Verify the MCP server command is correct and accessible
- Check all required environment variables are set
- Test the MCP server independently outside Copilot Studio
- Review YAML schema for syntax errors
- Check network connectivity and firewall rules
Tools Not Appearing in Agent
Symptoms: Connector connected but tools missing, Agent cannot invoke MCP tools
Cause: Tools not added to agent or synchronization issue
Solution:
- Manually add tools to agent through Copilot Studio UI
- Refresh connector to sync latest tools from MCP server
- Verify tools are published on the MCP server
- Check agent configuration includes the MCP connector
MCP Server Tools Update Not Reflected
Symptoms: New tools not appearing, Old tools still visible after removal
Cause: Copilot Studio cache or sync delay
Solution:
- Disconnect and reconnect the MCP connector
- Wait a few minutes for dynamic sync to occur
- Manually refresh the connector in Copilot Studio
- Restart the MCP server if possible
21st.dev Magic not appearing in Microsoft Copilot Studio
Symptoms: Server not listed, Tools not available
Cause: Configuration or installation issue
Solution:
- Verify configuration syntax
- Check 21st.dev Magic installation
- Restart Microsoft Copilot Studio
- Check logs for error messages
Next Steps
Now that 21st.dev Magic is integrated with Microsoft Copilot Studio:
- Explore all 21st.dev Magic capabilities through Microsoft Copilot Studio
- Check out other MCP servers that work with Microsoft Copilot Studio
- Join the MCP community for tips and support
- Consider contributing to 21st.dev Magic development
Need Help?
- Search for 21st.dev Magic documentation
- Check the Microsoft Copilot Studio MCP guide
- Join the MCP community discussions