Skip to main content
Glama
Sign In
Plumb (plumb-mcp)

Plumb (plumb-mcp)

by tathagat22
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

Plumb · emit react

plumb_emit_react
Read-onlyIdempotent

Converts a design graph from Figma or a live site into pixel-faithful React JSX with inline styles, using a template-based deterministic emitter.

Instructions

Deterministic PDS/WebSpec → React (JSX + inline styles) code generator. Pass the raw JSON from a prior plumb_node/plumb_outline/plumb_query call (Figma) OR a prior plumb_import_web call (a live site) — the same emitter handles both, proving the underlying graph is source-agnostic. Not an LLM call: template-based and deterministic, mirroring the existing PDS→Figma emit path's own 'every conversion happens here, mechanically' design. Output is PIXEL-FAITHFUL (every box's width/height is emitted explicitly), not a hand-tuned responsive component — there's no hug/fill/fixed sizing signal in the graph yet to generate flex:1/width:auto from. Check the warnings array: vector nodes render as empty boxes (no path data is reproduced) and images with no captured source get an empty src.

Tool call template

Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {
      "doc": "<doc>"
    },
    "name": "plumb_emit_react"
  }
}

Input Schema

NameRequiredDescriptionDefault
docYesA PdsDocument (Figma) or a WebSpecDocument (plumb_import_web) — auto-detected.
componentNameNoDefault "GeneratedComponent".

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.13.2

TDQS

A4.6/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

The description adds significant behavioral context beyond annotations: it is template-based, deterministic, not an LLM call, and warns about vector nodes and images. This complements the readOnlyHint, openWorldHint, and idempotentHint annotations well, and there is no contradiction.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is front-loaded with the core purpose and is well-structured. Every sentence adds value, covering input, behavior, and output characteristics. It is concise for the amount of information provided.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool has 2 parameters, no output schema, and no nested object details, the description covers the input sources, deterministic nature, and output caveats (warnings for vectors/images). It provides sufficient context for an agent to understand the tool's role in the pipeline.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With 100% schema description coverage, the baseline is 3. The description adds meaning by explaining that the 'doc' parameter auto-detects between Figma and WebSpec documents, and that 'componentName' has a default of 'GeneratedComponent'. This provides clarity beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it is a deterministic code generator for React JSX from PDS or WebSpec documents. It specifies the input sources (plumb_node/plumb_outline/plumb_query or plumb_import_web) and that it outputs pixel-faithful JSX+inline styles. This distinguishes it from sibling tools like plumb_outline which provide outlines, not code.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explains to pass raw JSON from prior plumb calls and notes that the output is pixel-faithful, not responsive, guiding appropriate usage. However, it does not explicitly mention when not to use this tool or alternative tools for responsive design.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools