figcast 0.5.6

package/README.md

@@ -0,0 +1,54 @@
+# Figcast
+
+Send HTML designs from Claude directly into Figma — instantly.
+
+Figcast is a relay server that bridges Claude Code (or any AI agent) to the Figcast Figma plugin via MCP.
+
+---
+
+## Setup (one time)
+
+**Step 1** — Open any terminal and run:
+
+```bash
+npm install -g figcast
+```
+
+**Step 2** — Run once to register:
+
+```bash
+figcast
+```
+
+It registers itself in Claude Code automatically and prints a confirmation. After this, Claude Code starts the server in the background every time it launches.
+
+**Step 3** — Restart Claude Code.
+
+**Step 4** — Open the Figcast Figma plugin → go to **MCP Connect** → click **Connect**.
+
+Done. Claude can now send designs directly into Figma.
+
+---
+
+## How it works
+
+```
+Claude Code  ──MCP stdio──►  figcast  ──HTTP poll──►  Figma plugin
+```
+
+1. Claude Code runs `figcast` as an MCP subprocess
+2. When you ask Claude to build a UI, it calls the `send_to_figma` tool
+3. The plugin polls `localhost:3131/poll` every 2 seconds and picks up the design
+4. The design is rendered as a Figma frame instantly
+
+---
+
+## If auto-registration fails
+
+```bash
+claude mcp add --scope user figcast -- figcast
+```
+
+---
+
+Made by [Arzisoft](https://arzisoft.com) — Software Studio · AI Consulting

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "figcast",
+  "version": "0.5.6",
+  "description": "Relay server for Figcast — connects Claude Code to Figma via MCP",
+  "main": "server.js",
+  "bin": {
+    "figcast": "server.js"
+  },
+  "scripts": {
+    "start": "node server.js"
+  },
+  "keywords": [
+    "figma",
+    "mcp",
+    "claude",
+    "html",
+    "design",
+    "figcast",
+    "arzisoft"
+  ],
+  "author": "Arzisoft",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Arzisoft/html-to-design.git"
+  },
+  "homepage": "https://github.com/Arzisoft/html-to-design",
+  "engines": {
+    "node": ">=16"
+  }
+}

package/send-to-figma.js

@@ -0,0 +1,67 @@
+// Arzisoft HTML to Design — CLI Sender
+// Usage: node send-to-figma.js <path-to-html> [frame-name] [frame-width]
+
+const fs   = require('fs');
+const http = require('http');
+const path = require('path');
+
+const filePath   = process.argv[2];
+const frameName  = process.argv[3] || (filePath ? path.basename(filePath, '.html') : 'Arzisoft Frame');
+const frameWidth = parseInt(process.argv[4]) || 1440;
+
+if (!filePath) {
+  console.error('Usage: node send-to-figma.js <path-to-html> [frame-name] [frame-width]');
+  process.exit(1);
+}
+
+if (!fs.existsSync(filePath)) {
+  console.error('File not found: ' + filePath);
+  process.exit(1);
+}
+
+const html = fs.readFileSync(filePath, 'utf8');
+
+const body = JSON.stringify({
+  frameName,
+  frameWidth,
+  html,
+  css: '',
+  centerOnViewport:      true,
+  selectAfterGeneration: true
+});
+
+const req = http.request({
+  hostname: 'localhost',
+  port: 3131,
+  path: '/generate',
+  method: 'POST',
+  headers: {
+    'Content-Type':   'application/json',
+    'Content-Length': Buffer.byteLength(body)
+  }
+}, res => {
+  let d = '';
+  res.on('data', c => d += c);
+  res.on('end', () => {
+    try {
+      const result = JSON.parse(d);
+      if (result.ok) {
+        console.log('✓ Queued "' + frameName + '" (' + frameWidth + 'px) — waiting for Figma plugin to pick up');
+      } else {
+        console.error('✗ ' + result.message);
+        process.exit(1);
+      }
+    } catch (e) {
+      console.error('✗ Could not parse server response');
+      process.exit(1);
+    }
+  });
+});
+
+req.on('error', () => {
+  console.error('✗ Could not reach relay server. Is it running? (node server.js)');
+  process.exit(1);
+});
+
+req.write(body);
+req.end();

package/send.js

@@ -0,0 +1,53 @@
+// Usage: node send.js <path-to-html-file> [frame-name] [frame-width]
+const fs = require('fs');
+const http = require('http');
+const path = require('path');
+
+const filePath = process.argv[2];
+const frameName = process.argv[3] || path.basename(filePath, '.html');
+const frameWidth = parseInt(process.argv[4]) || 1440;
+
+if (!filePath) {
+  console.error('Usage: node send.js <path-to-html> [frame-name] [frame-width]');
+  process.exit(1);
+}
+
+const html = fs.readFileSync(filePath, 'utf8');
+
+const body = JSON.stringify({
+  frameName,
+  frameWidth,
+  autoLayout: true,
+  centerOnViewport: true,
+  selectAfterGeneration: true,
+  parseInlineStyles: true,
+  parseCSSClasses: true,
+  html,
+  css: ''
+});
+
+const req = http.request({
+  hostname: 'localhost',
+  port: 3131,
+  path: '/design',
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Content-Length': Buffer.byteLength(body)
+  }
+}, res => {
+  let d = '';
+  res.on('data', c => d += c);
+  res.on('end', () => {
+    const result = JSON.parse(d);
+    if (result.ok) {
+      console.log('Sent to Figma: ' + frameName);
+    } else {
+      console.error('Error: ' + result.message);
+    }
+  });
+});
+
+req.on('error', () => console.error('Could not reach relay server. Is it running? (node server.js)'));
+req.write(body);
+req.end();

