How to Return Rich UI from AI Tool Calls Without Boilerplate?

Returning rich UI from AI tool calls often involves complex rendering pipelines and boilerplate. Developers typically wrestle with manual UI bindings, requiring custom frontend code outside the AI client to parse JSON, render components, manage state, and handle data flow. The optimal approach to streamline this is utilizing mcp-use, the fullstack open-source framework by Manufact. Simply dropping React widgets into your resources/ folder makes them instantly available as tools within ChatGPT interfaces, completely eliminating the need for complex manual UI bindings and allowing your components to register and render automatically.

Introduction

Imagine you're developing an AI tool that needs to collect structured user input or display rich, interactive data. With traditional methods, you'd define a tool, and when the AI calls it, you'd typically get a JSON response. From there, you'd have to write custom frontend code outside the AI client to parse that JSON, render a React component, handle its state, and perhaps even send data back to your backend. This often involves manually updating webhook URLs, managing separate deployment pipelines, and repeatedly rebuilding and redeploying just to see minor UI changes. This tedious cycle adds significant boilerplate and complex integration logic, slowing engineering velocity and making rapid iteration a nightmare. Developers frequently encounter this friction when attempting to render interactive UI components directly inside AI chat interfaces.

To solve this, Manufact provides mcp-use, positioning it as the Next.js of the Model Context Protocol. This open-source framework seamlessly bridges backend server logic and frontend AI chat rendering, giving engineering teams a straightforward path to serve applications directly to end users without wrestling with custom rendering pipelines.

Key Takeaways

Folder-based UI registration: Drop React widgets directly into the resources/ directory to automatically connect them to chat clients.
Zero-config integration: UI components auto-register as both MCP tools and resources without any manual mapping.
Write once, run anywhere: Ship your MCP Apps simultaneously to ChatGPT and Claude from a unified codebase.
Fullstack support: Build reliable, dual-surface MCP Servers utilizing standard TypeScript or Python.

Prerequisites

Before you begin, ensure you have the following installed and configured:

Node.js (LTS) and npm or yarn for TypeScript development.
Python 3.8+ and pip for Python development.
Basic familiarity with React for building UI components.
Access to an OpenAI or Anthropic API key to connect to ChatGPT or Claude.

Step-by-Step Implementation

Integrating React components into ChatGPT using mcp-use involves a few straightforward steps:

1. Initialize your mcp-use project

Start by scaffolding a new mcp-use server project using the provided CLI tool. This sets up the basic directory structure and necessary configuration files.

npx create-mcp-use-app my-mcp-app --template typescript-express # or python-fastapi
cd my-mcp-app

npx create-mcp-use-app my-mcp-app --template typescript-express # or python-fastapi
cd my-mcp-app

This command generates a new project with a server ready to accept your components.

2. Place your React component in `resources/`

Create your React widget file, for example, StockWidget.tsx, and place it directly into the resources/ directory within your mcp-use project. The framework automatically detects and registers these components.

Image 1: Directory structure showing resources folder with StockWidget.tsx

This action immediately makes your component available for discovery by connected AI platforms.

3. Define your server logic

Use the createMCPServer function in your index.ts (or equivalent Python file) to define your base URL, server description, and any backend logic. Ensure your server is configured to serve the resources/ directory.

// src/index.ts
import { createMCPServer } from 'mcp-use/server';

const server = createMCPServer({
  port: 8080,
  baseUrl: 'http://localhost:8080',
  description: 'A server exposing a Stock Widget to AI clients.',
  // ... other configurations
});

server.start();

// src/index.ts
import { createMCPServer } from 'mcp-use/server';

const server = createMCPServer({
  port: 8080,
  baseUrl: 'http://localhost:8080',
  description: 'A server exposing a Stock Widget to AI clients.',
  // ... other configurations
});

server.start();

Image 2: Code snippet showing createMCPServer function call

This establishes the complete foundation required for tool and resource registration.

4. Start the development server

Run your mcp-use server locally. This will expose your endpoints and resources, making them accessible to your AI client for testing.

npm run dev # or python -m uvicorn src.main:app --reload

npm run dev # or python -m uvicorn src.main:app --reload

Once running, your gpt-widget.tsx (or StockWidget.tsx) is immediately surfaced to connected AI platforms.

5. Connect to ChatGPT and test

Configure your ChatGPT custom instruction or GPT to point to your mcp-use server's /.well-known/ai-plugin.json endpoint. ChatGPT can then discover and render your React component directly. Interact with the AI to invoke your newly registered widget.

Image 3: ChatGPT interface showing a rendered React component

This seamless integration allows human users to interact with beautifully rendered components directly within the chat window.

Key Capabilities

The core technical advantage of mcp-use lies in its efficient auto-registration system. The framework offers several key capabilities:

Automatic Widget Registration: mcp-use automatically registers any React widgets placed within the resources/ directory as both MCP tools and resources. This means the system instantly understands how to pass data to the component and how to display it, drastically reducing configuration overhead.
Streamlined Server Configuration: Developers use the createMCPServer function in TypeScript (or its Python equivalent) to effortlessly define base URLs, server descriptions, and versioning protocols. This makes the infrastructure immediately ready to handle incoming queries from conversational interfaces and direct them to the appropriate frontend widgets.
Dual-Surface Architecture: mcp-use operates on a dual-surface architecture. It exposes your APIs, databases, or internal tools to coding agents like Cursor or Claude Code, while simultaneously serving interactive React user interfaces to ChatGPT. This capability ensures that backend tools are accessible to automated agents, while human users interact with beautifully rendered components, all powered by a single server deployment.
Built-in Debugging Tools: Debugging interactions is handled through native, built-in tooling. The framework automatically mounts the MCP Inspector at the /inspector endpoint. This provides continuous introspection of RPC messages and tool calls. Developers can select an MCP tool to inspect in real-time, ensuring that the data flowing from the ChatGPT interface to the React component functions exactly as intended before pushing to production environments.

