newprint-mcp 1.0.0

package/README.md

@@ -0,0 +1,110 @@
+# newprint-mcp
+
+An MCP server that lets AI agents render rich UI — tables, charts, markdown, and pages — and return a shareable URL instead of plain text.
+
+## How it works
+
+1. Agent calls the `render_ui` tool with structured data
+2. MCP sends it to your [newprint-server](https://github.com/yourusername/newprint)
+3. Server stores it and returns a URL
+4. User opens the URL and sees a rich rendered view
+
+## Setup
+
+### 1. Deploy newprint-server
+
+You need a running instance of [newprint-server](https://github.com/yourusername/newprint). The easiest way is to deploy it to Railway — see the main repo for instructions.
+
+### 2. Add to Claude Code
+
+```bash
+claude mcp add newprint-mcp \
+  -e NEWPRINT_SERVER_URL=https://your-server.up.railway.app \
+  -- npx newprint-mcp
+```
+
+### 3. Add to Claude Desktop
+
+Add this to your `claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "newprint": {
+      "command": "npx",
+      "args": ["newprint-mcp"],
+      "env": {
+        "NEWPRINT_SERVER_URL": "https://your-server.up.railway.app"
+      }
+    }
+  }
+}
+```
+
+## Usage
+
+Once connected, 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.
+
+## Tool: `render_ui`
+
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `type` | `table` \| `markdown` \| `chart` \| `page` | Yes | Render type |
+| `title` | string | No | Optional display title |
+| `payload` | object | Yes | Data matching the type schema |
+
+### Payload schemas
+
+**table**
+```json
+{
+  "columns": ["Name", "Score"],
+  "rows": [["Alice", 95], ["Bob", 88]]
+}
+```
+
+**markdown**
+```json
+{
+  "content": "# Hello\n\nThis is **markdown**."
+}
+```
+
+**chart**
+```json
+{
+  "chartType": "bar",
+  "xKey": "month",
+  "series": [{ "dataKey": "revenue", "label": "Revenue" }],
+  "data": [{ "month": "Jan", "revenue": 42000 }]
+}
+```
+
+**page** (multiple blocks)
+```json
+{
+  "blocks": [
+    { "type": "markdown", "payload": { "content": "## Summary" } },
+    { "type": "table", "payload": { "columns": ["A", "B"], "rows": [[1, 2]] } }
+  ]
+}
+```
+
+## Environment variables
+
+| Variable | Default | Description |
+|---|---|---|
+| `NEWPRINT_SERVER_URL` | `http://localhost:3000` | URL of your newprint-server instance |
+
+## Requirements
+
+- Node.js 18+
+- A running [newprint-server](https://github.com/yourusername/newprint) instance

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "newprint-mcp",
+  "version": "1.0.0",
+  "description": "MCP server that lets AI agents render rich UI — tables, charts, markdown, and pages — and return a shareable URL.",
+  "bin": {
+    "newprint-mcp": "./src/index.js"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "node --watch src/index.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.1",
+    "zod": "^3.23.0"
+  },
+  "keywords": [
+    "mcp",
+    "claude",
+    "ai",
+    "render",
+    "ui",
+    "agent"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/index.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+const { McpServer } = require("@modelcontextprotocol/sdk/server/mcp.js");
+const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js");
+const { z } = require("zod");
+
+// Schemas inlined so this package is self-contained on npm
+const tablePayload = z.object({
+  columns: z.array(z.string()).min(1),
+  rows: z.array(
+    z.array(z.union([z.string(), z.number(), z.boolean(), z.null()]))
+  ),
+});
+
+const markdownPayload = z.object({
+  content: z.string().min(1),
+});
+
+const chartPayload = z.object({
+  chartType: z.enum(["bar", "line"]),
+  xKey: z.string(),
+  series: z
+    .array(z.object({ dataKey: z.string(), label: z.string().optional() }))
+    .min(1),
+  data: z.array(z.record(z.union([z.string(), z.number()]))).min(1),
+});
+
+const blockSchema = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("table"), title: z.string().optional(), payload: tablePayload }),
+  z.object({ type: z.literal("markdown"), title: z.string().optional(), payload: markdownPayload }),
+  z.object({ type: z.literal("chart"), title: z.string().optional(), payload: chartPayload }),
+]);
+
+const renderInputSchema = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("table"), title: z.string().optional(), payload: tablePayload }),
+  z.object({ type: z.literal("markdown"), title: z.string().optional(), payload: markdownPayload }),
+  z.object({ type: z.literal("chart"), title: z.string().optional(), payload: chartPayload }),
+  z.object({ type: z.literal("page"), title: z.string().optional(), payload: z.object({ blocks: z.array(blockSchema).min(1).max(50) }) }),
+]);
+
+const SERVER_URL = process.env.NEWPRINT_SERVER_URL || "http://localhost:3000";
+
+const server = new McpServer({
+  name: "newprint-mcp",
+  version: "1.0.0",
+});
+
+server.tool(
+  "render_ui",
+  "Render structured data as a rich UI. Returns a URL the user can open to view tables, markdown, charts, or multi-block pages. Supported types: table, markdown, chart, page.",
+  {
+    type: z.enum(["table", "markdown", "chart", "page"]).describe("The render type"),
+    title: z.string().optional().describe("Optional display title"),
+    payload: z
+      .object({})
+      .passthrough()
+      .describe(
+        "Payload matching the render type. " +
+        "table: { columns: string[], rows: any[][] }. " +
+        "markdown: { content: string }. " +
+        "chart: { chartType: 'bar'|'line', xKey: string, series: [{ dataKey: string, label?: string }], data: object[] }. " +
+        "page: { blocks: Array<{ type: 'table'|'markdown'|'chart', title?: string, payload: object }> }."
+      ),
+  },
+  async ({ type, title, payload }) => {
+    const parsed = renderInputSchema.safeParse({ type, title, payload });
+    if (!parsed.success) {
+      return {
+        isError: true,
+        content: [
+          {
+            type: "text",
+            text: `Invalid input: ${parsed.error.issues.map((i) => i.message).join(", ")}`,
+          },
+        ],
+      };
+    }
+
+    let res;
+    try {
+      res = await fetch(`${SERVER_URL}/render`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(parsed.data),
+      });
+    } catch (err) {
+      return {
+        isError: true,
+        content: [
+          {
+            type: "text",
+            text: `Failed to reach newprint-server at ${SERVER_URL}: ${err.message}`,
+          },
+        ],
+      };
+    }
+
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      return {
+        isError: true,
+        content: [
+          {
+            type: "text",
+            text: `Server error (${res.status}): ${err.details ? JSON.stringify(err.details) : res.statusText}`,
+          },
+        ],
+      };
+    }
+
+    const { url } = await res.json();
+    return {
+      content: [{ type: "text", text: url }],
+    };
+  }
+);
+
+async function main() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  console.error("newprint-mcp running — connected to " + SERVER_URL);
+}
+
+main().catch(console.error);