Cursor Integration

Overview

Cursor is an AI-powered code editor built on VS Code. With Yoku's MCP server, Cursor's AI assistant can access real-time brand data directly within your development workflow.

What you can do:

• Query brand information while coding
• Generate on-brand UI components with accurate colors
• Research companies without leaving your editor
• Enrich data structures with brand details

Prerequisites

Before you begin, ensure you have:

• Cursor installed - Download Cursor
• A Yoku account - Sign up here
• An API key - Generate from dashboard settings

Step-by-Step Configuration

Step 1: Open Cursor Settings

Open Cursor and access the settings:

macOS:

• Press Cmd + , (Command + Comma)
• Or go to Cursor > Settings... in the menu bar

Windows/Linux:

• Press Ctrl + , (Control + Comma)
• Or go to File > Preferences > Settings

Step 2: Access MCP Settings

In the Cursor settings interface:

1. Click on "Features" in the left sidebar
2. Scroll down to find the "Model Context Protocol" section
3. Click "Edit in settings.json" to open the MCP configuration file

Alternatively, you can:

• Press Cmd/Ctrl + Shift + P to open the command palette
• Type "Preferences: Open User Settings (JSON)"
• Look for the mcpServers section, or create it if it doesn't exist

Step 3: Add Yoku MCP Server Configuration

Add the following configuration to your settings.json:

{
  "mcpServers": {
    "yoku": {
      "url": "https://mcp.yoku.app",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY_HERE"
      }
    }
  }
}

If you already have other MCP servers configured, add Yoku as a new entry:

{
  "mcpServers": {
    "existing-server": {
      // ... your existing configuration
    },
    "yoku": {
      "url": "https://mcp.yoku.app",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY_HERE"
      }
    }
  }
}

Step 4: Save and Restart Cursor

1. Save the settings.json file (Cmd/Ctrl + S)
2. Restart Cursor to apply the changes
3. Wait a few seconds for the MCP connection to initialize

Step 5: Verify the Connection

To verify Yoku's MCP server is connected:

1. Open a new chat with Cursor's AI (Cmd/Ctrl + L)
2. Type: "List available MCP tools"
3. You should see brand.get and brand.search in the response

Alternatively, try a direct query:

"Use the brand.get tool to fetch information about stripe.com"

If successful, you'll see detailed brand information including logos, colors, and company data.

Using Yoku in Cursor

Example AI Prompts

Once configured, you can use natural language to query brand data:

Get Brand Details:

"Get brand information for netflix.com"
"What are the brand colors for Spotify?"
"Show me details about Apple Inc."
"Fetch brand data for Tesla using ticker TSLA"

Search for Brands:

"Search for fintech companies"
"Find brands in the entertainment industry"
"Search for German tech companies"
"List companies similar to Stripe"

Development Use Cases:

"Create a React component with Netflix's brand colors"
"Generate a logo grid using brands from the search results"
"Build a brand comparison table for Stripe and Square"
"Write CSS variables using Airbnb's brand colors"

Code Generation with Brand Context

Example 1: Generate Branded UI Component

Prompt:

"Use Yoku to get Spotify's brand colors, then create a React card component using those colors"

Result:

// AI will first fetch Spotify's colors, then generate:
const SpotifyCard = () => {
  return (
    <div
      className="card"
      style={{
        backgroundColor: "#1DB954", // Spotify green
        color: "#FFFFFF",
      }}
    >
      <h2>Spotify Premium</h2>
      <p>Listen to your favorite music ad-free</p>
    </div>
  );
};

Example 2: Enrich Data Structure

Prompt:

"Get brand data for stripe.com and create a TypeScript interface for it"

Result:

interface Brand {
  id: string;
  title: string;
  description: string;
  canonicalDomain: string;
  websiteUrl: string;
  colors: Array<{
    hex: string;
    name: string;
    usage: string;
  }>;
  socials: Array<{
    type: string;
    url: string;
    handle: string;
  }>;
  // ... more fields
}

Troubleshooting

Connection Failed

Problem: "Failed to connect to Yoku MCP server"

Solutions:

1. Verify your API key is correct
2. Check that you have internet connectivity
3. Ensure npx is available (run npx --version in terminal)
4. Try restarting Cursor
5. Check for any proxy or firewall blocking the connection

Tools Not Showing Up

Problem: Cursor AI doesn't see Yoku tools

Solutions:

1. Restart Cursor completely (quit and reopen)
2. Check the settings.json syntax is valid JSON
3. Look for errors in Cursor's Developer Console:
   • Press Cmd/Ctrl + Shift + I to open DevTools
   • Check the Console tab for MCP-related errors
4. Verify the MCP server configuration matches exactly as shown above

"Unauthorized" Error

Problem: Getting 401 Unauthorized errors

Solutions:

1. Double-check your API key in dashboard settings
2. Ensure you're using Bearer prefix in the Authorization header
3. Verify your API key hasn't been revoked
4. Make sure there are no extra spaces or quotes in the API key

Rate Limit Errors

Problem: "API request limit reached"

Solutions:

1. Check your usage in the dashboard
2. Upgrade your plan if needed in billing settings
3. Wait until the next billing cycle (check the Retry-After header)

Best Practices

1. Use Descriptive Prompts

Be specific about what brand data you need:

❌ Vague: "Get brand info" ✅ Clear: "Use brand.get to fetch logo and colors for stripe.com"

2. Combine Tools with Code Generation

Leverage brand data for immediate code generation:

"Get Netflix's brand colors and create a CSS file with custom properties"

3. Cache Results in Your Code

For repeated use, store brand data locally:

// Fetch once
const stripeColors = await fetchBrandColors("stripe.com");

// Save to constants file
export const BRAND_COLORS = {
  stripe: stripeColors,
  // ... other brands
};

4. Monitor Your Quota

Keep track of MCP tool usage to stay within your plan limits. Each tool call counts as one API request.

5. Use Search Before Get

If you're unsure of the exact domain, search first:

"Search for 'Spotify' to find the correct domain, then get full brand details"

Next Steps

• Jan Integration - Configure Jan AI with Yoku
• Tools Reference - Complete documentation of available tools
• Setup Guide - Learn more about authentication and rate limits

Need Help?

Still having issues? We're here to help:

• Email Support: contact@yoku.app
• Check Dashboard: Monitor your API usage
• Review API Keys: Manage keys in settings