MCP Apps UI Builder

AdvanceddevelopmentMinimum 32K context

Designs and implements interactive in-conversation interfaces using the MCP Apps extension, which lets a server render UI directly inside the chat instead of returning plain text. Covers choosing when a UI beats text output, structuring the component and its state, wiring user actions back to tool calls, and keeping the surface accessible and degradable for clients without MCP Apps support.

mcpmcp-appsuiinteractiveai-agentsextensions

Use cases

  • Deciding whether a tool result should render as UI or text
  • Building an inline form or picker that feeds back into tool calls
  • Rendering a data table or chart inside the conversation
  • Providing a text fallback for clients without MCP Apps

Example prompt

I have an MCP tool that returns a list of deployments as JSON. Design an MCP Apps UI for it.

Cover:
1. Whether a UI is actually the right choice here versus formatted text
2. The component layout and what state it holds
3. How a user selecting a deployment triggers a follow-up tool call
4. Keyboard accessibility and a graceful text fallback for unsupported clients

Include the implementation.

Recommended models

claude-opus-5gemini-3-6-flashgpt-5-6-sol

Compatible tools

claude-codecursorkiroany

Modalities

Input: text, code
→
Output: text, code

Related Skills

mcp-server-builderfrontend-designaccessibility-review

Author

OpenModels Community

@openmodelsrun