MCP UI in React: tool calls, results and approvals
MCP UI is the interface people use around tools connected through the Model Context Protocol. MCP defines how applications exchange tool definitions, calls and results; your product still needs views for progress, results, errors and approval. affectUI provides React components for those views, while your application handles the MCP connection and tool execution.
Tool transport and finished UI are different layers
MCP has a data layer for protocol messages and a transport layer for exchanging them. Neither a successful connection nor a tool response gives your users a finished workflow. Decide which results deserve a readable summary, what details can expand, and which actions need confirmation.
MCP Apps is an extension for interactive interfaces inside supporting hosts. That requires its own host integration and sandboxed UI resources. Installing an affectUI component does not implement MCP Apps or turn your app into an MCP host.
A support assistant that searches internal documentation
- Show which documentation tool is running, then a concise success or failure state.
- Render retrieved passages with their source links so the reader can check the answer.
- Keep large raw payloads in a separate debug view. Redact credentials and private fields before sending data to the browser.
- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
- Cited Answer – An AI answer wired to its sources – point at a citation to light up its sentence and source, click to unfold the quoted passage with the matching words marked
- Thinking Loader – A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check
An operations assistant that proposes a write
Before updating a ticket or sending a reply, show the exact target and proposed change. Approval Card can collect the person's decision; your server must verify their identity, permissions and the current action before executing it. A visible approval button is not an authorization boundary.
- Approval Card – An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row
- Permission Request – An agent asks for one specific right – who, why and exactly what will happen – and you allow it once, for an hour or always; then it folds into one line with the time left and Revoke
Start with a tool-call view
Install Tool Call Card, then map your application's call events to its running, success and error states. Pass the tool name, redacted arguments and result as props. Implement retry in your backend and check whether the original action already completed before repeating a write.
npx shadcn@latest add https://www.affectui.com/r/tool-call-card.json- Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
What affectUI's own MCP server does
The affectUI MCP server helps coding assistants search components, read their documentation and fetch source. It is a development-time library connection. Your deployed product connects to its own tools and supplies runtime data to the installed React components.
Questions
Does MCP define the appearance of tool results?
The core tool protocol does not mandate one interaction design. Your application chooses how to present calls and results. MCP Apps adds interactive UI resources for hosts that support that extension.
Is affectUI an MCP client SDK?
No. affectUI supplies React UI source and a component-discovery MCP server for coding assistants. Use your own MCP client and backend to connect tools, validate responses and execute actions.
Can I show results from several MCP servers?
Yes. Normalize their events into your application's view data, retain the server and call identifiers, and pass the relevant fields to each component. Keep server credentials and permission checks on the backend.
Updated 2026-11-05