newprint-mcp

An MCP server that lets AI agents render rich UI — tables, charts, markdown, diffs, code blocks, JSON trees, kanban boards, and multi-block pages — and return a shareable URL instead of plain text.

How it works

1. Create an account and get an API key
2. Configure your API key with the setup_api_key tool
3. Agent calls render_ui with structured data
4. User opens the returned URL and sees a rich rendered view

Setup

1. Install

Claude Code:

claude mcp add newprint-mcp -- npx -y newprint-mcp

Claude Desktop — add to claude_desktop_config.json:

{
    "mcpServers": {
        "newprint": {
            "command": "npx",
            "args": ["-y", "newprint-mcp"]
        }
    }
}

2. Create an account

Sign up at newprint.dev/register.

3. Get an API key

Go to your Dashboard and create an API key. Copy it — it starts with np_ and is only shown once.

4. Configure the API key

Ask your AI agent to run the setup_api_key tool:

"Set up my newprint API key: np_your_key_here"

The key is saved to ~/.newprint/config.json and used automatically for all future renders.

Alternative: Set the NEWPRINT_API_KEY environment variable instead:

{
    "mcpServers": {
        "newprint": {
            "command": "npx",
            "args": ["-y", "newprint-mcp"],
            "env": {
                "NEWPRINT_API_KEY": "np_your_key_here"
            }
        }
    }
}

Usage

Once configured, ask Claude to render something:

"Show me last month's sales as a bar chart"

"Create a markdown report summarising these results"

"Build a page with a summary, chart, and data table"

Claude will call render_ui and return a URL you can open in your browser.

Usage limits

Each account gets 1,000 renders per month. Check your current usage on the Dashboard or by asking the agent to run newprint_status.

Tools

render_ui

Render structured data as a rich UI and return a shareable URL.

| Parameter | Type | Required | Description | | --------- | ---------------------------------------------------------------------------------------------- | -------- | ----------------------------- | | type | table | markdown | chart | diff | codeblock | json-tree | kanban | page | Yes | Render type | | title | string | No | Optional display title | | payload | object | Yes | Data matching the type schema |

setup_api_key

Configure your newprint API key. Validates the key and saves it to ~/.newprint/config.json.

| Parameter | Type | Required | Description | | --------- | ------ | -------- | -------------------------------- | | api_key | string | Yes | Your API key (starts with np_) |

newprint_status

Check your setup status, key validity, and monthly usage. Takes no parameters.

Payload schemas

table

{
    "columns": ["Name", "Score"],
    "rows": [
        ["Alice", 95],
        ["Bob", 88]
    ]
}

markdown

{
    "content": "# Hello\n\nThis is **markdown**."
}

chart

{
    "chartType": "bar",
    "xKey": "month",
    "series": [{ "dataKey": "revenue", "label": "Revenue" }],
    "data": [{ "month": "Jan", "revenue": 42000 }]
}

diff

{
    "oldValue": "const x = 1;",
    "newValue": "const x = 2;",
    "language": "javascript",
    "fileName": "config.js"
}

codeblock

{
    "code": "console.log('hello');",
    "language": "javascript",
    "fileName": "app.js"
}

json-tree

{
    "data": { "user": { "name": "Alice", "active": true }, "roles": ["admin"] }
}

kanban

{
    "columns": [
        {
            "title": "To Do",
            "color": "#6366f1",
            "cards": [{ "title": "Design auth flow", "tags": ["design"], "priority": "high" }]
        }
    ]
}

page (multiple blocks)

{
    "blocks": [
        { "type": "markdown", "payload": { "content": "## Summary" } },
        { "type": "table", "payload": { "columns": ["A", "B"], "rows": [[1, 2]] } }
    ]
}

Environment variables

| Variable | Default | Description | | ------------------ | ------- | ------------------------------- | | NEWPRINT_API_KEY | — | API key (overrides config file) |

Requirements

• Node.js 18+