feat: Transform mcp-use into MCP framework with monorepo, server SDK, visual inspector, CLI and scaffolding #68
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Replace Vite with esbuild for faster, more reliable builds
- Add file-based routing system for resources/**/*.tsx files
- Each TSX file becomes a route at /mcp-use/widgets/{filename}
- Self-contained React components with createRoot mounting
- Production-ready asset serving with proper hashing
- Fix ES module compatibility issues (require -> import)
- Add fallback routes for browser-resolved asset paths
- Update CLI templates with new build system
- Update CLI to read version from package.json instead of hardcoding it. - Replace fs.promises.access with fs.access for checking file existence.
- Update `@mcp-ui/server` patch hash in `pnpm-lock.yaml`. - Add new dependencies for `@langchain` packages in `pnpm-lock.yaml`. - Restore `express` version in `pnpm-lock.yaml`. - Enhance CLI to dynamically read package version from `package.json`. - Implement workspace dependency handling in `create-mcp-use-app`. - Add a new standalone example for the MCP server. - Refactor favicon proxy and middleware for improved functionality. - Introduce shared utilities for favicon fetching and caching. - Update inspector package to support new features and improve error handling.
…dencies - Changed the directory name from `standalone` to `simple` in the workspace configuration. - Updated dependencies in `pnpm-lock.yaml`, including removing `@types/bun` and adjusting TypeScript version. - Modified CLI to use `stdio: 'inherit'` for better output handling. - Enhanced resource definition in `mcp-server.ts` to include metadata fields. - Updated resource definition interface in `types.ts` to improve documentation and structure.
- Updated resource definition in `server.ts` to include a title and improved description. - Enhanced `listResources` method in `base.ts` to support optional pagination with a cursor. - Introduced `listAllResources` method for automatic pagination of resource listings. - Added `subscribeToResource` and `unsubscribeFromResource` methods for managing resource updates. - Improved documentation for resource templates and annotations in `mcp-server.ts` and `types.ts`.
…erver resources - Added new UI templates for data visualization and Kanban board in `create-mcp-use-app`. - Updated `pnpm-lock.yaml` to include new dependencies for the UI templates. - Refactored server resource definitions to improve structure and added annotations for better documentation. - Modified `copy-templates` script in `package.json` to use a dedicated script for copying templates. - Enhanced styling and layout for data visualization components to improve user experience.
… and improved user interactions - Added a copy URL button in InspectorDashboard for easy access to connection URLs. - Introduced preview and JSON toggle functionality in ResourcesTab for better resource visualization. - Enhanced MCP UI resource handling in ResourcesTab to display content based on user selection. - Updated McpUIRenderer to support new resource formats and improved UI action handling. - Refactored input handling in ToolsTab to respect tool input schemas for better data management.
- Deleted the `data-visualization.tsx` and `todo-list.tsx` files as they are no longer needed in the project. - Updated the `kanban-board.tsx` to ensure proper type handling for new tasks. - Adjusted server resource definitions to streamline the UI component integration.
… UI improvements - Added connection state monitoring in InspectorDashboard to handle pending connections and display success/error messages. - Refactored connection handling logic to improve user experience during connection attempts. - Replaced the empty state message with a NotFound component for better clarity. - Updated button behavior to indicate connection status with a loading state. - Cleaned up imports and adjusted layout styles for consistency.
Pederzh
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎯 Overview
This PR transforms
mcp-usefrom a single-package MCP client library into a comprehensiveTypeScript framework for the Model Context Protocol ecosystem. The project is now a monorepo with
four packages providing end-to-end support for building, debugging, and deploying MCP
applications.
📦 New Package Architecture
1. mcp-use (Core Framework)
useMcphook for React applications2. @mcp-use/cli (NEW)
3. @mcp-use/inspector (NEW)
4. create-mcp-use-app (NEW)
🎨 Key Features Added
MCP UI Integration
@mcp-ui/clientand@mcp-ui/serverDeveloper Experience
Infrastructure
🔧 Technical Changes
Monorepo Structure
packages/
├── mcp-use/ # Core SDK (client + server)
├── cli/ # Build & dev tools
├── inspector/ # Web-based debugger
└── create-mcp-use-app/ # Project scaffolder
Breaking Changes
packages/mcp-use/@mcp-use/cliBuild & Tooling
tsctotsupfor all packagesDependencies
@mcp-ui/clientand@mcp-ui/server@remote-dom/reactfor UI rendering@modelcontextprotocol/sdkreact-resizable-panelsfor inspector UI