gum-jsx 1.3.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gum-jsx",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Language for vector graphics generation.",
   "type": "module",
   "author": "Douglas Hanley",
@@ -53,8 +53,8 @@
     "claude": "bun ./scripts/skill.js && bun ./scripts/claude.ts"
   },
   "bin": {
-    "gum": "./scripts/cli.js",
-    "gum-server": "./scripts/server.js"
+    "gum-cli": "./scripts/cli.js",
+    "gum-mcp": "./scripts/mcp.js"
   },
   "dependencies": {
     "acorn-jsx": "^5.3.2",
@@ -64,10 +64,12 @@
   },
   "optionalDependencies": {
     "@mathjax/src": "^4.1.0",
+    "@modelcontextprotocol/sdk": "^1.25.3",
     "@resvg/resvg-js": "^2.6.2",
-    "commander": "^14.0.2",
+    "commander": "^14.0.3",
     "express": "^5.2.1",
-    "mathjax": "^4.1.0"
+    "mathjax": "^4.1.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.72.1"

package/scripts/mcp.js

@@ -0,0 +1,52 @@
+#! /usr/bin/env bun
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import * as z from 'zod/v4'
+
+import { evaluateGum } from '../src/eval.js'
+import { rasterizeSvg } from '../src/render.js'
+
+const mcpServer = new McpServer({
+    name: 'gum-jsx',
+    version: '1.0.0'
+})
+
+mcpServer.registerTool(
+    'render',
+    {
+        description: 'Render gum.jsx code to PNG',
+        inputSchema: {
+            code: z.string().describe('gum.jsx code to render')
+        }
+    },
+    async ({ code }) => {
+        try {
+            const elem = evaluateGum(code, { size: [1000, 750] })
+            const svg = elem.svg()
+            const png = rasterizeSvg(svg, { size: elem.size, background: 'white' })
+
+            return {
+                content: [
+                    { type: 'image', mimeType: 'image/png', data: png.toString('base64') }
+              ]
+            }
+        } catch (error) {
+            return {
+                content: [
+                    { type: 'text', text: error.message }
+                ]
+            }
+        }
+    }
+)
+
+async function main() {
+    const transport = new StdioServerTransport()
+    await mcpServer.connect(transport)
+}
+
+main().catch(error => {
+    console.error('Server error:', error)
+    process.exit(1)
+})

package/src/render.js

@@ -33,7 +33,7 @@ function buildFitTo(width, height) {
 
 // rasterize SVG buffer/string to PNG
 function rasterizeSvg(svg, opts = {}) {
-  let { size, width, height } = opts
+  let { size, width, height, background } = opts
 
   // scale down intrinsic height
   if (size != null && width != null && height != null) {
@@ -47,7 +47,7 @@ function rasterizeSvg(svg, opts = {}) {
 
   // pass to resvg
   const fitTo = buildFitTo(width, height)
-  const resvg = new Resvg(svg, { fitTo, font })
+  const resvg = new Resvg(svg, { fitTo, font, background })
   return resvg.render().asPng()
 }
 

package/scripts/server.js

@@ -1,69 +0,0 @@
-#! /usr/bin/env bun
-
-import express from 'express'
-import { program } from 'commander'
-import { evaluateGum } from '../src/eval.js'
-import { ErrorNoCode, ErrorNoReturn, ErrorNoElement } from '../src/eval.js'
-
-function parseError(error) {
-  if (error instanceof ErrorNoCode) {
-    return 'ERR_NOCODE: No code provided'
-  } else if (error instanceof ErrorNoReturn) {
-    return 'ERR_NORETURN: No return value'
-  } else if (error instanceof ErrorNoElement) {
-    return `ERR_NOELEMENT: Return value ${JSON.stringify(error.value)}`
-  } else {
-    return `ERR_EVALUATE: ${error.message}`
-  }
-}
-
-// get host and port args from cli
-program
-  .option('-h, --host <host>', 'host to listen on', 'localhost')
-  .option('-p, --port <port>', 'port to listen on', v => parseInt(v, 10), 3000)
-  .parse()
-const { host, port } = program.opts()
-
-// create express app
-const app = express()
-app.use(express.raw({ type: '*/*', limit: '1mb' }));
-
-// convert buffer to string for text-based routes
-app.use((req, res, next) => {
-  if (req.method === 'POST' && Buffer.isBuffer(req.body)) {
-    req.body = req.body.toString('utf8')
-  }
-  next()
-})
-
-// status message
-app.get('/', (req, res) => {
-  res.send('GUM')
-})
-
-// eval gum jsx to svg
-app.post('/', (req, res) => {
-  // get params
-  const code = req.body
-  const size0 = parseInt(req.query.size ?? 500)
-  const theme = req.query.theme ?? 'light'
-
-  // evaluate code and return svg
-  let svg
-  try {
-    const elem = evaluateGum(code, { size: size0, theme })
-    svg = elem.svg()
-  } catch (error) {
-    const message = parseError(error)
-    return res.status(500).send(message)
-  }
-
-  // send svg
-  res.setHeader('Content-Type', 'image/svg+xml')
-  res.send(svg)
-})
-
-// start server
-app.listen(port, host, () => {
-  // console.log(`Server running on http://${host}:${port}`)
-})