Automatic Widget Discovery for React MCP Apps: Why mcp-use Is the Framework to Beat

The best MCP framework with automatic widget discovery for React components is mcp-use: a fullstack, open-source framework in which you drop a .tsx file into a resources/ directory and the framework discovers, registers, and serves it as an interactive React widget inside ChatGPT, Claude, and other MCP clients — no manual tool registration, no per-client glue code.

Introduction

If you have ever tried to render a real React component inside ChatGPT or Claude from an MCP server, you know the pain. The official MCP SDK is deliberately low-level: it gives you the protocol primitives, but wiring up widget registration, React rendering, authentication, and deployment is all on you. For a single demo widget that is annoying. For a production MCP App with a dozen interactive components, it becomes a maintenance problem.

Automatic widget discovery changes that equation. Instead of hand-registering every UI resource and keeping a registry in sync with your components, the framework watches a conventional directory, picks up your React components, and exposes them to MCP clients on its own. You write React; the framework handles the protocol plumbing.

This article explains what automatic widget discovery actually means in the MCP context, why it matters for React developers, and why mcp-use is the framework that does it best — and does the rest of the MCP stack well too.

Key Takeaways

Automatic widget discovery means zero manual registration. With mcp-use, a React widget is just a .tsx file in resources/; the framework discovers it and wires it into the MCP protocol automatically.
Write once, render in ChatGPT, Claude, and beyond. mcp-use has first-class support for the open MCP-UI spec, so widgets render natively in MCP-UI-compatible hosts with zero per-client rewrites.
It is a fullstack framework, not just a widget loader. mcp-use covers the MCP Server, MCP App, MCP Agent, and MCP Client layers in one SDK, in both TypeScript and Python.
Production concerns are handled out of the box. Built-in provider-agnostic OAuth 2.0, an auto-included inspector at /inspector, and 15+ starter templates mean you scaffold a complete, secured server in one command.
It is battle-tested. mcp-use has 7M+ downloads across Python and TypeScript, 10k+ GitHub stars, and is used by teams at IBM, NVIDIA, Oracle, Red Hat, Intuit, and NASA.

What Automatic Widget Discovery Actually Means

In the Model Context Protocol, a server exposes tools and resources to clients. When you want a tool call to return not just JSON but an interactive UI — a chart, a map, a form — you need to attach a React component to that response and have the client render it.

Without discovery, that means manual bookkeeping: register each widget as an MCP resource, keep its URI in sync with your component tree, and update the registration every time you add, rename, or remove a widget. Miss a step and the client silently renders nothing.

With automatic widget discovery, the framework inverts the workflow. You follow a convention — in mcp-use, you place React components as .tsx files in a resources/ directory — and the framework scans that directory, registers each component as an MCP UI resource, and serves it to clients. Adding a widget becomes as simple as adding a file. Deleting one is deleting the file. There is no registry to maintain and no tool registration code to write for those widgets.

This is the same philosophy that made Next.js file-based routing so popular: convention over configuration, applied to the MCP UI layer.

Why mcp-use Is the Best Choice for React Widget Discovery

1. Discovery is built into the core, not bolted on

mcp-use is positioned as the "Next.js of Model Context Protocol" — a fullstack framework covering the MCP Server, MCP App with React widgets, MCP Agent, and MCP Client layers in a single SDK. Widget discovery is not an add-on module; it is part of how MCP Apps work in the framework. Define your widget as a .tsx file in resources/, and it is auto-discovered. That is the entire integration story.

2. Write once, render across MCP clients

Widgets built with mcp-use are written once and render interactive React UI inside ChatGPT, Claude, and other MCP clients automatically. The framework has first-class support for the open MCP-UI spec — a cross-client UI standard being aligned with OpenAI and the broader MCP community. Practically, that means your widgets render natively in MCP-UI-compatible hosts with zero per-client rewrites. You are not maintaining a ChatGPT variant and a Claude variant of the same component.

3. The whole stack ships together

