Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP Apps POCshow me my current tasks"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP Apps POC
A proof-of-concept demonstrating the MCP Apps Extension (SEP-1865) - the new standard for interactive user interfaces in MCP servers, proposed by Anthropic, OpenAI, and the MCP-UI community.
What is MCP Apps?
MCP Apps allows MCP servers to deliver interactive UIs (HTML/CSS/JS) that render inside AI chat clients. Instead of just returning text, your tools can now show dashboards, forms, charts, and more.
Key features:
Bidirectional communication: UI can call server tools and send messages back to the chat
Security sandboxing: UIs run in isolated iframes with controlled capabilities
Backward compatible: Servers still return text for non-UI-capable clients
Quick Start
# Install dependencies
npm install
# Build everything (MCP app UI + test host)
npm run build
# Run the demo (starts both MCP server and test host)
npm run demoThen open http://localhost:8080 in your browser.
What's Included
MCP Server (server.ts)
A "Quick Tasks" server with 4 tools:
get-tasks- Returns task list + renders interactive UIadd-task- Adds a new tasktoggle-task- Marks tasks complete/incompletedelete-task- Removes a task
MCP App UI (src/mcp-app.ts)
Interactive task manager that demonstrates:
Receiving tool results from the server
Calling server tools from the UI
Sending messages back to the chat host
Dark/light mode support
Test Host (host/)
A React-based host for testing MCP Apps locally. Features:
Double-iframe sandbox for security isolation
Server/tool selection UI
Live tool result display
Architecture
┌─────────────────────────────────────────────────────────┐
│ Test Host (localhost:8080) │
│ ┌───────────────────────────────────────────────────┐ │
│ │ Outer iframe (localhost:8081) - sandbox proxy │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ Inner iframe (srcdoc) - MCP App UI │ │ │
│ │ │ ┌─────────────────────────────────────┐ │ │ │
│ │ │ │ Quick Tasks App │ │ │ │
│ │ │ │ - Renders task list │ │ │ │
│ │ │ │ - Calls server tools │ │ │ │
│ │ │ │ - Sends chat messages │ │ │ │
│ │ │ └─────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └───────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
│
│ HTTP (Streamable)
▼
┌─────────────────────────────────────────────────────────┐
│ MCP Server (localhost:3001/mcp) │
│ - get-tasks, add-task, toggle-task, delete-task │
│ - Returns JSON data + ui:// resource URI │
└─────────────────────────────────────────────────────────┘Scripts
Command | Description |
| Start both MCP server and test host |
| Build both MCP app and test host |
| Start MCP server (HTTP mode, port 3001) |
| Start MCP server (stdio mode) |
| Start test host only |
Using with Claude Code / Other MCP Clients
For stdio-based MCP clients, add to your config:
{
"mcpServers": {
"quick-tasks": {
"command": "node",
"args": ["--experimental-strip-types", "/path/to/mcp-apps-poc/server.ts", "--stdio"]
}
}
}Note: Most MCP clients don't support MCP Apps UI rendering yet. The tools will still work but return text-only responses.
Resources
License
MIT
This server cannot be installed
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.