OpenBrand — Claude Code MCP server: what it does, install
This MCP server extracts logos, colors, images, and a brand name from a website URL. Use it when an agent needs brand data for a page or content.
claude mcp add openbrand -e OPENBRAND_API_KEY=<OPENBRAND_API_KEY> -- npx -y openbrand-mcpWhat OpenBrand does
OpenBrand takes a website URL and returns its brand assets. It checks favicons, apple-touch icons, header and navigation logos, plus inline SVGs with dimension probing. Colors come from theme-color metadata, manifest.json, and dominant tones found in logo images. The server also looks for og:image, CSS backgrounds, hero or banner images, and a brand name in page metadata, logo alt text, or the page title.
The MCP server runs through npx and can connect to Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, or Zed. An OpenBrand API key is needed for extraction: without OPENBRAND_API_KEY, the server cannot retrieve site data. An agent can call the extract_brand_assets tool when you ask it to inspect a URL.
What it helps with
- extract logos from a website URL
- collect brand colors from page data and logo images
- find background and hero images
- identify the brand name from page signals
Example prompts for the agent
- Extract the brand assets from
stripe.comand show its logos, colors, and brand name. - Use OpenBrand to find logos and background images on
stripe.com. - Identify the brand name and available colors for this URL.
How to install OpenBrand
Platform CLI
claude mcp add openbrand -e OPENBRAND_API_KEY=<OPENBRAND_API_KEY> -- npx -y openbrand-mcpReplace <…> with your own values
Platform CLI
codex mcp add mcp --env OPENBRAND_API_KEY=<OPENBRAND_API_KEY> -- npx -y openbrand-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
],
"env": {
"OPENBRAND_API_KEY": "<OPENBRAND_API_KEY>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
],
"env": {
"OPENBRAND_API_KEY": "<OPENBRAND_API_KEY>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e OPENBRAND_API_KEY=<OPENBRAND_API_KEY> mcp npx -y openbrand-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about OpenBrand
How do I install OpenBrand in Claude Code?
Run claude mcp add openbrand -e OPENBRAND_API_KEY=<OPENBRAND_API_KEY> -- npx -y openbrand-mcp. Replace the placeholder with your OpenBrand API key.
What does OpenBrand do?
It extracts logos, brand colors, backdrop images, and a brand name from a website URL. It reads page metadata, images, CSS backgrounds, and SVG assets.
Does the MCP server require an API key?
Yes. Data extraction requires OPENBRAND_API_KEY; the MCP server itself is installed through npx.
