| Filename | Latest commit message | Latest commit date |
|---|---|---|
8a877b36b4* feat(examples): add debug-server example A comprehensive debug/development server for testing MCP Apps SDK features: - Vanilla TypeScript UI with collapsible panels - Message visualization (sent, received, errors) - Server tool calling interface - Multiple tool endpoints for testing * refactor(debug-server): convert to React - Replace vanilla TypeScript with React components - Add comprehensive Host Styles panel showing all CSS variables grouped by category - Use React hooks (useApp, useHostStyles, useAutoResize) - Cleaner state management with useReducer for event log - Collapsible sections for better organization - CSS modules for scoped styling * fix(debug-server): correct server name in main.ts * Revert "refactor(debug-server): convert to React" This reverts commit 5d22d2daa9a98ba412892447202ef10fbdb62f5b. * fix(debug-server): update default values for multipleBlocks and includeMeta * fix(debug-server): correct serve script and server name - serve script now runs main.ts instead of server.ts - Updated server name to 'Debug Server' - Fixed npx command in comment * fix: increase maxHeight to 6000px and add tools capability to debug app - basic-host: Increase maxHeight from 600 to 6000px - debug-server: Add tools capability to enable oncalltool/onlisttools handlers * fix(debug-server): use consistent callback names for event tracking Event types now match callback names (ontoolinput, ontoolresult, etc.) so the Callback Status panel shows correct counts and payloads. * feat(debug-server): add Update (Image) button for model context * feat(debug-server): add expandable event log entries - Click on any event log row to expand/collapse - Arrow indicator rotates when expanded - Full JSON payload shown indented in pre block - Max height with scroll for large payloads * style(debug-server): format long line in fullPayload function * test(debug-server): add to E2E tests and screenshot specs * chore: regenerate package-lock.json for cross-platform compatibility * update dep |
||
| .. | ||
| src | ||
| .gitignore | ||
| grid-cell.png | ||
| main.ts | ||
| mcp-app.html | ||
| package.json | ||
| README.md | ||
| screenshot.png | ||
| server.ts | ||
| tsconfig.json | ||
| tsconfig.server.json | ||
| vite.config.ts | ||
Debug Server
A comprehensive testing/debugging tool for the MCP Apps SDK that exercises every capability, callback, and result format combination.
Tools
debug-tool
Configurable tool for testing all result variations:
| Parameter | Type | Default | Description |
|---|---|---|---|
contentType |
"text" | "image" | "audio" | "resource" | "resourceLink" | "mixed" |
"text" |
Content block type to return |
multipleBlocks |
boolean | false |
Return 3 content blocks |
includeStructuredContent |
boolean | true |
Include structuredContent in result |
includeMeta |
boolean | false |
Include _meta in result |
largeInput |
string | - | Large text input (tests tool-input-partial) |
simulateError |
boolean | false |
Return isError: true |
delayMs |
number | - | Delay before response (ms) |
debug-refresh
App-only tool (hidden from model) for polling server state. Returns current timestamp and call counter.
App UI
The debug app provides a dashboard with:
- Event Log: Real-time log of all SDK events with filtering
- Host Info: Context, capabilities, container dimensions, styles
- Callback Status: Table of all callbacks with call counts
- Actions: Buttons to test every SDK method:
- Send messages (text/image)
- Logging (debug/info/warning/error)
- Model context updates
- Display mode requests
- Link opening
- Resize controls
- Server tool calls
- File operations
Usage
# Build
npm run --workspace examples/debug-server build
# Run standalone
npm run --workspace examples/debug-server serve
# Run with all examples
npm start
Then open http://localhost:8080/basic-host/ and select "Debug MCP App Server" from the dropdown.