Skip to content

feat(debug-server): add interactive debug server example#321

Merged
ochafik merged 14 commits intomainfrom
ochafik/debug-server
Jan 23, 2026
Merged

feat(debug-server): add interactive debug server example#321
ochafik merged 14 commits intomainfrom
ochafik/debug-server

Conversation

@ochafik
Copy link
Contributor

@ochafik ochafik commented Jan 22, 2026

Adds a debug server example with the following features:

  • Interactive UI for testing MCP Apps SDK capabilities
  • Event log with expandable entries for debugging
  • Model context view with Update (Image) button
  • Tool input/result visualization
  • Configurable options for multipleBlocks and includeMeta
screenshot

Changes

  • feat(examples): add debug-server example
  • refactor(debug-server): convert to React (then reverted to vanilla)
  • fix(debug-server): correct server name and serve script
  • feat(debug-server): add expandable event log entries
  • feat(debug-server): add Update (Image) button for model context

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
- 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
- serve script now runs main.ts instead of server.ts
- Updated server name to 'Debug Server'
- Fixed npx command in comment
- basic-host: Increase maxHeight from 600 to 6000px
- debug-server: Add tools capability to enable oncalltool/onlisttools handlers
Event types now match callback names (ontoolinput, ontoolresult, etc.)
so the Callback Status panel shows correct counts and payloads.
- 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
@ochafik ochafik requested a review from antonpk1 January 22, 2026 15:18
antonpk1
antonpk1 previously approved these changes Jan 22, 2026
Copy link
Collaborator

@antonpk1 antonpk1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

huge! hero-app

@ochafik ochafik merged commit 8a877b3 into main Jan 23, 2026
15 of 18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants