feat: implement MCP-UI support #783

tsck · 2025-12-04T15:26:01Z

Summary

Adds support of the MCP-UI
Adds build tooling for React components so that they can be rendered via an iframe client
Implements UI for list-database tool calls
Adds the ability to add additional UI's on server instantiation

Testing

I've been using MCPJam Inspector which has MCP-UI implemented in the client.

Screenshot

- 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.

…tent

Copilot

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-databases tool 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

src/ui/registry/registry.ts

Copilot · 2025-12-05T15:00:15Z

src/tools/tool.ts

+        }
+
+        const uiResource = createUIResource({
+            uri: `ui://${this.name}/${Date.now()}`,


Using Date.now() for URI generation creates non-deterministic URIs that change on each execution. This makes testing difficult and prevents URI-based caching. Consider using a deterministic approach or accepting a URI parameter that can be controlled in tests.

I'm not sure we'd want this deterministic. If the same tool is called multiple times, each invocation generates new data, so unique URIs ensure each result is treated as a distinct resource. Open to other ideas here if my thinking is incorrect!

Not sure how the caching works exactly, but I think a static uri would be more performant? I don't think it caches the uiMetadata

package.json

src/ui/build/mount.tsx

coveralls · 2025-12-05T15:28:47Z

Pull Request Test Coverage Report for Build 19972168195

Details

61 of 359 (16.99%) changed or added relevant lines in 17 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage decreased (-2.2%) to 77.793%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/ui/hooks/index.ts	0	1	0.0%
src/ui/index.ts	0	1	0.0%
src/ui/components/ListDatabases/ListDatabases.styles.ts	0	2	0.0%
src/ui/components/ListDatabases/index.ts	0	2	0.0%
eslint.config.js	0	3	0.0%
src/ui/registry/uiMap.ts	0	3	0.0%
src/ui/registry/registry.ts	10	22	45.45%
src/tools/tool.ts	25	55	45.45%
src/ui/hooks/useRenderData.ts	0	43	0.0%
src/ui/build/mount.tsx	0	46	0.0%

Totals
Change from base Build 19944234497:	-2.2%
Covered Lines:	6691
Relevant Lines:	8561

💛 - Coveralls

TheSonOfThomp · 2025-12-05T15:51:10Z

package.json

    "dist"
  ],
  "scripts": {
    "start": "node dist/index.js --transport http --loggers stderr mcp --previewFeatures vectorSearch",


looks like this was renamed

Suggested change

"start": "node dist/index.js --transport http --loggers stderr mcp --previewFeatures search",

TheSonOfThomp · 2025-12-05T15:56:34Z

vite.ui.config.ts

+ * Discover all component directories in src/ui/components/
+ * Each directory should have an index.ts that exports the component
+ */
+function discoverComponents(): string[] {


nit: why discover?

Removed this completely in the change to inline HTML strings

TheSonOfThomp · 2025-12-05T15:59:33Z

vite.ui.config.ts

+    };
+}
+
+const components = discoverComponents();


nit: we're running this search here, and then again in the generateHtmlEntries plugin. Could either use this pre-computed value in the plugin, or memoize it to speed up builds a bit

Fixed this completely in the change to inline HTML strings

TheSonOfThomp · 2025-12-05T16:05:10Z

package.json

+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",


dependencies or devDependencies?

Oh yeah, good point! Will update to dev

TheSonOfThomp · 2025-12-05T16:18:12Z

src/tools/tool.ts

+     * @param result - The result from the tool's `execute()` method
+     * @returns The result with UIResource appended if conditions are met, otherwise unchanged
+     */
+    private appendUIResourceIfAvailable(result: CallToolResult): CallToolResult {


nit: not sure if this is a naming convention across the repo, but just appendUIResource with docs for what happens if it's not available feels more correct

No argument on this from me. "if available" just seemed more technically correct based on what the method does, but I don't see an issue with shortening it.

TheSonOfThomp · 2025-12-05T16:32:53Z

src/tools/mongodb/metadata/listDatabases.ts

does this need to be .tsx?

Good catch! I changed this at the very beginning so I could inline the jsx and validate things were working locally. Will change back

tsck requested review from gagik and nirinchev December 4, 2025 15:26

tsck force-pushed the feature/mcp-ui branch 2 times, most recently from d484367 to e223056 Compare December 4, 2025 17:24

tsck added 2 commits December 5, 2025 09:44

refactor: remove UI business logic from subclass using structured con…

0f9a812

…tent

tsck force-pushed the feature/mcp-ui branch from 47955e5 to 0f9a812 Compare December 5, 2025 14:44

tsck marked this pull request as ready for review December 5, 2025 14:58

tsck requested a review from a team as a code owner December 5, 2025 14:58

Copilot AI review requested due to automatic review settings December 5, 2025 14:58

Copilot AI reviewed Dec 5, 2025

View reviewed changes

tsck added 5 commits December 5, 2025 10:05

refactor: cleanup registry class

3e15fee

refactor: cleanup tool.ts comments

20e2797

refactor: cleanup schema comments

551e529

refactor: some more comment cleanup

f1d668e

feat: add mcpUI feature flag

4bb5c19

tsck added 3 commits December 5, 2025 10:32

refactor: copilot review feedback

8ced988

refactor: update lockfile

38d8e85

fix: ignore ESM type error that will only run in ESM

6696db2

TheSonOfThomp reviewed Dec 5, 2025

View reviewed changes

fix: fix some checks

e6eb0fa

TheSonOfThomp reviewed Dec 5, 2025

View reviewed changes

tsck added 3 commits December 5, 2025 12:16

refactor: inline HTML strings

5f34865

fix: checks

d14b708

fix: build

4931f80

refactor: CR changes

8479dc2

tsck requested a review from TheSonOfThomp December 5, 2025 18:23


	"start": "node dist/index.js --transport http --loggers stderr mcp --previewFeatures search",

feat: implement MCP-UI support #783

Are you sure you want to change the base?

feat: implement MCP-UI support #783

Uh oh!

Conversation

tsck commented Dec 4, 2025

Summary

Testing

Screenshot

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coveralls commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 19972168195

Details

💛 - Coveralls

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coveralls commented Dec 5, 2025 •

edited

Loading