neue-be MCP

Create professional developer graphics with AI. OG images, README banners, social cards — in seconds, not hours.

"Make me an OG image for fastbuild — it's a fast JavaScript bundler"

Setup

Claude Code (recommended)

Run this in your terminal, not inside Claude Code:

claude mcp add neue-be -- npx -y neue-be-mcp@latest

Then start Claude Code, or restart it if it is already open — MCP servers load at startup. /mcp should list neue-be as connected.

Keep a neue-be.com tab open while you work: the design renders in that tab, and export runs through it.

Now ask Claude to make something.

Coming back later

Type / in Claude Code and pick mcp__neue-be__design. With no argument it lists every template, palette and font pairing; with one it goes straight to the design:

/mcp__neue-be__design OG image for nexus-db, dracula palette

The slash command ships with the server, so it is there whenever the server is installed — no need to remember template names.

Claude Desktop

Add to your config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "neue-be": {
      "command": "npx",
      "args": ["-y", "neue-be-mcp@latest"]
    }
  }
}

Restart Claude Desktop, and keep a neue-be.com tab open.

Remote (no install)

{
  "mcpServers": {
    "neue-be": {
      "type": "streamable-http",
      "url": "https://neue-be-mcp.malkmus92.workers.dev/mcp"
    }
  }
}

What you can make

Templates (8 styles)

| Template | Size | Style | |----------|------|-------| | og-project | 1200x630 | Bold monolith — Vercel-inspired | | og-atmosphere | 1200x630 | Radial glow — Linear-inspired | | og-blogpost | 1200x630 | Ultra-minimal — Resend-inspired | | og-colorfield | 1200x630 | Color gradient — Stripe-inspired | | og-radiance | 1200x630 | Concentric arcs — Swiss-modern | | og-energy | 1200x630 | Diagonal patterns — Raycast-inspired | | github-social | 1280x640 | GitHub repo social preview | | readme-banner | 830x200 | GitHub README header |

Color palettes (12 themes)

Editor Classics: One Dark, Dracula, Monokai, Solarized Dark Modern Dev: Tokyo Night, Nord, Catppuccin Mocha, Gruvbox Brand Themes: GitHub Dark, Vercel, Linear, Dev Default

All palettes are dark mode. Every template works with every palette.

How it works

Two calls. That's it.

You: "Make me an OG image for my project 'fastbuild' with the dracula palette"

AI calls: apply_template({ template: "og-project", title: "fastbuild", subtitle: "A fast JavaScript bundler", palette: "dracula" })
AI calls: preview()

→ Design appears in your browser at neue-be.com

Try different looks instantly

You: "Try the monokai palette instead"

AI calls: change_palette({ palette: "monokai" })
AI calls: preview()

Export when you're happy

You: "Export as SVG"

AI calls: export({ format: "svg" })

→ Your browser renders and downloads the SVG

Tools (9)

| Tool | What it does | |------|-------------| | apply_template | Create a complete design from a template | | change_palette | Swap the color theme | | update_element | Tweak text or properties | | remove_element | Delete an element | | list_elements | See what's on the canvas | | list_templates | Browse available templates | | change_fonts | Swap the font pairing | | preview | Push design to browser (live update) | | export | Save a file (svg, png or jpeg) via the browser |

Live preview

When you have neue-be.com open in your browser, designs update live via WebSocket — no new tabs, no page reloads. Just leave the tab open and every preview call updates it instantly.

Features

• 8 design templates inspired by Vercel, Linear, Stripe, Raycast, Resend, GitHub
• 12 dark mode palettes from popular editor themes and dev brands
• Auto-sizing text — titles scale based on length, always readable
• Gradient fills — radial glows, color field backgrounds, atmospheric depth
• 18 parametric generators — stars, arcs, grids, stripes, rings, and more
• 18 bundled fonts — text converted to SVG paths, no font loading issues
• Live browser preview via WebSocket
• SVG export with proper gradient <defs> and text-to-path conversion

Pricing

Free. No account. No data leaves your machine (except the remote endpoint which is also free on Cloudflare Workers).

Links

• Website: neue-be.com
• npm: neue-be-mcp
• GitHub: neue-be