Add MCP App UI and migrate to SDK's McpServer

[Copilot]

Implements interactive task visualization via MCP Apps and migrates server implementation from deprecated Server to SDK's McpServer.

MCP App Implementation

UI Layer

• React + Vite SPA served as MCP resource (ui://taskflow/todo)
• Displays tasks with status, dependencies, related files, timestamps
• Single HTML bundle (~150KB) with inline CSS/JS

Protocol Integration

• show_todo_list tool with _meta.ui.resourceUri pointing to UI resource
• Custom resource handlers (SDK's registerResource delegation)
• MIME type: text/html;profile=mcp-app

Build Pipeline

pnpm run build:ui    # Vite → ui/dist/index.html
pnpm run build       # TypeScript + copy UI → dist/ui/

SDK Migration

Migrated from deprecated Server to SDK's McpServer using hybrid approach:

Hybrid Pattern

• SDK's McpServer for infrastructure and resources
• Underlying Server.setRequestHandler for tools (JSON Schema compatibility)
• SDK's registerTool expects Zod schemas; our tools use JSON Schema

Implementation

// Constructor: SDK McpServer instance
this.server = new SdkMcpServer({ name, version }, { capabilities });

// Resources: SDK delegation
this.server.registerResource(name, config, handler);

// Tools: Custom handlers via underlying Server
this.server.server.setRequestHandler(CallToolRequestSchema, handler);

Impact

• ~80 lines of protocol handling removed
• Backward compatible (public API unchanged)
• All 596 tests pass

File Changes

New:

• ui/ - React project (App.tsx, types, styles, Vite config)
• src/tools/app/appTools.ts - Tool and resource registration
• tests/tools/app/appTools.test.ts - Unit tests
• scripts/copy-ui.mjs - Build automation

Modified:

• src/server/mcpServer.ts - SDK migration + custom tool handlers
• package.json - Build scripts for UI compilation
• .gitignore, vitest.config.ts - UI artifacts

Changeset:

• Minor version (backward compatible internal refactor)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Create a MCP APP for a todo list for mcp task flow</issue_title>
<issue_description>I want you to create a todo list that shows the tasks generated from mcp-taskflow.
Use mcp-taskflow to create a list of tasks to do so.
You may have to install new packages and write tests for this.
Use playwrite or mcp-task flow to research mcp apps.

Links to help with research but they are not limited to these links :
https://code.visualstudio.com/blogs/2026/01/26/mcp-apps-support
https://modelcontextprotocol.io/docs/extensions/apps

This should use typescript and should work with the current project setup using vite and other package that work well maybe react.

Part of the task list when you use mcp-taskflow will be research on what is the best for this them you will implement after.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Create a MCP APP for a todo list for mcp task flow #18

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[CalebGerman]

@copilot great job, but this package uses pnpm not npm. So in your files please use pnpm

[Copilot]

@copilot great job, but this package uses pnpm not npm. So in your files please use pnpm

Updated all build scripts and documentation to use pnpm instead of npm. Changes in commit 3616cf5:

• package.json: Updated build:ui, build:server, build, and clean scripts to use pnpm
• scripts/copy-ui.mjs: Updated error message to reference pnpm
• ui/README.md: Updated all command examples to use pnpm

The project now consistently uses pnpm throughout.

[CalebGerman]

@copilot

Task: Implement Full MCP Apps Support for show_todo_list

The show_todo_list tool currently returns JSON instead of rendering an interactive UI. We need to implement proper MCP Apps resource registration to display the HTML interface in VS Code/Copilot.

Instructions

Use mcp-taskflow to organize and track this work.

Investigate the current implementation to understand:

• Current state: What does the tool return? (check src/tools/app/appTools.ts)
• Built UI exists at: ui/dist/index.html
• What's needed: MCP resource registration and HTML serving
• MCP SDK capabilities: Research the SDK version and available APIs
• MCP Apps protocol: How do resources work in the MCP specification?

Break this work down into manageable subtasks with clear dependencies:

• Research and design phase
• Implementation of resource handlers
• Integration with existing tool
• Testing (both visual and unit tests)
• Documentation updates

Work through the implementation systematically:

• Track your progress through the subtasks
• Test visual rendering as you go
• Write and run unit tests for new code
• Verify each milestone before moving forward
• Commit meaningful changes with good commit messages

Testing Requirements

• Verify the UI displays correctly in a browser context
• Write unit tests in tests/tools/app/appTools.test.ts
• Ensure existing tests still pass (pnpm test)
• Test edge cases: no tasks, many tasks, error states

Security & Quality

• Follow security-first principles from .github/copilot-instructions.md
• Validate all inputs and file paths
• Handle errors gracefully (missing UI build, file read failures)
• No hardcoded paths or secrets

Completion Criteria

• show_todo_list displays interactive HTML UI (not JSON)
• Unit tests pass with >80% coverage for new code
• Visual rendering verified through testing
• Documentation updated (API.md, README.md)
• All changes committed with descriptive messages
• Build succeeds: pnpm run build && pnpm test

Discover what tools are available to you and use them to plan, execute, and verify this work from start to finish.