# Maket

Maket provides an HTML and CSS canvas with live browser preview for AI agents. It handles data-driven templating and direct PDF rendering.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 20
- Author: ng-galien
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ng-galien/maket
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/maket

## What it 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.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add maket -- npx -y @ng-galien/maket
```

### Codex

**Platform CLI**
```bash
codex mcp add maket -- npx -y @ng-galien/maket
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "maket": {
            "command": "npx",
            "args": [
                "-y",
                "@ng-galien/maket"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "maket": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@ng-galien/maket"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add maket npx -y @ng-galien/maket
```

## When to use it
- 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
- 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

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md