Skip to content

Conversation

@Pederzh
Copy link
Contributor

@Pederzh Pederzh commented Oct 14, 2025

Description

Introduce comprehensive UIResource support for seamless integration with MCP-UI clients, enabling interactive widget serving through a unified API.

BREAKING CHANGE: None - this is purely additive functionality

New Features

Core UIResource API

  • Add uiResource() method to McpServer for unified widget registration
  • Support three resource types: externalUrl (iframe), rawHtml (direct), remoteDom (scripted)
  • Automatic tool and resource generation with consistent naming patterns
  • Props-to-parameters conversion with type safety and defaults

MCP-UI Adapter Layer

  • Pure adapter functions for @mcp-ui/server compatibility
  • URL building with query parameter encoding
  • Support for text/blob encoding variants
  • Framework support for React and Web Components

Template System

  • New uiresource template demonstrating all resource types
  • Comprehensive examples: Kanban board, welcome card, quick poll
  • Complete documentation and usage patterns

Inspector Integration

  • Enhanced resource rendering for MCP-UI compatibility
  • Interactive widget preview and testing
  • Seamless integration with existing inspector UI

Technical Details

Type System

  • Discriminated union types for type-safe resource definitions
  • Comprehensive prop configuration with validation
  • Widget manifest system for declarative configuration

Testing

  • Complete test coverage for all adapter functions
  • URL parameter handling and encoding verification
  • Error handling and edge case validation

Dependencies

  • Add @mcp-ui/server v5.12.0 for UI resource creation
  • Maintain backward compatibility with existing MCP functionality

Usage Example

// Register widget as both tool and resource
server.uiResource({
  type: 'externalUrl',
  name: 'kanban-board',
  widget: 'kanban-board',
  title: 'Kanban Board',
  props: {
    initialTasks: { type: 'array', required: false },
    theme: { type: 'string', default: 'light' }
  },
  size: ['900px', '600px']
})

// Automatically creates:
// - Tool: ui_kanban-board (accepts parameters)
// - Resource: ui://widget/kanban-board (static access)

Migration Path

  • Existing servers continue to work unchanged
  • New UIResource functionality is opt-in
  • Gradual migration supported through template system

Closes #MCP-638

Does this PR need a changeset?

  • ✅ Yes - I have created a changeset (pnpm changeset)
  • ❌ No - This is an internal-only change (docs, tests, tooling)

Quick reminder:

pnpm changeset  # Creates a changeset interactively

📚 Full guide: Changeset Workflow Guide
Need help? See when to create changesets and examples

🚀 Release Target

  • main branch → Stable release (default)
  • beta branch → Beta/prerelease version
  • Other feature branch → No release

Releasing a beta? See the Beta Release Workflow Guide for instructions.

Checklist

Code Quality

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have added tests that prove my fix is effective or that my feature works
  • Existing tests pass locally (pnpm test)
  • Linting passes (pnpm lint)
  • Build succeeds (pnpm build)

Documentation

  • The title of my pull request follows the conventional commits standard
  • Changes have been documented in the README/documentation (if applicable)
  • Breaking changes are clearly documented with migration steps

Release Preparation

  • I have created a changeset (pnpm changeset) - if this affects published packages
  • The changeset has a clear, user-focused description
  • Version bump type is appropriate (patch/minor/major)
  • All affected packages are included in the changeset

Additional Notes

- Add UIResourceDefinition type and supporting interfaces for widget configuration
- Implement uiResource() method that registers widgets as both tools and resources
- Add widget prop handling with automatic query parameter conversion
- Create modular type system with separate files for common, resource, tool, and prompt types
- Support widget iframe rendering with configurable frame sizes
- Add widget serving routes for static assets and HTML files
- Export UIResource types from main package index for external consumption
- Replace hardcoded template list with dynamic directory scanning
- Add helpful tip about uiresource template for UI resources
- Improve error message when template not found
@Pederzh Pederzh requested a review from tonxxd October 14, 2025 16:22
widget: 'kanban-board',
title: 'Kanban Board',
description: 'Interactive task management board with drag-and-drop support',
props: {
Copy link
Contributor

Choose a reason for hiding this comment

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

how are they used?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The convertPropsToInputs method (lines 479-489) converts your props into tool input definitions, which then get converted to Zod validation schemas.

The applyDefaultProps method (lines 501-511) extracts default values from props to use when accessing the resource directly (without calling the tool).

@Pederzh Pederzh requested a review from tonxxd October 14, 2025 20:41
@Pederzh Pederzh merged commit 55dfebf into main Oct 14, 2025
4 checks passed
@Pederzh Pederzh deleted the feature/mcp-638-ts-implement-ui-resource-in-server branch October 14, 2025 20:41
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.

3 participants