mcp-use 1.1.1-beta.0 → 1.1.1-canary.0

package/README.md

@@ -27,18 +27,18 @@
         <img src="https://dcbadge.limes.pink/api/server/XkNkSkMz3V?style=flat" /></a>
 </p>
 
-🌐 **MCP-Use** is a complete TypeScript framework for building and using MCP (Model Context Protocol) applications. It provides both a powerful **client library** for connecting LLMs to MCP servers and a **server framework** for building your own MCP servers with UI capabilities.
+🌐 **mcp-use** is a complete TypeScript framework for building and using MCP (Model Context Protocol) applications. It provides both a powerful **client library** for connecting LLMs to MCP servers and a **server framework** for building your own MCP servers with UI capabilities.
 
 💡 Build custom AI agents, create MCP servers with React UI widgets, and debug everything with the built-in inspector - all in TypeScript.
 
-## 📦 MCP-Use Ecosystem
+## 📦 mcp-use Ecosystem
 
-| Package | Description | Version |
-|---------|-------------|---------|
-| **mcp-use** | Core framework for MCP clients and servers | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use) |
-| [@mcp-use/cli](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/cli) | Build tool for MCP apps with UI widgets | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli) |
-| [@mcp-use/inspector](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/inspector) | Web-based MCP server inspector and debugger | [![npm](https://img.shields.io/npm/v/@mcp-use/inspector.svg)](https://www.npmjs.com/package/@mcp-use/inspector) |
-| [create-mcp-use-app](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/create-mcp-use-app) | Create MCP apps with one command | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
+| Package                                                                                           | Description                                 | Version                                                                                                         |
+| ------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| **mcp-use**                                                                                       | Core framework for MCP clients and servers  | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use)                       |
+| [@mcp-use/cli](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/cli)                      | Build tool for MCP apps with UI widgets     | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli)             |
+| [@mcp-use/inspector](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/inspector)          | Web-based MCP server inspector and debugger | [![npm](https://img.shields.io/npm/v/@mcp-use/inspector.svg)](https://www.npmjs.com/package/@mcp-use/inspector) |
+| [create-mcp-use-app](https://github.com/mcp-use/mcp-use-ts/tree/main/packages/create-mcp-use-app) | Create MCP apps with one command            | [![npm](https://img.shields.io/npm/v/create-mcp-use-app.svg)](https://www.npmjs.com/package/create-mcp-use-app) |
 
 ---
 
@@ -93,8 +93,8 @@ async function main() {
   // 1. Configure MCP servers
   const config = {
     mcpServers: {
-      playwright: { command: 'npx', args: ['@playwright/mcp@latest'] }
-    }
+      playwright: { command: 'npx', args: ['@playwright/mcp@latest'] },
+    },
   }
   const client = MCPClient.fromDict(config)
 
@@ -105,7 +105,9 @@ async function main() {
   const agent = new MCPAgent({ llm, client, maxSteps: 20 })
 
   // 4. Run query
-  const result = await agent.run('Find the best restaurant in Tokyo using Google Search')
+  const result = await agent.run(
+    'Find the best restaurant in Tokyo using Google Search'
+  )
   console.log('Result:', result)
 }
 
@@ -187,13 +189,21 @@ npm install ai @langchain/anthropic
 ```ts
 import { ChatAnthropic } from '@langchain/anthropic'
 import { LangChainAdapter } from 'ai'
-import { createReadableStreamFromGenerator, MCPAgent, MCPClient, streamEventsToAISDK } from 'mcp-use'
+import {
+  createReadableStreamFromGenerator,
+  MCPAgent,
+  MCPClient,
+  streamEventsToAISDK,
+} from 'mcp-use'
 
 async function createApiHandler() {
   const config = {
     mcpServers: {
-      everything: { command: 'npx', args: ['-y', '@modelcontextprotocol/server-everything'] }
-    }
+      everything: {
+        command: 'npx',
+        args: ['-y', '@modelcontextprotocol/server-everything'],
+      },
+    },
   }
 
   const client = new MCPClient(config)
@@ -218,8 +228,11 @@ import { streamEventsToAISDKWithTools } from 'mcp-use'
 async function createEnhancedApiHandler() {
   const config = {
     mcpServers: {
-      everything: { command: 'npx', args: ['-y', '@modelcontextprotocol/server-everything'] }
-    }
+      everything: {
+        command: 'npx',
+        args: ['-y', '@modelcontextprotocol/server-everything'],
+      },
+    },
   }
 
   const client = new MCPClient(config)
@@ -243,15 +256,23 @@ async function createEnhancedApiHandler() {
 // pages/api/chat.ts or app/api/chat/route.ts
 import { ChatAnthropic } from '@langchain/anthropic'
 import { LangChainAdapter } from 'ai'
-import { createReadableStreamFromGenerator, MCPAgent, MCPClient, streamEventsToAISDK } from 'mcp-use'
+import {
+  createReadableStreamFromGenerator,
+  MCPAgent,
+  MCPClient,
+  streamEventsToAISDK,
+} from 'mcp-use'
 
 export async function POST(req: Request) {
   const { prompt } = await req.json()
 
   const config = {
     mcpServers: {
-      everything: { command: 'npx', args: ['-y', '@modelcontextprotocol/server-everything'] }
-    }
+      everything: {
+        command: 'npx',
+        args: ['-y', '@modelcontextprotocol/server-everything'],
+      },
+    },
   }
 
   const client = new MCPClient(config)
@@ -264,8 +285,7 @@ export async function POST(req: Request) {
     const readableStream = createReadableStreamFromGenerator(aiSDKStream)
 
     return LangChainAdapter.toDataStreamResponse(readableStream)
-  }
-  finally {
+  } finally {
     await client.closeAllSessions()
   }
 }
@@ -327,7 +347,7 @@ LANGFUSE_HOST=https://cloud.langfuse.com  # or your self-hosted instance
 agent.setMetadata({
   userId: 'user123',
   sessionId: 'session456',
-  environment: 'production'
+  environment: 'production',
 })
 
 // Set tags for better organization
@@ -370,7 +390,7 @@ To disable observability, either remove langfuse env variables or
 const agent = new MCPAgent({
   llm,
   client,
-  observe: false
+  observe: false,
 })
 ```
 
@@ -444,8 +464,8 @@ See the [examples README](./examples/README.md) for detailed documentation and p
 const config = {
   mcpServers: {
     airbnb: { command: 'npx', args: ['@openbnb/mcp-server-airbnb'] },
-    playwright: { command: 'npx', args: ['@playwright/mcp@latest'] }
-  }
+    playwright: { command: 'npx', args: ['@playwright/mcp@latest'] },
+  },
 }
 const client = MCPClient.fromDict(config)
 const agent = new MCPAgent({ llm, client, useServerManager: true })
@@ -460,7 +480,7 @@ await agent.run('Search Airbnb in Barcelona, then Google restaurants nearby')
 const agent = new MCPAgent({
   llm,
   client,
-  disallowedTools: ['file_system', 'network']
+  disallowedTools: ['file_system', 'network'],
 })
 ```
 
@@ -478,19 +498,19 @@ import { createMCPServer } from 'mcp-use/server'
 // Create your MCP server
 const server = createMCPServer('my-awesome-server', {
   version: '1.0.0',
-  description: 'My MCP server with tools, resources, and prompts'
+  description: 'My MCP server with tools, resources, and prompts',
 })
 
 // Define tools
 server.tool('search_web', {
   description: 'Search the web for information',
   parameters: z.object({
-    query: z.string().describe('Search query')
+    query: z.string().describe('Search query'),
   }),
   execute: async (args) => {
     // Your tool implementation
     return { results: await performSearch(args.query) }
-  }
+  },
 })
 
 // Define resources
@@ -500,18 +520,16 @@ server.resource('config', {
   mimeType: 'application/json',
   fetch: async () => {
     return JSON.stringify(await getConfig(), null, 2)
-  }
+  },
 })
 
 // Define prompts
 server.prompt('code_review', {
   description: 'Review code for best practices',
-  arguments: [
-    { name: 'code', description: 'Code to review', required: true }
-  ],
+  arguments: [{ name: 'code', description: 'Code to review', required: true }],
   render: async (args) => {
     return `Please review this code:\n\n${args.code}`
-  }
+  },
 })
 
 // Start the server
@@ -522,19 +540,19 @@ server.listen(3000)
 
 ### Key Server Features
 
-| Feature | Description |
-|---------|-------------|
-| **🔍 Auto Inspector** | Inspector UI automatically mounts at `/inspector` for debugging |
-| **🎨 UI Widgets** | Build custom React UI components served alongside your MCP tools |
-| **🔐 OAuth Support** | Built-in OAuth flow handling for secure authentication |
-| **📡 Multiple Transports** | HTTP/SSE and WebSocket support out of the box |
-| **🛠️ TypeScript First** | Full TypeScript support with type inference |
-| **♻️ Hot Reload** | Development mode with automatic reloading |
-| **📊 Observability** | Built-in logging and monitoring capabilities |
+| Feature                    | Description                                                      |
+| -------------------------- | ---------------------------------------------------------------- |
+| **🔍 Auto Inspector**      | Inspector UI automatically mounts at `/inspector` for debugging  |
+| **🎨 UI Widgets**          | Build custom React UI components served alongside your MCP tools |
+| **🔐 OAuth Support**       | Built-in OAuth flow handling for secure authentication           |
+| **📡 Multiple Transports** | HTTP/SSE and WebSocket support out of the box                    |
+| **🛠️ TypeScript First**    | Full TypeScript support with type inference                      |
+| **♻️ Hot Reload**          | Development mode with automatic reloading                        |
+| **📊 Observability**       | Built-in logging and monitoring capabilities                     |
 
 ### MCP-UI Resources
 
-MCP-Use provides a unified `uiResource()` method for registering interactive UI widgets that are compatible with MCP-UI clients. This automatically creates both a tool (for dynamic parameters) and a resource (for static access).
+mcp-use provides a unified `uiResource()` method for registering interactive UI widgets that are compatible with MCP-UI clients. This automatically creates both a tool (for dynamic parameters) and a resource (for static access).
 
 #### Quick Start
 
@@ -551,23 +569,24 @@ server.uiResource({
   title: 'Kanban Board',
   description: 'Interactive task management board',
   props: {
-    initialTasks: { 
-      type: 'array', 
+    initialTasks: {
+      type: 'array',
       description: 'Initial tasks',
-      required: false 
+      required: false,
+    },
+    theme: {
+      type: 'string',
+      default: 'light',
     },
-    theme: { 
-      type: 'string', 
-      default: 'light' 
-    }
   },
-  size: ['900px', '600px']
+  size: ['900px', '600px'],
 })
 
 server.listen(3000)
 ```
 
 This automatically creates:
+
 - **Tool**: `ui_kanban-board` - Accepts parameters and returns UIResource
 - **Resource**: `ui://widget/kanban-board` - Static access with defaults
 
@@ -581,7 +600,7 @@ server.uiResource({
   type: 'externalUrl',
   name: 'dashboard',
   widget: 'dashboard',
-  props: { userId: { type: 'string', required: true } }
+  props: { userId: { type: 'string', required: true } },
 })
 ```
 
@@ -597,7 +616,7 @@ server.uiResource({
     <html>
       <body><h1>Welcome!</h1></body>
     </html>
-  `
+  `,
 })
 ```
 
@@ -613,7 +632,7 @@ server.uiResource({
     button.setAttribute('label', 'Vote');
     root.appendChild(button);
   `,
-  framework: 'react'
+  framework: 'react',
 })
 ```
 
@@ -631,7 +650,7 @@ npm run dev
 
 ### Building Custom UI Widgets
 
-MCP-Use supports building custom UI widgets for your MCP tools using React:
+mcp-use supports building custom UI widgets for your MCP tools using React:
 
 ```tsx
 // resources/task-manager.tsx
@@ -656,7 +675,7 @@ export default function TaskManager() {
 }
 ```
 
-Build and serve widgets using the MCP-Use CLI:
+Build and serve widgets using the mcp-use CLI:
 
 ```bash
 # Development with hot reload and auto-open inspector
@@ -682,7 +701,7 @@ const server = createMCPServer('advanced-server', {
   // Enable CORS for browser access
   cors: {
     origin: ['http://localhost:3000', 'https://myapp.com'],
-    credentials: true
+    credentials: true,
   },
   // OAuth configuration
   oauth: {
@@ -690,13 +709,10 @@ const server = createMCPServer('advanced-server', {
     clientSecret: process.env.OAUTH_CLIENT_SECRET,
     authorizationUrl: 'https://api.example.com/oauth/authorize',
     tokenUrl: 'https://api.example.com/oauth/token',
-    scopes: ['read', 'write']
+    scopes: ['read', 'write'],
   },
   // Custom middleware
-  middleware: [
-    authenticationMiddleware,
-    rateLimitingMiddleware
-  ]
+  middleware: [authenticationMiddleware, rateLimitingMiddleware],
 })
 ```
 
@@ -730,9 +746,11 @@ const app = express()
 app.get('/api/health', (req, res) => res.send('OK'))
 
 // Mount MCP server
-const mcpServer = createMCPServer('integrated-server', { /* ... */ })
+const mcpServer = createMCPServer('integrated-server', {
+  /* ... */
+})
 mountMCPServer(app, mcpServer, {
-  basePath: '/mcp-service'  // Optional custom base path
+  basePath: '/mcp-service', // Optional custom base path
 })
 
 app.listen(3000)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcp-use",
   "type": "module",
-  "version": "1.1.1-beta.0",
+  "version": "1.1.1-canary.0",
   "description": "Opinionated MCP Framework for TypeScript (@modelcontextprotocol/sdk compatible) - Build MCP Agents and Clients + MCP Servers with support for MCP-UI.",
   "author": "mcp-use, Inc.",
   "license": "MIT",
@@ -56,7 +56,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@mcp-use/inspector": "^0.4.1-beta.0",
+    "@mcp-use/inspector": "^0.4.1-canary.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "langfuse": "^3.32.0",