mcp-app: replace React/Vite/npm with static HTML+CSS+JS#525
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests.
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Jazzcort
left a comment
Jazzcort
left a comment
There was a problem hiding this comment.
LGTM! The comments are just some of my thoughts. Feel free to merge this as is. 😁
| @@ -0,0 +1,433 @@ | |||
| export {}; | |||
There was a problem hiding this comment.
I removed this and the app still works fine so maybe it's not needed? 🤔
There was a problem hiding this comment.
This is a signal (to vscode, for example) that the file is a module and not a classic script.
Unless we enable type checking for this file and add a bunch of /** @type {string|null} */ annotations, the difference in handling is small (or non-existent?). I don't really want to add such annotations... an LLM should be able to maintain the code without that, and it will just make changes harder to review. But I think I'll leave the marker.
There was a problem hiding this comment.
Got it! I would like this rather than a lot of annotations like /** @type {string|null} */ 😆
| "*", | ||
| ); | ||
| return new Promise((resolve, reject) => { | ||
| const timer = opts?.timeout |
There was a problem hiding this comment.
What do you think if we have a default timeout apply here like
const timeout = opts?.timeout ?? DEFAULT_REQUEST_TIMEOUT_MSEC;
const timer = setTimeout(() => {
.....
}, timeout);So all the requests can be cleaned up even if the response is missing. It's a rare case and given the fact that each mcp app's lifecycle is very short. This is not that important but there is also no downside for having a default timeout in every request. What do you think @owtaylor ?
There was a problem hiding this comment.
Yeah, make sense to me. I've pushed a new version that does that, and also cleans up sendRequest vs. callServerTool to avoid duplication.
Remove the entire mcp-app/ directory (React, Vite, Tailwind, TypeScript, Zod, npm) and replace it with three plain source files assembled by the Python server at serve time: - ui_resources/run-script-app.html: static template with CSS/JS placeholders - ui_resources/run-script-app.css: plain CSS with host theme variable indirection and light-dark() fallbacks - ui_resources/run-script-app.js: vanilla JS module with MCP host protocol, theming, and DOM-based state management The server inlines CSS and JS into the HTML when serving the resource, producing a single self-contained page (~19KB vs ~279KB with React). @modelcontextprotocol/ext-apps and @modelcontextprotocol/sdk dependencies are replaced with a direct JSON-RPC 2.0 postMessage implementation. Also removes Node.js setup and npm build steps from all CI workflows, and the hatch force-include/artifacts config from pyproject.toml. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
d99bf62 to
4a2e17b
Compare
2 participants
Remove the entire mcp-app/ directory (React, Vite, Tailwind, TypeScript, Zod, npm) and replace it with three plain source files assembled by the Python server at serve time:
The server inlines CSS and JS into the HTML when serving the resource, producing a single self-contained page (~19KB vs ~279KB with React).
@modelcontextprotocol/ext-apps and @modelcontextprotocol/sdk dependencies are replaced with a direct JSON-RPC 2.0 postMessage implementation.
Also removes Node.js setup and npm build steps from all CI workflows, and the hatch force-include/artifacts config from pyproject.toml.