feat: initial connect form and document browser MCP apps [WIP] SKUNK-9#1176
Draft
lerouxb wants to merge 7 commits into
Draft
feat: initial connect form and document browser MCP apps [WIP] SKUNK-9#1176lerouxb wants to merge 7 commits into
lerouxb wants to merge 7 commits into
Conversation
lerouxb
commented
May 12, 2026
| return registrationSuccessful; | ||
| } | ||
|
|
||
| protected override handleError(error: unknown, args: ToolArgs<typeof this.argsShape>): Promise<CallToolResult> { |
Member
Author
There was a problem hiding this comment.
This was actually a bug. If you get a connection error, then the base handleError would replace that with a catchall saying that you have to be connected.
lerouxb
commented
May 12, 2026
1b9c790 to
3cedb1b
Compare
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
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.
From what I can tell the best practise for MCP Apps is to use system fonts and colours. The official SDK in theory passes in Host Style Variables which this tries to use preferably and then it has fallbacks which I styled to look like the MCP Inspector. This way things shouldn't look too out of place inside a chat UI like Claude Desktop. Apparently the industry is also (kinda?) standardising around Shadcn/UI & Tailwind. Not sure how reliable that information really is, but both Claude and Gemini repeated it.
@modelcontextprotocol/ext-apps provides a bunch of standard css variables. Here's an example of what Claude Desktop passes in, for example:
Here it is in Claude Desktop:
For Claude Desktop, configure ~/Library/Application Support/Claude/claude_desktop_config.json:
{ "mcpServers": { "my-local-server": { "command": "node", "args": [ "/Users/leroux.bodenstein/mongo/mongodb-mcp-server/dist/index.js", "--previewFeatures", "mcpApps" ] } } }Or test it in mcp inspector with:
(yes it seems to give every mcp app's iframe 233px of width..)
mcp inspector gets a bit tedious especially for the DocumentBrowser app and for that the ext-apps repo's basic-host is a bit better IMHO:
I used caddy as a reverse proxy because basic-host only supports the http transport and it uses it in the browser, so CORS is an issue. Here's my Caddyfile:
Run the mcp server like this, passing in a connection string so that there's immediately a connection for the DocumentBrowser MCP App to use:
Then you can run basic-host like this:
Then navigate to http://127.0.0.1:8080/.
It is one or two lines of code changes if you want to hack it to hardcode the initial input.
Even this can get a bit tedious, so I added an MCP App "dev mode" where the server will load the app from disk every time. This way the server does not have to be restarted every time you change an mcp app.
So you can now run:
Then when making changes to packages/apps you just recompile:
And then if you hard-refresh in the mcp host app you see the latest app.
You can go even further with this two line hack to pre-fill the query to run:
Some suggested follow-ups: