Maket — Claude Code MCP server: what it does, how to install
Maket provides an HTML and CSS canvas with live browser preview for AI agents. It handles data-driven templating and direct PDF rendering.
claude mcp add maket -- npx -y @ng-galien/maketWhat Maket does
Maket gives your coding agent a visual layout engine. Instead of outputting plain text, the model builds real pages sized in millimetres or standard presets from A2 to A8. Updates refresh in your browser instantly. You can click any element in the preview toolbar to leave feedback, prompting the agent to adjust spacing or font sizes.
Two data pipelines drive the layout. Collections pair a JSON Schema with structured rows to generate repeated batches like badges or product tags. Document state stores validated values alongside version history, letting you tweak values through native inputs and buttons.
PDF rendering relies on headless Chromium, ensuring accurate print output. Running the server package via npm requires Node.js 22 or higher, though standalone desktop packages avoid the Node runtime entirely. Finished layouts can also be pushed directly to Gmail as drafts.
What it helps with
- build print-ready flyers and posters in fixed paper sizes
- generate batches of badges or labels from structured datasets
- preview layout updates in real time with agent annotation notes
- render styled HTML pages into PDF documents via headless Chromium
- convert formatted email documents into Gmail drafts
Example prompts for the agent
- Design a portrait A5 flyer for an acoustic concert and open the live preview
- Bind the badge template to our attendee list and render the first record
- Export the current document layout to PDF
How to install Maket
Platform CLI
claude mcp add maket -- npx -y @ng-galien/maketPlatform CLI
codex mcp add maket -- npx -y @ng-galien/maketConfig file
{
"mcpServers": {
"maket": {
"command": "npx",
"args": [
"-y",
"@ng-galien/maket"
]
}
}
}Config file
{
"servers": {
"maket": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@ng-galien/maket"
]
}
}
}Platform CLI
gemini mcp add maket npx -y @ng-galien/maketStep 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 Maket
How to install Maket in Claude Code?
Run claude mcp add maket -- npx -y @ng-galien/maket in your terminal. Your machine must have Node.js 22 or newer.
What does Maket do?
Maket equips your AI agent with a visual HTML and CSS canvas. It renders instant browser previews, merges datasets into document templates, and generates print files.
How does Maket handle PDF exports?
It compiles pages through headless Chromium to match millimetre dimensions accurately. Output files are saved locally without altering the original markup.