package/server.js

@@ -0,0 +1,253 @@
+#!/usr/bin/env node
+// Figcast — MCP Server + HTTP Relay
+//
+// Two modes (auto-detected):
+//   MCP mode  — when started by Claude Code (stdin is piped). Implements
+//               MCP protocol over stdio AND runs HTTP on port 3131.
+//   HTTP mode — when run directly: node server.js. Registers itself in
+//               ~/.claude.json automatically on first run, then serves HTTP.
+
+const http     = require('http');
+const readline = require('readline');
+const os       = require('os');
+const path     = require('path');
+const fs       = require('fs');
+
+const HTTP_PORT = 3131;
+
+// ── Shared state ───────────────────────────────────────────────
+let pending    = null;
+let lastStatus = null;
+
+// ── Logging — always to stderr so MCP stdout stays clean ──────
+function log(msg) {
+  process.stderr.write('[Figcast] ' + msg + '\n');
+}
+
+// ── HTTP Server (Figma plugin polls this) ──────────────────────
+const CORS = {
+  'Access-Control-Allow-Origin':  '*',
+  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+  'Content-Type':                 'application/json',
+};
+
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', chunk => { body += chunk; });
+    req.on('end', () => { try { resolve(JSON.parse(body)); } catch(e) { reject(e); } });
+    req.on('error', reject);
+  });
+}
+
+http.createServer(async (req, res) => {
+  if (req.method === 'OPTIONS') { res.writeHead(204, CORS); res.end(); return; }
+
+  if (req.method === 'GET' && req.url === '/health') {
+    res.writeHead(200, CORS);
+    res.end(JSON.stringify({ ok: true, status: 'Arzisoft MCP server running.' }));
+    return;
+  }
+
+  if (req.method === 'GET' && req.url === '/poll') {
+    if (!pending) { res.writeHead(204, CORS); res.end(); return; }
+    const payload = pending;
+    pending = null;
+    res.writeHead(200, CORS);
+    res.end(JSON.stringify(payload));
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/generate') {
+    try {
+      const body = await readBody(req);
+      pending = { ...body, receivedAt: new Date().toISOString() };
+      log('Queued: ' + (pending.frameName || 'Untitled'));
+      res.writeHead(200, CORS);
+      res.end(JSON.stringify({ ok: true, message: 'Design queued.' }));
+    } catch(e) {
+      res.writeHead(400, CORS);
+      res.end(JSON.stringify({ ok: false, message: 'Invalid JSON.' }));
+    }
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/status') {
+    try {
+      const body = await readBody(req);
+      lastStatus = { ...body, receivedAt: new Date().toISOString() };
+      const icon = body.success ? '✓' : '✗';
+      log(icon + ' ' + (body.message || ''));
+      res.writeHead(200, CORS);
+      res.end(JSON.stringify({ ok: true }));
+    } catch(e) {
+      res.writeHead(400, CORS);
+      res.end(JSON.stringify({ ok: false }));
+    }
+    return;
+  }
+
+  res.writeHead(404, CORS);
+  res.end(JSON.stringify({ ok: false, message: 'Not found.' }));
+
+}).on('error', function(err) {
+  if (err.code === 'EADDRINUSE') {
+    log('Port ' + HTTP_PORT + ' already in use — HTTP relay skipped (MCP still active)');
+  } else {
+    log('HTTP server error: ' + err.message);
+  }
+}).listen(HTTP_PORT, '127.0.0.1', () => {
+  log('HTTP relay running on http://localhost:' + HTTP_PORT);
+});
+
+// ── MCP Tool definition ────────────────────────────────────────
+const TOOLS = [{
+  name: 'send_to_figma',
+  description: 'Send HTML (and optional CSS) to the Figcast Figma plugin. The plugin must be open in Figma with the MCP Connect tab connected.',
+  inputSchema: {
+    type: 'object',
+    required: ['html'],
+    properties: {
+      html: {
+        type: 'string',
+        description: 'Full HTML to convert into a Figma frame.'
+      },
+      css: {
+        type: 'string',
+        description: 'Optional additional CSS to apply alongside the HTML.'
+      },
+      frameName: {
+        type: 'string',
+        description: 'Name for the Figma frame. Defaults to "Arzisoft Frame".'
+      },
+      frameWidth: {
+        type: 'number',
+        description: 'Frame width in pixels. Defaults to 1440.'
+      }
+    }
+  }
+}];
+
+// ── MCP stdio protocol (only when piped by Claude Code) ────────
+if (!process.stdin.isTTY) {
+
+  function mcpSend(obj) {
+    process.stdout.write(JSON.stringify(obj) + '\n');
+  }
+
+  const rl = readline.createInterface({ input: process.stdin, terminal: false });
+
+  rl.on('line', line => {
+    line = line.trim();
+    if (!line) return;
+    let msg;
+    try { msg = JSON.parse(line); } catch(e) { return; }
+
+    if (msg.method === 'initialize') {
+      mcpSend({
+        jsonrpc: '2.0', id: msg.id,
+        result: {
+          protocolVersion: '2024-11-05',
+          capabilities: { tools: {} },
+          serverInfo: { name: 'figcast', version: '0.5.6' }
+        }
+      });
+
+    } else if (msg.method === 'notifications/initialized' || msg.method === 'initialized') {
+      // no response needed
+
+    } else if (msg.method === 'tools/list') {
+      mcpSend({ jsonrpc: '2.0', id: msg.id, result: { tools: TOOLS } });
+
+    } else if (msg.method === 'tools/call') {
+      const name = msg.params && msg.params.name;
+      const args = (msg.params && msg.params.arguments) || {};
+
+      if (name === 'send_to_figma') {
+        pending = {
+          html:                  args.html       || '',
+          css:                   args.css        || '',
+          frameName:             args.frameName  || 'Arzisoft Frame',
+          frameWidth:            args.frameWidth || 1440,
+          centerOnViewport:      true,
+          selectAfterGeneration: true,
+          receivedAt:            new Date().toISOString()
+        };
+        log('Queued via MCP: ' + pending.frameName);
+        mcpSend({
+          jsonrpc: '2.0', id: msg.id,
+          result: {
+            content: [{
+              type: 'text',
+              text: '✓ Design queued for "' + pending.frameName + '". Make sure the Figma plugin is open and connected on the MCP Connect tab.'
+            }]
+          }
+        });
+      } else {
+        mcpSend({
+          jsonrpc: '2.0', id: msg.id,
+          error: { code: -32601, message: 'Unknown tool: ' + name }
+        });
+      }
+
+    } else if (msg.id !== undefined) {
+      mcpSend({
+        jsonrpc: '2.0', id: msg.id,
+        error: { code: -32601, message: 'Method not found: ' + msg.method }
+      });
+    }
+  });
+
+  rl.on('close', () => process.exit(0));
+
+} else {
+  // Direct terminal run — self-register into ~/.claude.json, then serve HTTP
+
+  function selfRegister() {
+    const serverPath = __filename;
+    const claudeConfigPath = path.join(os.homedir(), '.claude.json');
+    try {
+      let config = {};
+      if (fs.existsSync(claudeConfigPath)) {
+        try { config = JSON.parse(fs.readFileSync(claudeConfigPath, 'utf8')); } catch(e) { config = {}; }
+      }
+      if (config.mcpServers && config.mcpServers['figcast']) {
+        const existing = config.mcpServers['figcast'].args;
+        if (existing && existing[0] === serverPath) return 'already';
+        // Path changed (e.g. user moved the file) — update it
+        config.mcpServers['figcast'].args = [serverPath];
+        fs.writeFileSync(claudeConfigPath, JSON.stringify(config, null, 2));
+        return 'updated';
+      }
+      if (!config.mcpServers) config.mcpServers = {};
+      config.mcpServers['figcast'] = {
+        type: 'stdio', command: 'node', args: [serverPath], env: {}
+      };
+      fs.writeFileSync(claudeConfigPath, JSON.stringify(config, null, 2));
+      return 'registered';
+    } catch(e) {
+      return 'failed:' + e.message;
+    }
+  }
+
+  process.stderr.write('\n  Figcast — Relay Server\n');
+
+  const regResult = selfRegister();
+  if (regResult === 'registered') {
+    process.stderr.write('\n  ✓ Registered in Claude Code automatically.\n');
+    process.stderr.write('  Restart Claude Code, then click Connect in the Figma plugin.\n');
+  } else if (regResult === 'updated') {
+    process.stderr.write('\n  ✓ Updated path in Claude Code config (file was moved).\n');
+    process.stderr.write('  Restart Claude Code if it was already running.\n');
+  } else if (regResult === 'already') {
+    process.stderr.write('  ✓ Already registered in Claude Code.\n');
+  } else {
+    process.stderr.write('  ⚠ Could not auto-register: ' + regResult.replace('failed:', '') + '\n');
+    process.stderr.write('  Run manually: claude mcp add --scope user figcast -- node "' + __filename + '"\n');
+  }
+
+  process.stderr.write('\n  HTTP relay running at http://localhost:' + HTTP_PORT + '\n');
+  process.stderr.write('  Send a design:\n');
+  process.stderr.write('  node send-to-figma.js <file.html> [name] [width]\n\n');
+}

package/start.bat

@@ -0,0 +1,9 @@
+@echo off
+title Arzisoft HTML to Design — Relay Server
+cd /d "%~dp0"
+echo.
+echo   Arzisoft HTML to Design — Relay Server
+echo   Starting on http://localhost:3131
+echo.
+node server.js
+pause