Using Talent with Cursor

Cursor is an AI-powered code editor that can be enhanced with Popmelt Talent to make better design decisions. This guide will walk you through connecting your Talent to Cursor using the Model Context Protocol (MCP).

Prerequisites

Before you begin, make sure you have:

1. Cursor IDE installed - Download from cursor.sh
2. A Popmelt account with at least one Talent created
3. A secret key generated from your Popmelt account settings

Step 1: Generate Your Secret Key

If you haven't already generated a secret key:

1. Log into your Popmelt account
2. Navigate to Account Settings
3. Go to the Secret Keys section
4. Click Generate New Key
5. Copy and securely store your secret key

Step 2: Configure Cursor

Open Cursor Settings

1. Open Cursor IDE
2. Press Cmd+, (Mac) or Ctrl+, (Windows/Linux) to open settings
3. Look for the Model Context Protocol or MCP section in settings

Add Popmelt Configuration

Add the following configuration to your Cursor MCP settings:

{
  "Popmelt": {
    "url": "https://web-production-98d7b.up.railway.app/sse?secretKey=YOUR_SECRET_KEY_HERE"
  }
}

Important: Replace YOUR_SECRET_KEY_HERE with your actual secret key from Step 1.

Step 3: Verify the Connection

1. Restart Cursor to load the new MCP configuration
2. Open a new project or file
3. Try asking the AI assistant about design decisions
4. You should now see responses that reference your Talent's design principles

Step 4: Using Talent in Your Workflow

Once connected, you can leverage your Talent in several ways:

Design System Queries

Ask questions about your design system:

• "What colors should I use for primary buttons?"
• "What's the correct spacing for this layout?"
• "How should I style error states?"

Component Generation

Request components that follow your Talent's guidelines:

• "Create a card component using our design system"
• "Generate a form with proper validation styles"
• "Build a navigation menu following our brand guidelines"

Code Reviews

Get feedback on existing code:

• "Does this component follow our design principles?"
• "How can I improve the accessibility of this element?"
• "Is this layout consistent with our spacing system?"

Common Use Cases

Building UI Components

// Ask: "Create a button component following our design system"
// The AI will now reference your Talent's button specifications
// including colors, typography, spacing, and interaction states

Maintaining Design Consistency

/* Ask: "What CSS classes should I use for this card layout?" */
/* The AI will suggest classes that align with your Talent's */
/* spacing, colors, and typography specifications */

Responsive Design

<!-- Ask: "How should this component adapt on mobile?" -->
<!-- Get responsive design suggestions based on your Talent's -->
<!-- breakpoint and mobile-first principles -->

Troubleshooting

Connection Issues

Problem: Cursor doesn't recognize the Popmelt integration

• Solution: Verify your secret key is correct and restart Cursor

Problem: AI responses don't reference the design principles of your Talent

• Solution: Check that your Talent is published and accessible

Problem: MCP configuration not found

• Solution: Ensure you're using a recent version of Cursor with MCP support

Performance Tips

• Keep Talent focused: Smaller, focused Talent loads faster than large ones
• Update regularly: Sync your Talent to get the latest design decisions
• Use specific queries: Ask specific questions to get better Talent-informed responses