advanced⏱️ 27-37 minutes📅 Updated June 2026

Step-by-step guide to integrate 21st.dev Magic MCP server with Amazon Q CLI. Includes ai-powered ui generation and real-time component preview.

21st.dev Magic + Amazon Q CLI: 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 Amazon Q CLI, 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 Amazon Q CLI, 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 Amazon Q CLI
  • 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
  • Amazon Q CLI installed and configured
  • Compatible operating system (Windows, macOS, Linux)

Installation

Step 1: Install 21st.dev Magic

Manual installation steps:

  1. Generate API key from 21st.dev Magic Console
  2. Add configuration to IDE-specific JSON config
  3. Restart IDE to load MCP server

Configuration

Step 2: Configure Amazon Q CLI

  1. Install Amazon Q CLI

Download and install Q CLI for your platform

Visit: https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html

  1. Authenticate

Set up authentication with AWS Builder ID or IAM Identity Center

q auth

Note: Follow interactive authentication flow

  1. Verify Installation

Test Q CLI installation and configuration

q doctor
  1. Install MCP Server

Install the MCP server you want to integrate

Note: Ensure server is accessible from command line

  1. Configure MCP Integration

Add MCP server configuration to Q CLI

Note: Use q config commands to set server parameters

  1. Test Integration

Verify MCP server works with Q CLI

q chat "Use 21st.dev Magic to help me"

Configuration Details

Configure MCP servers through Q CLI commands:

# Configure MCP server integration
q config set mcp.servers.21stdev-magic.command "21st.dev magic"
q config set mcp.servers.21stdev-magic.args ""
q config set mcp.servers.21stdev-magic.env ""API_KEY": "your-21st-dev-api-key""

# Verify configuration
q config list mcp.servers

Examples

Once configured, you can use 21st.dev Magic in Amazon Q CLI:

Create Navigation Bar

Generate a modern responsive navigation component

Ask Amazon Q CLI: "/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 Amazon Q CLI: "/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 Amazon Q CLI: "/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 Amazon Q CLI: "/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

  1. Run q doctor to verify system health
  2. Start Q CLI chat session
  3. Ask Q to list available MCP tools
  4. Test specific 21st.dev Magic functionality

Test commands:

q doctor

q chat

q config list mcp.servers

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

Installation Failed

Symptoms: Q command not found, Installation errors

Cause: Incomplete installation or PATH issues

Solution:

  • Verify installer completed successfully
  • Check PATH environment variable includes Q CLI
  • Try running q doctor for diagnostics
  • Reinstall using platform-specific method

Authentication Problems

Symptoms: Auth errors, Cannot connect to AWS services

Cause: Invalid credentials or network issues

Solution:

  • Run q auth to re-authenticate
  • Verify AWS Builder ID or IAM credentials
  • Check network connectivity to AWS
  • Ensure proper AWS permissions are set

MCP Server Not Found

Symptoms: Server command not found, MCP tools unavailable

Cause: Server not installed or not in PATH

Solution:

  • Verify MCP server installation
  • Check server executable permissions
  • Use absolute path in configuration
  • Test server independently with direct command

Configuration Errors

Symptoms: Config commands fail, Settings not persisting

Cause: Invalid configuration syntax or permissions

Solution:

  • Check Q CLI configuration file permissions
  • Verify configuration syntax is correct
  • Use q config list to review current settings
  • Report issues with q issue command

21st.dev Magic not appearing in Amazon Q CLI

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

  • Verify configuration syntax
  • Check 21st.dev Magic installation
  • Restart Amazon Q CLI
  • Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with Amazon Q CLI:

  • Explore all 21st.dev Magic capabilities through Amazon Q CLI
  • Check out other MCP servers that work with Amazon Q CLI
  • Join the MCP community for tips and support
  • Consider contributing to 21st.dev Magic development

Need Help?

Related Resources

More Integrations

Explore other MCP servers that work with Amazon Q CLI

Need Help?

Join the MCP community for support and discussions

21st.dev Magic + Amazon Q CLI: MCP Setup Guide (2026)