21st.dev Magic + NVIDIA Agent Intelligence Toolkit: 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 NVIDIA Agent Intelligence Toolkit, 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 NVIDIA Agent Intelligence Toolkit, 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 NVIDIA Agent Intelligence Toolkit
• 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
• NVIDIA Agent Intelligence Toolkit installed and configured
• Compatible operating system (Python Package (pip), Docker Container, Framework Integration)

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 NVIDIA Agent Intelligence Toolkit

1. Open NVIDIA Agent Intelligence Toolkit settings
2. Navigate to MCP server configuration
3. Add 21st.dev Magic server with appropriate settings
4. Save and restart if needed

Examples

Once configured, you can use 21st.dev Magic in NVIDIA Agent Intelligence Toolkit:

Create Navigation Bar

Generate a modern responsive navigation component

Ask NVIDIA Agent Intelligence Toolkit: "/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 NVIDIA Agent Intelligence Toolkit: "/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 NVIDIA Agent Intelligence Toolkit: "/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 NVIDIA Agent Intelligence Toolkit: "/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. Launch NVIDIA Agent Intelligence Toolkit
2. Verify 21st.dev Magic is available in the tools list
3. 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

MCP Server Connection Failed

Symptoms: Connection refused errors, Timeout connecting to MCP server, URL not responding

Cause: MCP server not running or incorrect URL configuration

Solution:

• Verify MCP server is running and accessible
• Check URL in configuration matches server endpoint
• Ensure network/firewall allows connection to server port
• Test connection with curl or browser before agent integration

Tool Schema Validation Errors

Symptoms: Invalid input format errors, Schema mismatch warnings, Type validation failures

Cause: Input data does not match MCP tool schema

Solution:

• Use CLI to inspect tool schema: aiq info mcp --url <url> --tool <name>
• Validate input data matches expected types and required fields
• Check JSON schema definitions in MCP server documentation
• Convert inputs to proper format (dict, JSON string, or schema instance)

Framework Integration Issues

Symptoms: Import errors, Framework not found, Incompatible versions

Cause: Missing or incompatible framework dependencies

Solution:

• Ensure target framework (LangChain, LlamaIndex, etc.) is installed
• Check version compatibility between AIQ toolkit and framework
• Install framework-specific dependencies as needed
• Refer to documentation for framework-specific configuration

Performance Bottlenecks

Symptoms: Slow agent responses, High token usage, Workflow timeouts

Cause: Inefficient tool usage or workflow design

Solution:

• Enable observability to identify bottlenecks
• Use profiling features to analyze tool and agent performance
• Review token tracking metrics to optimize LLM calls
• Consider hyperparameter tuning for agent optimization

OpenTelemetry Integration Errors

Symptoms: Observability data not appearing, Telemetry export failures, Missing metrics

Cause: OpenTelemetry not properly configured

Solution:

• Verify OpenTelemetry collector is running
• Check observability configuration in AIQ settings
• Ensure proper instrumentation of agent workflows
• Review OpenTelemetry export settings and endpoints

21st.dev Magic not appearing in NVIDIA Agent Intelligence Toolkit

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check 21st.dev Magic installation
• Restart NVIDIA Agent Intelligence Toolkit
• Check logs for error messages

Next Steps

Now that 21st.dev Magic is integrated with NVIDIA Agent Intelligence Toolkit:

• Explore all 21st.dev Magic capabilities through NVIDIA Agent Intelligence Toolkit
• Check out other MCP servers that work with NVIDIA Agent Intelligence Toolkit
• 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 NVIDIA Agent Intelligence Toolkit MCP guide
• Join the MCP community discussions