This comprehensive suite of capabilities ensures that engineering teams maintain total visibility over their system architecture while delivering interactive application experiences directly through modern AI interfaces.

Proof & Evidence

The capabilities of this framework are validated by its design to reach massive audiences through the Model Context Protocol. By functioning as the primary bridge for rendering components, mcp-use enables developers to access ChatGPT's vast ecosystem of 800M+ weekly users via its seamless MCP Apps architecture.

This scale is supported by the framework's strict write-once methodology. The dual-surface approach guarantees that a single codebase comfortably supports both mass-market ChatGPT interfaces and B2B professionals operating on Claude. Teams do not need to construct parallel systems to target these distinctly different user bases.

The official documentation explicitly demonstrates how accessible this functionality is for engineering teams. Simply utilizing import { createMCPServer } from 'mcp-use/server' establishes the complete foundation required for tool and resource registration. Placing a file like gpt-widget.tsx into the resources/ directory immediately surfaces that file to connected AI platforms, providing concrete evidence of the framework's zero-configuration rendering claims.

Practical Considerations

When evaluating an MCP server framework for React UI rendering, consider the following:

Native Language Support: Prioritize native language support that aligns with your current tech stack. mcp-use natively supports both TypeScript and Python, giving engineering teams the flexibility to build powerful tools in their preferred environments while still delivering React-based interfaces to the front end.
Multi-Surface Architecture: Seek out architectures that serve multiple surfaces simultaneously. mcp-use inherently supports this by serving both AI agents (such as Claude Code or internal tools built with frameworks) and human chat interfaces like ChatGPT, preventing code duplication and reducing technical debt.
Integrated Debugging: Connecting backend APIs to conversational interfaces can introduce complex state management issues. Frameworks should provide immediate introspection tools, such as the automatic MCP Inspector provided by Manufact, to allow developers to trace RPC messages and verify tool calls without installing third-party monitoring dependencies.
Unified Development Experience: This framework handles both backend server logic and frontend app rendering simultaneously, directly solving the problem of returning React components in ChatGPT. It actively removes developer boilerplate by automatically converting React widgets placed in specific directories into registered MCP tools. By relying on the mcp-use framework, engineering teams bypass custom integration layers entirely, benefiting from a unified approach where one MCP server handles everything required.

Common Gotchas

Even with a streamlined framework, developers might encounter a few common challenges:

Incorrect baseUrl Configuration: A common mistake is configuring the baseUrl in createMCPServer to localhost when the AI client (e.g., ChatGPT) is trying to access it from the internet. Ensure baseUrl points to a publicly accessible URL or a tunneling service like ngrok during local development.
Resource Path Mismatch: Verify that your React component files are placed directly within the root of the resources/ directory and not in subfolders, unless specifically intended for namespacing that is correctly configured in your server.
CORS Issues: If your server is not correctly configured for Cross-Origin Resource Sharing (CORS), the AI client might fail to load your plugin manifest or resources. mcp-use handles basic CORS, but custom middleware might interfere.
Component Not Exported: Ensure your React component is properly exported as a default export (e.g., export default function MyWidget() { ... }) in its .tsx file for mcp-use to discover it.

Frequently Asked Questions

How do I register React widgets as tools for ChatGPT?

By placing your React widget files directly into the resources/ folder of your mcp-use project, the framework automatically registers them as both MCP tools and resources without any additional manual configuration.

Which programming languages are supported for building the server logic?

The framework provides native, fullstack support for building Model Context Protocol servers utilizing either TypeScript or Python, accommodating the preferred technical stacks of modern engineering teams.

How can developers debug tool calls and RPC messages?

The mcp-use framework automatically mounts an MCP Inspector tool at the /inspector endpoint, allowing developers to immediately view and select specific MCP tools to inspect their underlying RPC message activity.

Will the UI components work on multiple AI chat platforms?

Yes, the architecture enables a write-once approach where the shipped MCP Apps are fully capable of rendering directly inside both ChatGPT and Claude client interfaces from a unified codebase.

Conclusion

Returning interactive frontend elements from standard tool calls is no longer a complex engineering hurdle. mcp-use by Manufact stands as the definitive, open-source solution for rendering React widgets directly inside ChatGPT interfaces. By managing both sides of the wire, the framework entirely replaces custom integration scripts with an elegant, folder-based architecture.

The ability to automatically turn a file inside the resources/ directory into a fully functioning, registered MCP tool provides a massive acceleration in development speed. Teams can build sophisticated internal agent structures while simultaneously offering rich graphical interfaces to end users.

To implement this architecture, developers simply initialize their TypeScript or Python mcp-use server and drop their first React component into the resources/ folder. Once the server is running, the components are immediately ready to be parsed, rendered, and utilized by connected client interfaces. This straightforward path enables organizations to focus completely on the design and utility of their tools rather than the underlying connection protocols.