P&ID → HMI
Try demo

open source demo

Upload a P&ID — get a live process-flow HMI

Turn P&ID and PFD drawings into interactive SVG operator screens with simulated live values. Powered by @cursor/sdk for vision extraction, streaming agents, and structured YAML output.

Try the demoView on GitHub

integration flow

P&ID / PDF upload
↓
process-hmi.yaml
↓
SVG process-flow HMI

architecture

Four layers, one pipeline

Upload a drawing, let the agent extract structure, validate YAML, and render a live operator-style canvas — no drag-and-drop designer required.

  1. 01

    Upload

    Drop a PNG, JPEG, or PDF P&ID. The agent reads equipment, piping, and instrument tags from the drawing.

  2. 02

    Agent

    Cursor SDK streams a vision run — Agent.create, image attachment, SSE to the browser.

  3. 03

    YAML

    Validated process-hmi.yaml with normalized positions, edges, ISA tags, and alarm limits.

  4. 04

    HMI canvas

    Live SVG preview with instrument bubbles, alarm colors, and chat-driven refinements.

capabilities

Why this demo exists

Built for developers evaluating the Cursor SDK who want vision, streaming, and structured extraction in one integration.

  • Vision + structured output

    Upload a P&ID or PFD — the agent returns validated process-hmi.yaml with equipment topology and ISA-style tags.

  • Real SDK patterns

    Agent.create, Agent.resume, image attachments, SSE streaming, and Zod validation in a Next.js Route Handler.

  • Works without your API key

    Fixture preview runs offline. Connect your key via HttpOnly cookie to generate from uploads, or clone locally.

how it works

From drawing to live HMI

  1. 01

    Load the sample PFD

    The demo fixture renders as an SVG process-flow HMI with simulated instrument values.

  2. 02

    Upload your drawing

    Drop a PNG, JPEG, or PDF — the Cursor agent extracts equipment, piping, and tags.

  3. 03

    Edit YAML manually

    Tweak node positions, tags, and alarms in process-hmi.yaml with inline validation.

  4. 04

    Watch live values

    Instrument bubbles and alarm colors update on the SVG canvas in real time.

demo to sdk

What you'll learn

Each part of the demo maps directly to a Cursor SDK concept.

Diagram upload (PNG / PDF)Vision + Agent.send with images[]
Agent chat refinementsAgent.create + multi-turn Agent.resume
Streaming responsesrun.stream() over Server-Sent Events
process-hmi.yaml outputStructured extraction + Zod validation
SVG canvas previewRender validated config with live mock tags
HttpOnly API key connectSecure BYOK for hosted demos

sdk quick start

Core integration pattern

The demo's API route follows this pattern from app/api/agent/route.ts.

await using agent = await Agent.create({
  apiKey: process.env.CURSOR_API_KEY!,
  model: { id: "composer-2.5" },
  local: { cwd: process.cwd(), settingSources: [] },
});

const run = await agent.send(prompt);

for await (const event of run.stream()) {
  // Stream events to the client via SSE
}

await run.wait();

Full API reference → TypeScript SDK docs

before vs after

YAML + chat beats a design canvas

− before

Open a SCADA or HMI builder → drag symbols onto a canvas → wire tags manually → export a static screen → repeat for every drawing revision.

+ after

Upload a P&ID → agent returns process-hmi.yaml → live SVG preview updates → refine via chat ("move the boiler left") or edit YAML directly. No drag-and-drop designer required.

ready?

Try it with your own P&ID

Connect your Cursor API key, upload a drawing, and watch the agent build a live process-flow HMI. Clone the repo to run locally with full control.

Open the interactive demoStar on GitHubFollow @jerrodtuck

Built by Jerrod Tuck — SCADA engineer & full-stack developer.