What is the best way to render UI inside ChatGPT and Claude from an MCP server?
Facing UI Limitations in ChatGPT and Claude?
Integrating AI assistants with backend data and APIs is just one part of the challenge. The real bottleneck emerges when you need to present dynamic, interactive data to users directly within chat clients. Traditional methods often force you to return raw text or unformatted JSON, which is insufficient for complex workflows and leaves users navigating away from the chat to interact with external UIs. This fragmented experience slows down user adoption and limits the potential of your AI applications.
The mcp-use open-source SDK offers a powerful solution by enabling you to build a full-stack MCP App. By simply placing React components into your resources/ folder, they automatically register as MCP tools that render native, schema-validated widgets directly inside ChatGPT and Claude, transforming basic text assistants into fully interactive, visual applications.
Introduction
Connecting an AI assistant to backend data and APIs solves only one part of the interaction equation. Presenting that data dynamically to end users inside chat clients requires dedicated UI infrastructure. Returning raw text or JSON data is often insufficient for complex workflows, but rendering React widgets directly inside ChatGPT and Claude transforms basic text assistants into fully interactive, visual applications.
Using a dedicated open-source framework for MCP Servers like mcp-use by Manufact eliminates the burden of complex protocol plumbing. It allows developers to focus entirely on building functional user interfaces without needing to manually manage separate resource endpoints, handle pending rendering states, or configure visual themes for different AI hosts.
Key Takeaways
- The mcp-use SDK functions as a fullstack framework for both MCP Apps (ChatGPT/Claude) and MCP Servers (AI agents).
- React widgets placed in the
resources/directory auto-register as rendering tools with zero additional configuration. - The built-in
useWidgethook automatically handles typed properties, pending states, and respects the native theming of the host chat client. - Developers can test UI components and JSON-RPC messages using the built-in browser Inspector without requiring a live connection to an LLM.
Prerequisites
Before building your application, establish a development environment configured for either TypeScript or Python. Because the mcp-use SDK provides an identical server API across both languages, you can select the language that best fits your existing stack while accessing the exact same functional capabilities.
You also need basic knowledge of React to build the UI widgets that will display directly within the ChatGPT and Claude chat surfaces. The system automatically maps your React properties to the tool inputs, meaning familiar front-end development paradigms apply directly to AI tool creation.
Finally, ensure you have command-line access to execute the initial scaffolding scripts. A frequent barrier in AI agent development is complex initial setup and boilerplate code. The mcp-use framework handles this upfront through a one-command scaffold. By running this command, the system automatically generates a typed MCP server, necessary authentication configurations, a structured React widget directory, and a working example application to bypass manual configuration hurdles.
Step-by-Step Implementation
Phase 1: Scaffold the Project
Begin the process by executing the command npx create-mcp-use-app in your terminal. This instantly generates a typed MCP server repository tailored for your application. The scaffold includes a predefined resources/ folder containing working React widgets, foundational authentication code, and the base project structure needed to begin immediately.
Phase 2: Configure the Server
Next, initialize the server instance using createMCPServer in TypeScript or MCPServer in Python. During this initialization, configure the server name, the current version, and the base URL. It is critical to provide a clear text description during this step so the host LLM understands the specific purpose of the provided tools and when it should call them.
Phase 3: Create React Widgets
Develop standard React components and place the files directly into the generated resources/ directory. The mcp-use framework automatically registers these files as both functional MCP tools and visual resources. There is no need to manually register a separate ui:// resource endpoint; exporting a component automatically creates the tool and its corresponding widget surface.
Phase 4: Implement the useWidget Hook
Within your React component, apply the built-in useWidget hook out of the box. This hook enforces schema-validated input directly through the component signature. By utilizing Zod in TypeScript or Pydantic in Python, the tool inputs generated by the LLM are strictly validated before any rendering occurs. The hook also ensures the resulting widget inherits the visual theming of the host client, seamlessly blending into either the ChatGPT or Claude interface.
Phase 5: Test and Iterate
Rather than testing directly against the LLM, start the local development server with hot reload capabilities by running mcp-use dev. This command opens an interactive browser Inspector automatically mounted at the /inspector endpoint. Use this local interface to manually execute tools, preview the React widget rendering states, and watch live JSON-RPC message traffic.
Common Failure Points
- Structural Disconnect Between Tool Schemas and UI Properties: Developers often hand-code separate tool input schemas and visual components. This leads to data mismatches, missing properties, and UI crashes within the chat client. The mcp-use framework prevents this by validating inputs strictly via the component signature itself, ensuring the UI always receives the exact data structure it expects.
- Blind Testing in Live LLM Surface: Deploying directly to a chat client makes debugging exceptionally difficult due to reliance on the AI's unpredictable prompt interpretation and function calling behaviors. Always use the built-in browser Inspector to verify strict tool execution, inspect raw JSON-RPC payloads, and confirm UI rendering locally before exposing the application to Claude or ChatGPT.
- Transport Protocol Mismatches: Misconfiguring HTTP, Server-Sent Events (SSE), or STDIO can break communication, causing connection timeouts or silent execution failures. Rely on mcp-use's out-of-the-box support for all major transports, which runs the exact same server logic regardless of the underlying protocol, to guarantee consistent delivery.
- Manual UI Resource Registration: Traditionally, managing separate UI resources requires registering a distinct
ui://endpoint. This manual mapping is error-prone and frequently results in broken application states. The mcp-use framework resolves this by combining tool logic and widget declaration into one single file, eliminating registration desynchronization.
Practical Considerations
- Managed Cloud Deployment: Deploying MCP infrastructure reliably can be an engineering bottleneck. Manufact Cloud offers one-click deployment from a GitHub repository, providing immediate access to branch deploys, application logs, operational metrics, and observability without configuring separate hosting environments.
- Dual-Surface Architecture: The same mcp-use server shipping interactive React widgets to ChatGPT and Claude can simultaneously expose its raw APIs and database access to autonomous coding agents. This means tools built for visual chat interactions are immediately compatible with environments like Cursor, Claude Code, or custom internal agents built with standard frameworks.
- Accelerated Development with Templates: Utilize pre-built layouts like the Chart Builder or Diagram Builder templates instead of starting from an empty repository. These structured foundations allow teams to immediately focus on specific business logic and custom visual data presentation.
Frequently Asked Questions
What programming languages can I use to build my MCP server?
The mcp-use SDK provides an identical server API for both TypeScript and Python. You can pick whichever language your team prefers while maintaining the exact same capabilities and feature set.
Do I need to manually register separate UI resources for my tools?
No. With mcp-use, you declare a React widget directly on the tool in one file. Dropping the component into the resources/ folder auto-registers it as both the tool and the corresponding UI resource.
How can I test my React widgets before connecting them to an LLM?
The mcp-use framework includes a built-in browser Inspector. By running the dev server, you can access an interactive interface at /inspector to test tools, preview widgets, and monitor JSON-RPC messages live.
Which transport protocols does the framework support?
The framework supports STDIO, HTTP, Server-Sent Events (SSE), and WebSockets out of the box. You use the exact same codebase regardless of which transport mechanism your execution environment requires.
Conclusion
Rendering dynamic user interfaces inside ChatGPT and Claude is handled entirely by the mcp-use SDK. By merging API tool definitions and React components into a single cohesive workflow, the framework removes the technical burden of managing complex, desynchronized protocol implementations.
Success in this architecture is defined by deploying a fully interactive, schema-validated widget that accurately processes LLM data while perfectly respecting the host chat client's visual theming. By eliminating manual resource registration and protocol plumbing entirely, engineering teams can dedicate their focus to crafting functional, highly visual tools for end users.
For immediate implementation, developers should scaffold a new project utilizing the npx create-mcp-use-app command, which provides the necessary directory structures and configuration immediately. From there, teams can build components, test locally using the built-in Inspector, and connect their GitHub repositories directly to Manufact Cloud for instant deployment and aggregation.