npm openbrand-mcpstdioMITupdated 3mo ago
Extract brand assets (logos, colors, backdrops, brand name) from any website URL.
O que dá para fazer com OpenBrand?
Extract brand assets (logos, colors, backdrops, brand name) from any website URL.
As an API call
Get your free API key from openbrand.sh/dashboard.
cURL
curl "https://openbrand.sh/api/extract?url=https://stripe.com" \
-H "Authorization: Bearer your_api_key"
TypeScript
const res = await fetch(
"https://openbrand.sh/api/extract?url=https://stripe.com",
{ headers: { Authorization: "Bearer your_api_key" } }
);
const brand = await res.json();
Python
import requests
res = requests.get(
"https://openbrand.sh/api/extract",
params={"url": "https://stripe.com"},
headers={"Authorization": "Bearer your_api_key"},
)
brand = res.json()
As an agent skill
Add OpenBrand to Claude Code, Cursor, Codex, Gemini CLI, and 40+ other agents:
npx skills add tight-studio/openbrand
Once installed, your agent automatically knows how to extract brand assets — just ask it to "extract brand assets from stripe.com".
As an npm package
No API key required. Runs as a library from your server-side code.
npm add openbrand
import { extractBrandAssets } from "openbrand";
const result = await extractBrandAssets("https://stripe.com");
if (result.ok) {
// result.data.brand_name → "Stripe"
// result.data.logos → LogoAsset[]
// result.data.colors → ColorAsset[]
// result.data.backdrop_images → BackdropAsset[]
} else {
// result.error.code → "ACCESS_BLOCKED" | "NOT_FOUND" | "SERVER_ERROR" | ...
// result.error.message → human-readable explanation
}
As an MCP server
Use OpenBrand as a tool in Claude Code, Cursor, or any MCP-compatible client.
- Install the MCP server (no API key needed to install):
claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp
- Get your API key from openbrand.sh/dashboard and add it:
claude mcp add --transport stdio \
--env OPENBRAND_API_KEY=your_api_key \
openbrand -- npx -y openbrand-mcp
Or add to .claude/settings.json:
{
"mcpServers": {
"openbrand": {
"command": "npx",
"args": ["-y", "openbrand-mcp"],
"env": {
"OPENBRAND_API_KEY": "your_api_key"
}
}
}
}
Then ask Claude to "extract brand assets from stripe.com" and it will use the extract_brand_assets tool automatically.
Self-hosting the web app
git clone https://github.com/tight-studio/openbrand.git
cd openbrand
bun install
bun dev
No environment variables required. Open http://localhost:3000.
What it extracts
- Logos — favicons, apple-touch-icons, header/nav logos, inline SVGs (with dimension probing)
- Brand colors — from theme-color meta tags, manifest.json, and dominant colors from logo imagery
- Backdrop images — og:image, CSS backgrounds, hero/banner images
- Brand name — from og:site_name, application-name, logo alt text, page title
Tech stack
Next.js, React, TypeScript, Cheerio, Sharp, Tailwind CSS
License
Instalação
Adicione OpenBrand ao seu cliente. Escolha o que você usa.
claude mcp add openbrand-mcp -- npx -y openbrand-mcpcodex mcp add openbrand-mcp -- npx -y openbrand-mcpamp mcp add openbrand-mcp -- npx -y openbrand-mcp{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `claude_desktop_config.json`, then restart Claude Desktop.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `~/.cursor/mcp.json`, or `.cursor/mcp.json` for a single project.
code --add-mcp '{"name":"openbrand-mcp","command":"npx","args":["-y","openbrand-mcp"]}'Or add the block manually to `.vscode/mcp.json` under `servers`.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `~/.codeium/windsurf/mcp_config.json`.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `cline_mcp_settings.json` via the MCP Servers panel.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `~/.gemini/settings.json`.
{
"mcpServers": {
"openbrand-mcp": {
"type": "local",
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
],
"tools": [
"*"
]
}
}
}Add to `~/.copilot/mcp-config.json`, or run `/mcp add` inside the CLI.
{
"context_servers": {
"openbrand-mcp": {
"command": {
"path": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}
}Add to your Zed `settings.json`.
npx -y openbrand-mcpRun `goose configure`, choose **Add Extension → Command-line Extension**, and paste this command.
Pontuação
39 / 100
Incompleta
- Documentação22/25
- Manutenção19/25
- Confiança16/20
- Capacidade0/15
- Instalação12/15
- Documents what it does and how to connect
- Has a resolvable package or endpoint
- Exposes at least one tool, prompt or resource
- README has substantive content
- Includes a code example
- Documents its configuration
- Mentions credentials or security posture
- Last commit 112 days ago
- Has a release history
- Repository is not archived
- Licensed MIT
- Namespace verified in the official MCP registry
- Claimed by its owner
- Published under an organisation
- 0 tool(s) documented
- Provides prompt templates
- Provides resources
- 12 documented install method(s)
- Published to a package registry
- Offers a hosted endpoint — no local install
Histórico de versões
| Versões | Publicada |
|---|---|
| 0.1.2Mais recente | 14 de mar. de 2026 |
| 0.1.1 | 14 de mar. de 2026 |
| 0.1.0 | 14 de mar. de 2026 |