neue-be-mcp 1.2.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +142 -0
- package/dist/bundle.mjs +9002 -4507
- package/package.json +3 -1
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# neue-be MCP
|
|
2
|
+
|
|
3
|
+
Create professional developer graphics with AI. OG images, README banners, social cards — in seconds, not hours.
|
|
4
|
+
|
|
5
|
+
```
|
|
6
|
+
"Make me an OG image for fastbuild — it's a fast JavaScript bundler"
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<img src="https://neue-be.com/og-example.png" alt="Example OG image" width="600" />
|
|
11
|
+
</p>
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
### Claude Code (recommended)
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
claude mcp add neue-be -- npx -y neue-be-mcp
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Done. Ask Claude to make something.
|
|
22
|
+
|
|
23
|
+
### Claude Desktop
|
|
24
|
+
|
|
25
|
+
Add to your config (`~/Library/Application Support/Claude/claude_desktop_config.json`):
|
|
26
|
+
|
|
27
|
+
```json
|
|
28
|
+
{
|
|
29
|
+
"mcpServers": {
|
|
30
|
+
"neue-be": {
|
|
31
|
+
"command": "npx",
|
|
32
|
+
"args": ["-y", "neue-be-mcp"]
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Remote (no install)
|
|
39
|
+
|
|
40
|
+
```json
|
|
41
|
+
{
|
|
42
|
+
"mcpServers": {
|
|
43
|
+
"neue-be": {
|
|
44
|
+
"type": "streamable-http",
|
|
45
|
+
"url": "https://neue-be-mcp.malkmus92.workers.dev/mcp"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## What you can make
|
|
52
|
+
|
|
53
|
+
### Templates (8 styles)
|
|
54
|
+
|
|
55
|
+
| Template | Size | Style |
|
|
56
|
+
|----------|------|-------|
|
|
57
|
+
| `og-project` | 1200x630 | Bold monolith — Vercel-inspired |
|
|
58
|
+
| `og-atmosphere` | 1200x630 | Radial glow — Linear-inspired |
|
|
59
|
+
| `og-blogpost` | 1200x630 | Ultra-minimal — Resend-inspired |
|
|
60
|
+
| `og-colorfield` | 1200x630 | Color gradient — Stripe-inspired |
|
|
61
|
+
| `og-radiance` | 1200x630 | Concentric arcs — Swiss-modern |
|
|
62
|
+
| `og-energy` | 1200x630 | Diagonal patterns — Raycast-inspired |
|
|
63
|
+
| `github-social` | 1280x640 | GitHub repo social preview |
|
|
64
|
+
| `readme-banner` | 830x200 | GitHub README header |
|
|
65
|
+
|
|
66
|
+
### Color palettes (12 themes)
|
|
67
|
+
|
|
68
|
+
**Editor Classics:** One Dark, Dracula, Monokai, Solarized Dark
|
|
69
|
+
**Modern Dev:** Tokyo Night, Nord, Catppuccin Mocha, Gruvbox
|
|
70
|
+
**Brand Themes:** GitHub Dark, Vercel, Linear, Dev Default
|
|
71
|
+
|
|
72
|
+
All palettes are dark mode. Every template works with every palette.
|
|
73
|
+
|
|
74
|
+
## How it works
|
|
75
|
+
|
|
76
|
+
Two calls. That's it.
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
You: "Make me an OG image for my project 'fastbuild' with the dracula palette"
|
|
80
|
+
|
|
81
|
+
AI calls: apply_template({ template: "og-project", title: "fastbuild", subtitle: "A fast JavaScript bundler", palette: "dracula" })
|
|
82
|
+
AI calls: preview()
|
|
83
|
+
|
|
84
|
+
→ Design appears in your browser at neue-be.com
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Try different looks instantly
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
You: "Try the monokai palette instead"
|
|
91
|
+
|
|
92
|
+
AI calls: change_palette({ palette: "monokai" })
|
|
93
|
+
AI calls: preview()
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Export when you're happy
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
You: "Export as SVG"
|
|
100
|
+
|
|
101
|
+
AI calls: export_svg()
|
|
102
|
+
|
|
103
|
+
→ SVG file saved to your project
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Tools (8)
|
|
107
|
+
|
|
108
|
+
| Tool | What it does |
|
|
109
|
+
|------|-------------|
|
|
110
|
+
| `apply_template` | Create a complete design from a template |
|
|
111
|
+
| `change_palette` | Swap the color theme |
|
|
112
|
+
| `update_element` | Tweak text or properties |
|
|
113
|
+
| `remove_element` | Delete an element |
|
|
114
|
+
| `list_elements` | See what's on the canvas |
|
|
115
|
+
| `list_templates` | Browse available templates |
|
|
116
|
+
| `preview` | Push design to browser (live update) |
|
|
117
|
+
| `export_svg` | Export final SVG file |
|
|
118
|
+
|
|
119
|
+
## Live preview
|
|
120
|
+
|
|
121
|
+
When you have [neue-be.com](https://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.
|
|
122
|
+
|
|
123
|
+
## Features
|
|
124
|
+
|
|
125
|
+
- **8 design templates** inspired by Vercel, Linear, Stripe, Raycast, Resend, GitHub
|
|
126
|
+
- **12 dark mode palettes** from popular editor themes and dev brands
|
|
127
|
+
- **Auto-sizing text** — titles scale based on length, always readable
|
|
128
|
+
- **Gradient fills** — radial glows, color field backgrounds, atmospheric depth
|
|
129
|
+
- **18 parametric generators** — stars, arcs, grids, stripes, rings, and more
|
|
130
|
+
- **18 bundled fonts** — text converted to SVG paths, no font loading issues
|
|
131
|
+
- **Live browser preview** via WebSocket
|
|
132
|
+
- **SVG export** with proper gradient `<defs>` and text-to-path conversion
|
|
133
|
+
|
|
134
|
+
## Pricing
|
|
135
|
+
|
|
136
|
+
Free. No account. No data leaves your machine (except the remote endpoint which is also free on Cloudflare Workers).
|
|
137
|
+
|
|
138
|
+
## Links
|
|
139
|
+
|
|
140
|
+
- **Website:** [neue-be.com](https://neue-be.com)
|
|
141
|
+
- **npm:** [neue-be-mcp](https://www.npmjs.com/package/neue-be-mcp)
|
|
142
|
+
- **GitHub:** [neue-be](https://github.com/malkmus/neue-be)
|