Topic Proposal: From Tool Calls to Interfaces - OpenUI for MCP and Agent Workflows

[xcapselx]

Topic Proposal: From Tool Calls to Interfaces - OpenUI for MCP and Agent Workflows

Hi Thesys team,

The README invites new topic pitches, so I would like to propose a developer-focused article about using OpenUI as the interface layer for agent workflows that are already built around tools, MCP servers, and structured outputs.

Why This Topic

Most agent demos still stop at plain text plus a list of tool calls. That is fine for debugging, but it is a weak user experience once the agent starts returning plans, search results, diffs, task queues, metrics, approvals, or account setup checklists. Those outputs are not naturally conversational. They want UI.

OpenUI is a good fit for this gap because agent systems already think in structured intermediate representations. The article would show how to turn those intermediate states into inspectable, interactive interfaces instead of forcing everything back through markdown.

Proposed Angle

This would be a practical integration article, not a product pitch. The core claim:

Agents do not just need better reasoning. They need better surfaces for review, approval, and action.

The article would use a small agent workflow as the running example:

• A tool returns a list of candidate tasks.
• The agent ranks them with evidence and risk.
• The UI renders sortable cards, approval controls, and status transitions.
• The user approves one action.
• The agent receives that approval as structured input and continues.

Proposed Structure

1. The interface problem in agent workflows
   Why plain text breaks down when agents produce structured, multi-step state.

2. What tool calls already give you
   Tool inputs and outputs are close to UI state: records, enums, booleans, confidence scores, links, and action labels.

3. Mapping agent state to OpenUI
   A simple translation pattern from tool result schema to OpenUI components.

4. Human approval as a first-class interaction
   Rendering approve, reject, request changes, and defer actions without losing the agent's structured context.

5. Streaming state changes
   Showing intermediate states such as researching, verifying, blocked, ready, submitted, and complete.

6. Testing the interface contract
   Structural validation for generated UI, schema checks for action payloads, and a small golden set for regression tests.

7. Where OpenUI fits
   OpenUI as the rendering layer for agent state, not as a replacement for the agent framework itself.

Code Examples

I would include compact TypeScript examples for:

• A mock MCP-style tool result schema.
• A translator function that maps ranked task records into OpenUI-ready structure.
• An approval action payload that returns structured state to the agent.
• A simple validator that rejects unsafe or malformed UI actions before execution.

What I Would Avoid

• Generic "AI agents are transforming workflows" filler.
• Treating OpenUI as magic.
• Hand-wavy screenshots with no working shape behind them.
• Private or platform-specific examples that cannot be reused by other developers.

Deliverable

A markdown article, roughly 1,800 to 2,400 words, with code-first examples and an honest tradeoff section. If useful, I can also include a tiny companion repo that runs the mock tool-to-UI flow.

Happy to narrow the scope if you prefer this as an MCP-specific article, a broader agent-UX article, or a tutorial built around one concrete stack.

[zahlekhan]

Hi @xcapselx , this is a significantly technical article.
I would love to your experience building with OpenUI or AI Agents.
Also do you plan to attach images and screenshot so reader can easily follow along?

[xcapselx]

Hi @zahlekhan, yes, I can make it practical and visual.

I have been building agent workflows where tool outputs become reviewable state: ranked tasks, approval gates, status transitions, validation results, and action payloads. The article can use that pattern as the concrete example instead of staying abstract.

For images/screenshots, I can include:

• a diagram of the tool-result-to-UI flow,
• a screenshot of the ranked task/approval interface,
• a screenshot of the state transition from researching to ready to approved,
• a compact code block showing the schema-to-UI mapping,
• and a final screenshot of the approved action payload returning to the agent.

I can keep the example generic and reproducible, with mock data and no private workflow details. If that direction works, I will narrow the article around a small agent task-review UI and include the visuals as part of the submission.

[zahlekhan]

@xcapselx yes, you can narrow it down. setting the budget for the submission at $50.
Please join the discord if you need help - https://discord.com/invite/Pbv5PsqUSv

[LC-86]

/attempt #30

I am taking the narrowed version discussed in the thread: a practical article about using OpenUI as the review and approval layer for MCP / agent workflows. Scope: concrete tool-result schemas, agent-state-to-UI mapping, human approval flow, streaming state transitions, and interface-contract testing. I will keep it code-first, practical, and avoid broad product-pitch framing.

[LC-86]

Submitted PR #44 for this topic: https://github.com/thesysdev/openui-creator-program/pull/44\n\nI kept it on the narrowed scope approved in the thread: OpenUI as the review and approval layer for MCP / agent workflows, with concrete examples for tool-result schemas, UI-state mapping, approval payloads, streaming state transitions, and interface-contract testing.

[Aroesler1]

/attempt #30

I am submitting a differentiated pass on the approved $50 narrowed topic. Angle: an agent review workbench pattern for MCP/tool workflows, with a visual workflow diagram and concrete interface states for ranking, evidence review, approval, and structured payload handoff. I will keep it distinct from PR #44 by focusing on state design, review UI layout, validation gates, and visual artifacts rather than a general tool-call-to-interface overview.

[Aroesler1]

Submitted PR #66 for this $50 topic: #66

This is a distinct agent review workbench angle with a companion SVG visual. It focuses on ranked candidate review, evidence panels, decision rails, typed approval payloads, validation gates, and state timelines for MCP/tool-driven agent workflows.

Validation run before submission:

• npx --yes markdownlint-cli "Articles/Designing Agent Review Workbenches with OpenUI.md"
• xmllint --noout assets/openui-agent-review-workbench.svg
• git diff --check

Disclosure: AI-assisted with Codex; reviewed, linted, and validated before submission.