@blueprint-chart/docs 0.1.19 → 0.1.21
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/dist/api.d.ts +13 -0
- package/dist/api.js +29 -0
- package/dist/manifest.json +249 -0
- package/package.json +5 -4
- package/src/guide/getting-started.md +2 -1
- package/src/guide/mcp.md +139 -0
package/dist/api.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export type DocGroup = 'handbook' | 'guide' | 'charts' | 'reference/dsl' | 'reference/api';
|
|
2
|
+
export interface DocEntry {
|
|
3
|
+
slug: string;
|
|
4
|
+
group: DocGroup;
|
|
5
|
+
title: string;
|
|
6
|
+
blurb: string;
|
|
7
|
+
mdPath: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function listDocs(group?: DocGroup): DocEntry[];
|
|
10
|
+
export declare function getDoc(group: DocGroup, slug: string): {
|
|
11
|
+
entry: DocEntry;
|
|
12
|
+
content: string;
|
|
13
|
+
};
|
package/dist/api.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { readFileSync, existsSync } from 'node:fs';
|
|
2
|
+
import { join, dirname } from 'node:path';
|
|
3
|
+
import { fileURLToPath } from 'node:url';
|
|
4
|
+
const PKG_ROOT = dirname(dirname(fileURLToPath(import.meta.url)));
|
|
5
|
+
let cached;
|
|
6
|
+
function loadManifest() {
|
|
7
|
+
if (cached) {
|
|
8
|
+
return cached;
|
|
9
|
+
}
|
|
10
|
+
const manifestPath = join(PKG_ROOT, 'dist', 'manifest.json');
|
|
11
|
+
if (!existsSync(manifestPath)) {
|
|
12
|
+
throw new Error(`@blueprint-chart/docs: manifest.json not found at ${manifestPath}. `
|
|
13
|
+
+ `Did you run \`pnpm --filter @blueprint-chart/docs build\`?`);
|
|
14
|
+
}
|
|
15
|
+
cached = JSON.parse(readFileSync(manifestPath, 'utf8'));
|
|
16
|
+
return cached;
|
|
17
|
+
}
|
|
18
|
+
export function listDocs(group) {
|
|
19
|
+
const all = loadManifest().entries;
|
|
20
|
+
return group ? all.filter(e => e.group === group) : all;
|
|
21
|
+
}
|
|
22
|
+
export function getDoc(group, slug) {
|
|
23
|
+
const entry = loadManifest().entries.find(e => e.group === group && e.slug === slug);
|
|
24
|
+
if (!entry) {
|
|
25
|
+
throw new Error(`@blueprint-chart/docs: no doc at ${group}/${slug}`);
|
|
26
|
+
}
|
|
27
|
+
const content = readFileSync(join(PKG_ROOT, 'src', entry.mdPath), 'utf8');
|
|
28
|
+
return { entry, content };
|
|
29
|
+
}
|
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
{
|
|
2
|
+
"entries": [
|
|
3
|
+
{
|
|
4
|
+
"slug": "accessibility",
|
|
5
|
+
"group": "handbook",
|
|
6
|
+
"title": "Accessibility",
|
|
7
|
+
"blurb": "> Accessible charts are honest charts. CVD simulation, sufficient contrast, meaningful alt text, keyboard and screen-reader support, legible typography, and — above all — never encoding information in",
|
|
8
|
+
"mdPath": "handbook/accessibility.md"
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
"slug": "annotations",
|
|
12
|
+
"group": "handbook",
|
|
13
|
+
"title": "Annotations",
|
|
14
|
+
"blurb": "> Annotations guide the reader to the story in the data. They explain design elements, highlight significant values, and provide context the chart alone cannot convey. Used well, they do most of the s",
|
|
15
|
+
"mdPath": "handbook/annotations.md"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"slug": "anti-patterns",
|
|
19
|
+
"group": "handbook",
|
|
20
|
+
"title": "Anti-Patterns",
|
|
21
|
+
"blurb": "> A catalog of what goes wrong: misleading practices that distort the truth, design anti-patterns that obscure the story, and the statistical integrity rules that keep charts honest.",
|
|
22
|
+
"mdPath": "handbook/anti-patterns.md"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"slug": "axes",
|
|
26
|
+
"group": "handbook",
|
|
27
|
+
"title": "Axes & Grid Lines",
|
|
28
|
+
"blurb": "> When zero matters, when it doesn't, how grid lines should whisper rather than shout, how to format numbers, when to use logarithmic scales, and how aspect ratio silently changes a chart's story.",
|
|
29
|
+
"mdPath": "handbook/axes.md"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"slug": "choosing",
|
|
33
|
+
"group": "handbook",
|
|
34
|
+
"title": "Choosing the Right Chart",
|
|
35
|
+
"blurb": "> Before picking a visualization type, answer three questions about goal, content, and audience. Then pick the simplest chart that answers the question. Increase complexity only when the simpler form ",
|
|
36
|
+
"mdPath": "handbook/choosing.md"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"slug": "color",
|
|
40
|
+
"group": "handbook",
|
|
41
|
+
"title": "Color & Palettes",
|
|
42
|
+
"blurb": "> Palette types, seven key rules, the perceptual-uniformity trap (HCL vs. HSL), ten techniques for reducing color usage, dark mode adjustments, and the components of an organizational palette system.",
|
|
43
|
+
"mdPath": "handbook/color.md"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"slug": "design-principles",
|
|
47
|
+
"group": "handbook",
|
|
48
|
+
"title": "Design Principles",
|
|
49
|
+
"blurb": "> The core principles behind every good chart: purposefulness, clarity, data-ink ratio, restraint, consistency, starting with grey, the power of comparisons, and the refusal to use 3D.",
|
|
50
|
+
"mdPath": "handbook/design-principles.md"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"slug": "frame-elements",
|
|
54
|
+
"group": "handbook",
|
|
55
|
+
"title": "Frame Elements",
|
|
56
|
+
"blurb": "> A well-structured chart frame has a clear information hierarchy: title, description, chart area, annotations, axis labels, note, source, and credit. Each element has a role and a style treatment tha",
|
|
57
|
+
"mdPath": "handbook/frame-elements.md"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"slug": "labels",
|
|
61
|
+
"group": "handbook",
|
|
62
|
+
"title": "Labels & Legends",
|
|
63
|
+
"blurb": "> Direct labeling beats legends wherever possible. When you must use a legend, place it where it helps. Use value labels when precision matters and the layout allows.",
|
|
64
|
+
"mdPath": "handbook/labels.md"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"slug": "tooltips",
|
|
68
|
+
"group": "handbook",
|
|
69
|
+
"title": "Tooltips & Interaction",
|
|
70
|
+
"blurb": "> Tooltips progressively disclose detail, they never replace critical information. Interaction must be consistent, accessible, and keyboard-reachable. Crosshairs and hover states support — not replace",
|
|
71
|
+
"mdPath": "handbook/tooltips.md"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"slug": "typography",
|
|
75
|
+
"group": "handbook",
|
|
76
|
+
"title": "Typography",
|
|
77
|
+
"blurb": "> Type in charts must be small, sharp, and legible at a glance. Use sans-serifs with unambiguous character shapes, size ruthlessly, never rotate, prefer sentence case, and left-align.",
|
|
78
|
+
"mdPath": "handbook/typography.md"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"slug": "accessibility",
|
|
82
|
+
"group": "guide",
|
|
83
|
+
"title": "Accessibility",
|
|
84
|
+
"blurb": "> WCAG contrast checks, colour-vision-deficiency simulation, and palette-safety audits — built into the library.",
|
|
85
|
+
"mdPath": "guide/accessibility.md"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"slug": "data-transforms",
|
|
89
|
+
"group": "guide",
|
|
90
|
+
"title": "Data Transforms",
|
|
91
|
+
"blurb": "> A composable pipeline that shapes raw tabular data into the rows the chart actually renders.",
|
|
92
|
+
"mdPath": "guide/data-transforms.md"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"slug": "dsl-editor",
|
|
96
|
+
"group": "guide",
|
|
97
|
+
"title": "DSL Editor",
|
|
98
|
+
"blurb": "> The BPC source editor — CodeMirror 6, a Lezer-generated grammar, syntax highlighting tuned for prose-shaped charts, and two-way sync with the visual panels.",
|
|
99
|
+
"mdPath": "guide/dsl-editor.md"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"slug": "embed",
|
|
103
|
+
"group": "guide",
|
|
104
|
+
"title": "embed",
|
|
105
|
+
"blurb": "Blueprint Chart is **static-first**: every chart is a self-contained artifact independent of any vendor server. There are three ways to put one on a page, and they all run entirely in the browser.",
|
|
106
|
+
"mdPath": "guide/embed.md"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"slug": "getting-started",
|
|
110
|
+
"group": "guide",
|
|
111
|
+
"title": "getting started",
|
|
112
|
+
"blurb": "Blueprint Chart is published as four packages on NPM, plus a separate `@blueprint-chart/mcp` server for authoring charts with AI. Pick the one that matches what you're building.",
|
|
113
|
+
"mdPath": "guide/getting-started.md"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"slug": "mcp",
|
|
117
|
+
"group": "guide",
|
|
118
|
+
"title": "mcp",
|
|
119
|
+
"blurb": "Describe the chart you want; let your AI assistant build it. The",
|
|
120
|
+
"mdPath": "guide/mcp.md"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"slug": "palettes",
|
|
124
|
+
"group": "guide",
|
|
125
|
+
"title": "Palettes",
|
|
126
|
+
"blurb": "> 50+ curated categorical palettes, plus the helpers to resolve, audit, and adjust them for the background you render against.",
|
|
127
|
+
"mdPath": "guide/palettes.md"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"slug": "scenes",
|
|
131
|
+
"group": "guide",
|
|
132
|
+
"title": "Scenes",
|
|
133
|
+
"blurb": "> Same chart, different states — composed into a story that a reader can step through.",
|
|
134
|
+
"mdPath": "guide/scenes.md"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"slug": "area-stacked",
|
|
138
|
+
"group": "charts",
|
|
139
|
+
"title": "Stacked area chart",
|
|
140
|
+
"blurb": "> Multi-series stacked area chart for composition over time; supports percent stacking.",
|
|
141
|
+
"mdPath": "charts/area-stacked.md"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"slug": "area",
|
|
145
|
+
"group": "charts",
|
|
146
|
+
"title": "Area chart",
|
|
147
|
+
"blurb": "> Single-series area chart for magnitude over time; pairs with `areaFill`.",
|
|
148
|
+
"mdPath": "charts/area.md"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"slug": "bar-grouped",
|
|
152
|
+
"group": "charts",
|
|
153
|
+
"title": "Grouped bar chart",
|
|
154
|
+
"blurb": "> Multi-series grouped vertical bar chart for grouped categorical comparison across a second dimension.",
|
|
155
|
+
"mdPath": "charts/bar-grouped.md"
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
"slug": "bar-horizontal",
|
|
159
|
+
"group": "charts",
|
|
160
|
+
"title": "Horizontal bar chart",
|
|
161
|
+
"blurb": "> Single-series horizontal bar chart for long category labels and ranked bars.",
|
|
162
|
+
"mdPath": "charts/bar-horizontal.md"
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"slug": "bar-multi",
|
|
166
|
+
"group": "charts",
|
|
167
|
+
"title": "Multi-series bar chart",
|
|
168
|
+
"blurb": "> Multi-series vertical bar chart for side-by-side comparison of a small group of series.",
|
|
169
|
+
"mdPath": "charts/bar-multi.md"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"slug": "bar-split",
|
|
173
|
+
"group": "charts",
|
|
174
|
+
"title": "Split bar chart",
|
|
175
|
+
"blurb": "> Diverging vertical bar chart for values around a shared baseline (positive/negative).",
|
|
176
|
+
"mdPath": "charts/bar-split.md"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"slug": "bar-stacked",
|
|
180
|
+
"group": "charts",
|
|
181
|
+
"title": "Stacked bar chart",
|
|
182
|
+
"blurb": "> Stacked horizontal bar chart for composition within a category, emphasising the total.",
|
|
183
|
+
"mdPath": "charts/bar-stacked.md"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"slug": "bar-vertical",
|
|
187
|
+
"group": "charts",
|
|
188
|
+
"title": "Vertical bar chart",
|
|
189
|
+
"blurb": "> Single-series vertical bar chart for ranked categorical comparison, small N.",
|
|
190
|
+
"mdPath": "charts/bar-vertical.md"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"slug": "column-stacked",
|
|
194
|
+
"group": "charts",
|
|
195
|
+
"title": "Stacked column chart",
|
|
196
|
+
"blurb": "> Stacked vertical column chart for composition over discrete columns; supports percent stacking.",
|
|
197
|
+
"mdPath": "charts/column-stacked.md"
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
"slug": "donut",
|
|
201
|
+
"group": "charts",
|
|
202
|
+
"title": "Donut chart",
|
|
203
|
+
"blurb": "> Circular part-to-whole chart with a central label slot.",
|
|
204
|
+
"mdPath": "charts/donut.md"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"slug": "line-multi",
|
|
208
|
+
"group": "charts",
|
|
209
|
+
"title": "Multi-line chart",
|
|
210
|
+
"blurb": "> Multi-series line chart for comparing several time series or trends.",
|
|
211
|
+
"mdPath": "charts/line-multi.md"
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
"slug": "line",
|
|
215
|
+
"group": "charts",
|
|
216
|
+
"title": "Line chart",
|
|
217
|
+
"blurb": "> Single-series line chart for continuous trend over an ordered domain.",
|
|
218
|
+
"mdPath": "charts/line.md"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"slug": "pie",
|
|
222
|
+
"group": "charts",
|
|
223
|
+
"title": "Pie chart",
|
|
224
|
+
"blurb": "> Circular part-to-whole chart for very small N.",
|
|
225
|
+
"mdPath": "charts/pie.md"
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"slug": "annotations",
|
|
229
|
+
"group": "reference/dsl",
|
|
230
|
+
"title": "annotations",
|
|
231
|
+
"blurb": "Two families of named blocks that target specific data values to draw the eye: **color directives** (`colorize`, `highlight`, `areafill`) recolor or emphasize parts of the chart, and **annotations** (",
|
|
232
|
+
"mdPath": "reference/dsl/annotations.md"
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"slug": "properties",
|
|
236
|
+
"group": "reference/dsl",
|
|
237
|
+
"title": "properties",
|
|
238
|
+
"blurb": "Value-bearing constructs in a `.bpc` document: key/value properties on the chart, the `data` block carrying values, and `series` overrides for per-series visual control. See [DSL overview](/reference/",
|
|
239
|
+
"mdPath": "reference/dsl/properties.md"
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"slug": "scenes-and-transforms",
|
|
243
|
+
"group": "reference/dsl",
|
|
244
|
+
"title": "scenes and transforms",
|
|
245
|
+
"blurb": "Story-level constructs: **scenes** compose multiple visualisation states into a stepable narrative, and **transforms** describe data-pipeline operations applied before rendering. Scenes can override a",
|
|
246
|
+
"mdPath": "reference/dsl/scenes-and-transforms.md"
|
|
247
|
+
}
|
|
248
|
+
]
|
|
249
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blueprint-chart/docs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.21",
|
|
4
4
|
"description": "Public documentation for Blueprint Chart — handbook, guide, BPC DSL spec, and lib API reference.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -48,15 +48,16 @@
|
|
|
48
48
|
"vitepress": "^1.5.0",
|
|
49
49
|
"vitest": "^3.2.4",
|
|
50
50
|
"vue": "^3.5",
|
|
51
|
-
"@blueprint-chart/
|
|
52
|
-
"@blueprint-chart/
|
|
51
|
+
"@blueprint-chart/lib": "0.1.21",
|
|
52
|
+
"@blueprint-chart/ui": "0.1.21"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"dev": "vitepress dev src --host 0.0.0.0 --port 4445",
|
|
56
56
|
"build:vitepress": "vitepress build src",
|
|
57
57
|
"build:manifest": "tsx scripts/build-manifest.ts",
|
|
58
58
|
"build:api": "tsc --project tsconfig.api.json",
|
|
59
|
-
"build": "pnpm run build:
|
|
59
|
+
"build:package": "pnpm run build:manifest && pnpm run build:api",
|
|
60
|
+
"build": "pnpm run build:vitepress && pnpm run build:package",
|
|
60
61
|
"preview": "vitepress preview src --host 0.0.0.0 --port 4445",
|
|
61
62
|
"test": "vitest run"
|
|
62
63
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Getting Started
|
|
2
2
|
|
|
3
|
-
Blueprint Chart is published as four packages on NPM. Pick the one that matches what you're building.
|
|
3
|
+
Blueprint Chart is published as four packages on NPM, plus a separate `@blueprint-chart/mcp` server for authoring charts with AI. Pick the one that matches what you're building.
|
|
4
4
|
|
|
5
5
|
<table>
|
|
6
6
|
<thead><tr><th>Package</th><th>When to use it</th></tr></thead>
|
|
@@ -9,6 +9,7 @@ Blueprint Chart is published as four packages on NPM. Pick the one that matches
|
|
|
9
9
|
<tr><td nowrap><a href="https://www.npmjs.com/package/@blueprint-chart/ui"><code>@blueprint-chart/ui</code></a></td><td>Vue 3 component library — forms, panels, navigation, scene timeline, layout primitives.</td></tr>
|
|
10
10
|
<tr><td nowrap><a href="https://www.npmjs.com/package/@blueprint-chart/editor"><code>@blueprint-chart/editor</code></a></td><td>The full SPA — runs on top of <code>lib</code> + <code>ui</code>. Deployed at <a href="https://blueprintchart.com">blueprintchart.com</a>.</td></tr>
|
|
11
11
|
<tr><td nowrap><a href="https://www.npmjs.com/package/@blueprint-chart/docs"><code>@blueprint-chart/docs</code></a></td><td>The markdown source of this site — handbook, guide, BPC DSL spec, and lib API reference. Exposes <code>listDocs</code> / <code>getDoc</code> + <code>manifest.json</code> for tooling such as <code>@blueprint-chart/mcp</code>.</td></tr>
|
|
12
|
+
<tr><td nowrap><a href="https://www.npmjs.com/package/@blueprint-chart/mcp"><code>@blueprint-chart/mcp</code></a></td><td>MCP server (separate repo) — lets Claude, Claude Code, Cursor, or any MCP client author <code>.bpc</code> files, grounded in the handbook with a parse + render feedback loop. See <a href="/guide/mcp">Authoring with AI</a>.</td></tr>
|
|
12
13
|
</tbody>
|
|
13
14
|
</table>
|
|
14
15
|
|
package/src/guide/mcp.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# Authoring with AI
|
|
2
|
+
|
|
3
|
+
Describe the chart you want; let your AI assistant build it. The
|
|
4
|
+
[`@blueprint-chart/mcp`](https://github.com/blueprint-chart/mcp) server connects Blueprint
|
|
5
|
+
Chart to any [Model Context Protocol](https://modelcontextprotocol.io) client — Claude (web,
|
|
6
|
+
desktop, and Code), ChatGPT, Cursor, VS Code, and more. The model reads the dataviz handbook,
|
|
7
|
+
writes the `.bpc`, validates it, and renders it — so you get a real, accessible chart from a
|
|
8
|
+
sentence instead of guesswork.
|
|
9
|
+
|
|
10
|
+
## How it works
|
|
11
|
+
|
|
12
|
+
The MCP gives your assistant a tight, grounded loop:
|
|
13
|
+
|
|
14
|
+
**read the handbook → write `.bpc` → `validate_dsl` → `render` → iterate**
|
|
15
|
+
|
|
16
|
+
It is primed on Blueprint Chart's dataviz pedagogy *before* it writes a line of DSL, then
|
|
17
|
+
closes the loop with deterministic parse + render feedback instead of hallucinating syntax.
|
|
18
|
+
|
|
19
|
+
## Connect your client
|
|
20
|
+
|
|
21
|
+
There are two ways to connect: use the **hosted** endpoint (nothing to install) or **run the
|
|
22
|
+
server locally** with `npx`.
|
|
23
|
+
|
|
24
|
+
### Hosted — `mcp.blueprintchart.com`
|
|
25
|
+
|
|
26
|
+
Point any remote-capable client at the public endpoint. There's nothing to install and no token
|
|
27
|
+
to configure — it's open.
|
|
28
|
+
|
|
29
|
+
**Endpoint:** `https://mcp.blueprintchart.com`
|
|
30
|
+
|
|
31
|
+
- **Claude.ai (web)** — requires a Claude Pro, Team, or Enterprise plan:
|
|
32
|
+
1. Open **Settings → Connectors**.
|
|
33
|
+
2. Click **Add custom integration**.
|
|
34
|
+
3. Paste `https://mcp.blueprintchart.com` and save. There's no auth header to enter.
|
|
35
|
+
- **ChatGPT** — add `https://mcp.blueprintchart.com` as a custom connector (no authentication).
|
|
36
|
+
- **Cursor** — **Settings → MCP → Add server**, then enter the URL.
|
|
37
|
+
- **Claude Code** — add it over HTTP:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
claude mcp add blueprint-chart --transport http https://mcp.blueprintchart.com
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Local — run it with `npx`
|
|
44
|
+
|
|
45
|
+
Prefer to run the server on your own machine (for desktop apps, offline use, or full control)?
|
|
46
|
+
`npx` fetches it on demand — nothing is installed globally.
|
|
47
|
+
|
|
48
|
+
::: code-group
|
|
49
|
+
|
|
50
|
+
```bash [Claude Code]
|
|
51
|
+
claude mcp add blueprint-chart -- npx -y @blueprint-chart/mcp
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```json [Claude Desktop]
|
|
55
|
+
{
|
|
56
|
+
"mcpServers": {
|
|
57
|
+
"blueprint-chart": {
|
|
58
|
+
"command": "npx",
|
|
59
|
+
"args": ["-y", "@blueprint-chart/mcp"]
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
```json [Cursor]
|
|
66
|
+
{
|
|
67
|
+
"mcpServers": {
|
|
68
|
+
"blueprint-chart": {
|
|
69
|
+
"command": "npx",
|
|
70
|
+
"args": ["-y", "@blueprint-chart/mcp"]
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
```json [VS Code]
|
|
77
|
+
{
|
|
78
|
+
"servers": {
|
|
79
|
+
"blueprint-chart": {
|
|
80
|
+
"type": "stdio",
|
|
81
|
+
"command": "npx",
|
|
82
|
+
"args": ["-y", "@blueprint-chart/mcp"]
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
:::
|
|
89
|
+
|
|
90
|
+
Any other MCP client works too — run `npx -y @blueprint-chart/mcp` over stdio and drop it into
|
|
91
|
+
that client's server config.
|
|
92
|
+
|
|
93
|
+
## Tools
|
|
94
|
+
|
|
95
|
+
| Tool | Purpose |
|
|
96
|
+
| --- | --- |
|
|
97
|
+
| `validate_dsl` | Parse `.bpc`; returns `{ valid, errors[], warnings[] }` — each error carries a `code`, `message`, and actionable `suggestion` |
|
|
98
|
+
| `inspect_dsl` | Summarize a `.bpc`: chart type, scenes, series/row counts, feature flags |
|
|
99
|
+
| `recommend_chart_type` | Rank chart types for a given column shape and row count |
|
|
100
|
+
| `render` | Render to SVG (default) or PNG, with structured errors on failure |
|
|
101
|
+
| `list_chart_types` | List all renderable chart types |
|
|
102
|
+
| `describe_chart_type` | Properties, when-to-use, and data shape for one chart type |
|
|
103
|
+
| `get_example` | Fetch a canonical `.bpc` sample by chart type or name |
|
|
104
|
+
| `get_grammar` | Full DSL syntax reference |
|
|
105
|
+
|
|
106
|
+
## Resources
|
|
107
|
+
|
|
108
|
+
The handbook, DSL grammar, guides, chart-type docs, and canonical samples are all exposed as
|
|
109
|
+
`bpc://` resources — the same content you're reading on this site:
|
|
110
|
+
|
|
111
|
+
- `bpc://grammar` — the full DSL syntax reference
|
|
112
|
+
- `bpc://handbook/<slug>` — dataviz pedagogy (choosing, color, typography, accessibility, …)
|
|
113
|
+
- `bpc://guide/<slug>` — usage guides (scenes, palettes, data transforms, …)
|
|
114
|
+
- `bpc://chart-types/<slug>` — per-chart-type docs
|
|
115
|
+
- `bpc://samples/<id>` — canonical `.bpc` examples
|
|
116
|
+
- `bpc://reference/dsl/<slug>` and `bpc://reference/api/<slug>` — the full reference
|
|
117
|
+
|
|
118
|
+
## Example
|
|
119
|
+
|
|
120
|
+
> **You:** Make a horizontal bar chart of English letter frequencies — top 10, highlight E.
|
|
121
|
+
>
|
|
122
|
+
> **Your assistant:** *(calls `list_chart_types` and `get_example`, writes the `.bpc`, calls
|
|
123
|
+
> `validate_dsl` to confirm it parses, then `render` and shows you the image and the source)*
|
|
124
|
+
|
|
125
|
+
```bpc
|
|
126
|
+
chart bar-horizontal {
|
|
127
|
+
title = "E is the most frequent letter in English"
|
|
128
|
+
sort = descending
|
|
129
|
+
valueLabels = true
|
|
130
|
+
highlight "E"
|
|
131
|
+
data { "E" = 12.70; "T" = 9.06; "A" = 8.17; ... }
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Learn more
|
|
136
|
+
|
|
137
|
+
Full setup, the complete tool/resource reference, and release notes live in the
|
|
138
|
+
[MCP repository](https://github.com/blueprint-chart/mcp) and on
|
|
139
|
+
[npm](https://www.npmjs.com/package/@blueprint-chart/mcp).
|