Agentic UI Workbench

A local React + Node workbench for testing an Agentic UI stack from a real frontend surface.

The app posts a run request to a local agent endpoint, receives Server-Sent Event frames, and renders those frames into:

• a live chat transcript
• an event timeline
• tool call cards
• shared state from STATE_SNAPSHOT and STATE_DELTA JSON Patch updates
• generated UI surfaces from A2UI-style declarative component trees
• interrupt-driven approval flows that pause and resume a run

Run Locally

npm install
npm run dev

Open:

http://127.0.0.1:5173/

The Vite dev server proxies /api/* to the local agent server at:

http://127.0.0.1:4317

Useful Commands

npm run build
npm run lint

Backend health check:

Invoke-RestMethod -Uri http://127.0.0.1:4317/api/health

Smoke-test the stream:

@'
const res = await fetch('http://127.0.0.1:4317/api/agent/run', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ scenario: 'research', prompt: 'smoke test' })
});
const text = await res.text();
console.log(text.split('\n\n').filter(Boolean).length);
'@ | node --input-type=module

Expected result for the research scenario: 17 SSE frames, beginning with RUN_STARTED and ending with RUN_FINISHED.

Current Protocol Surface

The demo emits event names from @ag-ui/core:

• RUN_STARTED
• STATE_SNAPSHOT
• MESSAGES_SNAPSHOT
• TEXT_MESSAGE_START
• TEXT_MESSAGE_CONTENT
• TEXT_MESSAGE_END
• TOOL_CALL_START
• TOOL_CALL_ARGS
• TOOL_CALL_END
• TOOL_CALL_RESULT
• STATE_DELTA
• RUN_FINISHED
• CUSTOM events with A2UI_SURFACE_CREATED, INTERRUPT_REQUESTED, and INTERRUPT_RESUMED names

STATE_DELTA uses JSON Patch-shaped operations and the frontend applies add, replace, and remove.

Generated UI Surface

The Generated UI scenario emits a declarative surface shaped like A2UI:

{
  "surfaceId": "surface-dashboard",
  "components": [
    { "id": "root", "type": "card", "children": ["intro", "progress"] },
    { "id": "intro", "type": "text", "text": "/project/summary" },
    { "id": "progress", "type": "progress-bar", "value": "/project/progress" }
  ],
  "dataModel": {
    "project": {
      "summary": "Generated from a natural-language request.",
      "progress": 0.68
    }
  }
}

The frontend renders the surface with a local React widget registry in src/a2ui.tsx. The agent sends data, not executable UI code.

Interrupt Approval Flow

The Approval interrupt scenario:

1. Emits a payment confirmation surface.
2. Emits CUSTOM event INTERRUPT_REQUESTED.
3. Keeps the SSE run open while waiting.
4. The frontend posts the user's decision to:

POST /api/agent/resume

5. The backend emits INTERRUPT_RESUMED, patches shared state, and finishes the run.

Files

server/index.mjs       local AG-UI-style SSE agent endpoint
src/App.tsx            React workbench UI, stream parser, event reducer
src/a2ui.tsx           A2UI-style safe React widget registry
src/App.css            app layout and responsive UI
src/index.css          global tokens and base styles
vite.config.ts         Vite proxy to the local agent server

Known Limitations

• The backend is a deterministic simulator, not a live LLM agent.
• Generated UI is A2UI-style and intentionally local; it is not using the official A2UI SDK yet.
• The stream uses AG-UI event types and SSE framing, but it does not yet use an AG-UI client transport abstraction.
• There is no persistence between runs.
• Interrupt resume state is in memory only. Restarting the Node server clears pending approvals.