Connecting OpenCode

tl;dr Give OpenCode access to Popmelt by adding our MCP server to your opencode.json config. Authorize via OAuth, and start chatting.

Before you begin

Make sure you have..

1. OpenCode installed - Get it from opencode.ai
2. A Popmelt account - Create yours at popmelt.com

Step 1: Open OpenCode Configuration

OpenCode uses a JSON configuration file. Create or edit opencode.json in your project root or home directory.

Step 2: Add Popmelt MCP Server

Add the Popmelt configuration to your opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "popmelt": {
      "type": "remote",
      "url": "https://mcp.popmelt.com"
    }
  }
}

Save the file.

Step 3: Authorize Popmelt

1. Start or restart OpenCode
2. When OpenCode connects to Popmelt, you'll see an OAuth prompt
3. Sign in to Popmelt if needed
4. Click "Grant" to authorize OpenCode's access
5. Return to OpenCode - you're connected!

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

Step 4: Start Chatting

Ask OpenCode: Connect to Popmelt and list available taste models

You should see your taste models listed.

Using Popmelt in OpenCode

• 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://supabase.com and create a model called "Superbased"
• Build complete pages:

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

Tips & Tricks

• Use global config for system-wide access: ~/.config/opencode/opencode.json
• In agent mode, Popmelt context persists across multiple operations
• Reference existing files: Update components/Button.tsx to match my Popmelt taste model styling
• Use inline editing with Popmelt: Add hover states to this button using my taste model's tokens

Troubleshooting

OpenCode isn't using Popmelt

Solutions:

• Explicitly mention Popmelt: "Use Popmelt to..."
• Restart OpenCode after config changes
• Start a new session

OpenCode doesn't recognize Popmelt

Solutions:

• Verify JSON syntax is correct (use a JSON validator)
• Check the config file location
• Restart OpenCode after config changes

Authorization doesn't complete

Solutions:

• Ensure you're logged into Popmelt
• Check for browser popup blockers
• Try authorizing in an incognito window

Common Questions

What's the difference between OpenCode and other tools?

OpenCode is an open-source AI coding assistant. It supports MCP natively, making Popmelt integration straightforward.

Can I use OpenCode with my own models?

Yes. OpenCode supports multiple LLM providers. Popmelt works regardless of which model you're using.

Does OpenCode cache Popmelt data?

OpenCode may cache MCP responses for performance. Restart to clear cache if you've updated taste models.

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
• Sampling websites - See how to capture existing website styles