A
AgentUI
Templates

phorm

Phorm Design-to-MCP Tool UI Flow

Convert a Phorm design reference into an MCP tool UI plan and validate it against the tool schema.

availablephorm_design_paneloperator boundary includedbuilt_in
Nodes
5
Edges
4
Version
3.0.0
Storage
local draft
Create Local DraftView Gallery

Workflow graph

This is a reusable template graph. Opening it in Builder creates a browser-local draft that can be saved and reopened from Builder recent drafts or Gallery local drafts.

  1. Step 1 · start

    Start

    public-safe

  2. Step 2 · phorm_design

    Import Phorm design reference

    operator boundary

  3. Step 3 · mcp_tool

    Bind MCP tool schema

    public-safe

  4. Step 4 · condition

    Validate schema-layout parity

    public-safe

  5. Step 5 · end

    Complete

    public-safe
Template JSON
{
  "nodes": [
    {
      "id": "start-1",
      "type": "start",
      "label": "Start",
      "x": 80,
      "y": 160,
      "position": {
        "x": 80,
        "y": 160
      },
      "config": {
        "publicSafe": true,
        "protectedAction": false
      },
      "status": "idle",
      "metadata": {}
    },
    {
      "id": "phorm_design-2",
      "type": "phorm_design",
      "label": "Import Phorm design reference",
      "x": 310,
      "y": 240,
      "position": {
        "x": 310,
        "y": 240
      },
      "config": {
        "publicSafe": false,
        "protectedAction": true,
        "service": "phorm.platphormnews.com"
      },
      "status": "idle",
      "metadata": {}
    },
    {
      "id": "mcp_tool-3",
      "type": "mcp_tool",
      "label": "Bind MCP tool schema",
      "x": 540,
      "y": 160,
      "position": {
        "x": 540,
        "y": 160
      },
      "config": {
        "publicSafe": true,
        "protectedAction": false,
        "mode": "render_only"
      },
      "status": "idle",
      "metadata": {}
    },
    {
      "id": "condition-4",
      "type": "condition",
      "label": "Validate schema-layout parity",
      "x": 770,
      "y": 240,
      "position": {
        "x": 770,
        "y": 240
      },
      "config": {
        "publicSafe": true,
        "protectedAction": false,
        "expression": "all_required_fields_rendered"
      },
      "status": "idle",
      "metadata": {}
    },
    {
      "id": "end-5",
      "type": "end",
      "label": "Complete",
      "x": 1000,
      "y": 160,
      "position": {
        "x": 1000,
        "y": 160
      },
      "config": {
        "publicSafe": true,
        "protectedAction": false
      },
      "status": "idle",
      "metadata": {}
    }
  ],
  "edges": [
    {
      "id": "edge-1",
      "source": "start-1",
      "target": "phorm_design-2",
      "sourceNodeId": "start-1",
      "targetNodeId": "phorm_design-2",
      "condition": "success",
      "metadata": {}
    },
    {
      "id": "edge-2",
      "source": "phorm_design-2",
      "target": "mcp_tool-3",
      "sourceNodeId": "phorm_design-2",
      "targetNodeId": "mcp_tool-3",
      "metadata": {}
    },
    {
      "id": "edge-3",
      "source": "mcp_tool-3",
      "target": "condition-4",
      "sourceNodeId": "mcp_tool-3",
      "targetNodeId": "condition-4",
      "metadata": {}
    },
    {
      "id": "edge-4",
      "source": "condition-4",
      "target": "end-5",
      "sourceNodeId": "condition-4",
      "targetNodeId": "end-5",
      "metadata": {}
    }
  ]
}