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
55 lines
2.6 KiB
Markdown
55 lines
2.6 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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.
|