themecontextmcp

主题上下文MCP

使用AI助手从任何网站提取设计令牌。将您最喜欢的IDE连接到ThemeContext API。

快速开始

1.获取API密钥

注册地址： themecontext.com 获取您的API密钥。

2.连接IDE

Claude Code

claude mcp add --header "X-API-Key: YOUR_API_KEY" --transport http themecontext https://themecontext.com/mcp

Cursor

添加到 ~/.cursor/mcp.json:

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Claude Desktop

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json （macOS）或 %APPDATA%\Claude\claude_desktop_config.json （Windows）：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Windsurf

添加到 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "themecontext": {
      "serverUrl": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

VS Code

添加到您的 settings.json:

{
  "mcp.servers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

VS Code with Continue

添加到 ~/.continue/config.json:

{
  "mcpServers": [
    {
      "name": "themecontext",
      "transport": {
        "type": "http",
        "url": "https://themecontext.com/mcp",
        "headers": {
          "X-API-Key": "YOUR_API_KEY"
        }
      }
    }
  ]
}

Zed

添加到 ~/.config/zed/settings.json:

{
  "context_servers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Roo Code

添加到您的Roo代码MCP配置中：

{
  "mcpServers": {
    "themecontext": {
      "type": "streamable-http",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Cline

通过MCP设置添加：

{
  "mcpServers": {
    "themecontext": {
      "type": "streamableHttp",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Kilo Code

添加到 mcp_settings.json 或 .kilocode/mcp.json:

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Amazon Q Developer CLI

添加到您的Amazon Q配置中：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Copilot CLI

添加到 ~/.copilot/mcp-config.json:

{
  "mcpServers": {
    "themecontext": {
      "type": "http",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Warp

首选 Settings > AI > Manage MCP servers 并添加：

{
  "themecontext": {
    "url": "https://themecontext.com/mcp",
    "headers": {
      "X-API-Key": "YOUR_API_KEY"
    }
  }
}

JetBrains AI Assistant

首选 Settings > Tools > AI Assistant > MCP 并添加为JSON格式：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Augment Code

添加到VS代码 settings.json:

{
  "augment.advanced.mcpServers": [
    {
      "name": "themecontext",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  ]
}

Gemini CLI

添加到 ~/.gemini/settings.json:

{
  "mcpServers": {
    "themecontext": {
      "httpUrl": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Visual Studio 2022

添加到MCP设置中：

{
  "mcpServers": {
    "themecontext": {
      "type": "http",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

LM Studio

添加到 mcp.json:

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Qodo Gen

在聊天界面中，点击“+添加新MCP”并配置：

{
  "themecontext": {
    "url": "https://themecontext.com/mcp",
    "headers": {
      "X-API-Key": "YOUR_API_KEY"
    }
  }
}

BoltAI

首选 Settings > Plugins 并添加：

{
  "mcpServers": {
    "themecontext": {
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      }
    }
  }
}

Opencode

添加到您的Opencode配置中：

{
  "mcp": {
    "themecontext": {
      "type": "remote",
      "url": "https://themecontext.com/mcp",
      "headers": {
        "X-API-Key": "YOUR_API_KEY"
      },
      "enabled": true
    }
  }
}

3.开始使用

"Show me popular theme extractions"
"Get the color palette from github.com"
"Extract design tokens from https://stripe.com"
"Give me stripe.com's theme in Tailwind format"

可用工具

输出格式

• JSON -原始设计令牌
• 层叠样式表 -CSS自定义属性（变量）
• 顺风 -顺风CSS配置

例子

看 示例.md 查看详细的使用示例。

支持

• 网站： themecontext.com
• 问题：

许可证

麻省理工学院-见 许可证