Connecting VS Code

tl;dr Give VS Code access to Popmelt with one-click install. Authorize via OAuth, and start chatting.

Before you begin

Make sure you have..

1. VS Code installed - Download from code.visualstudio.com
2. GitHub Copilot extension (recommended for AI features)
3. A Popmelt account - Create yours at popmelt.com

Step 1: Add Popmelt to VS Code

Instant

Visit popmelt.com/app/connect, find VS Code in the list, and click to install. This will configure everything automatically.

Manual

Add Popmelt to your VS Code settings:

1. Open VS Code Settings (Cmd+, on Mac, Ctrl+, on Windows)
2. Search for "MCP" in settings
3. Click "Edit in settings.json"
4. Add the Popmelt configuration:

{
  "mcp.servers": {
    "popmelt": {
      "url": "https://mcp.popmelt.com"
    }
  }
}

Step 2: Authorize Popmelt

1. Reload VS Code (Cmd+Shift+P → "Developer: Reload Window")
2. When VS Code connects to Popmelt, authorize in your browser
3. Sign in to Popmelt if needed
4. Click "Grant" to authorize VS Code's access
5. Return to VS Code - you're connected!

🔒 Popmelt never reads or stores your code or conversations. VS Code will ask for permission before using Popmelt tools.

Step 3: Start Chatting

Open the Copilot Chat panel and ask: Connect to Popmelt and list available taste models

You should see your taste models listed.

Using Popmelt in VS Code

• Set your taste model: Use the Melt taste model for this project
• Generate components: Create a pricing section with 3 tiers using my taste model
• Sample and create: Use Popmelt to sample https://vercel.com and create a model called "Vercetti"
• Build complete pages:

- Hero section with headline and CTA
- 3 feature cards
- Pricing table
- Footer

Tips & Tricks

• Add project-specific Copilot instructions: "github.copilot.chat.instructions": ["Use Popmelt taste models for all UI styling"]
• Use workspace settings for per-project taste models by adding config to .vscode/settings.json
• Copilot's inline suggestions will reference your active taste model when generating UI code
• Reference existing code: Update the Button component to match my Popmelt taste model's styling

Troubleshooting

VS Code isn't using Popmelt

Solutions:

• Explicitly mention Popmelt in your prompt
• Add Copilot instructions as shown in Tips & Tricks
• Verify taste model is set: "What's my active Popmelt taste model?"

VS Code doesn't show MCP settings

Solutions:

• Ensure you're using a recent VS Code version
• Check if MCP support requires an extension
• Verify GitHub Copilot extension is installed and active

Popmelt doesn't connect

Solutions:

• Verify the settings.json syntax is correct
• Reload VS Code window
• Check firewall/proxy settings
• Try the URL directly in a browser

Common Questions

Does this work without GitHub Copilot?

MCP servers provide context to AI tools. While VS Code's MCP support focuses on Copilot, other AI extensions may also leverage MCP.

Can I use multiple taste models?

Yes. Switch taste models per-project or per-conversation: Use the "Zinc" taste model for this component

How do I see available tools?

Ask Copilot: What Popmelt tools are available?

What next?

• Build Landing Pages - See how to design web pages with Popmelt
• Create taste models - See how to make your own custom taste models
• Cursor Integration - Similar IDE setup