feat: implement MCP-UI support #783
Open
+2,865
−254
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tsck
force-pushed
the
feature/mcp-ui
branch
2 times, most recently
from
d484367 to
e223056
Compare
- Added UIRegistry class to manage custom and default UI HTML for tools. - Integrated custom UI support in the Server and ToolBase classes. - Created ListDatabases tool with a corresponding UI component. - Introduced Vite configuration for building UI components and generating HTML entries. - Updated TypeScript configuration to support JSX and include UI components. - Enhanced package.json with new dependencies for React and Vite. - Updated .gitignore to exclude generated UI files.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds MCP-UI support to the MongoDB MCP server, enabling tools to render rich React-based UIs in compatible clients. The implementation includes build tooling for React components, a UI registry system for managing component HTML, and an initial UI component for the list-databases tool.
Key changes:
- Adds build infrastructure using Vite to compile React components into self-contained HTML files
- Implements a UI registry system that maps tool names to UI components and manages HTML loading
- Updates the
list-databasestool to return structured content and automatically attach UI resources
Reviewed changes
Copilot reviewed 18 out of 20 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.ui.config.ts | New Vite configuration for building React UI components into standalone HTML files |
| tsconfig.build.json | Enables JSX compilation for React components |
| src/ui/registry/uiMap.ts | Maps tool names to UI component names |
| src/ui/registry/registry.ts | Core UIRegistry class for managing and loading UI HTML strings |
| src/ui/registry/index.ts | Registry module exports |
| src/ui/index.ts | Main UI module exports |
| src/ui/hooks/useRenderData.ts | React hook for receiving render data via postMessage |
| src/ui/hooks/index.ts | Hooks module exports |
| src/ui/components/ListDatabases/schema.ts | Zod schema defining list-databases output contract |
| src/ui/components/ListDatabases/index.ts | ListDatabases component module exports |
| src/ui/components/ListDatabases/ListDatabases.tsx | React component rendering database list as a table |
| src/ui/components/ListDatabases/ListDatabases.styles.ts | Styles for ListDatabases component |
| src/ui/build/template.html | HTML template for generated component entry files |
| src/ui/build/mount.tsx | Entry point that mounts React components in the browser |
| src/tools/tool.ts | Adds UIRegistry integration and automatic UI resource attachment to tools |
| src/tools/mongodb/metadata/listDatabases.tsx | Updates tool to return structured content for UI rendering |
| src/server.ts | Adds UIRegistry instantiation and customUIs configuration option |
| package.json | Adds React, Vite, and MCP-UI dependencies plus UI build script |
Collaborator
Pull Request Test Coverage Report for Build 20137060666Details
💛 - Coveralls |
gagik
reviewed
Dec 9, 2025
gagik
reviewed
Dec 9, 2025
…o remove generated UI module path
…TML generation logic
gagik
reviewed
Dec 9, 2025
gagik
reviewed
Dec 10, 2025
Collaborator
Author
@gagik I have another PR open for that! It's probably a bit outdated now because its based on this PR which has changed since, but I kept it separate in order to not bloat this more. Happy to merge it in if that's better on your end #787 Also just a note about trying it - it won't work in the built-in inspector because that doesn't support mcp ui. To try the UI response you'll need to use another inspector, I've been using MCPJam |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
list-databasetool callsTesting
I've been using MCPJam Inspector which has MCP-UI implemented in the client.
Screenshot