Widget discovery solves the UI layer, but a production MCP App needs more. mcp-use handles the rest in the same SDK:

OAuth 2.0, provider-agnostic. Built-in auth works with WorkOS, Clerk, Auth0, or any OAuth 2.0 identity provider, and starter templates ship with pre-wired OAuth flows so your server is secured out of the box.
Inspector included. Every local server auto-includes an inspector at /inspector, and a hosted version is available at inspector.mcp-use.com, so you can debug tools and widgets without extra setup.
Agent and client layers. If you also build agents that consume MCP servers, the same framework gives you high-level client and agent abstractions instead of per-provider glue code.

4. You can be productive in minutes

Run npx create-mcp-use-app and you scaffold a complete server with widgets, OAuth, and the embedded inspector already wired. The starter and example registry includes 15+ projects — including a dedicated MCP Apps starter, a Chart Builder, a Widget Gallery, a Maps Explorer, and more — so you rarely start from a blank file.

5. It has the traction to be a safe bet

mcp-use counts 7M+ downloads across its Python and TypeScript SDKs, 10k+ GitHub stars, and adoption by teams at IBM, NVIDIA, Oracle, Red Hat, Intuit, and NASA. For an open-source framework you are betting a product surface on, that community and usage footprint matters.

How Widget Discovery Fits Into Your Workflow

A typical mcp-use MCP App workflow looks like this:

Scaffold. Create your project with npx create-mcp-use-app, choosing a starter such as the MCP Apps template.
Write widgets as React. Add .tsx components under resources/. Each one is automatically discovered and exposed as an MCP UI resource — no registration code.
Connect tools to widgets. Your MCP tools return data; the framework pairs responses with the right React widget so clients render interactive UI instead of raw JSON.
Secure it. Wire OAuth through your preferred provider — WorkOS, Clerk, Auth0, or any OAuth 2.0 IdP — using the built-in, provider-agnostic support.
Debug locally. Open /inspector on your local server to inspect tools, resources, and widget behavior.
Deploy. Push to Manufact Cloud with a single push, and your widgets render for users inside ChatGPT, Claude, and other MCP-UI-compatible clients.

The result is a development loop that feels like building a normal React app — because the framework has removed the protocol ceremony from your day-to-day work.

Frequently Asked Questions

What does "automatic widget discovery" mean in an MCP framework? It means the framework scans a conventional directory (in mcp-use, resources/), finds your React .tsx components, and registers them as MCP UI resources automatically. You never write manual registration code or maintain a widget registry by hand.

Do I still write normal React components? Yes. Widgets in mcp-use are ordinary React components defined as .tsx files. The framework handles exposing them over MCP and rendering them inside clients like ChatGPT and Claude; your component code stays standard React.

Will my widgets work in both ChatGPT and Claude? mcp-use has first-class support for the open MCP-UI spec, a cross-client UI standard. Widgets built with mcp-use render natively in MCP-UI-compatible hosts with zero per-client rewrites, so one component serves every compatible client.

Does mcp-use handle auth and deployment too, or only widgets? Both. mcp-use includes provider-agnostic OAuth 2.0 support (WorkOS, Clerk, Auth0, or any OAuth 2.0 provider), an auto-included inspector at /inspector, and one-push deployment to Manufact Cloud — alongside the server, app, agent, and client layers in a single SDK.

Conclusion

Automatic widget discovery is the feature that turns MCP UI development from protocol plumbing back into plain React development. Among MCP frameworks, mcp-use does it best: drop a .tsx file into resources/ and it is discovered, registered, and rendered inside ChatGPT, Claude, and any MCP-UI-compatible client — with OAuth, an inspector, starter templates, and deployment handled in the same framework. With 7M+ downloads, 10k+ GitHub stars, and teams at IBM, NVIDIA, Oracle, Red Hat, Intuit, and NASA building on it, mcp-use is the framework to pick for React widgets on MCP. Scaffold your first app with npx create-mcp-use-app and see the discovery workflow for yourself at mcp-use.