From 3b014d99598883558456f816e957f6acd56d164e Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Fri, 10 Oct 2025 12:35:24 +0200
Subject: [PATCH 01/21] fix hardcoded version

---
 packages/create-mcp-use-app/src/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/create-mcp-use-app/src/index.ts b/packages/create-mcp-use-app/src/index.ts
index 5a0c6b0d..d3629a9a 100644
--- a/packages/create-mcp-use-app/src/index.ts
+++ b/packages/create-mcp-use-app/src/index.ts
@@ -12,10 +12,14 @@ const __dirname = dirname(__filename)
 
 const program = new Command()
 
+const packageJson = JSON.parse(
+  readFileSync(join(__dirname, '../package.json'), 'utf-8')
+)
+
 program
   .name('create-mcp-use-app')
   .description('Create a new MCP server project')
-  .version('0.1.0')
+  .version(packageJson.version)
   .argument('[project-name]', 'Name of the MCP server project')
   .option('-t, --template <template>', 'Template to use', 'ui')
   .option('--no-install', 'Skip installing dependencies')

From e1c0c8e522d3b5eb65f3d83c700eb222d6077691 Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Fri, 10 Oct 2025 16:28:37 +0200
Subject: [PATCH 02/21] update mcp-use

---
 packages/create-mcp-use-app/src/templates/ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/create-mcp-use-app/src/templates/ui/package.json b/packages/create-mcp-use-app/src/templates/ui/package.json
index bd3a046f..472c2807 100644
--- a/packages/create-mcp-use-app/src/templates/ui/package.json
+++ b/packages/create-mcp-use-app/src/templates/ui/package.json
@@ -24,7 +24,7 @@
     "@mcp-ui/server": "^5.11.0",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "^0.3.0"
+    "mcp-use": "^1.0.0"
   },
   "devDependencies": {
     "@mcp-use/cli": "^2.0.2",

From 6215e830f19b85f95f1dd4dcbb60a1f28446ea0c Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Fri, 10 Oct 2025 16:29:06 +0200
Subject: [PATCH 03/21] Fix mcp-ui template

---
 .../src/templates/ui/src/server.ts            | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/create-mcp-use-app/src/templates/ui/src/server.ts b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
index 86b8458c..39aec742 100644
--- a/packages/create-mcp-use-app/src/templates/ui/src/server.ts
+++ b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
@@ -22,17 +22,18 @@ server.tool({
       required: true,
     },
   ],
-  fn: async () => {
-    const uiResource = createUIResource({
-      uri: 'ui://widget/kanban-board',
-      content: {
-        type: 'externalUrl',
-        iframeUrl: 'http://localhost:3000/mcp-use/widgets/kanban-board'
-      },
-      encoding: 'text',
-    })
-    return uiResource
-  },
+  fn: async () => ({
+    content: [
+      createUIResource({
+        uri: 'ui://widget/kanban-board',
+        content: {
+          type: 'externalUrl',
+          iframeUrl: 'http://localhost:3000/mcp-use/widgets/kanban-board'
+        },
+        encoding: 'text',
+      })
+    ]
+  }),
 })
 
 // MCP Resource for server status

From 424e2e794fda6a49fafa4f79b7a6e44aaf33916e Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Fri, 10 Oct 2025 21:15:55 +0200
Subject: [PATCH 04/21] add cursor pointer

---
 packages/inspector/src/components/ui/tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/inspector/src/components/ui/tabs.tsx b/packages/inspector/src/components/ui/tabs.tsx
index 7b4a483f..de16be48 100644
--- a/packages/inspector/src/components/ui/tabs.tsx
+++ b/packages/inspector/src/components/ui/tabs.tsx
@@ -222,7 +222,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
         disabled={disabled}
         onClick={() => handleValueChange(value)}
         className={cn(
-          'relative z-10 flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          'relative z-10 flex-1 inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer',
           isActive && 'text-foreground',
           !isActive && 'text-muted-foreground hover:text-foreground',
           className,

From 93d07daf74dbf899a18743ccf83a89043ffa730e Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Fri, 10 Oct 2025 21:44:00 +0200
Subject: [PATCH 05/21] fix: dynamically set CLI version from package.json

- Update CLI to read version from package.json instead of hardcoding it.
- Replace fs.promises.access with fs.access for checking file existence.
---
 packages/cli/src/index.ts         | 24 +++++++++++++++---------
 packages/inspector/vite.config.ts |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 45cb1067..d13da4ff 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -2,21 +2,27 @@
 import { Command } from 'commander';
 import { buildWidgets } from './build';
 import { spawn } from 'node:child_process';
-import { promises as fs } from 'node:fs';
+import { readFileSync } from 'node:fs';
+import { access } from 'node:fs/promises';
 import path from 'node:path';
 import open from 'open';
-
 const program = new Command();
 
+
+const packageContent = readFileSync(path.join(__dirname, '../../package.json'), 'utf-8')
+const packageJson = JSON.parse(packageContent)
+const packageVersion = packageJson.version || 'unknown'
+
+
 program
   .name('mcp-use')
   .description('MCP CLI tool')
-  .version('2.0.1');
+  .version(packageVersion);
 
 // Helper to check if port is available
 async function isPortAvailable(port: number): Promise<boolean> {
   try {
-    const response = await fetch(`http://localhost:${port}`);
+    await fetch(`http://localhost:${port}`);
     return false; // Port is in use
   } catch {
     return true; // Port is available
@@ -77,7 +83,7 @@ program
     try {
       const projectPath = path.resolve(options.path);
       
-      console.log('\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: 2.0.1\x1b[0m\n');
+      console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
       
       // Run tsc first
       console.log('Building TypeScript...');
@@ -103,7 +109,7 @@ program
       const projectPath = path.resolve(options.path);
       let port = parseInt(options.port, 10);
       
-      console.log('\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: 2.0.1\x1b[0m\n');
+      console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
 
       // Check if port is available, find alternative if needed
       if (!(await isPortAvailable(port))) {
@@ -116,7 +122,7 @@ program
       // Find the main source file
       let serverFile = 'src/server.ts';
       try {
-        await fs.access(path.join(projectPath, serverFile));
+        await access(path.join(projectPath, serverFile));
       } catch {
         serverFile = 'src/index.ts';
       }
@@ -215,12 +221,12 @@ program
       const projectPath = path.resolve(options.path);
       const port = parseInt(options.port, 10);
 
-      console.log('\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: 2.0.1\x1b[0m\n');
+      console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
 
       // Find the built server file
       let serverFile = 'dist/server.js';
       try {
-        await fs.access(path.join(projectPath, serverFile));
+        await access(path.join(projectPath, serverFile));
       } catch {
         serverFile = 'dist/index.js';
       }
diff --git a/packages/inspector/vite.config.ts b/packages/inspector/vite.config.ts
index 0d452291..eca398ce 100644
--- a/packages/inspector/vite.config.ts
+++ b/packages/inspector/vite.config.ts
@@ -1,5 +1,5 @@
-import path from 'node:path'
 import { readFileSync } from 'node:fs'
+import path from 'node:path'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
@@ -39,7 +39,7 @@ export default defineConfig({
     // Define process.env for browser compatibility
     'process.env': {},
     // Inject version from package.json at build time
-    __INSPECTOR_VERSION__: JSON.stringify(packageJson.version),
+    '__INSPECTOR_VERSION__': JSON.stringify(packageJson.version),
   },
   optimizeDeps: {
     include: ['mcp-use/react'],

From cca5f43726d04e5c42c8a9cc9fb0bc09d1af8042 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Sat, 11 Oct 2025 10:31:18 +0200
Subject: [PATCH 06/21] chore: update dependencies and improve CLI
 functionality

- 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.
---
 packages/cli/src/index.ts                     |  41 +-
 packages/create-mcp-use-app/src/index.ts      | 118 +++-
 .../src/templates/ui/package.json             |   5 +-
 packages/inspector/package.json               |  14 +-
 .../src/client/components/ChatTab.tsx         | 652 ++++++++++++++++++
 .../src/client/components/Layout.tsx          | 502 ++++++++++++--
 .../inspector/src/server/favicon-proxy.ts     | 118 +---
 packages/inspector/src/server/middleware.ts   |  83 +--
 packages/inspector/src/server/server.ts       |  88 ++-
 packages/inspector/src/server/shared-utils.ts | 320 +++++++++
 packages/inspector/src/server/unified.ts      | 337 ---------
 packages/inspector/vite.config.ts             |   7 +-
 .../examples/server/standalone/package.json   |  21 +
 packages/mcp-use/index.ts                     |   2 +-
 packages/mcp-use/src/server/index.ts          |   4 +-
 packages/mcp-use/src/server/mcp-server.ts     |   3 +
 pnpm-lock.yaml                                | 170 ++++-
 pnpm-workspace.yaml                           |   1 +
 test_app/package.json                         |  16 +-
 19 files changed, 1860 insertions(+), 642 deletions(-)
 create mode 100644 packages/inspector/src/client/components/ChatTab.tsx
 create mode 100644 packages/inspector/src/server/shared-utils.ts
 delete mode 100644 packages/inspector/src/server/unified.ts
 create mode 100644 packages/mcp-use/examples/server/standalone/package.json

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 45cb1067..be4c1833 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -2,21 +2,44 @@
 import { Command } from 'commander';
 import { buildWidgets } from './build';
 import { spawn } from 'node:child_process';
-import { promises as fs } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
+import { access } from 'node:fs/promises';
 import path from 'node:path';
 import open from 'open';
-
 const program = new Command();
 
+
+// Find the CLI package.json file
+function findPackageJson() {
+  const possiblePaths = [
+    path.join(__dirname, '../package.json'), // From dist/
+    path.join(__dirname, '../../package.json'), // From dist/
+    path.join(process.cwd(), 'package.json'), // Current working directory
+  ]
+  
+  for (const packagePath of possiblePaths) {
+    if (existsSync(packagePath)) {
+      return packagePath
+    }
+  }
+  
+  throw new Error('Could not find package.json file')
+}
+
+const packageContent = readFileSync(findPackageJson(), 'utf-8')
+const packageJson = JSON.parse(packageContent)
+const packageVersion = packageJson.version || 'unknown'
+
+
 program
   .name('mcp-use')
   .description('MCP CLI tool')
-  .version('2.0.1');
+  .version(packageVersion);
 
 // Helper to check if port is available
 async function isPortAvailable(port: number): Promise<boolean> {
   try {
-    const response = await fetch(`http://localhost:${port}`);
+    await fetch(`http://localhost:${port}`);
     return false; // Port is in use
   } catch {
     return true; // Port is available
@@ -77,7 +100,7 @@ program
     try {
       const projectPath = path.resolve(options.path);
       
-      console.log('\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: 2.0.1\x1b[0m\n');
+      console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
       
       // Run tsc first
       console.log('Building TypeScript...');
@@ -103,7 +126,7 @@ program
       const projectPath = path.resolve(options.path);
       let port = parseInt(options.port, 10);
       
-      console.log('\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: 2.0.1\x1b[0m\n');
+      console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
 
       // Check if port is available, find alternative if needed
       if (!(await isPortAvailable(port))) {
@@ -116,7 +139,7 @@ program
       // Find the main source file
       let serverFile = 'src/server.ts';
       try {
-        await fs.access(path.join(projectPath, serverFile));
+        await access(path.join(projectPath, serverFile));
       } catch {
         serverFile = 'src/index.ts';
       }
@@ -215,12 +238,12 @@ program
       const projectPath = path.resolve(options.path);
       const port = parseInt(options.port, 10);
 
-      console.log('\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: 2.0.1\x1b[0m\n');
+      console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
 
       // Find the built server file
       let serverFile = 'dist/server.js';
       try {
-        await fs.access(path.join(projectPath, serverFile));
+        await access(path.join(projectPath, serverFile));
       } catch {
         serverFile = 'dist/index.js';
       }
diff --git a/packages/create-mcp-use-app/src/index.ts b/packages/create-mcp-use-app/src/index.ts
index d3629a9a..179c0f64 100644
--- a/packages/create-mcp-use-app/src/index.ts
+++ b/packages/create-mcp-use-app/src/index.ts
@@ -16,6 +16,84 @@ const packageJson = JSON.parse(
   readFileSync(join(__dirname, '../package.json'), 'utf-8')
 )
 
+// Read current package versions from workspace
+function getCurrentPackageVersions() {
+  const versions: Record<string, string> = {}
+  
+  try {
+    // Try multiple possible workspace root locations
+    const possibleRoots = [
+      resolve(__dirname, '../../../..'), // From dist/templates
+      resolve(__dirname, '../../../../..'), // From dist
+      resolve(process.cwd(), '.'), // Current working directory
+      resolve(process.cwd(), '..'), // Parent of current directory
+    ]
+    
+    let workspaceRoot = null
+    for (const root of possibleRoots) {
+      if (existsSync(join(root, 'packages/mcp-use/package.json'))) {
+        workspaceRoot = root
+        break
+      }
+    }
+    
+    if (!workspaceRoot) {
+      throw new Error('Workspace root not found')
+    }
+    
+    // Read mcp-use version
+    const mcpUsePackage = JSON.parse(
+      readFileSync(join(workspaceRoot, 'packages/mcp-use/package.json'), 'utf-8')
+    )
+    versions['mcp-use'] = mcpUsePackage.version
+    
+    // Read cli version
+    const cliPackage = JSON.parse(
+      readFileSync(join(workspaceRoot, 'packages/cli/package.json'), 'utf-8')
+    )
+    versions['@mcp-use/cli'] = cliPackage.version
+    
+    // Read inspector version
+    const inspectorPackage = JSON.parse(
+      readFileSync(join(workspaceRoot, 'packages/inspector/package.json'), 'utf-8')
+    )
+    versions['@mcp-use/inspector'] = inspectorPackage.version
+  } catch (error) {
+    console.warn('⚠️  Could not read workspace package versions, using defaults')
+    console.warn(`   Error: ${error}`)
+  }
+  
+  return versions
+}
+
+// Process template files to replace version placeholders
+function processTemplateFile(filePath: string, versions: Record<string, string>, isDevelopment: boolean = false) {
+  const content = readFileSync(filePath, 'utf-8')
+  let processedContent = content
+  
+  // Replace version placeholders with current versions
+  for (const [packageName, version] of Object.entries(versions)) {
+    const placeholder = `{{${packageName}_version}}`
+    const versionPrefix = isDevelopment ? 'workspace:*' : `^${version}`
+    processedContent = processedContent.replace(new RegExp(placeholder, 'g'), versionPrefix)
+  }
+  
+  // Handle workspace dependencies based on mode
+  if (isDevelopment) {
+    // Keep workspace dependencies for development
+    processedContent = processedContent.replace(/"mcp-use": "\^[^"]+"/, '"mcp-use": "workspace:*"')
+    processedContent = processedContent.replace(/"@mcp-use\/cli": "\^[^"]+"/, '"@mcp-use/cli": "workspace:*"')
+    processedContent = processedContent.replace(/"@mcp-use\/inspector": "\^[^"]+"/, '"@mcp-use/inspector": "workspace:*"')
+  } else {
+    // Replace workspace dependencies with specific versions for production
+    processedContent = processedContent.replace(/"mcp-use": "workspace:\*"/, `"mcp-use": "^${versions['mcp-use'] || '1.0.0'}"`)
+    processedContent = processedContent.replace(/"@mcp-use\/cli": "workspace:\*"/, `"@mcp-use/cli": "^${versions['@mcp-use/cli'] || '2.0.0'}"`)
+    processedContent = processedContent.replace(/"@mcp-use\/inspector": "workspace:\*"/, `"@mcp-use/inspector": "^${versions['@mcp-use/inspector'] || '0.3.0'}"`)
+  }
+  
+  return processedContent
+}
+
 program
   .name('create-mcp-use-app')
   .description('Create a new MCP server project')
@@ -23,7 +101,8 @@ program
   .argument('[project-name]', 'Name of the MCP server project')
   .option('-t, --template <template>', 'Template to use', 'ui')
   .option('--no-install', 'Skip installing dependencies')
-  .action(async (projectName: string | undefined, options: { template: string, install: boolean }) => {
+  .option('--dev', 'Use workspace dependencies for development')
+  .action(async (projectName: string | undefined, options: { template: string, install: boolean, dev: boolean }) => {
     try {
       // If no project name provided, prompt for it
       if (!projectName) {
@@ -53,8 +132,11 @@ program
       // Create project directory
       mkdirSync(projectPath, { recursive: true })
 
+      // Get current package versions
+      const versions = getCurrentPackageVersions()
+      
       // Copy template files
-      await copyTemplate(projectPath, options.template)
+      await copyTemplate(projectPath, options.template, versions, options.dev)
 
       // Update package.json with project name
       updatePackageJson(projectPath, projectName!)
@@ -77,6 +159,9 @@ program
       }
 
       console.log('✅ MCP server created successfully!')
+      if (options.dev) {
+        console.log('🔧 Development mode: Using workspace dependencies')
+      }
       console.log('')
       console.log('📁 Project structure:')
       console.log(`   ${projectName}/`)
@@ -105,6 +190,10 @@ program
       }
       console.log('   npm run dev')
       console.log('')
+      if (options.dev) {
+        console.log('💡 Development mode: Your project uses workspace dependencies')
+        console.log('   Make sure you\'re in the mcp-use workspace root for development')
+      }
       console.log('📚 Learn more: https://docs.mcp-use.io')
     }
     catch (error) {
@@ -113,7 +202,7 @@ program
     }
   })
 
-async function copyTemplate(projectPath: string, template: string) {
+async function copyTemplate(projectPath: string, template: string, versions: Record<string, string>, isDevelopment: boolean = false) {
   const templatePath = join(__dirname, 'templates', template)
 
   if (!existsSync(templatePath)) {
@@ -123,10 +212,10 @@ async function copyTemplate(projectPath: string, template: string) {
     process.exit(1)
   }
 
-  copyDirectory(templatePath, projectPath)
+  copyDirectoryWithProcessing(templatePath, projectPath, versions, isDevelopment)
 }
 
-function copyDirectory(src: string, dest: string) {
+function copyDirectoryWithProcessing(src: string, dest: string, versions: Record<string, string>, isDevelopment: boolean) {
   const entries = readdirSync(src, { withFileTypes: true })
 
   for (const entry of entries) {
@@ -135,22 +224,29 @@ function copyDirectory(src: string, dest: string) {
 
     if (entry.isDirectory()) {
       mkdirSync(destPath, { recursive: true })
-      copyDirectory(srcPath, destPath)
+      copyDirectoryWithProcessing(srcPath, destPath, versions, isDevelopment)
     }
     else {
-      copyFileSync(srcPath, destPath)
+      // Process files that might contain version placeholders
+      if (entry.name === 'package.json' || entry.name.endsWith('.json')) {
+        const processedContent = processTemplateFile(srcPath, versions, isDevelopment)
+        writeFileSync(destPath, processedContent)
+      } else {
+        copyFileSync(srcPath, destPath)
+      }
     }
   }
 }
 
+
 function updatePackageJson(projectPath: string, projectName: string) {
   const packageJsonPath = join(projectPath, 'package.json')
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
+  const packageJsonContent = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
 
-  packageJson.name = projectName
-  packageJson.description = `MCP server: ${projectName}`
+  packageJsonContent.name = projectName
+  packageJsonContent.description = `MCP server: ${projectName}`
 
-  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+  writeFileSync(packageJsonPath, JSON.stringify(packageJsonContent, null, 2))
 }
 
 function promptForProjectName(): Promise<string | null> {
diff --git a/packages/create-mcp-use-app/src/templates/ui/package.json b/packages/create-mcp-use-app/src/templates/ui/package.json
index 472c2807..d59a0852 100644
--- a/packages/create-mcp-use-app/src/templates/ui/package.json
+++ b/packages/create-mcp-use-app/src/templates/ui/package.json
@@ -24,10 +24,11 @@
     "@mcp-ui/server": "^5.11.0",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "^1.0.0"
+    "mcp-use": "workspace:*"
   },
   "devDependencies": {
-    "@mcp-use/cli": "^2.0.2",
+    "@mcp-use/cli": "workspace:*",
+    "@mcp-use/inspector": "workspace:*",
     "@types/cors": "^2.8.0",
     "@types/express": "^4.17.0",
     "@types/node": "^20.0.0",
diff --git a/packages/inspector/package.json b/packages/inspector/package.json
index fdfbdb9e..36c25bf3 100644
--- a/packages/inspector/package.json
+++ b/packages/inspector/package.json
@@ -32,7 +32,7 @@
     "dev:standalone": "tsx watch src/server/server.ts",
     "build": "npm run build:client && npm run build:server && npm run build:cli",
     "build:client": "vite build",
-    "build:server": "tsup src/server/index.ts --format esm && tsc -p tsconfig.server.json --emitDeclarationOnly --declaration",
+    "build:server": "tsup src/server/*.ts --format esm --out-dir dist/server && tsc -p tsconfig.server.json --emitDeclarationOnly --declaration",
     "build:cli": "tsup src/cli/inspect.ts --format cjs --out-dir dist/cli",
     "start": "node dist/server/server.js",
     "preview": "vite preview",
@@ -47,7 +47,11 @@
     "lint:pnpm": "pnpm lint:fix"
   },
   "peerDependencies": {
-    "express": "^4.18.0"
+    "@langchain/anthropic": "^0.3.26",
+    "@langchain/core": "^0.3.72",
+    "@langchain/google-genai": "^0.2.18",
+    "@langchain/openai": "^0.6.9",
+    "express": "^4.21.2"
   },
   "dependencies": {
     "@hono/node-server": "^1.19.5",
@@ -65,7 +69,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "express": "^4.18.0",
     "framer-motion": "^12.23.22",
     "hono": "^4.0.0",
     "lucide-react": "^0.545.0",
@@ -87,6 +90,10 @@
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",
     "@eslint-react/eslint-plugin": "^1.38.4",
+    "@langchain/anthropic": "^0.3.26",
+    "@langchain/core": "^0.3.72",
+    "@langchain/google-genai": "^0.2.18",
+    "@langchain/openai": "^0.6.9",
     "@radix-ui/react-slot": "^1.2.3",
     "@types/express": "^4.17.0",
     "@types/node": "^24.7.0",
@@ -97,6 +104,7 @@
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.0",
+    "express": "^4.21.2",
     "tailwindcss": "^4.1.14",
     "tsx": "^4.6.0",
     "tw-animate-css": "^1.4.0",
diff --git a/packages/inspector/src/client/components/ChatTab.tsx b/packages/inspector/src/client/components/ChatTab.tsx
new file mode 100644
index 00000000..6ed9b09a
--- /dev/null
+++ b/packages/inspector/src/client/components/ChatTab.tsx
@@ -0,0 +1,652 @@
+import { Check, Copy, Key, MessageCircle, Send, Settings, Trash2, User } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { usePrismTheme } from '@/client/hooks/usePrismTheme'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Spinner } from '@/components/ui/spinner'
+import { Textarea } from '@/components/ui/textarea'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+
+interface ChatTabProps {
+  mcpServerUrl: string
+  isConnected: boolean
+  // OAuth state from the main Inspector connection
+  oauthState?: 'ready' | 'authenticating' | 'failed' | 'pending_auth'
+  oauthError?: string
+}
+
+interface Message {
+  id: string
+  role: 'user' | 'assistant'
+  content: string | Array<{ index: number; type: string; text: string }>
+  timestamp: number
+  toolCalls?: Array<{
+    toolName: string
+    args: Record<string, unknown>
+    result?: any
+  }>
+}
+
+interface LLMConfig {
+  provider: 'openai' | 'anthropic' | 'google'
+  apiKey: string
+  model: string
+}
+
+interface AuthConfig {
+  type: 'none' | 'basic' | 'bearer' | 'oauth'
+  username?: string
+  password?: string
+  token?: string
+  oauthTokens?: {
+    access_token?: string
+    refresh_token?: string
+    token_type?: string
+  }
+}
+
+const DEFAULT_MODELS = {
+  openai: 'gpt-4o',
+  anthropic: 'claude-3-5-sonnet-20241022',
+  google: 'gemini-2.0-flash-exp',
+}
+
+// Hash function to match BrowserOAuthClientProvider
+function hashString(str: string): string {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = (hash << 5) - hash + char
+    hash = hash & hash
+  }
+  return Math.abs(hash).toString(16)
+}
+
+export function ChatTab({ mcpServerUrl, isConnected, oauthState, oauthError }: ChatTabProps) {
+  const { prismStyle } = usePrismTheme()
+  const [messages, setMessages] = useState<Message[]>([])
+  const [inputValue, setInputValue] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [llmConfig, setLLMConfig] = useState<LLMConfig | null>(null)
+  const [authConfig, setAuthConfig] = useState<AuthConfig | null>(null)
+  const [configDialogOpen, setConfigDialogOpen] = useState(false)
+  const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
+  
+  // LLM Config form state
+  const [tempProvider, setTempProvider] = useState<'openai' | 'anthropic' | 'google'>('openai')
+  const [tempApiKey, setTempApiKey] = useState('')
+  const [tempModel, setTempModel] = useState(DEFAULT_MODELS.openai)
+  
+  // Auth Config form state
+  const [tempAuthType, setTempAuthType] = useState<'none' | 'basic' | 'bearer' | 'oauth'>('none')
+  const [tempUsername, setTempUsername] = useState('')
+  const [tempPassword, setTempPassword] = useState('')
+  const [tempToken, setTempToken] = useState('')
+
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  // Load saved LLM config from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('mcp-inspector-llm-config')
+    if (saved) {
+      try {
+        const config = JSON.parse(saved)
+        setLLMConfig(config)
+        setTempProvider(config.provider)
+        setTempApiKey(config.apiKey)
+        setTempModel(config.model)
+      } catch (error) {
+        console.error('Failed to load LLM config:', error)
+      }
+    }
+  }, [])
+
+  // Load auth config from localStorage on mount
+  useEffect(() => {
+    const saved = localStorage.getItem('mcp-inspector-auth-config')
+    if (saved) {
+      try {
+        const config = JSON.parse(saved)
+        setAuthConfig(config)
+        setTempAuthType(config.type)
+        if (config.username) setTempUsername(config.username)
+        if (config.password) setTempPassword(config.password)
+        if (config.token) setTempToken(config.token)
+      } catch (error) {
+        console.error('Failed to load auth config:', error)
+      }
+    } else {
+      // Check if OAuth tokens exist for this server
+      try {
+        const storageKeyPrefix = 'mcp:auth'
+        const serverUrlHash = hashString(mcpServerUrl)
+        const storageKey = `${storageKeyPrefix}_${serverUrlHash}_tokens`
+        const tokensStr = localStorage.getItem(storageKey)
+        if (tokensStr) {
+          // OAuth tokens exist, default to OAuth mode
+          const defaultAuthConfig: AuthConfig = { type: 'oauth' }
+          setAuthConfig(defaultAuthConfig)
+          setTempAuthType('oauth')
+          console.log('Auto-detected OAuth tokens for this MCP server')
+        }
+      } catch (error) {
+        console.error('Failed to check for OAuth tokens:', error)
+      }
+    }
+  }, [mcpServerUrl])
+
+  // Update model when provider changes
+  useEffect(() => {
+    setTempModel(DEFAULT_MODELS[tempProvider])
+  }, [tempProvider])
+
+  const saveLLMConfig = useCallback(() => {
+    if (!tempApiKey.trim()) {
+      return
+    }
+
+    const llmConfig: LLMConfig = {
+      provider: tempProvider,
+      apiKey: tempApiKey,
+      model: tempModel,
+    }
+
+    const authConfig: AuthConfig = {
+      type: tempAuthType,
+      ...(tempAuthType === 'basic' && {
+        username: tempUsername.trim(),
+        password: tempPassword.trim(),
+      }),
+      ...(tempAuthType === 'bearer' && {
+        token: tempToken.trim(),
+      }),
+    }
+
+    setLLMConfig(llmConfig)
+    setAuthConfig(authConfig)
+    localStorage.setItem('mcp-inspector-llm-config', JSON.stringify(llmConfig))
+    localStorage.setItem('mcp-inspector-auth-config', JSON.stringify(authConfig))
+    setConfigDialogOpen(false)
+  }, [tempProvider, tempApiKey, tempModel, tempAuthType, tempUsername, tempPassword, tempToken])
+
+  const clearConfig = useCallback(() => {
+    setLLMConfig(null)
+    setAuthConfig(null)
+    setTempApiKey('')
+    setTempUsername('')
+    setTempPassword('')
+    setTempToken('')
+    setTempAuthType('none')
+    localStorage.removeItem('mcp-inspector-llm-config')
+    localStorage.removeItem('mcp-inspector-auth-config')
+    setMessages([])
+  }, [])
+
+  const sendMessage = useCallback(async () => {
+    if (!inputValue.trim() || !llmConfig || !isConnected) {
+      return
+    }
+
+    const userMessage: Message = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: inputValue.trim(),
+      timestamp: Date.now(),
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setInputValue('')
+    setIsLoading(true)
+
+    try {
+      // If using OAuth, retrieve tokens from localStorage
+      let authConfigWithTokens = authConfig
+      if (authConfig?.type === 'oauth') {
+        try {
+          // Get OAuth tokens from localStorage (same pattern as BrowserOAuthClientProvider)
+          // The key format is: `${storageKeyPrefix}_${serverUrlHash}_tokens`
+          const storageKeyPrefix = 'mcp:auth'
+          const serverUrlHash = hashString(mcpServerUrl)
+          const storageKey = `${storageKeyPrefix}_${serverUrlHash}_tokens`
+          const tokensStr = localStorage.getItem(storageKey)
+          if (tokensStr) {
+            const tokens = JSON.parse(tokensStr)
+            authConfigWithTokens = {
+              ...authConfig,
+              oauthTokens: tokens,
+            }
+            console.log('Retrieved OAuth tokens from localStorage')
+          } else {
+            console.warn('No OAuth tokens found in localStorage for key:', storageKey)
+          }
+        } catch (error) {
+          console.warn('Failed to retrieve OAuth tokens:', error)
+        }
+      }
+
+      // Log auth config for debugging
+      if (authConfigWithTokens) {
+        console.log('Sending chat request with auth type:', authConfigWithTokens.type)
+        if (authConfigWithTokens.type === 'oauth' && authConfigWithTokens.oauthTokens) {
+          console.log('OAuth token present:', !!authConfigWithTokens.oauthTokens.access_token)
+        }
+      } else {
+        console.log('No auth config - attempting connection without authentication')
+      }
+
+      // Call the chat API endpoint
+      const response = await fetch('/inspector/api/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          mcpServerUrl,
+          llmConfig,
+          authConfig: authConfigWithTokens,
+          messages: [...messages, userMessage].map(m => ({
+            role: m.role,
+            content: m.content,
+          })),
+        }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const data = await response.json()
+
+      const assistantMessage: Message = {
+        id: `assistant-${Date.now()}`,
+        role: 'assistant',
+        content: data.content,
+        timestamp: Date.now(),
+        toolCalls: data.toolCalls,
+      }
+
+      setMessages(prev => [...prev, assistantMessage])
+    } catch (error) {
+      const errorMessage: Message = {
+        id: `error-${Date.now()}`,
+        role: 'assistant',
+        content: `Error: ${error instanceof Error ? error.message : 'Unknown error occurred'}`,
+        timestamp: Date.now(),
+      }
+      setMessages(prev => [...prev, errorMessage])
+    } finally {
+      setIsLoading(false)
+    }
+  }, [inputValue, llmConfig, isConnected, mcpServerUrl, messages])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      sendMessage()
+    }
+  }, [sendMessage])
+
+  const copyMessage = useCallback(async (messageId: string, content: any) => {
+    try {
+      // Handle different content formats
+      const textContent = typeof content === 'string' 
+        ? content 
+        : Array.isArray(content) 
+          ? content.map(item => typeof item === 'string' ? item : item.text || JSON.stringify(item)).join('')
+          : JSON.stringify(content)
+      
+      await navigator.clipboard.writeText(textContent)
+      setCopiedMessageId(messageId)
+      setTimeout(() => setCopiedMessageId(null), 2000)
+    } catch (err) {
+      console.error('Failed to copy:', err)
+    }
+  }, [])
+
+  const clearChat = useCallback(() => {
+    setMessages([])
+  }, [])
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b dark:border-zinc-700">
+        <div className="flex items-center gap-2">
+          <MessageCircle className="h-5 w-5 text-blue-500" />
+          <h3 className="text-lg font-semibold">Chat with MCP Agent</h3>
+          {llmConfig && (
+            <Badge variant="outline" className="ml-2">
+              {llmConfig.provider} / {llmConfig.model}
+            </Badge>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {messages.length > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearChat}
+                  className="h-8 w-8 p-0"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Clear chat</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+          <Dialog open={configDialogOpen} onOpenChange={setConfigDialogOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Settings className="h-4 w-4 mr-2" />
+                {llmConfig ? 'Change API Key' : 'Configure API Key'}
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-md">
+              <DialogHeader>
+                <DialogTitle>LLM Provider Configuration</DialogTitle>
+                <DialogDescription>
+                  Configure your LLM provider and API key to start chatting with the MCP server
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label>Provider</Label>
+                  <Select value={tempProvider} onValueChange={(v: any) => setTempProvider(v)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="openai">OpenAI</SelectItem>
+                      <SelectItem value="anthropic">Anthropic</SelectItem>
+                      <SelectItem value="google">Google</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>Model</Label>
+                  <Input
+                    value={tempModel}
+                    onChange={e => setTempModel(e.target.value)}
+                    placeholder="e.g., gpt-4o"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label>API Key</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      type="password"
+                      value={tempApiKey}
+                      onChange={e => setTempApiKey(e.target.value)}
+                      placeholder="Enter your API key"
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Your API key is stored locally and never sent to our servers
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>MCP Server Authentication (Optional)</Label>
+                  <Select value={tempAuthType} onValueChange={(v: any) => setTempAuthType(v)}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">No Authentication</SelectItem>
+                      <SelectItem value="oauth">OAuth (Use Inspector's OAuth)</SelectItem>
+                      <SelectItem value="basic">Basic Auth (Username/Password)</SelectItem>
+                      <SelectItem value="bearer">Bearer Token</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  
+                  {tempAuthType === 'basic' && (
+                    <div className="space-y-2">
+                      <Input
+                        placeholder="Username"
+                        value={tempUsername}
+                        onChange={e => setTempUsername(e.target.value)}
+                      />
+                      <Input
+                        type="password"
+                        placeholder="Password"
+                        value={tempPassword}
+                        onChange={e => setTempPassword(e.target.value)}
+                      />
+                    </div>
+                  )}
+                  
+                  {tempAuthType === 'bearer' && (
+                    <Input
+                      type="password"
+                      placeholder="Bearer token"
+                      value={tempToken}
+                      onChange={e => setTempToken(e.target.value)}
+                    />
+                  )}
+                  
+                  {tempAuthType === 'oauth' && (
+                    <div className="text-sm text-muted-foreground p-3 bg-muted rounded-md">
+                      <p className="font-medium">OAuth Authentication</p>
+                      <p className="text-xs mt-1">
+                        This will use the same OAuth flow as the Inspector's main connection. 
+                        If the MCP server requires OAuth, the Inspector will handle the authentication automatically.
+                      </p>
+                      {oauthState === 'authenticating' && (
+                        <div className="mt-2 flex items-center gap-2 text-blue-600">
+                          <Spinner className="h-3 w-3" />
+                          <span className="text-xs">Authenticating...</span>
+                        </div>
+                      )}
+                      {oauthState === 'failed' && oauthError && (
+                        <div className="mt-2 text-xs text-destructive">
+                          Auth failed: {oauthError}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex justify-between">
+                  {llmConfig && (
+                    <Button
+                      variant="outline"
+                      onClick={clearConfig}
+                    >
+                      Clear Config
+                    </Button>
+                  )}
+                  <Button
+                    onClick={saveLLMConfig}
+                    disabled={!tempApiKey.trim()}
+                    className={llmConfig ? 'ml-auto' : ''}
+                  >
+                    <Key className="h-4 w-4 mr-2" />
+                    Save Configuration
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      {/* Messages Area */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {!llmConfig ? (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <Key className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold mb-2">Configure Your LLM Provider</h3>
+            <p className="text-sm text-muted-foreground mb-4 max-w-md">
+              To start chatting with the MCP server, you need to configure your LLM provider and API key.
+              Your credentials are stored locally and used only for this chat.
+            </p>
+            <Button onClick={() => setConfigDialogOpen(true)}>
+              <Settings className="h-4 w-4 mr-2" />
+              Configure API Key
+            </Button>
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <MessageCircle className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold mb-2">Start a Conversation</h3>
+            <p className="text-sm text-muted-foreground max-w-md">
+              Ask questions or request actions. The MCP agent will use the available tools, prompts, and resources to help you.
+            </p>
+          </div>
+        ) : (
+          messages.map((message) => (
+            <div
+              key={message.id}
+              className={cn(
+                'flex gap-3',
+                message.role === 'user' ? 'justify-end' : 'justify-start'
+              )}
+            >
+              {message.role === 'assistant' && (
+                <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0">
+                  <MessageCircle className="h-4 w-4 text-white" />
+                </div>
+              )}
+              <div
+                className={cn(
+                  'max-w-[80%] rounded-lg p-3',
+                  message.role === 'user'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-zinc-100 dark:bg-zinc-800'
+                )}
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1 prose prose-sm dark:prose-invert max-w-none">
+                    {typeof message.content === 'string' 
+                      ? message.content 
+                      : Array.isArray(message.content) 
+                        ? message.content.map((item, idx) => 
+                            typeof item === 'string' 
+                              ? item 
+                              : item.text || JSON.stringify(item)
+                          ).join('')
+                        : JSON.stringify(message.content)
+                    }
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => copyMessage(message.id, message.content)}
+                    className={cn(
+                      'h-6 w-6 p-0 flex-shrink-0',
+                      message.role === 'user' ? 'hover:bg-blue-600' : ''
+                    )}
+                  >
+                    {copiedMessageId === message.id ? (
+                      <Check className="h-3 w-3" />
+                    ) : (
+                      <Copy className="h-3 w-3" />
+                    )}
+                  </Button>
+                </div>
+
+                {/* Tool Calls */}
+                {message.toolCalls && message.toolCalls.length > 0 && (
+                  <div className="mt-3 space-y-2">
+                    <p className="text-xs font-semibold opacity-70">Tool Calls:</p>
+                    {message.toolCalls.map((toolCall, idx) => (
+                      <details key={idx} className="text-xs">
+                        <summary className="cursor-pointer hover:opacity-80 font-mono">
+                          {toolCall.toolName}({Object.keys(toolCall.args).length} args)
+                        </summary>
+                        <div className="mt-2 p-2 bg-black/10 dark:bg-white/10 rounded">
+                          <SyntaxHighlighter
+                            language="json"
+                            style={prismStyle}
+                            customStyle={{
+                              margin: 0,
+                              padding: 0,
+                              background: 'transparent',
+                              fontSize: '0.75rem',
+                            }}
+                          >
+                            {JSON.stringify({ args: toolCall.args, result: toolCall.result }, null, 2)}
+                          </SyntaxHighlighter>
+                        </div>
+                      </details>
+                    ))}
+                  </div>
+                )}
+
+                <div className="text-xs opacity-50 mt-2">
+                  {new Date(message.timestamp).toLocaleTimeString()}
+                </div>
+              </div>
+              {message.role === 'user' && (
+                <div className="w-8 h-8 rounded-full bg-zinc-300 dark:bg-zinc-700 flex items-center justify-center flex-shrink-0">
+                  <User className="h-4 w-4" />
+                </div>
+              )}
+            </div>
+          ))
+        )}
+        {isLoading && (
+          <div className="flex gap-3">
+            <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0">
+              <MessageCircle className="h-4 w-4 text-white" />
+            </div>
+            <div className="bg-zinc-100 dark:bg-zinc-800 rounded-lg p-3">
+              <Spinner className="h-4 w-4" />
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input Area */}
+      {llmConfig && (
+        <div className="border-t dark:border-zinc-700 p-4">
+          <div className="flex gap-2">
+            <Textarea
+              ref={textareaRef}
+              value={inputValue}
+              onChange={e => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={isConnected ? "Ask a question or request an action..." : "Server not connected"}
+              className="resize-none"
+              rows={2}
+              disabled={!isConnected || isLoading}
+            />
+            <Button
+              onClick={sendMessage}
+              disabled={!inputValue.trim() || !isConnected || isLoading}
+              className="self-end"
+            >
+              {isLoading ? <Spinner className="h-4 w-4" /> : <Send className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
diff --git a/packages/inspector/src/client/components/Layout.tsx b/packages/inspector/src/client/components/Layout.tsx
index 8534cf0d..42956f79 100644
--- a/packages/inspector/src/client/components/Layout.tsx
+++ b/packages/inspector/src/client/components/Layout.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
-import { FolderOpen, MessageSquare, Rocket, Wrench } from 'lucide-react'
+import type { CustomHeader } from './CustomHeadersEditor'
+import { Cog, FileText, FolderOpen, MessageCircle, MessageSquare, Settings, Shield, Wrench } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
@@ -9,6 +10,7 @@ import { Spinner } from '@/components/ui/spinner'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
+import { Badge } from '../../components/ui/badge'
 import { Button } from '../../components/ui/button'
 import {
   Dialog,
@@ -26,9 +28,14 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu'
+import { Input } from '../../components/ui/input'
+import { Label } from '../../components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select'
 import { useMcpContext } from '../context/McpContext'
 import { AnimatedThemeToggler } from './AnimatedThemeToggler'
+import { ChatTab } from './ChatTab'
 import { CommandPalette } from './CommandPalette'
+import { CustomHeadersEditor } from './CustomHeadersEditor'
 import { PromptsTab } from './PromptsTab'
 import { ResourcesTab } from './ResourcesTab'
 import { ServerIcon } from './ServerIcon'
@@ -97,10 +104,40 @@ export function Layout({ children }: LayoutProps) {
   const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false)
   const [isAutoConnecting, setIsAutoConnecting] = useState(false)
 
+  // Connection options dialog state
+  const [connectionOptionsOpen, setConnectionOptionsOpen] = useState(false)
+  const [editingConnectionId, setEditingConnectionId] = useState<string | null>(null)
+
+  // Form state for connection options
+  const [transportType, setTransportType] = useState('SSE')
+  const [url, setUrl] = useState('')
+  const [connectionType, setConnectionType] = useState('Direct')
+  const [customHeaders, setCustomHeaders] = useState<CustomHeader[]>([])
+  const [requestTimeout, setRequestTimeout] = useState('10000')
+  const [resetTimeoutOnProgress, setResetTimeoutOnProgress] = useState('True')
+  const [maxTotalTimeout, setMaxTotalTimeout] = useState('60000')
+  const [proxyAddress, setProxyAddress] = useState('')
+  const [proxyToken, setProxyToken] = useState('c96aeb0c195aa9c7d3846b90aec9bc5fcdd5df97b3049aaede8f5dd1a15d2d87')
+
+  // OAuth fields
+  const [clientId, setClientId] = useState('')
+  const [redirectUrl, setRedirectUrl] = useState(
+    typeof window !== 'undefined'
+      ? new URL('/oauth/callback', window.location.origin).toString()
+      : 'http://localhost:3000/oauth/callback',
+  )
+  const [scope, setScope] = useState('')
+
+  // UI state for sub-dialogs
+  const [headersDialogOpen, setHeadersDialogOpen] = useState(false)
+  const [authDialogOpen, setAuthDialogOpen] = useState(false)
+  const [configDialogOpen, setConfigDialogOpen] = useState(false)
+
   const tabs = [
     { id: 'tools', label: 'Tools', icon: Wrench },
     { id: 'prompts', label: 'Prompts', icon: MessageSquare },
     { id: 'resources', label: 'Resources', icon: FolderOpen },
+    { id: 'chat', label: 'Chat', icon: MessageCircle },
   ]
 
   const handleServerSelect = (serverId: string) => {
@@ -121,6 +158,38 @@ export function Layout({ children }: LayoutProps) {
     }
   }
 
+  const handleOpenConnectionOptions = (connectionId: string | null) => {
+    setEditingConnectionId(connectionId)
+    setConnectionOptionsOpen(true)
+
+    // If editing an existing connection, populate the form with its data
+    if (connectionId) {
+      const connection = connections.find(c => c.id === connectionId)
+      if (connection) {
+        setUrl(connection.url)
+        // Set other fields based on connection data if available
+        // For now, we'll use defaults since the connection object might not have all the config
+      }
+    }
+    else {
+      // Reset form for new connection
+      setUrl('')
+      setCustomHeaders([])
+      setClientId('')
+      setScope('')
+    }
+  }
+
+  const handleSaveConnectionOptions = () => {
+    // Here you would implement the logic to save/update the connection options
+    // For now, we'll just close the dialog
+    setConnectionOptionsOpen(false)
+    setEditingConnectionId(null)
+    toast.success('Connection options saved')
+  }
+
+  const enabledHeadersCount = customHeaders.filter(h => h.name && h.value).length
+
   const selectedServer = connections.find(c => c.id === selectedServerId)
 
   // Aggregate tools, prompts, and resources from all connected servers
@@ -291,61 +360,122 @@ export function Layout({ children }: LayoutProps) {
             {/* Left side: Server dropdown + Tabs */}
             <div className="flex items-center space-x-6">
               {/* Server Selection Dropdown */}
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <ShimmerButton
-                    className={
-                      cn('min-w-[200px] p-0 px-1 text-sm h-11 justify-start bg-black dark:bg-white text-white dark:text-black border-black dark:border-white hover:bg-gray-800 dark:hover:bg-zinc-100 hover:border-gray-800 dark:hover:border-zinc-200', !selectedServer && 'pl-4', selectedServer && 'pr-4',
-                      )
-                    }
-                  >
-                    {selectedServer && (
-                      <ServerIcon
-                        serverUrl={selectedServer.url}
-                        serverName={selectedServer.name}
-                        size="md"
-                        className="mr-2"
-                      />
-                    )}
-                    <span className="truncate">
-                      {selectedServer ? selectedServer.name : 'Select server to inspect'}
-                    </span>
-                  </ShimmerButton>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-[300px]" align="start">
-                  <DropdownMenuLabel>MCP Servers</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  {connections.length === 0
-                    ? (
-                        <div className="px-2 py-4 text-sm text-muted-foreground dark:text-zinc-400 text-center">
-                          No servers connected. Go to the dashboard to add one.
-                        </div>
-                      )
-                    : (
-                        connections.map(connection => (
-                          <DropdownMenuItem
-                            key={connection.id}
-                            onClick={() => handleServerSelect(connection.id)}
-                            className="flex items-center gap-3"
-                          >
-                            <ServerIcon
-                              serverUrl={connection.url}
-                              serverName={connection.name}
-                              size="sm"
-                            />
-                            <div className="flex items-center gap-2 flex-1">
-                              <div className="font-medium">{connection.name}</div>
-                              <StatusDot status={connection.state} />
-                            </div>
-                          </DropdownMenuItem>
-                        ))
+              <div className="flex items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <ShimmerButton
+                      className={
+                        cn('min-w-[200px] p-0 px-1 text-sm h-11 justify-start bg-black dark:bg-white text-white dark:text-black border-black dark:border-white hover:bg-gray-800 dark:hover:bg-zinc-100 hover:border-gray-800 dark:hover:border-zinc-200', !selectedServer && 'pl-4', selectedServer && 'pr-4',
+                        )
+                      }
+                    >
+                      {selectedServer && (
+                        <ServerIcon
+                          serverUrl={selectedServer.url}
+                          serverName={selectedServer.name}
+                          size="md"
+                          className="mr-2"
+                        />
                       )}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={() => navigate('/')}>
-                    <span className="text-blue-600 dark:text-blue-400">+ Add new server</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
+                      <div className="flex items-center gap-2 flex-1">
+                        <span className="truncate">
+                          {selectedServer ? selectedServer.name : 'Select server to inspect'}
+                        </span>
+                        {selectedServer && (
+                          <div className="flex items-center gap-2">
+                            {selectedServer.error
+                              ? (
+                                  <Tooltip>
+                                    <TooltipTrigger asChild>
+                                      <button
+                                        onClick={(e) => {
+                                          e.stopPropagation()
+                                          // Handle copy error functionality if needed
+                                        }}
+                                        className="w-2 h-2 rounded-full bg-rose-500 animate-status-pulse-red hover:bg-rose-600 transition-colors"
+                                        title="Click to copy error message"
+                                        aria-label="Copy error message to clipboard"
+                                      />
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                      <p className="max-w-xs">{selectedServer.error}</p>
+                                    </TooltipContent>
+                                  </Tooltip>
+                                )
+                              : (
+                                  <div
+                                    className={`w-2 h-2 rounded-full ${
+                                      selectedServer.state === 'ready'
+                                        ? 'bg-emerald-600 animate-status-pulse'
+                                        : selectedServer.state === 'failed'
+                                          ? 'bg-rose-600 animate-status-pulse-red'
+                                          : 'bg-yellow-500 animate-status-pulse-yellow'
+                                    }`}
+                                  />
+                                )}
+                          </div>
+                        )}
+                      </div>
+                    </ShimmerButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-[300px]" align="start">
+                    <DropdownMenuLabel>MCP Servers</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {connections.length === 0
+                      ? (
+                          <div className="px-2 py-4 text-sm text-muted-foreground dark:text-zinc-400 text-center">
+                            No servers connected. Go to the dashboard to add one.
+                          </div>
+                        )
+                      : (
+                          connections.map(connection => (
+                            <DropdownMenuItem
+                              key={connection.id}
+                              onClick={() => handleServerSelect(connection.id)}
+                              className="flex items-center gap-3"
+                            >
+                              <ServerIcon
+                                serverUrl={connection.url}
+                                serverName={connection.name}
+                                size="sm"
+                              />
+                              <div className="flex items-center gap-2 flex-1">
+                                <div className="font-medium">{connection.name}</div>
+                                <StatusDot status={connection.state} />
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-6 w-6 p-0 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  handleOpenConnectionOptions(connection.id)
+                                }}
+                              >
+                                <Settings className="h-3 w-3" />
+                              </Button>
+                            </DropdownMenuItem>
+                          ))
+                        )}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={() => navigate('/')}>
+                      <span className="text-blue-600 dark:text-blue-400">+ Add new server</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                {/* Gear icon button for selected server */}
+                {selectedServer && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-11 w-11"
+                    onClick={() => handleOpenConnectionOptions(selectedServer.id)}
+                  >
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
 
               {/* Tabs */}
               {selectedServer && (
@@ -483,9 +613,18 @@ export function Layout({ children }: LayoutProps) {
                       isConnected={selectedServer.state === 'ready'}
                     />
                   )
-                : (
-                    children
-                  )}
+                : selectedServer && activeTab === 'chat'
+                  ? (
+                      <ChatTab
+                        mcpServerUrl={selectedServer.url}
+                        isConnected={selectedServer.state === 'ready'}
+                        oauthState={selectedServer.state}
+                        oauthError={selectedServer.error}
+                      />
+                    )
+                  : (
+                      children
+                    )}
         </main>
 
         {/* Command Palette */}
@@ -499,6 +638,253 @@ export function Layout({ children }: LayoutProps) {
           onNavigate={handleCommandPaletteNavigate}
           onServerSelect={handleServerSelect}
         />
+
+        {/* Connection Options Dialog */}
+        <Dialog open={connectionOptionsOpen} onOpenChange={setConnectionOptionsOpen}>
+          <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+            <DialogHeader>
+              <DialogTitle>
+                {editingConnectionId ? 'Edit Connection Options' : 'Connection Options'}
+              </DialogTitle>
+              <DialogDescription>
+                Configure connection settings for your MCP server
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* Transport Type */}
+              <div className="space-y-2">
+                <Label>Transport Type</Label>
+                <Select value={transportType} onValueChange={setTransportType}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="SSE">Streamable HTTP</SelectItem>
+                    <SelectItem value="WebSocket">WebSocket</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* URL */}
+              <div className="space-y-2">
+                <Label>URL</Label>
+                <Input
+                  placeholder="http://localhost:3001/sse"
+                  value={url}
+                  onChange={e => setUrl(e.target.value)}
+                />
+              </div>
+
+              {/* Connection Type */}
+              <div className="space-y-2">
+                <Label>Connection Type</Label>
+                <Select value={connectionType} onValueChange={setConnectionType}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Direct">Direct</SelectItem>
+                    <SelectItem value="Via Proxy">Via Proxy</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Configuration Buttons Row */}
+              <div className="flex gap-3">
+                {/* Authentication Button */}
+                <Dialog open={authDialogOpen} onOpenChange={setAuthDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className="flex-1 justify-center"
+                    >
+                      <Shield className="w-4 h-4 mr-2" />
+                      Authentication
+                      {(clientId || scope) && (
+                        <Badge variant="secondary" className="ml-2">
+                          OAuth 2.0
+                        </Badge>
+                      )}
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                    <DialogHeader>
+                      <DialogTitle>Authentication</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                      <h4 className="text-sm font-medium">OAuth 2.0 Flow</h4>
+
+                      {/* Client ID */}
+                      <div className="space-y-2">
+                        <Label className="text-sm">Client ID</Label>
+                        <Input
+                          placeholder="Client ID"
+                          value={clientId}
+                          onChange={e => setClientId(e.target.value)}
+                        />
+                      </div>
+
+                      {/* Redirect URL */}
+                      <div className="space-y-2">
+                        <Label className="text-sm">Redirect URL</Label>
+                        <Input
+                          value={redirectUrl}
+                          onChange={e => setRedirectUrl(e.target.value)}
+                        />
+                      </div>
+
+                      {/* Scope */}
+                      <div className="space-y-2">
+                        <Label className="text-sm">Scope</Label>
+                        <Input
+                          placeholder="Scope (space-separated)"
+                          value={scope}
+                          onChange={e => setScope(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="flex justify-end">
+                        <Button onClick={() => setAuthDialogOpen(false)}>
+                          Save
+                        </Button>
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+
+                {/* Custom Headers Button */}
+                <Dialog open={headersDialogOpen} onOpenChange={setHeadersDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className="flex-1 justify-center"
+                    >
+                      <FileText className="w-4 h-4 mr-2" />
+                      Custom Headers
+                      {enabledHeadersCount > 0 && (
+                        <Badge variant="secondary" className="ml-2">
+                          {enabledHeadersCount}
+                        </Badge>
+                      )}
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+                    <DialogHeader>
+                      <DialogTitle>Custom Headers</DialogTitle>
+                    </DialogHeader>
+                    <CustomHeadersEditor
+                      headers={customHeaders}
+                      onChange={setCustomHeaders}
+                      onSave={() => setHeadersDialogOpen(false)}
+                    />
+                  </DialogContent>
+                </Dialog>
+
+                {/* Configuration Button */}
+                <Dialog open={configDialogOpen} onOpenChange={setConfigDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className="flex-1 justify-center"
+                    >
+                      <Cog className="w-4 h-4 mr-2" />
+                      Configuration
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="w-full max-w-2xl max-h-[80vh] overflow-y-auto">
+                    <DialogHeader>
+                      <DialogTitle>Configuration</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                      {/* Request Timeout */}
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-1">
+                          Request Timeout
+                          <span className="text-muted-foreground text-xs">(?)</span>
+                        </Label>
+                        <Input
+                          type="number"
+                          value={requestTimeout}
+                          onChange={e => setRequestTimeout(e.target.value)}
+                        />
+                      </div>
+
+                      {/* Reset Timeout on Progress */}
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-1">
+                          Reset Timeout on Progress
+                          <span className="text-muted-foreground text-xs">(?)</span>
+                        </Label>
+                        <Select value={resetTimeoutOnProgress} onValueChange={setResetTimeoutOnProgress}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="True">True</SelectItem>
+                            <SelectItem value="False">False</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+
+                      {/* Maximum Total Timeout */}
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-1">
+                          Maximum Total Timeout
+                          <span className="text-muted-foreground text-xs">(?)</span>
+                        </Label>
+                        <Input
+                          type="number"
+                          value={maxTotalTimeout}
+                          onChange={e => setMaxTotalTimeout(e.target.value)}
+                        />
+                      </div>
+
+                      {/* Inspector Proxy Address */}
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-1">
+                          Inspector Proxy Address
+                          <span className="text-muted-foreground text-xs">(?)</span>
+                        </Label>
+                        <Input
+                          value={proxyAddress}
+                          onChange={e => setProxyAddress(e.target.value)}
+                          placeholder=""
+                        />
+                      </div>
+
+                      {/* Proxy Session Token */}
+                      <div className="space-y-2">
+                        <Label className="text-sm flex items-center gap-1">
+                          Proxy Session Token
+                          <span className="text-muted-foreground text-xs">(?)</span>
+                        </Label>
+                        <Input
+                          value={proxyToken}
+                          onChange={e => setProxyToken(e.target.value)}
+                          className="font-mono text-xs"
+                        />
+                      </div>
+
+                      <div className="flex justify-end">
+                        <Button onClick={() => setConfigDialogOpen(false)}>
+                          Save
+                        </Button>
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              </div>
+
+              {/* Save Button */}
+              <div className="flex justify-end">
+                <Button onClick={handleSaveConnectionOptions}>
+                  Save Connection Options
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
       </div>
     </TooltipProvider>
   )
diff --git a/packages/inspector/src/server/favicon-proxy.ts b/packages/inspector/src/server/favicon-proxy.ts
index 89eef725..fa0e0547 100644
--- a/packages/inspector/src/server/favicon-proxy.ts
+++ b/packages/inspector/src/server/favicon-proxy.ts
@@ -1,47 +1,12 @@
 import { Hono } from 'hono'
 import { cors } from 'hono/cors'
+import { fetchFavicon } from './shared-utils.js'
 
 const app = new Hono()
 
 // Enable CORS for all routes
 app.use('*', cors())
 
-// In-memory cache for favicons
-interface CacheEntry {
-  data: ArrayBuffer
-  contentType: string
-  timestamp: number
-  ttl: number
-}
-
-const faviconCache = new Map<string, CacheEntry>()
-const CACHE_TTL = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
-const MAX_CACHE_SIZE = 1000 // Maximum number of cached favicons
-
-// Clean up expired cache entries
-function cleanupCache() {
-  const now = Date.now()
-  for (const [key, entry] of faviconCache.entries()) {
-    if (now - entry.timestamp > entry.ttl) {
-      faviconCache.delete(key)
-    }
-  }
-}
-
-// Run cleanup every hour
-setInterval(cleanupCache, 60 * 60 * 1000)
-
-// Get cache key for a URL
-function getCacheKey(url: string): string {
-  try {
-    const urlObj = new URL(url)
-    return urlObj.hostname.toLowerCase()
-  }
-  catch {
-    return url.toLowerCase()
-  }
-}
-
 // Favicon proxy endpoint
 app.get('/:url', async (c) => {
   const url = c.req.param('url')
@@ -51,91 +16,18 @@ app.get('/:url', async (c) => {
   }
 
   try {
-    // Decode the URL
-    const decodedUrl = decodeURIComponent(url)
+    const result = await fetchFavicon(url)
 
-    // Add protocol if missing
-    let fullUrl = decodedUrl
-    if (!decodedUrl.startsWith('http://') && !decodedUrl.startsWith('https://')) {
-      fullUrl = `https://${decodedUrl}`
-    }
-
-    // Validate URL
-    const urlObj = new URL(fullUrl)
-    const cacheKey = getCacheKey(fullUrl)
-
-    // Check cache first
-    const cachedEntry = faviconCache.get(cacheKey)
-    if (cachedEntry && (Date.now() - cachedEntry.timestamp) < cachedEntry.ttl) {
-      return new Response(cachedEntry.data, {
+    if (result) {
+      return new Response(result.data, {
         headers: {
-          'Content-Type': cachedEntry.contentType,
+          'Content-Type': result.contentType,
           'Cache-Control': 'public, max-age=86400, immutable', // Cache for 24 hours
           'Access-Control-Allow-Origin': '*',
-          'X-Cache': 'HIT',
         },
       })
     }
 
-    const protocol = urlObj.protocol
-    const baseDomain = `${protocol}//${urlObj.origin.split('.').slice(-2).join('.')}`
-
-    // Try to fetch favicon from common locations
-    const faviconUrls = [
-      `${urlObj.origin}/favicon.ico`,
-      `${urlObj.origin}/favicon.png`,
-      `${urlObj.origin}/apple-touch-icon.png`,
-      `${urlObj.origin}/icon.png`,
-      `${baseDomain}/favicon.ico`,
-      `${baseDomain}/favicon.png`,
-      `${baseDomain}/apple-touch-icon.png`,
-      `${baseDomain}/icon.png`,
-    ]
-
-    for (const faviconUrl of faviconUrls) {
-      try {
-        const response = await fetch(faviconUrl, {
-          headers: {
-            'User-Agent': 'Mozilla/5.0 (compatible; MCP-Inspector/1.0)',
-          },
-        })
-
-        if (response.ok) {
-          const contentType = response.headers.get('content-type') || 'image/x-icon'
-          const buffer = await response.arrayBuffer()
-
-          // Cache the result
-          if (faviconCache.size >= MAX_CACHE_SIZE) {
-            // Remove oldest entries if cache is full
-            const entries = Array.from(faviconCache.entries())
-            entries.sort((a, b) => a[1].timestamp - b[1].timestamp)
-            const toRemove = entries.slice(0, Math.floor(MAX_CACHE_SIZE / 4))
-            toRemove.forEach(([key]) => faviconCache.delete(key))
-          }
-
-          faviconCache.set(cacheKey, {
-            data: buffer,
-            contentType,
-            timestamp: Date.now(),
-            ttl: CACHE_TTL,
-          })
-
-          return new Response(buffer, {
-            headers: {
-              'Content-Type': contentType,
-              'Cache-Control': 'public, max-age=86400, immutable', // Cache for 24 hours
-              'Access-Control-Allow-Origin': '*',
-              'X-Cache': 'MISS',
-            },
-          })
-        }
-      }
-      catch {
-        // Continue to next URL
-        continue
-      }
-    }
-
     // If no favicon found, return a default icon
     return c.json({ error: 'No favicon found' }, 404)
   }
diff --git a/packages/inspector/src/server/middleware.ts b/packages/inspector/src/server/middleware.ts
index f86d2324..43706215 100644
--- a/packages/inspector/src/server/middleware.ts
+++ b/packages/inspector/src/server/middleware.ts
@@ -1,11 +1,8 @@
 import type { Express, Request, Response } from 'express'
 import { Buffer } from 'node:buffer'
 import { existsSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+import { join } from 'node:path'
+import { checkClientFiles, fetchFavicon, getClientDistPath, getContentType, handleChatRequest } from './shared-utils.js'
 
 /**
  * Mount the MCP Inspector UI at a specified path on an Express app
@@ -29,9 +26,9 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
   const basePath = path.startsWith('/') ? path : `/${path}`
 
   // Find the built client files
-  const clientDistPath = join(__dirname, '../../dist/client')
+  const clientDistPath = getClientDistPath()
 
-  if (!existsSync(clientDistPath)) {
+  if (!checkClientFiles(clientDistPath)) {
     console.warn(`⚠️  MCP Inspector client files not found at ${clientDistPath}`)
     console.warn(`   Run 'yarn build' in the inspector package to build the UI`)
     return
@@ -44,6 +41,20 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     })
   })
 
+  // Chat API endpoint - handles MCP agent chat with custom LLM key
+  app.post(`${basePath}/api/chat`, async (req: Request, res: Response) => {
+    try {
+      const result = await handleChatRequest(req.body)
+      res.json(result)
+    }
+    catch (error) {
+      console.error('Chat API error:', error)
+      res.status(500).json({
+        error: error instanceof Error ? error.message : 'Failed to process chat request',
+      })
+    }
+  })
+
   // Favicon proxy endpoint
   app.get(`${basePath}/api/favicon/:url`, async (req: Request, res: Response) => {
     const url = req.params.url
@@ -54,48 +65,14 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     }
 
     try {
-      // Decode the URL
-      const decodedUrl = decodeURIComponent(url)
-
-      // Add protocol if missing
-      let fullUrl = decodedUrl
-      if (!decodedUrl.startsWith('http://') && !decodedUrl.startsWith('https://')) {
-        fullUrl = `https://${decodedUrl}`
-      }
-
-      // Validate URL
-      const urlObj = new URL(fullUrl)
-
-      // Try to fetch favicon from common locations
-      const faviconUrls = [
-        `${urlObj.origin}/favicon.ico`,
-        `${urlObj.origin}/favicon.png`,
-        `${urlObj.origin}/apple-touch-icon.png`,
-      ]
-
-      for (const faviconUrl of faviconUrls) {
-        try {
-          const response = await fetch(faviconUrl, {
-            headers: {
-              'User-Agent': 'Mozilla/5.0 (compatible; MCP-Inspector/1.0)',
-            },
-          })
-
-          if (response.ok) {
-            const contentType = response.headers.get('content-type') || 'image/x-icon'
-            const buffer = await response.arrayBuffer()
-
-            res.setHeader('Content-Type', contentType)
-            res.setHeader('Cache-Control', 'public, max-age=86400')
-            res.setHeader('Access-Control-Allow-Origin', '*')
-            res.send(Buffer.from(buffer))
-            return
-          }
-        }
-        catch {
-          // Continue to next URL
-          continue
-        }
+      const result = await fetchFavicon(url)
+
+      if (result) {
+        res.setHeader('Content-Type', result.contentType)
+        res.setHeader('Cache-Control', 'public, max-age=86400')
+        res.setHeader('Access-Control-Allow-Origin', '*')
+        res.send(Buffer.from(result.data))
+        return
       }
 
       // If no favicon found, return 404
@@ -112,12 +89,8 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     const assetPath = join(clientDistPath, 'assets', _req.path)
     if (existsSync(assetPath)) {
       // Set appropriate content type
-      if (assetPath.endsWith('.js')) {
-        res.setHeader('Content-Type', 'application/javascript')
-      }
-      else if (assetPath.endsWith('.css')) {
-        res.setHeader('Content-Type', 'text/css')
-      }
+      const contentType = getContentType(assetPath)
+      res.setHeader('Content-Type', contentType)
       res.sendFile(assetPath)
     }
     else {
diff --git a/packages/inspector/src/server/server.ts b/packages/inspector/src/server/server.ts
index 9fc970ba..c897882b 100644
--- a/packages/inspector/src/server/server.ts
+++ b/packages/inspector/src/server/server.ts
@@ -1,7 +1,6 @@
 import { exec } from 'node:child_process'
 import { existsSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
 import { promisify } from 'node:util'
 import { serve } from '@hono/node-server'
 import { Hono } from 'hono'
@@ -9,9 +8,8 @@ import { cors } from 'hono/cors'
 import { logger } from 'hono/logger'
 import faviconProxy from './favicon-proxy.js'
 import { MCPInspector } from './mcp-inspector.js'
+import { checkClientFiles, fetchFavicon, getClientDistPath, getContentType, handleChatRequest } from './shared-utils.js'
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
 const execAsync = promisify(exec)
 
 // Check if a specific port is available
@@ -133,11 +131,60 @@ app.delete('/api/servers/:id', async (c) => {
   }
 })
 
+// Chat API endpoint - handles MCP agent chat with custom LLM key
+app.post('/inspector/api/chat', async (c) => {
+  try {
+    const requestBody = await c.req.json()
+    const result = await handleChatRequest(requestBody)
+    return c.json(result)
+  }
+  catch (error) {
+    console.error('Chat API error:', error)
+    return c.json({
+      error: error instanceof Error ? error.message : 'Failed to process chat request',
+    }, 500)
+  }
+})
+
+// Inspector config endpoint
+app.get('/inspector/config.json', (c) => {
+  return c.json({
+    autoConnectUrl: null,
+  })
+})
+
+// Inspector favicon proxy endpoint
+app.get('/inspector/api/favicon/:url', async (c) => {
+  const url = c.req.param('url')
+
+  if (!url) {
+    return c.json({ error: 'URL parameter is required' }, 400)
+  }
+
+  try {
+    const result = await fetchFavicon(url)
+
+    if (result) {
+      c.header('Content-Type', result.contentType)
+      c.header('Cache-Control', 'public, max-age=86400')
+      c.header('Access-Control-Allow-Origin', '*')
+      return c.body(new Uint8Array(result.data))
+    }
+
+    // If no favicon found, return 404
+    return c.json({ error: 'No favicon found' }, 404)
+  }
+  catch (error) {
+    console.error('Favicon proxy error:', error)
+    return c.json({ error: 'Invalid URL or fetch failed' }, 400)
+  }
+})
+
 // Check if we're in development mode (Vite dev server running)
 const isDev = process.env.NODE_ENV === 'development' || process.env.VITE_DEV === 'true'
 
 // Serve static assets from the built client
-const clientDistPath = join(__dirname, '../../dist/client')
+const clientDistPath = getClientDistPath()
 
 if (isDev) {
   // Development mode: proxy client requests to Vite dev server
@@ -147,8 +194,8 @@ if (isDev) {
   app.get('*', async (c) => {
     const path = c.req.path
 
-    // Skip API routes
-    if (path.startsWith('/api/')) {
+    // Skip API routes - both /api/ and /inspector/api/
+    if (path.startsWith('/api/') || path.startsWith('/inspector/api/') || path === '/inspector/config.json') {
       return c.notFound()
     }
 
@@ -188,7 +235,7 @@ if (isDev) {
     `)
   })
 }
-else if (existsSync(clientDistPath)) {
+else if (checkClientFiles(clientDistPath)) {
   // Production mode: serve static assets from built client
   // Serve static assets from /inspector/assets/* (matching Vite's base path)
   app.get('/inspector/assets/*', async (c) => {
@@ -199,15 +246,8 @@ else if (existsSync(clientDistPath)) {
       const content = await import('node:fs').then(fs => fs.readFileSync(fullPath))
 
       // Set appropriate content type based on file extension
-      if (path.endsWith('.js')) {
-        c.header('Content-Type', 'application/javascript')
-      }
-      else if (path.endsWith('.css')) {
-        c.header('Content-Type', 'text/css')
-      }
-      else if (path.endsWith('.svg')) {
-        c.header('Content-Type', 'image/svg+xml')
-      }
+      const contentType = getContentType(fullPath)
+      c.header('Content-Type', contentType)
 
       return c.body(content)
     }
@@ -270,25 +310,26 @@ async function startServer() {
     // In development mode, use port 3001 for API server
     // In production/standalone mode, try 3001 first, then 3002 as fallback
     const isDev = process.env.NODE_ENV === 'development' || process.env.VITE_DEV === 'true'
-    
+
     let port = 3001
     const available = await isPortAvailable(port)
-    
+
     if (!available) {
       if (isDev) {
         console.error(`❌ Port ${port} is not available. Please stop the process using this port and try again.`)
         process.exit(1)
-      } else {
+      }
+      else {
         // In standalone mode, try fallback port
         const fallbackPort = 3002
         console.warn(`⚠️  Port ${port} is not available, trying ${fallbackPort}`)
         const fallbackAvailable = await isPortAvailable(fallbackPort)
-        
+
         if (!fallbackAvailable) {
           console.error(`❌ Neither port ${port} nor ${fallbackPort} is available. Please stop the processes using these ports and try again.`)
           process.exit(1)
         }
-        
+
         port = fallbackPort
       }
     }
@@ -301,7 +342,8 @@ async function startServer() {
     if (isDev) {
       console.warn(`🚀 MCP Inspector API server running on http://localhost:${port}`)
       console.warn(`🌐 Vite dev server should be running on http://localhost:3000`)
-    } else {
+    }
+    else {
       console.warn(`🚀 MCP Inspector running on http://localhost:${port}`)
     }
 
diff --git a/packages/inspector/src/server/shared-utils.ts b/packages/inspector/src/server/shared-utils.ts
new file mode 100644
index 00000000..9f1fb058
--- /dev/null
+++ b/packages/inspector/src/server/shared-utils.ts
@@ -0,0 +1,320 @@
+import { Buffer } from 'node:buffer'
+import { existsSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+/**
+ * Shared utilities for MCP Inspector server functionality
+ */
+
+// In-memory cache for favicons
+interface CacheEntry {
+  data: ArrayBuffer
+  contentType: string
+  timestamp: number
+  ttl: number
+}
+
+const faviconCache = new Map<string, CacheEntry>()
+const CACHE_TTL = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
+const MAX_CACHE_SIZE = 1000 // Maximum number of cached favicons
+
+// Clean up expired cache entries
+function cleanupCache() {
+  const now = Date.now()
+  for (const [key, entry] of faviconCache.entries()) {
+    if (now - entry.timestamp > entry.ttl) {
+      faviconCache.delete(key)
+    }
+  }
+}
+
+// Run cleanup every hour
+setInterval(cleanupCache, 60 * 60 * 1000)
+
+// Get cache key for a URL
+function getCacheKey(url: string): string {
+  try {
+    const urlObj = new URL(url)
+    return urlObj.hostname.toLowerCase()
+  }
+  catch {
+    return url.toLowerCase()
+  }
+}
+
+/**
+ * Fetch favicon for a given URL with caching
+ */
+export async function fetchFavicon(url: string): Promise<{ data: ArrayBuffer; contentType: string } | null> {
+  try {
+    // Decode the URL
+    const decodedUrl = decodeURIComponent(url)
+
+    // Add protocol if missing
+    let fullUrl = decodedUrl
+    if (!decodedUrl.startsWith('http://') && !decodedUrl.startsWith('https://')) {
+      fullUrl = `https://${decodedUrl}`
+    }
+
+    // Validate URL
+    const urlObj = new URL(fullUrl)
+    const cacheKey = getCacheKey(fullUrl)
+
+    // Check cache first
+    const cachedEntry = faviconCache.get(cacheKey)
+    if (cachedEntry && (Date.now() - cachedEntry.timestamp) < cachedEntry.ttl) {
+      return {
+        data: cachedEntry.data,
+        contentType: cachedEntry.contentType,
+      }
+    }
+
+    const protocol = urlObj.protocol
+    const baseDomain = `${protocol}//${urlObj.origin.split('.').slice(-2).join('.')}`
+
+    // Try to fetch favicon from common locations
+    const faviconUrls = [
+      `${urlObj.origin}/favicon.ico`,
+      `${urlObj.origin}/favicon.png`,
+      `${urlObj.origin}/apple-touch-icon.png`,
+      `${urlObj.origin}/icon.png`,
+      `${baseDomain}/favicon.ico`,
+      `${baseDomain}/favicon.png`,
+      `${baseDomain}/apple-touch-icon.png`,
+      `${baseDomain}/icon.png`,
+    ]
+
+    for (const faviconUrl of faviconUrls) {
+      try {
+        const response = await fetch(faviconUrl, {
+          headers: {
+            'User-Agent': 'Mozilla/5.0 (compatible; MCP-Inspector/1.0)',
+          },
+        })
+
+        if (response.ok) {
+          const contentType = response.headers.get('content-type') || 'image/x-icon'
+          const buffer = await response.arrayBuffer()
+
+          // Cache the result
+          if (faviconCache.size >= MAX_CACHE_SIZE) {
+            // Remove oldest entries if cache is full
+            const entries = Array.from(faviconCache.entries())
+            entries.sort((a, b) => a[1].timestamp - b[1].timestamp)
+            const toRemove = entries.slice(0, Math.floor(MAX_CACHE_SIZE / 4))
+            toRemove.forEach(([key]) => faviconCache.delete(key))
+          }
+
+          faviconCache.set(cacheKey, {
+            data: buffer,
+            contentType,
+            timestamp: Date.now(),
+            ttl: CACHE_TTL,
+          })
+
+          return {
+            data: buffer,
+            contentType,
+          }
+        }
+      }
+      catch {
+        // Continue to next URL
+        continue
+      }
+    }
+
+    return null
+  }
+  catch (error) {
+    console.error('Favicon fetch error:', error)
+    return null
+  }
+}
+
+/**
+ * Handle chat API request with MCP agent
+ */
+export async function handleChatRequest(requestBody: {
+  mcpServerUrl: string
+  llmConfig: any
+  authConfig?: any
+  messages: any[]
+}): Promise<{ content: string; toolCalls: any[] }> {
+  const { mcpServerUrl, llmConfig, authConfig, messages } = requestBody
+
+  if (!mcpServerUrl || !llmConfig || !messages) {
+    throw new Error('Missing required fields: mcpServerUrl, llmConfig, messages')
+  }
+
+  // Dynamically import mcp-use and LLM providers
+  const { MCPAgent, MCPClient } = await import('mcp-use')
+
+  // Create LLM instance based on provider
+  let llm: any
+  if (llmConfig.provider === 'openai') {
+    // @ts-ignore - Dynamic import of peer dependency available through mcp-use
+    const { ChatOpenAI } = await import('@langchain/openai')
+    llm = new ChatOpenAI({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey,
+    })
+  }
+  else if (llmConfig.provider === 'anthropic') {
+    // @ts-ignore - Dynamic import of peer dependency available through mcp-use
+    const { ChatAnthropic } = await import('@langchain/anthropic')
+    llm = new ChatAnthropic({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey,
+    })
+  }
+  else if (llmConfig.provider === 'google') {
+    // @ts-ignore - Dynamic import of peer dependency available through mcp-use
+    const { ChatGoogleGenerativeAI } = await import('@langchain/google-genai')
+    llm = new ChatGoogleGenerativeAI({
+      model: llmConfig.model,
+      apiKey: llmConfig.apiKey,
+    })
+  }
+  else {
+    throw new Error(`Unsupported LLM provider: ${llmConfig.provider}`)
+  }
+
+  // Create MCP client and connect to server
+  const client = new MCPClient()
+  const serverName = `inspector-${Date.now()}`
+
+  // Add server with potential authentication headers
+  const serverConfig: any = { url: mcpServerUrl }
+
+  // Handle authentication - support both custom auth and OAuth
+  if (authConfig && authConfig.type !== 'none') {
+    serverConfig.headers = {}
+
+    if (authConfig.type === 'basic' && authConfig.username && authConfig.password) {
+      const auth = Buffer.from(`${authConfig.username}:${authConfig.password}`).toString('base64')
+      serverConfig.headers.Authorization = `Basic ${auth}`
+    }
+    else if (authConfig.type === 'bearer' && authConfig.token) {
+      serverConfig.headers.Authorization = `Bearer ${authConfig.token}`
+    }
+    else if (authConfig.type === 'oauth') {
+      // For OAuth, use the tokens passed from the frontend
+      if (authConfig.oauthTokens?.access_token) {
+        // Capitalize the token type (e.g., "bearer" -> "Bearer")
+        const tokenType = authConfig.oauthTokens.token_type
+          ? authConfig.oauthTokens.token_type.charAt(0).toUpperCase() + authConfig.oauthTokens.token_type.slice(1)
+          : 'Bearer'
+        serverConfig.headers.Authorization = `${tokenType} ${authConfig.oauthTokens.access_token}`
+        console.log('Using OAuth access token for MCP server authentication')
+        console.log('Authorization header:', `${tokenType} ${authConfig.oauthTokens.access_token.substring(0, 20)}...`)
+      }
+      else {
+        console.warn('OAuth selected but no access token provided')
+      }
+    }
+  }
+
+  // If the URL contains authentication info, extract it (fallback)
+  try {
+    const url = new URL(mcpServerUrl)
+    if (url.username && url.password && (!authConfig || authConfig.type === 'none')) {
+      // Extract auth from URL
+      const auth = Buffer.from(`${url.username}:${url.password}`).toString('base64')
+      serverConfig.headers = serverConfig.headers || {}
+      serverConfig.headers.Authorization = `Basic ${auth}`
+      // Remove auth from URL to avoid double encoding
+      serverConfig.url = `${url.protocol}//${url.host}${url.pathname}${url.search}`
+    }
+  }
+  catch (error) {
+    // If URL parsing fails, use original URL
+    console.warn('Failed to parse MCP server URL for auth:', error)
+  }
+
+  // Debug: Log the server config being used
+  console.log('Adding server with config:', {
+    url: serverConfig.url,
+    hasHeaders: !!serverConfig.headers,
+    headers: serverConfig.headers,
+  })
+
+  client.addServer(serverName, serverConfig)
+
+  // Create agent with user's LLM
+  const agent = new MCPAgent({
+    llm,
+    client,
+    maxSteps: 10,
+    memoryEnabled: true,
+    systemPrompt: 'You are a helpful assistant with access to MCP tools, prompts, and resources. Help users interact with the MCP server.',
+  })
+
+  // Format messages - use only the last user message as the query
+  const lastUserMessage = messages.filter((msg: any) => msg.role === 'user').pop()
+
+  if (!lastUserMessage) {
+    throw new Error('No user message found')
+  }
+
+  // Get response from agent
+  const response = await agent.run(lastUserMessage.content)
+
+  // Clean up
+  await client.closeAllSessions()
+
+  return {
+    content: response,
+    toolCalls: [],
+  }
+}
+
+/**
+ * Get content type for static assets
+ */
+export function getContentType(filePath: string): string {
+  if (filePath.endsWith('.js')) {
+    return 'application/javascript'
+  }
+  else if (filePath.endsWith('.css')) {
+    return 'text/css'
+  }
+  else if (filePath.endsWith('.svg')) {
+    return 'image/svg+xml'
+  }
+  else if (filePath.endsWith('.html')) {
+    return 'text/html'
+  }
+  else if (filePath.endsWith('.json')) {
+    return 'application/json'
+  }
+  else if (filePath.endsWith('.png')) {
+    return 'image/png'
+  }
+  else if (filePath.endsWith('.jpg') || filePath.endsWith('.jpeg')) {
+    return 'image/jpeg'
+  }
+  else if (filePath.endsWith('.ico')) {
+    return 'image/x-icon'
+  }
+  else {
+    return 'application/octet-stream'
+  }
+}
+
+/**
+ * Check if client files exist
+ */
+export function checkClientFiles(clientDistPath: string): boolean {
+  return existsSync(clientDistPath)
+}
+
+/**
+ * Get client dist path
+ */
+export function getClientDistPath(): string {
+  const __filename = fileURLToPath(import.meta.url)
+  const __dirname = dirname(__filename)
+  return join(__dirname, '../../dist/client')
+}
diff --git a/packages/inspector/src/server/unified.ts b/packages/inspector/src/server/unified.ts
deleted file mode 100644
index 2986b38a..00000000
--- a/packages/inspector/src/server/unified.ts
+++ /dev/null
@@ -1,337 +0,0 @@
-import { exec } from 'node:child_process'
-import { existsSync } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { promisify } from 'node:util'
-import { serve } from '@hono/node-server'
-import { Hono } from 'hono'
-import { cors } from 'hono/cors'
-import { logger } from 'hono/logger'
-import faviconProxy from './favicon-proxy.js'
-import { MCPInspector } from './mcp-inspector.js'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-const execAsync = promisify(exec)
-
-// Check if a specific port is available
-async function isPortAvailable(port: number): Promise<boolean> {
-  const net = await import('node:net')
-
-  return new Promise((resolve) => {
-    const server = net.createServer()
-    server.listen(port, () => {
-      server.close(() => resolve(true))
-    })
-    server.on('error', () => resolve(false))
-  })
-}
-
-const app = new Hono()
-
-// Middleware
-app.use('*', cors())
-app.use('*', logger())
-
-// Mount favicon proxy
-app.route('/api/favicon', faviconProxy)
-
-// Health check
-app.get('/health', (c) => {
-  return c.json({ status: 'ok', timestamp: new Date().toISOString() })
-})
-
-// MCP Inspector routes
-const mcpInspector = new MCPInspector()
-
-// List available MCP servers
-app.get('/api/servers', async (c) => {
-  try {
-    const servers = await mcpInspector.listServers()
-    return c.json({ servers })
-  }
-  catch {
-    return c.json({ error: 'Failed to list servers' }, 500)
-  }
-})
-
-// Connect to an MCP server
-app.post('/api/servers/connect', async (c) => {
-  try {
-    const { url, command } = await c.req.json()
-    const server = await mcpInspector.connectToServer(url, command)
-    return c.json({ server })
-  }
-  catch {
-    return c.json({ error: 'Failed to connect to server' }, 500)
-  }
-})
-
-// Get server details
-app.get('/api/servers/:id', async (c) => {
-  try {
-    const id = c.req.param('id')
-    const server = await mcpInspector.getServer(id)
-    if (!server) {
-      return c.json({ error: 'Server not found' }, 404)
-    }
-    return c.json({ server })
-  }
-  catch {
-    return c.json({ error: 'Failed to get server details' }, 500)
-  }
-})
-
-// Execute a tool on a server
-app.post('/api/servers/:id/tools/:toolName/execute', async (c) => {
-  try {
-    const id = c.req.param('id')
-    const toolName = c.req.param('toolName')
-    const input = await c.req.json()
-
-    const result = await mcpInspector.executeTool(id, toolName, input)
-    return c.json({ result })
-  }
-  catch {
-    return c.json({ error: 'Failed to execute tool' }, 500)
-  }
-})
-
-// Get server tools
-app.get('/api/servers/:id/tools', async (c) => {
-  try {
-    const id = c.req.param('id')
-    const tools = await mcpInspector.getServerTools(id)
-    return c.json({ tools })
-  }
-  catch {
-    return c.json({ error: 'Failed to get server tools' }, 500)
-  }
-})
-
-// Get server resources
-app.get('/api/servers/:id/resources', async (c) => {
-  try {
-    const id = c.req.param('id')
-    const resources = await mcpInspector.getServerResources(id)
-    return c.json({ resources })
-  }
-  catch {
-    return c.json({ error: 'Failed to get server resources' }, 500)
-  }
-})
-
-// Disconnect from a server
-app.delete('/api/servers/:id', async (c) => {
-  try {
-    const id = c.req.param('id')
-    await mcpInspector.disconnectServer(id)
-    return c.json({ success: true })
-  }
-  catch {
-    return c.json({ error: 'Failed to disconnect server' }, 500)
-  }
-})
-
-// Check if we're in development mode (Vite dev server running)
-const isDev = process.env.NODE_ENV === 'development' || process.env.VITE_DEV === 'true'
-
-// Serve static assets from the built client
-const clientDistPath = join(__dirname, '../../dist/client')
-
-if (isDev) {
-  // Development mode: proxy client requests to Vite dev server
-  console.warn('🔧 Development mode: Proxying client requests to Vite dev server')
-
-  // Proxy all non-API requests to Vite dev server
-  app.get('*', async (c) => {
-    const path = c.req.path
-
-    // Skip API routes
-    if (path.startsWith('/api/')) {
-      return c.notFound()
-    }
-
-    try {
-      // Vite dev server should be running on port 3000
-      const viteUrl = `http://localhost:3000${path}`
-      const response = await fetch(viteUrl, {
-        signal: AbortSignal.timeout(1000), // 1 second timeout
-      })
-
-      if (response.ok) {
-        const content = await response.text()
-        const contentType = response.headers.get('content-type') || 'text/html'
-
-        c.header('Content-Type', contentType)
-        return c.html(content)
-      }
-    }
-    catch (error) {
-      console.warn(`Failed to proxy to Vite dev server: ${error}`)
-    }
-
-    // Fallback HTML if Vite dev server is not running
-    return c.html(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>MCP Inspector - Development</title>
-        </head>
-        <body>
-          <h1>MCP Inspector - Development Mode</h1>
-          <p>Vite dev server is not running. Please start it with:</p>
-          <pre>yarn dev:client</pre>
-          <p>API is available at <a href="/api/servers">/api/servers</a></p>
-        </body>
-      </html>
-    `)
-  })
-}
-else if (existsSync(clientDistPath)) {
-  // Production mode: serve static assets from built client
-  // Serve static assets from /inspector/assets/* (matching Vite's base path)
-  app.get('/inspector/assets/*', async (c) => {
-    const path = c.req.path.replace('/inspector/assets/', 'assets/')
-    const fullPath = join(clientDistPath, path)
-
-    if (existsSync(fullPath)) {
-      const content = await import('node:fs').then(fs => fs.readFileSync(fullPath))
-
-      // Set appropriate content type based on file extension
-      if (path.endsWith('.js')) {
-        c.header('Content-Type', 'application/javascript')
-      }
-      else if (path.endsWith('.css')) {
-        c.header('Content-Type', 'text/css')
-      }
-      else if (path.endsWith('.svg')) {
-        c.header('Content-Type', 'image/svg+xml')
-      }
-
-      return c.body(content)
-    }
-
-    return c.notFound()
-  })
-
-  // Redirect root path to /inspector
-  app.get('/', (c) => {
-    return c.redirect('/inspector')
-  })
-
-  // Serve the main HTML file for /inspector and all other routes (SPA routing)
-  app.get('*', (c) => {
-    const indexPath = join(clientDistPath, 'index.html')
-    if (existsSync(indexPath)) {
-      const content = import('node:fs').then(fs => fs.readFileSync(indexPath, 'utf-8'))
-      return c.html(content)
-    }
-    return c.html(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>MCP Inspector</title>
-        </head>
-        <body>
-          <h1>MCP Inspector</h1>
-          <p>Client files not found. Please run 'yarn build' to build the UI.</p>
-          <p>API is available at <a href="/api/servers">/api/servers</a></p>
-        </body>
-      </html>
-    `)
-  })
-}
-else {
-  console.warn(`⚠️  MCP Inspector client files not found at ${clientDistPath}`)
-  console.warn(`   Run 'yarn build' in the inspector package to build the UI`)
-
-  // Fallback for when client is not built
-  app.get('*', (c) => {
-    return c.html(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <title>MCP Inspector</title>
-        </head>
-        <body>
-          <h1>MCP Inspector</h1>
-          <p>Client files not found. Please run 'yarn build' to build the UI.</p>
-          <p>API is available at <a href="/api/servers">/api/servers</a></p>
-        </body>
-      </html>
-    `)
-  })
-}
-
-// Start the server
-async function startServer() {
-  try {
-    // In development mode, use port 3001 for API server
-    // In production/standalone mode, try 3001 first, then 3002 as fallback
-    const isDev = process.env.NODE_ENV === 'development' || process.env.VITE_DEV === 'true'
-
-    let port = 3001
-    const available = await isPortAvailable(port)
-
-    if (!available) {
-      if (isDev) {
-        console.error(`❌ Port ${port} is not available. Please stop the process using this port and try again.`)
-        process.exit(1)
-      }
-      else {
-        // In standalone mode, try fallback port
-        const fallbackPort = 3002
-        console.warn(`⚠️  Port ${port} is not available, trying ${fallbackPort}`)
-        const fallbackAvailable = await isPortAvailable(fallbackPort)
-
-        if (!fallbackAvailable) {
-          console.error(`❌ Neither port ${port} nor ${fallbackPort} is available. Please stop the processes using these ports and try again.`)
-          process.exit(1)
-        }
-
-        port = fallbackPort
-      }
-    }
-
-    serve({
-      fetch: app.fetch,
-      port,
-    })
-
-    if (isDev) {
-      console.warn(`🚀 MCP Inspector API server running on http://localhost:${port}`)
-      console.warn(`🌐 Vite dev server should be running on http://localhost:3000`)
-    }
-    else {
-      console.warn(`🚀 MCP Inspector running on http://localhost:${port}`)
-    }
-
-    // Auto-open browser in development
-    if (process.env.NODE_ENV !== 'production') {
-      try {
-        const command = process.platform === 'win32' ? 'start' : process.platform === 'darwin' ? 'open' : 'xdg-open'
-        const url = isDev ? 'http://localhost:3000' : `http://localhost:${port}`
-        await execAsync(`${command} ${url}`)
-        console.warn(`🌐 Browser opened automatically`)
-      }
-      catch {
-        const url = isDev ? 'http://localhost:3000' : `http://localhost:${port}`
-        console.warn(`🌐 Please open ${url} in your browser`)
-      }
-    }
-
-    return { port, fetch: app.fetch }
-  }
-  catch (error) {
-    console.error('Failed to start server:', error)
-    process.exit(1)
-  }
-}
-
-// Start the server if this file is run directly
-if (import.meta.url === `file://${process.argv[1]}`) {
-  startServer()
-}
-
-export default { startServer }
diff --git a/packages/inspector/vite.config.ts b/packages/inspector/vite.config.ts
index 0d452291..512b0fb1 100644
--- a/packages/inspector/vite.config.ts
+++ b/packages/inspector/vite.config.ts
@@ -1,5 +1,5 @@
-import path from 'node:path'
 import { readFileSync } from 'node:fs'
+import path from 'node:path'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
@@ -39,7 +39,7 @@ export default defineConfig({
     // Define process.env for browser compatibility
     'process.env': {},
     // Inject version from package.json at build time
-    __INSPECTOR_VERSION__: JSON.stringify(packageJson.version),
+    '__INSPECTOR_VERSION__': JSON.stringify(packageJson.version),
   },
   optimizeDeps: {
     include: ['mcp-use/react'],
@@ -48,7 +48,8 @@ export default defineConfig({
     port: 3000,
     host: true, // Allow external connections
     proxy: {
-      '/api': {
+      // Proxy API requests to the backend server
+      '^/inspector/api/.*': {
         target: 'http://localhost:3001',
         changeOrigin: true,
       },
diff --git a/packages/mcp-use/examples/server/standalone/package.json b/packages/mcp-use/examples/server/standalone/package.json
new file mode 100644
index 00000000..b480978a
--- /dev/null
+++ b/packages/mcp-use/examples/server/standalone/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "standalone-mcp-example",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Standalone MCP server example",
+  "main": "dist/server.js",
+  "scripts": {
+    "build": "mcp-use build",
+    "dev": "mcp-use dev",
+    "start": "mcp-use start"
+  },
+  "dependencies": {
+    "mcp-use": "workspace:*"
+  },
+  "devDependencies": {
+    "@mcp-use/cli": "workspace:*",
+    "@mcp-use/inspector": "workspace:*",
+    "@types/bun": "latest",
+    "typescript": "^5.3.3"
+  }
+}
\ No newline at end of file
diff --git a/packages/mcp-use/index.ts b/packages/mcp-use/index.ts
index c368536f..3ec34719 100644
--- a/packages/mcp-use/index.ts
+++ b/packages/mcp-use/index.ts
@@ -21,7 +21,7 @@ export * from './src/managers/tools/index.js'
 export { type ObservabilityConfig, ObservabilityManager } from './src/observability/index.js'
 
 // Export server utilities
-export { createMCPServer, McpServer } from './src/server/index.js'
+export { createMCPServer } from './src/server/index.js'
 
 export type {
   InputDefinition,
diff --git a/packages/mcp-use/src/server/index.ts b/packages/mcp-use/src/server/index.ts
index 36f18315..52e80796 100644
--- a/packages/mcp-use/src/server/index.ts
+++ b/packages/mcp-use/src/server/index.ts
@@ -1,4 +1,6 @@
-export { createMCPServer, McpServer } from './mcp-server.js'
+export { 
+  createMCPServer
+} from './mcp-server.js'
 export type {
   InputDefinition,
   PromptDefinition,
diff --git a/packages/mcp-use/src/server/mcp-server.ts b/packages/mcp-use/src/server/mcp-server.ts
index d2ad9054..6591fb5b 100644
--- a/packages/mcp-use/src/server/mcp-server.ts
+++ b/packages/mcp-use/src/server/mcp-server.ts
@@ -37,6 +37,9 @@ export class McpServer {
     })
     this.app = express()
     
+    // Parse JSON bodies
+    this.app.use(express.json())
+    
     // TODO enable override
     // Enable CORS by default
     this.app.use((req, res, next) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 730aa105..c8c79ec5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ overrides:
 
 patchedDependencies:
   '@mcp-ui/server@5.11.0':
-    hash: q4o7znptjmfaz7quhzmm6hp4jy
+    hash: 5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11
     path: patches/@mcp-ui__server@5.11.0.patch
 
 importers:
@@ -168,9 +168,6 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      express:
-        specifier: ^4.18.0
-        version: 4.21.2
       framer-motion:
         specifier: ^12.23.22
         version: 12.23.22(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -220,6 +217,18 @@ importers:
       '@eslint-react/eslint-plugin':
         specifier: ^1.38.4
         version: 1.53.1(eslint@9.37.0(jiti@2.6.1))(ts-api-utils@2.1.0(typescript@5.9.3))(typescript@5.9.3)
+      '@langchain/anthropic':
+        specifier: ^0.3.26
+        version: 0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)))(zod@4.1.12)
+      '@langchain/core':
+        specifier: ^0.3.72
+        version: 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12))
+      '@langchain/google-genai':
+        specifier: ^0.2.18
+        version: 0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)))
+      '@langchain/openai':
+        specifier: ^0.6.9
+        version: 0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)))(ws@8.18.3)
       '@radix-ui/react-slot':
         specifier: ^1.2.3
         version: 1.2.3(@types/react@19.2.2)(react@19.2.0)
@@ -250,6 +259,9 @@ importers:
       eslint-plugin-react-refresh:
         specifier: ^0.4.0
         version: 0.4.23(eslint@9.37.0(jiti@2.6.1))
+      express:
+        specifier: ^4.21.2
+        version: 4.21.2
       tailwindcss:
         specifier: ^4.1.14
         version: 4.1.14
@@ -282,7 +294,7 @@ importers:
         version: 0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(ws@8.18.3)
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       '@mcp-use/inspector':
         specifier: workspace:*
         version: link:../inspector
@@ -303,13 +315,13 @@ importers:
         version: 16.6.1
       langchain:
         specifier: ^0.3.27
-        version: 0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3)
+        version: 0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3)
       langfuse:
         specifier: ^3.32.0
         version: 3.38.5
       langfuse-langchain:
         specifier: ^3.38.4
-        version: 3.38.5(langchain@0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3))
+        version: 3.38.5(langchain@0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3))
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -430,14 +442,30 @@ importers:
         specifier: ^4.4.0
         version: 4.5.14(@types/node@24.7.0)(lightningcss@1.30.1)
 
+  packages/mcp-use/examples/server/standalone:
+    dependencies:
+      mcp-use:
+        specifier: workspace:*
+        version: link:../../..
+    devDependencies:
+      '@mcp-use/cli':
+        specifier: workspace:*
+        version: link:../../../../cli
+      '@mcp-use/inspector':
+        specifier: workspace:*
+        version: link:../../../../inspector
+      '@types/bun':
+        specifier: latest
+        version: 1.3.0(@types/react@19.2.2)
+      typescript:
+        specifier: ^5.3.3
+        version: 5.9.3
+
   test_app:
     dependencies:
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
-      '@mcp-use/inspector':
-        specifier: workspace:*
-        version: link:../packages/inspector
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -451,6 +479,9 @@ importers:
       '@mcp-use/cli':
         specifier: workspace:*
         version: link:../packages/cli
+      '@mcp-use/inspector':
+        specifier: workspace:*
+        version: link:../packages/inspector
       '@types/cors':
         specifier: ^2.8.0
         version: 2.8.19
@@ -467,7 +498,7 @@ importers:
         specifier: ^18.0.0
         version: 18.3.7(@types/react@18.3.26)
       concurrently:
-        specifier: ^8.2.2
+        specifier: ^8.0.0
         version: 8.2.2
       esbuild:
         specifier: ^0.23.0
@@ -1652,6 +1683,10 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@google/generative-ai@0.24.1':
+    resolution: {integrity: sha512-MqO+MLfM6kjxcKoy0p1wRzG3b4ZZXtPI+z2IE26UogS2Cm/XHO+7gGRBh6gcJsOiIVoH93UwKvW4HdgiOZCy9Q==}
+    engines: {node: '>=18.0.0'}
+
   '@hono/node-server@1.19.5':
     resolution: {integrity: sha512-iBuhh+uaaggeAuf+TftcjZyWh2GEgZcVGXkNtskLVoWaXhnJtC5HLHrU8W1KHDoucqO1MswwglmkWLFyiDn4WQ==}
     engines: {node: '>=18.14.1'}
@@ -1724,6 +1759,12 @@ packages:
     resolution: {integrity: sha512-Nn0x9erQlK3zgtRU1Z8NUjLuyW0gzdclMsvLQ6wwLeDqV91pE+YKl6uQb+L2NUDs4F0N7c2Zncgz46HxrvPzuA==}
     engines: {node: '>=18'}
 
+  '@langchain/google-genai@0.2.18':
+    resolution: {integrity: sha512-m9EiN3VKC01A7/625YQ6Q1Lqq8zueewADX4W5Tcme4RImN75zkg2Z7FYbD1Fo6Zwolc4wBNO6LUtbg3no4rv1Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@langchain/core': '>=0.3.58 <0.4.0'
+
   '@langchain/openai@0.6.14':
     resolution: {integrity: sha512-SM/xJOFDxT9NN/07fvhNB5dgAsIOQaLhmANxrRlSQ7Qs1zImMrzOvq+/5JP/ifpC/YxcgEnt4dblKVqvNU/C5A==}
     engines: {node: '>=18'}
@@ -2539,6 +2580,9 @@ packages:
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
+  '@types/bun@1.3.0':
+    resolution: {integrity: sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -3080,6 +3124,11 @@ packages:
     resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
     engines: {node: '>=18.20'}
 
+  bun-types@1.3.0:
+    resolution: {integrity: sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ==}
+    peerDependencies:
+      '@types/react': ^19
+
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -6752,6 +6801,12 @@ snapshots:
     optionalDependencies:
       zod: 3.25.76
 
+  '@anthropic-ai/sdk@0.65.0(zod@4.1.12)':
+    dependencies:
+      json-schema-to-ts: 3.1.1
+    optionalDependencies:
+      zod: 4.1.12
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -7629,6 +7684,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@google/generative-ai@0.24.1': {}
+
   '@hono/node-server@1.19.5(hono@4.9.10)':
     dependencies:
       hono: 4.9.10
@@ -7700,6 +7757,14 @@ snapshots:
     transitivePeerDependencies:
       - zod
 
+  '@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)))(zod@4.1.12)':
+    dependencies:
+      '@anthropic-ai/sdk': 0.65.0(zod@4.1.12)
+      '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12))
+      fast-xml-parser: 4.5.3
+    transitivePeerDependencies:
+      - zod
+
   '@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))':
     dependencies:
       '@cfworker/json-schema': 4.1.1
@@ -7720,6 +7785,39 @@ snapshots:
       - '@opentelemetry/sdk-trace-base'
       - openai
 
+  '@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12))':
+    dependencies:
+      '@cfworker/json-schema': 4.1.1
+      ansi-styles: 5.2.0
+      camelcase: 6.3.0
+      decamelize: 1.2.0
+      js-tiktoken: 1.0.21
+      langsmith: 0.3.73(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12))
+      mustache: 4.2.0
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      uuid: 10.0.0
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@opentelemetry/api'
+      - '@opentelemetry/exporter-trace-otlp-proto'
+      - '@opentelemetry/sdk-trace-base'
+      - openai
+
+  '@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))':
+    dependencies:
+      '@google/generative-ai': 0.24.1
+      '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))
+      uuid: 11.1.0
+    optional: true
+
+  '@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)))':
+    dependencies:
+      '@google/generative-ai': 0.24.1
+      '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12))
+      uuid: 11.1.0
+
   '@langchain/openai@0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(ws@8.18.3)':
     dependencies:
       '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))
@@ -7729,6 +7827,15 @@ snapshots:
     transitivePeerDependencies:
       - ws
 
+  '@langchain/openai@0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)))(ws@8.18.3)':
+    dependencies:
+      '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12))
+      js-tiktoken: 1.0.21
+      openai: 5.12.2(ws@8.18.3)(zod@3.25.76)
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - ws
+
   '@langchain/textsplitters@0.1.0(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))':
     dependencies:
       '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))
@@ -7764,7 +7871,7 @@ snapshots:
       - preact
       - supports-color
 
-  '@mcp-ui/server@5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)':
+  '@mcp-ui/server@5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)':
     dependencies:
       '@modelcontextprotocol/sdk': 1.12.1
     transitivePeerDependencies:
@@ -8480,6 +8587,12 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/node': 20.19.19
 
+  '@types/bun@1.3.0(@types/react@19.2.2)':
+    dependencies:
+      bun-types: 1.3.0(@types/react@19.2.2)
+    transitivePeerDependencies:
+      - '@types/react'
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 20.19.19
@@ -9131,6 +9244,11 @@ snapshots:
 
   builtin-modules@5.0.0: {}
 
+  bun-types@1.3.0(@types/react@19.2.2):
+    dependencies:
+      '@types/node': 20.19.19
+      '@types/react': 19.2.2
+
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
@@ -11004,7 +11122,7 @@ snapshots:
 
   kuler@2.0.0: {}
 
-  langchain@0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3):
+  langchain@0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3):
     dependencies:
       '@langchain/core': 0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))
       '@langchain/openai': 0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(ws@8.18.3)
@@ -11020,6 +11138,7 @@ snapshots:
       zod: 3.25.76
     optionalDependencies:
       '@langchain/anthropic': 0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76)
+      '@langchain/google-genai': 0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))
     transitivePeerDependencies:
       - '@opentelemetry/api'
       - '@opentelemetry/exporter-trace-otlp-proto'
@@ -11031,9 +11150,9 @@ snapshots:
     dependencies:
       mustache: 4.2.0
 
-  langfuse-langchain@3.38.5(langchain@0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3)):
+  langfuse-langchain@3.38.5(langchain@0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3)):
     dependencies:
-      langchain: 0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3)
+      langchain: 0.3.35(@langchain/anthropic@0.3.30(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(zod@3.25.76))(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(@langchain/google-genai@0.2.18(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))))(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76))(ws@8.18.3)
       langfuse: 3.38.5
       langfuse-core: 3.38.5
 
@@ -11054,6 +11173,19 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       openai: 5.12.2(ws@8.18.3)(zod@3.25.76)
 
+  langsmith@0.3.73(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@4.1.12)):
+    dependencies:
+      '@types/uuid': 10.0.0
+      chalk: 4.1.2
+      console-table-printer: 2.14.6
+      p-queue: 6.6.2
+      p-retry: 4.6.2
+      semver: 7.7.3
+      uuid: 10.0.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.0
+      openai: 5.12.2(ws@8.18.3)(zod@4.1.12)
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -11712,6 +11844,12 @@ snapshots:
       ws: 8.18.3
       zod: 3.25.76
 
+  openai@5.12.2(ws@8.18.3)(zod@4.1.12):
+    optionalDependencies:
+      ws: 8.18.3
+      zod: 4.1.12
+    optional: true
+
   openapi-types@12.1.3: {}
 
   optionator@0.9.4:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 57a87780..439a9307 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,4 +1,5 @@
 packages:
   - 'packages/*'
   - 'packages/mcp-use/examples/client/react'
+  - 'packages/mcp-use/examples/server/standalone'
   - 'test_app'
diff --git a/test_app/package.json b/test_app/package.json
index ebaff800..187f3c70 100644
--- a/test_app/package.json
+++ b/test_app/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "test-ui",
+  "name": "test_app",
   "type": "module",
   "version": "1.0.0",
-  "description": "MCP server: test-ui",
+  "description": "MCP server: test_app",
   "author": "",
   "license": "MIT",
   "keywords": [
@@ -22,23 +22,19 @@
   },
   "dependencies": {
     "@mcp-ui/server": "^5.11.0",
-    "@mcp-use/inspector": "^0.3.2",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "^1.0.0"
-  },
-  "private": true,
-  "publishConfig": {
-    "access": "restricted"
+    "mcp-use": "workspace:*"
   },
   "devDependencies": {
-    "@mcp-use/cli": "^2.1.2",
+    "@mcp-use/cli": "workspace:*",
+    "@mcp-use/inspector": "workspace:*",
     "@types/cors": "^2.8.0",
     "@types/express": "^4.17.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^8.0.0",
     "esbuild": "^0.23.0",
     "globby": "^14.0.2",
     "react": "^18.0.0",

From a25db00750c786e91d5b44f6502390f7472296f9 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Sat, 11 Oct 2025 11:21:58 +0200
Subject: [PATCH 07/21] refactor: rename standalone server example to simple
 and update dependencies

- 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.
---
 packages/cli/src/index.ts                     | 16 +----
 .../mcp-use/examples/server/simple/README.md  | 65 +++++++++++++++++++
 .../{standalone => simple}/package.json       | 20 ++++--
 .../examples/server/simple/src/server.ts      | 51 +++++++++++++++
 .../examples/server/simple/tsconfig.json      | 18 +++++
 packages/mcp-use/src/server/mcp-server.ts     |  2 +-
 packages/mcp-use/src/server/types.ts          | 15 +++--
 pnpm-lock.yaml                                | 35 +++-------
 pnpm-workspace.yaml                           |  2 +-
 9 files changed, 169 insertions(+), 55 deletions(-)
 create mode 100644 packages/mcp-use/examples/server/simple/README.md
 rename packages/mcp-use/examples/server/{standalone => simple}/package.json (50%)
 create mode 100644 packages/mcp-use/examples/server/simple/src/server.ts
 create mode 100644 packages/mcp-use/examples/server/simple/tsconfig.json

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 32bc0ce7..d24cba25 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -155,25 +155,11 @@ program
       // 3. Server with tsx
       const serverProc = spawn('npx', ['tsx', 'watch', serverFile], {
         cwd: projectPath,
-        stdio: 'pipe',
+        stdio: 'inherit',
         shell: false,
         env: { ...process.env, PORT: String(port) },
       });
       
-      // Handle server errors gracefully
-      serverProc.stderr?.on('data', (data) => {
-        const output = data.toString();
-        if (output.includes('EADDRINUSE')) {
-          console.log(`\x1b[31m✗\x1b[0m Port ${port} is still in use. Please try a different port with --port`);
-          console.log(`\x1b[90mHint: Use --port 3001 or kill the process using port ${port}\x1b[0m`);
-          process.exit(1);
-        }
-      });
-      
-      serverProc.stdout?.on('data', (data) => {
-        process.stdout.write(data);
-      });
-      
       processes.push(serverProc);
 
       // Auto-open inspector if enabled
diff --git a/packages/mcp-use/examples/server/simple/README.md b/packages/mcp-use/examples/server/simple/README.md
new file mode 100644
index 00000000..f89d1f7e
--- /dev/null
+++ b/packages/mcp-use/examples/server/simple/README.md
@@ -0,0 +1,65 @@
+# Simple MCP Server Example
+
+A minimal example of an MCP server with a single "hello world" tool.
+
+## Features
+
+- Single `hello-world` tool that returns "Hello World!"
+- MCP Inspector integration
+- TypeScript support
+- Simple and easy to understand
+
+## Getting Started
+
+### Development
+
+```bash
+# Install dependencies
+yarn install
+
+# Start development server
+yarn dev
+```
+
+This will start:
+- MCP server on port 3000
+- MCP Inspector at http://localhost:3000/inspector
+
+### Production
+
+```bash
+# Build the server
+yarn build
+
+# Run the built server
+yarn start
+```
+
+## Usage
+
+The server provides one tool:
+
+- `hello-world` - Returns "Hello World!" message
+
+## Project Structure
+
+```
+simple-example/
+├── src/
+│   └── server.ts              # MCP server with hello world tool
+├── dist/                      # Built files
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## API Reference
+
+### MCP Tools
+
+- `hello-world` - A simple tool that returns hello world
+
+## Learn More
+
+- [MCP Documentation](https://modelcontextprotocol.io)
+- [mcp-use Documentation](https://docs.mcp-use.io)
diff --git a/packages/mcp-use/examples/server/standalone/package.json b/packages/mcp-use/examples/server/simple/package.json
similarity index 50%
rename from packages/mcp-use/examples/server/standalone/package.json
rename to packages/mcp-use/examples/server/simple/package.json
index b480978a..50a9e62b 100644
--- a/packages/mcp-use/examples/server/standalone/package.json
+++ b/packages/mcp-use/examples/server/simple/package.json
@@ -1,8 +1,16 @@
 {
-  "name": "standalone-mcp-example",
+  "name": "simple-example",
   "type": "module",
   "version": "1.0.0",
-  "description": "Standalone MCP server example",
+  "description": "Simple MCP server example with hello world tool",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "mcp",
+    "server",
+    "example",
+    "hello-world"
+  ],
   "main": "dist/server.js",
   "scripts": {
     "build": "mcp-use build",
@@ -14,8 +22,8 @@
   },
   "devDependencies": {
     "@mcp-use/cli": "workspace:*",
-    "@mcp-use/inspector": "workspace:*",
-    "@types/bun": "latest",
-    "typescript": "^5.3.3"
+    "@types/node": "^20.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/mcp-use/examples/server/simple/src/server.ts b/packages/mcp-use/examples/server/simple/src/server.ts
new file mode 100644
index 00000000..a4f15769
--- /dev/null
+++ b/packages/mcp-use/examples/server/simple/src/server.ts
@@ -0,0 +1,51 @@
+import { createMCPServer } from 'mcp-use'
+
+// Create an MCP server (which is also an Express app)
+// The MCP Inspector is automatically mounted at /inspector
+const server = createMCPServer('simple-example-server', {
+  version: '1.0.0',
+  description: 'A simple MCP server example',
+})
+
+console.log('Server type:', typeof server)
+console.log('Server has tool method:', 'tool' in server)
+console.log('Server tool method:', typeof server.tool)
+console.log('Server keys:', Object.keys(server))
+console.log('Server prototype:', Object.getOwnPropertyNames(Object.getPrototypeOf(server)))
+
+
+const PORT = process.env.PORT || 3000
+
+// Simple tool that returns hello world
+server.tool({
+  name: 'hello-world',
+  description: 'A simple tool that returns hello world',
+  inputs: [],
+  fn: async () => {
+    return {
+      content: [
+        {
+          type: 'text',
+          text: 'Hello World!'
+        }
+      ]
+    }
+  },
+})
+
+server.resource({
+  name: 'test',
+  uri: 'resource://test',
+  mimeType: 'text/plain',
+  description: 'A test resource',
+  fn: async () => {
+    return 'ciao'
+  }
+})
+
+// Start the server (MCP endpoints auto-mounted at /mcp)
+server.listen(PORT, () => {
+  console.log(`🚀 Simple Example Server running on port ${PORT}`)
+  console.log(`📊 Inspector available at http://localhost:${PORT}/inspector`)
+  console.log(`🔧 MCP endpoint at http://localhost:${PORT}/mcp`)
+})
diff --git a/packages/mcp-use/examples/server/simple/tsconfig.json b/packages/mcp-use/examples/server/simple/tsconfig.json
new file mode 100644
index 00000000..b223ac84
--- /dev/null
+++ b/packages/mcp-use/examples/server/simple/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/mcp-use/src/server/mcp-server.ts b/packages/mcp-use/src/server/mcp-server.ts
index 6591fb5b..bd2d5afa 100644
--- a/packages/mcp-use/src/server/mcp-server.ts
+++ b/packages/mcp-use/src/server/mcp-server.ts
@@ -95,7 +95,7 @@ export class McpServer {
     this.server.resource(
       resourceDefinition.name,
       resourceDefinition.uri,
-      resourceDefinition.resource,
+      {mimeType: resourceDefinition.mimeType, description: resourceDefinition.description},
       async () => {
         return await resourceDefinition.fn()
       },
diff --git a/packages/mcp-use/src/server/types.ts b/packages/mcp-use/src/server/types.ts
index 9aee2ea8..14dc1772 100644
--- a/packages/mcp-use/src/server/types.ts
+++ b/packages/mcp-use/src/server/types.ts
@@ -22,13 +22,18 @@ export interface ResourceTemplateDefinition {
 }
 
 export interface ResourceDefinition {
+  /** Unique identifier for the resource */
   name: string
+  /** URI pattern for accessing the resource (e.g., 'config://app-settings') */
   uri: string
-  resource: {
-    title?: string
-    description?: string
-    mimeType: string
-  }
+  /** Resource metadata including MIME type and description */
+  /** Optional title for the resource */
+  title?: string
+  /** Optional description of the resource */
+  description?: string
+  /** MIME type of the resource content (required) */
+  mimeType: string
+  /** Async function that returns the resource content */
   fn: ResourceHandler
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c8c79ec5..6f2621a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -442,7 +442,7 @@ importers:
         specifier: ^4.4.0
         version: 4.5.14(@types/node@24.7.0)(lightningcss@1.30.1)
 
-  packages/mcp-use/examples/server/standalone:
+  packages/mcp-use/examples/server/simple:
     dependencies:
       mcp-use:
         specifier: workspace:*
@@ -451,14 +451,14 @@ importers:
       '@mcp-use/cli':
         specifier: workspace:*
         version: link:../../../../cli
-      '@mcp-use/inspector':
-        specifier: workspace:*
-        version: link:../../../../inspector
-      '@types/bun':
-        specifier: latest
-        version: 1.3.0(@types/react@19.2.2)
+      '@types/node':
+        specifier: ^20.0.0
+        version: 20.19.19
+      tsx:
+        specifier: ^4.0.0
+        version: 4.20.6
       typescript:
-        specifier: ^5.3.3
+        specifier: ^5.0.0
         version: 5.9.3
 
   test_app:
@@ -2580,9 +2580,6 @@ packages:
   '@types/body-parser@1.19.6':
     resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
 
-  '@types/bun@1.3.0':
-    resolution: {integrity: sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA==}
-
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -3124,11 +3121,6 @@ packages:
     resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
     engines: {node: '>=18.20'}
 
-  bun-types@1.3.0:
-    resolution: {integrity: sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ==}
-    peerDependencies:
-      '@types/react': ^19
-
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -8587,12 +8579,6 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/node': 20.19.19
 
-  '@types/bun@1.3.0(@types/react@19.2.2)':
-    dependencies:
-      bun-types: 1.3.0(@types/react@19.2.2)
-    transitivePeerDependencies:
-      - '@types/react'
-
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 20.19.19
@@ -9244,11 +9230,6 @@ snapshots:
 
   builtin-modules@5.0.0: {}
 
-  bun-types@1.3.0(@types/react@19.2.2):
-    dependencies:
-      '@types/node': 20.19.19
-      '@types/react': 19.2.2
-
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 439a9307..c6509dae 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,5 @@
 packages:
   - 'packages/*'
   - 'packages/mcp-use/examples/client/react'
-  - 'packages/mcp-use/examples/server/standalone'
+  - 'packages/mcp-use/examples/server/simple'
   - 'test_app'

From 1dbe76356d4e13dd7c0c81e026f07bb44bd44e24 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Sat, 11 Oct 2025 11:49:16 +0200
Subject: [PATCH 08/21] feat: enhance resource handling and add pagination
 support

- 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`.
---
 .../examples/server/simple/src/server.ts      |  15 +-
 packages/mcp-use/src/connectors/base.ts       |  83 ++++++++-
 packages/mcp-use/src/server/mcp-server.ts     | 157 ++++++++++++++++--
 packages/mcp-use/src/server/types.ts          |  33 +++-
 4 files changed, 264 insertions(+), 24 deletions(-)

diff --git a/packages/mcp-use/examples/server/simple/src/server.ts b/packages/mcp-use/examples/server/simple/src/server.ts
index a4f15769..50c4bb67 100644
--- a/packages/mcp-use/examples/server/simple/src/server.ts
+++ b/packages/mcp-use/examples/server/simple/src/server.ts
@@ -36,10 +36,21 @@ server.tool({
 server.resource({
   name: 'test',
   uri: 'resource://test',
+  title: 'Test Resource',
   mimeType: 'text/plain',
-  description: 'A test resource',
+  description: 'A test resource that returns a simple greeting',
+  annotations: {
+    audience: ['user', 'assistant'],
+    priority: 0.5
+  },
   fn: async () => {
-    return 'ciao'
+    return {
+      contents: [{
+        uri: 'resource://test',
+        mimeType: 'text/plain',
+        text: 'ciao'
+      }]
+    }
   }
 })
 
diff --git a/packages/mcp-use/src/connectors/base.ts b/packages/mcp-use/src/connectors/base.ts
index f05cdcb5..e7feeb1f 100644
--- a/packages/mcp-use/src/connectors/base.ts
+++ b/packages/mcp-use/src/connectors/base.ts
@@ -99,14 +99,59 @@ export abstract class BaseConnector {
     return res as CallToolResult
   }
 
-  /** List resources from the server. */
-  async listResources(options?: RequestOptions) {
+  /**
+   * List resources from the server with optional pagination
+   * 
+   * @param cursor - Optional cursor for pagination
+   * @param options - Request options
+   * @returns Resource list with optional nextCursor for pagination
+   */
+  async listResources(cursor?: string, options?: RequestOptions) {
+    if (!this.client) {
+      throw new Error('MCP client is not connected')
+    }
+
+    logger.debug('Listing resources', cursor ? `with cursor: ${cursor}` : '')
+    return await this.client.listResources({ cursor }, options)
+  }
+
+  /**
+   * List all resources from the server, automatically handling pagination
+   * 
+   * @param options - Request options
+   * @returns Complete list of all resources
+   */
+  async listAllResources(options?: RequestOptions) {
+    if (!this.client) {
+      throw new Error('MCP client is not connected')
+    }
+
+    logger.debug('Listing all resources (with auto-pagination)')
+    const allResources: any[] = []
+    let cursor: string | undefined = undefined
+
+    do {
+      const result = await this.client.listResources({ cursor }, options)
+      allResources.push(...(result.resources || []))
+      cursor = result.nextCursor
+    } while (cursor)
+
+    return { resources: allResources }
+  }
+
+  /**
+   * List resource templates from the server
+   * 
+   * @param options - Request options
+   * @returns List of available resource templates
+   */
+  async listResourceTemplates(options?: RequestOptions) {
     if (!this.client) {
       throw new Error('MCP client is not connected')
     }
 
-    logger.debug('Listing resources')
-    return await this.client.listResources(undefined, options)
+    logger.debug('Listing resource templates')
+    return await this.client.listResourceTemplates(undefined, options)
   }
 
   /** Read a resource by URI. */
@@ -120,6 +165,36 @@ export abstract class BaseConnector {
     return { content: res.content, mimeType: res.mimeType }
   }
 
+  /**
+   * Subscribe to resource updates
+   * 
+   * @param uri - URI of the resource to subscribe to
+   * @param options - Request options
+   */
+  async subscribeToResource(uri: string, options?: RequestOptions) {
+    if (!this.client) {
+      throw new Error('MCP client is not connected')
+    }
+
+    logger.debug(`Subscribing to resource: ${uri}`)
+    return await this.client.subscribeResource({ uri }, options)
+  }
+
+  /**
+   * Unsubscribe from resource updates
+   * 
+   * @param uri - URI of the resource to unsubscribe from
+   * @param options - Request options
+   */
+  async unsubscribeFromResource(uri: string, options?: RequestOptions) {
+    if (!this.client) {
+      throw new Error('MCP client is not connected')
+    }
+
+    logger.debug(`Unsubscribing from resource: ${uri}`)
+    return await this.client.unsubscribeResource({ uri }, options)
+  }
+
   async listPrompts() {
     if (!this.client) {
       throw new Error('MCP client is not connected')
diff --git a/packages/mcp-use/src/server/mcp-server.ts b/packages/mcp-use/src/server/mcp-server.ts
index bd2d5afa..20b6bb50 100644
--- a/packages/mcp-use/src/server/mcp-server.ts
+++ b/packages/mcp-use/src/server/mcp-server.ts
@@ -1,10 +1,11 @@
 import type {
   PromptDefinition,
   ResourceDefinition,
+  ResourceTemplateDefinition,
   ServerConfig,
   ToolDefinition,
 } from './types.js'
-import { McpServer as OfficialMcpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { McpServer as OfficialMcpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { z } from 'zod'
 import express, { type Express } from 'express'
 import { existsSync, readdirSync } from 'node:fs'
@@ -77,7 +78,10 @@ export class McpServer {
    * @param resourceDefinition - Configuration object containing resource metadata and handler function
    * @param resourceDefinition.name - Unique identifier for the resource
    * @param resourceDefinition.uri - URI pattern for accessing the resource
-   * @param resourceDefinition.resource - Resource metadata (mime type, description, etc.)
+   * @param resourceDefinition.title - Optional human-readable title for the resource
+   * @param resourceDefinition.description - Optional description of the resource
+   * @param resourceDefinition.mimeType - MIME type of the resource content
+   * @param resourceDefinition.annotations - Optional annotations (audience, priority, lastModified)
    * @param resourceDefinition.fn - Async function that returns the resource content
    * @returns The server instance for method chaining
    * 
@@ -86,8 +90,20 @@ export class McpServer {
    * server.resource({
    *   name: 'config',
    *   uri: 'config://app-settings',
-   *   resource: { mimeType: 'application/json' },
-   *   fn: async () => ({ theme: 'dark', language: 'en' })
+   *   title: 'Application Settings',
+   *   mimeType: 'application/json',
+   *   description: 'Current application configuration',
+   *   annotations: {
+   *     audience: ['user'],
+   *     priority: 0.8
+   *   },
+   *   fn: async () => ({
+   *     contents: [{
+   *       uri: 'config://app-settings',
+   *       mimeType: 'application/json',
+   *       text: JSON.stringify({ theme: 'dark', language: 'en' })
+   *     }]
+   *   })
    * })
    * ```
    */
@@ -95,7 +111,13 @@ export class McpServer {
     this.server.resource(
       resourceDefinition.name,
       resourceDefinition.uri,
-      {mimeType: resourceDefinition.mimeType, description: resourceDefinition.description},
+      {
+        name: resourceDefinition.name,
+        title: resourceDefinition.title,
+        description: resourceDefinition.description,
+        mimeType: resourceDefinition.mimeType,
+        annotations: resourceDefinition.annotations,
+      },
       async () => {
         return await resourceDefinition.fn()
       },
@@ -105,18 +127,79 @@ export class McpServer {
 
   /**
    * Define a dynamic resource template with parameters
+   * 
+   * Registers a parameterized resource template with the MCP server. Templates use URI
+   * patterns with placeholders that can be filled in at request time, allowing dynamic
+   * resource generation based on parameters.
+   * 
+   * @param resourceTemplateDefinition - Configuration object for the resource template
+   * @param resourceTemplateDefinition.name - Unique identifier for the template
+   * @param resourceTemplateDefinition.resourceTemplate - ResourceTemplate object with uriTemplate and metadata
+   * @param resourceTemplateDefinition.fn - Async function that generates resource content from URI and params
+   * @returns The server instance for method chaining
+   * 
+   * @example
+   * ```typescript
+   * server.resourceTemplate({
+   *   name: 'user-profile',
+   *   resourceTemplate: {
+   *     uriTemplate: 'user://{userId}/profile',
+   *     name: 'User Profile',
+   *     mimeType: 'application/json'
+   *   },
+   *   fn: async (uri, params) => ({
+   *     contents: [{
+   *       uri: uri.toString(),
+   *       mimeType: 'application/json',
+   *       text: JSON.stringify({ userId: params.userId, name: 'John Doe' })
+   *     }]
+   *   })
+   * })
+   * ```
    */
-  // TODO implement, for some freaky reason this give errors
-  // resourceTemplate(resourceTemplateDefinition: ResourceTemplateDefinition): this {
-  //   this.server.resource(
-  //     resourceTemplateDefinition.name,
-  //     resourceTemplateDefinition.resourceTemplate,
-  //     async (uri, params) => {
-  //       return await resourceTemplateDefinition.fn(uri, params)
-  //     },
-  //   )
-  //   return this
-  // }
+  resourceTemplate(resourceTemplateDefinition: ResourceTemplateDefinition): this {
+    // Create ResourceTemplate instance from SDK
+    const template = new ResourceTemplate(
+      resourceTemplateDefinition.resourceTemplate.uriTemplate,
+      {
+        list: undefined, // Optional: callback to list all matching resources
+        complete: undefined // Optional: callback for auto-completion
+      }
+    )
+    
+    // Create metadata object with optional fields
+    const metadata: any = {}
+    if (resourceTemplateDefinition.resourceTemplate.name) {
+      metadata.name = resourceTemplateDefinition.resourceTemplate.name
+    }
+    if (resourceTemplateDefinition.title) {
+      metadata.title = resourceTemplateDefinition.title
+    }
+    if (resourceTemplateDefinition.description || resourceTemplateDefinition.resourceTemplate.description) {
+      metadata.description = resourceTemplateDefinition.description || resourceTemplateDefinition.resourceTemplate.description
+    }
+    if (resourceTemplateDefinition.resourceTemplate.mimeType) {
+      metadata.mimeType = resourceTemplateDefinition.resourceTemplate.mimeType
+    }
+    if (resourceTemplateDefinition.annotations) {
+      metadata.annotations = resourceTemplateDefinition.annotations
+    }
+    
+    this.server.resource(
+      resourceTemplateDefinition.name,
+      template,
+      metadata,
+      async (uri: URL) => {
+        // Parse URI parameters from the template
+        const params = this.parseTemplateUri(
+          resourceTemplateDefinition.resourceTemplate.uriTemplate,
+          uri.toString()
+        )
+        return await resourceTemplateDefinition.fn(uri, params)
+      },
+    )
+    return this
+  }
 
   /**
    * Define a tool that can be called by clients
@@ -552,6 +635,48 @@ export class McpServer {
     const matches = uriTemplate.match(/\{([^}]+)\}/g)
     return matches ? matches.map(match => match.slice(1, -1)) : []
   }
+
+  /**
+   * Parse parameter values from a URI based on a template
+   * 
+   * Extracts parameter values from an actual URI by matching it against a URI template.
+   * The template contains placeholders like {param} which are extracted as key-value pairs.
+   * 
+   * @param template - URI template with placeholders (e.g., "user://{userId}/posts/{postId}")
+   * @param uri - Actual URI to parse (e.g., "user://123/posts/456")
+   * @returns Object mapping parameter names to their values
+   * 
+   * @example
+   * ```typescript
+   * const params = this.parseTemplateUri("user://{userId}/posts/{postId}", "user://123/posts/456")
+   * // Returns: { userId: "123", postId: "456" }
+   * ```
+   */
+  private parseTemplateUri(template: string, uri: string): Record<string, string> {
+    const params: Record<string, string> = {}
+    
+    // Convert template to a regex pattern
+    // Escape special regex characters except {}
+    let regexPattern = template.replace(/[.*+?^$()[\]\\|]/g, '\\$&')
+    
+    // Replace {param} with named capture groups
+    const paramNames: string[] = []
+    regexPattern = regexPattern.replace(/\\\{([^}]+)\\\}/g, (_, paramName) => {
+      paramNames.push(paramName)
+      return '([^/]+)'
+    })
+    
+    const regex = new RegExp(`^${regexPattern}$`)
+    const match = uri.match(regex)
+    
+    if (match) {
+      paramNames.forEach((paramName, index) => {
+        params[paramName] = match[index + 1]
+      })
+    }
+    
+    return params
+  }
 }
 
 export type McpServerInstance = Omit<McpServer, keyof Express> & Express
diff --git a/packages/mcp-use/src/server/types.ts b/packages/mcp-use/src/server/types.ts
index 14dc1772..fe35de6d 100644
--- a/packages/mcp-use/src/server/types.ts
+++ b/packages/mcp-use/src/server/types.ts
@@ -1,4 +1,4 @@
-import type { CallToolResult, GetPromptResult, ReadResourceResult, ResourceTemplate} from '@modelcontextprotocol/sdk/types.js'
+import type { CallToolResult, GetPromptResult, ReadResourceResult} from '@modelcontextprotocol/sdk/types.js'
 export interface ServerConfig {
   name: string
   version: string
@@ -13,11 +13,38 @@ export interface InputDefinition {
   default?: any
 }
 
+/**
+ * Annotations provide hints to clients about how to use or display resources
+ */
+export interface ResourceAnnotations {
+  /** Intended audience(s) for this resource */
+  audience?: ('user' | 'assistant')[]
+  /** Priority from 0.0 (least important) to 1.0 (most important) */
+  priority?: number
+  /** ISO 8601 formatted timestamp of last modification */
+  lastModified?: string
+}
+
+/**
+ * Configuration for a resource template
+ */
+export interface ResourceTemplateConfig {
+  /** URI template with {param} placeholders (e.g., "user://{userId}/profile") */
+  uriTemplate: string
+  /** Name of the resource */
+  name?: string
+  /** MIME type of the resource content */
+  mimeType?: string
+  /** Description of the resource */
+  description?: string
+}
+
 export interface ResourceTemplateDefinition {
   name: string
-  resourceTemplate: ResourceTemplate
+  resourceTemplate: ResourceTemplateConfig
   title?: string
   description?: string
+  annotations?: ResourceAnnotations
   fn: ResourceTemplateHandler
 }
 
@@ -33,6 +60,8 @@ export interface ResourceDefinition {
   description?: string
   /** MIME type of the resource content (required) */
   mimeType: string
+  /** Optional annotations for the resource */
+  annotations?: ResourceAnnotations
   /** Async function that returns the resource content */
   fn: ResourceHandler
 }

From a5a504deeabe8c91c1c371dbae2faf39f2ceac18 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Sat, 11 Oct 2025 12:07:49 +0200
Subject: [PATCH 09/21] feat: enhance create-mcp-use-app with new UI templates
 and improved server 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.
---
 packages/create-mcp-use-app/package.json      |   2 +-
 .../scripts/copy-templates.js                 |  47 +++
 .../ui/resources/data-visualization.tsx       | 281 +++++++-----------
 .../src/templates/ui/src/server.ts            | 136 ++-------
 pnpm-lock.yaml                                |  60 +++-
 pnpm-workspace.yaml                           |   1 +
 test_app/package.json                         |   6 +-
 test_app/resources/data-visualization.tsx     | 279 +++++++----------
 test_app/resources/kanban-board.tsx           |   2 +-
 test_app/src/server.ts                        | 142 +--------
 10 files changed, 358 insertions(+), 598 deletions(-)
 create mode 100644 packages/create-mcp-use-app/scripts/copy-templates.js

diff --git a/packages/create-mcp-use-app/package.json b/packages/create-mcp-use-app/package.json
index 9840505f..b99e3445 100644
--- a/packages/create-mcp-use-app/package.json
+++ b/packages/create-mcp-use-app/package.json
@@ -32,7 +32,7 @@
   "scripts": {
     "build": "npm run clean && tsup src/index.ts --format esm && tsc --emitDeclarationOnly --declaration && npm run copy-templates",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
-    "copy-templates": "mkdir -p dist/templates && cp -r src/templates/* dist/templates/",
+    "copy-templates": "node scripts/copy-templates.js",
     "dev": "tsc --build --watch",
     "test": "vitest",
     "lint": "eslint ."
diff --git a/packages/create-mcp-use-app/scripts/copy-templates.js b/packages/create-mcp-use-app/scripts/copy-templates.js
new file mode 100644
index 00000000..98a7d4fa
--- /dev/null
+++ b/packages/create-mcp-use-app/scripts/copy-templates.js
@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+import { promises as fs } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const sourceDir = path.join(__dirname, '..', 'src', 'templates');
+const targetDir = path.join(__dirname, '..', 'dist', 'templates');
+
+async function copyDir(src, dest, excludeDirs = ['node_modules']) {
+  try {
+    await fs.mkdir(dest, { recursive: true });
+    
+    const entries = await fs.readdir(src, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+      
+      // Skip excluded directories
+      if (entry.isDirectory() && excludeDirs.includes(entry.name)) {
+        console.log(`Skipping ${entry.name}/`);
+        continue;
+      }
+      
+      if (entry.isDirectory()) {
+        await copyDir(srcPath, destPath, excludeDirs);
+      } else {
+        await fs.copyFile(srcPath, destPath);
+        console.log(`Copied ${entry.name}`);
+      }
+    }
+  } catch (error) {
+    console.error('Error copying templates:', error);
+    process.exit(1);
+  }
+}
+
+// Ensure target directory exists
+await fs.mkdir(targetDir, { recursive: true });
+
+console.log('Copying templates...');
+await copyDir(sourceDir, targetDir);
+console.log('Templates copied successfully!');
diff --git a/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx b/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx
index a67ff8af..4113c1af 100644
--- a/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx
+++ b/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx
@@ -1,6 +1,24 @@
 import React, { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 
+// CSS styles for dynamic colors
+const dynamicStyles = `
+  .dynamic-bar {
+    background-color: var(--dynamic-color, #3498db);
+    height: var(--dynamic-height, 100px);
+  }
+  .dynamic-color {
+    background-color: var(--dynamic-color, #3498db);
+  }
+`
+
+// Inject styles
+if (typeof document !== 'undefined') {
+  const styleElement = document.createElement('style')
+  styleElement.textContent = dynamicStyles
+  document.head.appendChild(styleElement)
+}
+
 interface DataPoint {
   label: string
   value: number
@@ -80,47 +98,24 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
     const maxValue = getMaxValue()
 
     return (
-      <div style={{ padding: '20px' }}>
-        <h3 style={{ marginBottom: '20px', color: '#2c3e50' }}>Bar Chart</h3>
-        <div style={{ display: 'flex', alignItems: 'end', gap: '10px', height: '300px' }}>
+      <div className="p-5">
+        <h3 className="mb-5 text-slate-700">Bar Chart</h3>
+        <div className="flex items-end gap-2.5 h-75">
           {data.map((point, index) => (
-            <div key={index} style={{ flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <div key={index} className="flex-1 flex flex-col items-center">
               <div
+                className="w-full rounded-t transition-all duration-300 cursor-pointer relative dynamic-bar"
                 style={{
-                  background: point.color || '#3498db',
-                  height: `${(point.value / maxValue) * 250}px`,
-                  width: '100%',
-                  borderRadius: '4px 4px 0 0',
-                  transition: 'all 0.3s ease',
-                  cursor: 'pointer',
-                  position: 'relative',
-                }}
+                  '--dynamic-color': point.color || '#3498db',
+                  '--dynamic-height': `${(point.value / maxValue) * 250}px`,
+                } as React.CSSProperties}
                 title={`${point.label}: ${point.value}`}
               >
-                <div style={{
-                  position: 'absolute',
-                  top: '-25px',
-                  left: '50%',
-                  transform: 'translateX(-50%)',
-                  background: 'rgba(0,0,0,0.8)',
-                  color: 'white',
-                  padding: '2px 6px',
-                  borderRadius: '4px',
-                  fontSize: '12px',
-                  whiteSpace: 'nowrap',
-                }}
-                >
+                <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-1.5 py-0.5 rounded text-xs whitespace-nowrap">
                   {point.value}
                 </div>
               </div>
-              <div style={{
-                marginTop: '10px',
-                fontSize: '12px',
-                textAlign: 'center',
-                color: '#7f8c8d',
-                wordBreak: 'break-word',
-              }}
-              >
+              <div className="mt-2.5 text-xs text-center text-slate-500 break-words">
                 {point.label}
               </div>
             </div>
@@ -146,9 +141,9 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
     ).join(' ')
 
     return (
-      <div style={{ padding: '20px' }}>
-        <h3 style={{ marginBottom: '20px', color: '#2c3e50' }}>Line Chart</h3>
-        <svg width={width} height={height} style={{ border: '1px solid #ecf0f1', borderRadius: '8px' }}>
+      <div className="p-5">
+        <h3 className="mb-5 text-slate-700">Line Chart</h3>
+        <svg width={width} height={height} className="border border-slate-200 rounded-lg">
           {/* Grid lines */}
           {[0, 0.25, 0.5, 0.75, 1].map(ratio => (
             <line
@@ -172,17 +167,18 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
 
           {/* Data points */}
           {points.map((point, index) => (
-            <circle
-              key={index}
-              cx={point.x}
-              cy={point.y}
-              r="6"
-              fill={data[index].color || '#3498db'}
-              stroke="white"
-              strokeWidth="2"
-              style={{ cursor: 'pointer' }}
-              title={`${data[index].label}: ${data[index].value}`}
-            />
+            <g key={index}>
+              <circle
+                cx={point.x}
+                cy={point.y}
+                r="6"
+                fill={data[index].color || '#3498db'}
+                stroke="white"
+                strokeWidth="2"
+                className="cursor-pointer"
+              />
+              <title>{`${data[index].label}: ${data[index].value}`}</title>
+            </g>
           ))}
 
           {/* Labels */}
@@ -208,10 +204,10 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
     let currentAngle = 0
 
     return (
-      <div style={{ padding: '20px' }}>
-        <h3 style={{ marginBottom: '20px', color: '#2c3e50' }}>Pie Chart</h3>
-        <div style={{ display: 'flex', gap: '40px', alignItems: 'center' }}>
-          <svg width="300" height="300" style={{ border: '1px solid #ecf0f1', borderRadius: '8px' }}>
+      <div className="p-5">
+        <h3 className="mb-5 text-slate-700">Pie Chart</h3>
+        <div className="flex gap-10 items-center">
+          <svg width="300" height="300" className="border border-slate-200 rounded-lg">
             {data.map((point, index) => {
               const percentage = point.value / total
               const angle = percentage * 360
@@ -241,48 +237,35 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
               ].join(' ')
 
               return (
-                <path
-                  key={index}
-                  d={pathData}
-                  fill={point.color || '#3498db'}
-                  stroke="white"
-                  strokeWidth="2"
-                  style={{ cursor: 'pointer' }}
-                  title={`${point.label}: ${point.value} (${(percentage * 100).toFixed(1)}%)`}
-                />
+                <g key={index}>
+                  <path
+                    d={pathData}
+                    fill={point.color || '#3498db'}
+                    stroke="white"
+                    strokeWidth="2"
+                    className="cursor-pointer"
+                  />
+                  <title>{`${point.label}: ${point.value} (${(percentage * 100).toFixed(1)}%)`}</title>
+                </g>
               )
             })}
           </svg>
 
-          <div style={{ flex: '1' }}>
-            <h4 style={{ marginBottom: '15px', color: '#2c3e50' }}>Legend</h4>
+          <div className="flex-1">
+            <h4 className="mb-4 text-slate-700">Legend</h4>
             {data.map((point, index) => (
               <div
                 key={index}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  marginBottom: '8px',
-                  padding: '8px',
-                  background: '#f8f9fa',
-                  borderRadius: '4px',
-                }}
+                className="flex items-center mb-2 p-2 bg-slate-50 rounded"
               >
-                <div style={{
-                  width: '16px',
-                  height: '16px',
-                  background: point.color || '#3498db',
-                  borderRadius: '2px',
-                  marginRight: '10px',
-                }}
+                <div 
+                  className="w-4 h-4 rounded-sm mr-2.5 dynamic-color"
+                  style={{
+                    '--dynamic-color': point.color || '#3498db',
+                  } as React.CSSProperties}
                 />
-                <span style={{ flex: '1', fontSize: '14px' }}>{point.label}</span>
-                <span style={{
-                  fontSize: '14px',
-                  fontWeight: 'bold',
-                  color: '#2c3e50',
-                }}
-                >
+                <span className="flex-1 text-sm">{point.label}</span>
+                <span className="text-sm font-bold text-slate-700">
                   {point.value}
                 </span>
               </div>
@@ -294,30 +277,20 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
   }
 
   return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ marginBottom: '30px' }}>
-        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Data Visualization</h1>
+    <div className="p-5">
+      <div className="mb-8">
+        <h1 className="m-0 mb-5 text-slate-700">Data Visualization</h1>
 
         {/* Controls */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '20px' }}>
+        <div className="bg-white p-5 rounded-lg shadow-sm mb-5">
+          <div className="flex gap-5 flex-wrap items-center mb-5">
             <div>
-              <label style={{ marginRight: '10px', fontWeight: 'bold', color: '#2c3e50' }}>Chart Type:</label>
+              <label className="mr-2.5 font-bold text-slate-700">Chart Type:</label>
               <select
                 value={currentChartType}
                 onChange={e => setCurrentChartType(e.target.value as typeof currentChartType)}
-                style={{
-                  padding: '8px 12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                }}
+                className="px-3 py-2 border border-gray-300 rounded"
+                aria-label="Select chart type"
               >
                 <option value="bar">Bar Chart</option>
                 <option value="line">Line Chart</option>
@@ -326,41 +299,24 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
             </div>
           </div>
 
-          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div className="flex gap-2.5 flex-wrap items-center">
             <input
               type="text"
               placeholder="Label"
               value={newDataPoint.label}
               onChange={e => setNewDataPoint({ ...newDataPoint, label: e.target.value })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                minWidth: '120px',
-              }}
+              className="px-3 py-2 border border-gray-300 rounded min-w-30"
             />
             <input
               type="number"
               placeholder="Value"
               value={newDataPoint.value}
               onChange={e => setNewDataPoint({ ...newDataPoint, value: Number(e.target.value) })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                minWidth: '100px',
-              }}
+              className="px-3 py-2 border border-gray-300 rounded min-w-25"
             />
             <button
               onClick={addDataPoint}
-              style={{
-                padding: '8px 16px',
-                background: '#3498db',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-              }}
+              className="px-4 py-2 bg-blue-500 text-white border-none rounded cursor-pointer"
             >
               Add Data Point
             </button>
@@ -368,22 +324,10 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
         </div>
 
         {/* Chart */}
-        <div style={{
-          background: 'white',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          overflow: 'hidden',
-        }}
-        >
+        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
           {data.length === 0
             ? (
-                <div style={{
-                  textAlign: 'center',
-                  padding: '40px 20px',
-                  color: '#7f8c8d',
-                  fontStyle: 'italic',
-                }}
-                >
+                <div className="text-center py-10 px-5 text-slate-500 italic">
                   No data to visualize. Add some data points above!
                 </div>
               )
@@ -398,59 +342,42 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
 
         {/* Data table */}
         {data.length > 0 && (
-          <div style={{
-            background: 'white',
-            borderRadius: '8px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            marginTop: '20px',
-            overflow: 'hidden',
-          }}
-          >
-            <div style={{ padding: '20px', borderBottom: '1px solid #ecf0f1' }}>
-              <h3 style={{ margin: '0', color: '#2c3e50' }}>Data Table</h3>
+          <div className="bg-white rounded-lg shadow-sm mt-5 overflow-hidden">
+            <div className="p-5 border-b border-slate-200">
+              <h3 className="m-0 text-slate-700">Data Table</h3>
             </div>
-            <div style={{ overflowX: 'auto' }}>
-              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse">
                 <thead>
-                  <tr style={{ background: '#f8f9fa' }}>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Label</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Value</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Percentage</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Color</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Actions</th>
+                  <tr className="bg-slate-50">
+                    <th className="p-3 text-left border-b border-slate-200">Label</th>
+                    <th className="p-3 text-left border-b border-slate-200">Value</th>
+                    <th className="p-3 text-left border-b border-slate-200">Percentage</th>
+                    <th className="p-3 text-left border-b border-slate-200">Color</th>
+                    <th className="p-3 text-left border-b border-slate-200">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
                   {data.map((point, index) => (
-                    <tr key={index} style={{ borderBottom: '1px solid #ecf0f1' }}>
-                      <td style={{ padding: '12px' }}>{point.label}</td>
-                      <td style={{ padding: '12px', fontWeight: 'bold' }}>{point.value}</td>
-                      <td style={{ padding: '12px' }}>
+                    <tr key={index} className="border-b border-slate-200">
+                      <td className="p-3">{point.label}</td>
+                      <td className="p-3 font-bold">{point.value}</td>
+                      <td className="p-3">
                         {((point.value / getTotalValue()) * 100).toFixed(1)}
                         %
                       </td>
-                      <td style={{ padding: '12px' }}>
-                        <div style={{
-                          width: '20px',
-                          height: '20px',
-                          background: point.color || '#3498db',
-                          borderRadius: '2px',
-                          display: 'inline-block',
-                        }}
+                      <td className="p-3">
+                        <div 
+                          className="w-5 h-5 rounded-sm inline-block dynamic-color"
+                          style={{
+                            '--dynamic-color': point.color || '#3498db',
+                          } as React.CSSProperties}
                         />
                       </td>
-                      <td style={{ padding: '12px' }}>
+                      <td className="p-3">
                         <button
                           onClick={() => removeDataPoint(index)}
-                          style={{
-                            background: '#e74c3c',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '4px',
-                            padding: '4px 8px',
-                            cursor: 'pointer',
-                            fontSize: '12px',
-                          }}
+                          className="bg-red-500 text-white border-none rounded px-2 py-1 cursor-pointer text-xs"
                         >
                           Remove
                         </button>
diff --git a/packages/create-mcp-use-app/src/templates/ui/src/server.ts b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
index 39aec742..885ba381 100644
--- a/packages/create-mcp-use-app/src/templates/ui/src/server.ts
+++ b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
@@ -22,132 +22,48 @@ server.tool({
       required: true,
     },
   ],
-  fn: async () => ({
-    content: [
-      createUIResource({
-        uri: 'ui://widget/kanban-board',
-        content: {
-          type: 'externalUrl',
-          iframeUrl: 'http://localhost:3000/mcp-use/widgets/kanban-board'
-        },
-        encoding: 'text',
-      })
-    ]
-  }),
-})
-
-// MCP Resource for server status
-server.resource({
-  uri: 'ui://status',
-  name: 'UI Server Status',
-  description: 'Status of the UI MCP server',
-  mimeType: 'application/json',
   fn: async () => {
-    return JSON.stringify({
-      name: 'ui-mcp-server',
-      version: '1.0.0',
-      status: 'running',
-      transport: process.env.MCP_TRANSPORT || 'http',
-      uiEndpoint: `http://localhost:${PORT}/mcp-use/widgets`,
-      mcpEndpoint: process.env.MCP_TRANSPORT === 'stdio' ? 'stdio' : `http://localhost:${PORT}/mcp`,
-      availableWidgets: ['kanban-board', 'todo-list', 'data-visualization'],
-      timestamp: new Date().toISOString(),
-    }, null, 2)
+    const uiResource = createUIResource({
+      uri: 'ui://widget/kanban-board',
+      content: {
+        type: 'externalUrl',
+        iframeUrl: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
+      },
+      encoding: 'text',
+    })
+    return {
+      content: [uiResource]
+    }
   },
 })
 
+
 // MCP Resource for Kanban Board widget
 server.resource({
-  uri: 'ui://widget/kanban-board',
   name: 'Kanban Board Widget',
-  description: 'Interactive Kanban board widget',
+  uri: 'ui://widget/kanban-board',
+  title: 'Kanban Board Widget',
   mimeType: 'text/html+skybridge',
+  description: 'Interactive Kanban board widget',
+  annotations: {
+    audience: ['user', 'assistant'],
+    priority: 0.7
+  },
   fn: async () => {
     const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
-    return `
+    return {
+      contents: [{
+        uri: 'ui://widget/kanban-board',
+        mimeType: 'text/html+skybridge',
+        text: `
 <div id="kanban-root"></div>
 <script type="module" src="${widgetUrl}"></script>
-    `.trim()
-  },
-})
-
-// MCP Resource for Todo List widget
-server.resource({
-  uri: 'ui://widget/todo-list',
-  name: 'Todo List Widget',
-  description: 'Interactive todo list widget',
-  mimeType: 'text/html+skybridge',
-  fn: async () => {
-    const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/todo-list`
-    return `
-<div id="todo-root"></div>
-<script type="module" src="${widgetUrl}"></script>
-    `.trim()
-  },
-})
-
-// MCP Resource for Data Visualization widget
-server.resource({
-  uri: 'ui://widget/data-visualization',
-  name: 'Data Visualization Widget',
-  description: 'Interactive data visualization widget',
-  mimeType: 'text/html+skybridge',
-  fn: async () => {
-    const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/data-visualization`
-    return `
-<div id="data-viz-root"></div>
-<script type="module" src="${widgetUrl}"></script>
-    `.trim()
-  },
-})
-
-// Tool for showing Kanban Board
-server.tool({
-  name: 'show-kanban',
-  description: 'Display an interactive Kanban board',
-  inputs: [
-    {
-      name: 'tasks',
-      type: 'string',
-      description: 'JSON string of tasks to display',
-      required: true,
-    },
-  ],
-  fn: async (params: Record<string, any>) => {
-    const { tasks } = params
-    try {
-      const taskData = JSON.parse(tasks)
-      return `Displayed Kanban board with ${taskData.length || 0} tasks at http://localhost:${PORT}/mcp-use/widgets/kanban-board`
-    }
-    catch (error) {
-      return `Error parsing tasks: ${error instanceof Error ? error.message : 'Invalid JSON'}`
+        `.trim()
+      }]
     }
   },
 })
 
-// Tool for showing Todo List
-server.tool({
-  name: 'show-todo-list',
-  description: 'Display an interactive todo list',
-  inputs: [
-    {
-      name: 'todos',
-      type: 'string',
-      description: 'JSON string of todos to display',
-      required: true,
-    },
-  ],
-  fn: async (params: Record<string, any>) => {
-    const { todos } = params
-    try {
-      const todoData = JSON.parse(todos)
-      return `Displayed Todo list with ${todoData.length || 0} items at http://localhost:${PORT}/mcp-use/widgets/todo-list`
-    }
-    catch (error) {
-      return `Error parsing todos: ${error instanceof Error ? error.message : 'Invalid JSON'}`
-    }
-  },
-})
 
 
 // Start the server (MCP endpoints auto-mounted at /mcp)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f2621a5..becdc2ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -121,6 +121,64 @@ importers:
         specifier: ^1.0.0
         version: 1.6.1(@types/node@20.19.19)(lightningcss@1.30.1)
 
+  packages/create-mcp-use-app/src/templates/ui:
+    dependencies:
+      '@mcp-ui/server':
+        specifier: ^5.11.0
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
+      cors:
+        specifier: ^2.8.5
+        version: 2.8.5
+      express:
+        specifier: ^4.18.0
+        version: 4.21.2
+      mcp-use:
+        specifier: workspace:*
+        version: link:../../../../mcp-use
+    devDependencies:
+      '@mcp-use/cli':
+        specifier: workspace:*
+        version: link:../../../../cli
+      '@mcp-use/inspector':
+        specifier: workspace:*
+        version: link:../../../../inspector
+      '@types/cors':
+        specifier: ^2.8.0
+        version: 2.8.19
+      '@types/express':
+        specifier: ^4.17.0
+        version: 4.17.23
+      '@types/node':
+        specifier: ^20.0.0
+        version: 20.19.19
+      '@types/react':
+        specifier: ^18.0.0
+        version: 18.3.26
+      '@types/react-dom':
+        specifier: ^18.0.0
+        version: 18.3.7(@types/react@18.3.26)
+      concurrently:
+        specifier: ^8.0.0
+        version: 8.2.2
+      esbuild:
+        specifier: ^0.23.0
+        version: 0.23.1
+      globby:
+        specifier: ^14.0.2
+        version: 14.1.0
+      react:
+        specifier: ^19.2.0
+        version: 19.2.0
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.0(react@19.2.0)
+      tsx:
+        specifier: ^4.0.0
+        version: 4.20.6
+      typescript:
+        specifier: ^5.0.0
+        version: 5.9.3
+
   packages/inspector:
     dependencies:
       '@hono/node-server':
@@ -8668,7 +8726,7 @@ snapshots:
 
   '@types/react-syntax-highlighter@15.5.13':
     dependencies:
-      '@types/react': 19.2.2
+      '@types/react': 18.3.26
 
   '@types/react@18.3.26':
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index c6509dae..cd64b37d 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,4 +2,5 @@ packages:
   - 'packages/*'
   - 'packages/mcp-use/examples/client/react'
   - 'packages/mcp-use/examples/server/simple'
+  - 'packages/create-mcp-use-app/src/templates/ui'
   - 'test_app'
diff --git a/test_app/package.json b/test_app/package.json
index 187f3c70..9b88d1a9 100644
--- a/test_app/package.json
+++ b/test_app/package.json
@@ -24,11 +24,11 @@
     "@mcp-ui/server": "^5.11.0",
     "cors": "^2.8.5",
     "express": "^4.18.0",
-    "mcp-use": "workspace:*"
+    "mcp-use": "^1.0.0"
   },
   "devDependencies": {
-    "@mcp-use/cli": "workspace:*",
-    "@mcp-use/inspector": "workspace:*",
+    "@mcp-use/cli": "^2.1.2",
+    "@mcp-use/inspector": "^0.3.2",
     "@types/cors": "^2.8.0",
     "@types/express": "^4.17.0",
     "@types/node": "^20.0.0",
diff --git a/test_app/resources/data-visualization.tsx b/test_app/resources/data-visualization.tsx
index 4ee2e2dc..4113c1af 100644
--- a/test_app/resources/data-visualization.tsx
+++ b/test_app/resources/data-visualization.tsx
@@ -1,6 +1,24 @@
 import React, { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 
+// CSS styles for dynamic colors
+const dynamicStyles = `
+  .dynamic-bar {
+    background-color: var(--dynamic-color, #3498db);
+    height: var(--dynamic-height, 100px);
+  }
+  .dynamic-color {
+    background-color: var(--dynamic-color, #3498db);
+  }
+`
+
+// Inject styles
+if (typeof document !== 'undefined') {
+  const styleElement = document.createElement('style')
+  styleElement.textContent = dynamicStyles
+  document.head.appendChild(styleElement)
+}
+
 interface DataPoint {
   label: string
   value: number
@@ -80,47 +98,24 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
     const maxValue = getMaxValue()
 
     return (
-      <div style={{ padding: '20px' }}>
-        <h3 style={{ marginBottom: '20px', color: '#2c3e50' }}>Bar Chart</h3>
-        <div style={{ display: 'flex', alignItems: 'end', gap: '10px', height: '300px' }}>
+      <div className="p-5">
+        <h3 className="mb-5 text-slate-700">Bar Chart</h3>
+        <div className="flex items-end gap-2.5 h-75">
           {data.map((point, index) => (
-            <div key={index} style={{ flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <div key={index} className="flex-1 flex flex-col items-center">
               <div
+                className="w-full rounded-t transition-all duration-300 cursor-pointer relative dynamic-bar"
                 style={{
-                  background: point.color || '#3498db',
-                  height: `${(point.value / maxValue) * 250}px`,
-                  width: '100%',
-                  borderRadius: '4px 4px 0 0',
-                  transition: 'all 0.3s ease',
-                  cursor: 'pointer',
-                  position: 'relative',
-                }}
+                  '--dynamic-color': point.color || '#3498db',
+                  '--dynamic-height': `${(point.value / maxValue) * 250}px`,
+                } as React.CSSProperties}
                 title={`${point.label}: ${point.value}`}
               >
-                <div style={{
-                  position: 'absolute',
-                  top: '-25px',
-                  left: '50%',
-                  transform: 'translateX(-50%)',
-                  background: 'rgba(0,0,0,0.8)',
-                  color: 'white',
-                  padding: '2px 6px',
-                  borderRadius: '4px',
-                  fontSize: '12px',
-                  whiteSpace: 'nowrap',
-                }}
-                >
+                <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-1.5 py-0.5 rounded text-xs whitespace-nowrap">
                   {point.value}
                 </div>
               </div>
-              <div style={{
-                marginTop: '10px',
-                fontSize: '12px',
-                textAlign: 'center',
-                color: '#7f8c8d',
-                wordBreak: 'break-word',
-              }}
-              >
+              <div className="mt-2.5 text-xs text-center text-slate-500 break-words">
                 {point.label}
               </div>
             </div>
@@ -146,9 +141,9 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
     ).join(' ')
 
     return (
-      <div style={{ padding: '20px' }}>
-        <h3 style={{ marginBottom: '20px', color: '#2c3e50' }}>Line Chart</h3>
-        <svg width={width} height={height} style={{ border: '1px solid #ecf0f1', borderRadius: '8px' }}>
+      <div className="p-5">
+        <h3 className="mb-5 text-slate-700">Line Chart</h3>
+        <svg width={width} height={height} className="border border-slate-200 rounded-lg">
           {/* Grid lines */}
           {[0, 0.25, 0.5, 0.75, 1].map(ratio => (
             <line
@@ -172,18 +167,18 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
 
           {/* Data points */}
           {points.map((point, index) => (
-            <circle
-              key={index}
-              cx={point.x}
-              cy={point.y}
-              r="6"
-              fill={data[index].color || '#3498db'}
-              stroke="white"
-              strokeWidth="2"
-              style={{ cursor: 'pointer' }}
-            >
+            <g key={index}>
+              <circle
+                cx={point.x}
+                cy={point.y}
+                r="6"
+                fill={data[index].color || '#3498db'}
+                stroke="white"
+                strokeWidth="2"
+                className="cursor-pointer"
+              />
               <title>{`${data[index].label}: ${data[index].value}`}</title>
-            </circle>
+            </g>
           ))}
 
           {/* Labels */}
@@ -209,10 +204,10 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
     let currentAngle = 0
 
     return (
-      <div style={{ padding: '20px' }}>
-        <h3 style={{ marginBottom: '20px', color: '#2c3e50' }}>Pie Chart</h3>
-        <div style={{ display: 'flex', gap: '40px', alignItems: 'center' }}>
-          <svg width="300" height="300" style={{ border: '1px solid #ecf0f1', borderRadius: '8px' }}>
+      <div className="p-5">
+        <h3 className="mb-5 text-slate-700">Pie Chart</h3>
+        <div className="flex gap-10 items-center">
+          <svg width="300" height="300" className="border border-slate-200 rounded-lg">
             {data.map((point, index) => {
               const percentage = point.value / total
               const angle = percentage * 360
@@ -242,49 +237,35 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
               ].join(' ')
 
               return (
-                <path
-                  key={index}
-                  d={pathData}
-                  fill={point.color || '#3498db'}
-                  stroke="white"
-                  strokeWidth="2"
-                  style={{ cursor: 'pointer' }}
-                >
+                <g key={index}>
+                  <path
+                    d={pathData}
+                    fill={point.color || '#3498db'}
+                    stroke="white"
+                    strokeWidth="2"
+                    className="cursor-pointer"
+                  />
                   <title>{`${point.label}: ${point.value} (${(percentage * 100).toFixed(1)}%)`}</title>
-                </path>
+                </g>
               )
             })}
           </svg>
 
-          <div style={{ flex: '1' }}>
-            <h4 style={{ marginBottom: '15px', color: '#2c3e50' }}>Legend</h4>
+          <div className="flex-1">
+            <h4 className="mb-4 text-slate-700">Legend</h4>
             {data.map((point, index) => (
               <div
                 key={index}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  marginBottom: '8px',
-                  padding: '8px',
-                  background: '#f8f9fa',
-                  borderRadius: '4px',
-                }}
+                className="flex items-center mb-2 p-2 bg-slate-50 rounded"
               >
-                <div style={{
-                  width: '16px',
-                  height: '16px',
-                  background: point.color || '#3498db',
-                  borderRadius: '2px',
-                  marginRight: '10px',
-                }}
+                <div 
+                  className="w-4 h-4 rounded-sm mr-2.5 dynamic-color"
+                  style={{
+                    '--dynamic-color': point.color || '#3498db',
+                  } as React.CSSProperties}
                 />
-                <span style={{ flex: '1', fontSize: '14px' }}>{point.label}</span>
-                <span style={{
-                  fontSize: '14px',
-                  fontWeight: 'bold',
-                  color: '#2c3e50',
-                }}
-                >
+                <span className="flex-1 text-sm">{point.label}</span>
+                <span className="text-sm font-bold text-slate-700">
                   {point.value}
                 </span>
               </div>
@@ -296,30 +277,20 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
   }
 
   return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ marginBottom: '30px' }}>
-        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Data Visualization</h1>
+    <div className="p-5">
+      <div className="mb-8">
+        <h1 className="m-0 mb-5 text-slate-700">Data Visualization</h1>
 
         {/* Controls */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', alignItems: 'center', marginBottom: '20px' }}>
+        <div className="bg-white p-5 rounded-lg shadow-sm mb-5">
+          <div className="flex gap-5 flex-wrap items-center mb-5">
             <div>
-              <label style={{ marginRight: '10px', fontWeight: 'bold', color: '#2c3e50' }}>Chart Type:</label>
+              <label className="mr-2.5 font-bold text-slate-700">Chart Type:</label>
               <select
                 value={currentChartType}
                 onChange={e => setCurrentChartType(e.target.value as typeof currentChartType)}
-                style={{
-                  padding: '8px 12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                }}
+                className="px-3 py-2 border border-gray-300 rounded"
+                aria-label="Select chart type"
               >
                 <option value="bar">Bar Chart</option>
                 <option value="line">Line Chart</option>
@@ -328,41 +299,24 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
             </div>
           </div>
 
-          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div className="flex gap-2.5 flex-wrap items-center">
             <input
               type="text"
               placeholder="Label"
               value={newDataPoint.label}
               onChange={e => setNewDataPoint({ ...newDataPoint, label: e.target.value })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                minWidth: '120px',
-              }}
+              className="px-3 py-2 border border-gray-300 rounded min-w-30"
             />
             <input
               type="number"
               placeholder="Value"
               value={newDataPoint.value}
               onChange={e => setNewDataPoint({ ...newDataPoint, value: Number(e.target.value) })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                minWidth: '100px',
-              }}
+              className="px-3 py-2 border border-gray-300 rounded min-w-25"
             />
             <button
               onClick={addDataPoint}
-              style={{
-                padding: '8px 16px',
-                background: '#3498db',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-              }}
+              className="px-4 py-2 bg-blue-500 text-white border-none rounded cursor-pointer"
             >
               Add Data Point
             </button>
@@ -370,22 +324,10 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
         </div>
 
         {/* Chart */}
-        <div style={{
-          background: 'white',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          overflow: 'hidden',
-        }}
-        >
+        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
           {data.length === 0
             ? (
-                <div style={{
-                  textAlign: 'center',
-                  padding: '40px 20px',
-                  color: '#7f8c8d',
-                  fontStyle: 'italic',
-                }}
-                >
+                <div className="text-center py-10 px-5 text-slate-500 italic">
                   No data to visualize. Add some data points above!
                 </div>
               )
@@ -400,59 +342,42 @@ const DataVisualization: React.FC<DataVisualizationProps> = ({
 
         {/* Data table */}
         {data.length > 0 && (
-          <div style={{
-            background: 'white',
-            borderRadius: '8px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            marginTop: '20px',
-            overflow: 'hidden',
-          }}
-          >
-            <div style={{ padding: '20px', borderBottom: '1px solid #ecf0f1' }}>
-              <h3 style={{ margin: '0', color: '#2c3e50' }}>Data Table</h3>
+          <div className="bg-white rounded-lg shadow-sm mt-5 overflow-hidden">
+            <div className="p-5 border-b border-slate-200">
+              <h3 className="m-0 text-slate-700">Data Table</h3>
             </div>
-            <div style={{ overflowX: 'auto' }}>
-              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <div className="overflow-x-auto">
+              <table className="w-full border-collapse">
                 <thead>
-                  <tr style={{ background: '#f8f9fa' }}>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Label</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Value</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Percentage</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Color</th>
-                    <th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #ecf0f1' }}>Actions</th>
+                  <tr className="bg-slate-50">
+                    <th className="p-3 text-left border-b border-slate-200">Label</th>
+                    <th className="p-3 text-left border-b border-slate-200">Value</th>
+                    <th className="p-3 text-left border-b border-slate-200">Percentage</th>
+                    <th className="p-3 text-left border-b border-slate-200">Color</th>
+                    <th className="p-3 text-left border-b border-slate-200">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
                   {data.map((point, index) => (
-                    <tr key={index} style={{ borderBottom: '1px solid #ecf0f1' }}>
-                      <td style={{ padding: '12px' }}>{point.label}</td>
-                      <td style={{ padding: '12px', fontWeight: 'bold' }}>{point.value}</td>
-                      <td style={{ padding: '12px' }}>
+                    <tr key={index} className="border-b border-slate-200">
+                      <td className="p-3">{point.label}</td>
+                      <td className="p-3 font-bold">{point.value}</td>
+                      <td className="p-3">
                         {((point.value / getTotalValue()) * 100).toFixed(1)}
                         %
                       </td>
-                      <td style={{ padding: '12px' }}>
-                        <div style={{
-                          width: '20px',
-                          height: '20px',
-                          background: point.color || '#3498db',
-                          borderRadius: '2px',
-                          display: 'inline-block',
-                        }}
+                      <td className="p-3">
+                        <div 
+                          className="w-5 h-5 rounded-sm inline-block dynamic-color"
+                          style={{
+                            '--dynamic-color': point.color || '#3498db',
+                          } as React.CSSProperties}
                         />
                       </td>
-                      <td style={{ padding: '12px' }}>
+                      <td className="p-3">
                         <button
                           onClick={() => removeDataPoint(index)}
-                          style={{
-                            background: '#e74c3c',
-                            color: 'white',
-                            border: 'none',
-                            borderRadius: '4px',
-                            padding: '4px 8px',
-                            cursor: 'pointer',
-                            fontSize: '12px',
-                          }}
+                          className="bg-red-500 text-white border-none rounded px-2 py-1 cursor-pointer text-xs"
                         >
                           Remove
                         </button>
diff --git a/test_app/resources/kanban-board.tsx b/test_app/resources/kanban-board.tsx
index a7bfcbae..40225c7d 100644
--- a/test_app/resources/kanban-board.tsx
+++ b/test_app/resources/kanban-board.tsx
@@ -16,7 +16,7 @@ interface KanbanBoardProps {
 
 const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
   const [tasks, setTasks] = useState<Task[]>(initialTasks)
-  const [newTask, setNewTask] = useState<{ title: string; description: string; priority: Task['priority'] }>({ title: '', description: '', priority: 'medium' })
+  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as const })
 
   // Load tasks from URL parameters or use defaults
   useEffect(() => {
diff --git a/test_app/src/server.ts b/test_app/src/server.ts
index 7eaec7c9..885ba381 100644
--- a/test_app/src/server.ts
+++ b/test_app/src/server.ts
@@ -37,147 +37,33 @@ server.tool({
   },
 })
 
-// MCP Resource for server status
-server.resource({
-  uri: 'ui://status',
-  name: 'UI Server Status',
-  description: 'Status of the UI MCP server',
-  mimeType: 'application/json',
-  fn: async () => {
-    return JSON.stringify({
-      name: 'ui-mcp-server',
-      version: '1.0.0',
-      status: 'running',
-      transport: process.env.MCP_TRANSPORT || 'http',
-      uiEndpoint: `http://localhost:${PORT}/mcp-use/widgets`,
-      mcpEndpoint: process.env.MCP_TRANSPORT === 'stdio' ? 'stdio' : `http://localhost:${PORT}/mcp`,
-      availableWidgets: ['kanban-board', 'todo-list', 'data-visualization'],
-      timestamp: new Date().toISOString(),
-    }, null, 2)
-  },
-})
-
 
 // MCP Resource for Kanban Board widget
 server.resource({
-  uri: 'ui://widget/kanban-board',
   name: 'Kanban Board Widget',
-  description: 'Interactive Kanban board widget',
+  uri: 'ui://widget/kanban-board',
+  title: 'Kanban Board Widget',
   mimeType: 'text/html+skybridge',
+  description: 'Interactive Kanban board widget',
+  annotations: {
+    audience: ['user', 'assistant'],
+    priority: 0.7
+  },
   fn: async () => {
     const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
-    return `
+    return {
+      contents: [{
+        uri: 'ui://widget/kanban-board',
+        mimeType: 'text/html+skybridge',
+        text: `
 <div id="kanban-root"></div>
 <script type="module" src="${widgetUrl}"></script>
-    `.trim()
-  },
-})
-
-// MCP Resource for Todo List widget
-server.resource({
-  uri: 'ui://widget/todo-list',
-  name: 'Todo List Widget',
-  description: 'Interactive todo list widget',
-  mimeType: 'text/html+skybridge',
-  fn: async () => {
-    const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/todo-list`
-    return `
-<div id="todo-root"></div>
-<script type="module" src="${widgetUrl}"></script>
-    `.trim()
-  },
-})
-
-// MCP Resource for Data Visualization widget
-server.resource({
-  uri: 'ui://widget/data-visualization',
-  name: 'Data Visualization Widget',
-  description: 'Interactive data visualization widget',
-  mimeType: 'text/html+skybridge',
-  fn: async () => {
-    const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/data-visualization`
-    return `
-<div id="data-viz-root"></div>
-<script type="module" src="${widgetUrl}"></script>
-    `.trim()
-  },
-})
-
-// Tool for showing Kanban Board
-server.tool({
-  name: 'show-kanban',
-  description: 'Display an interactive Kanban board',
-  inputs: [
-    {
-      name: 'tasks',
-      type: 'string',
-      description: 'JSON string of tasks to display',
-      required: true,
-    },
-  ],
-  fn: async (params: Record<string, any>) => {
-    const { tasks } = params
-    try {
-      const taskData = JSON.parse(tasks)
-      return {
-        content: [
-          {
-            type: 'text',
-            text: `Displayed Kanban board with ${taskData.length || 0} tasks at http://localhost:${PORT}/mcp-use/widgets/kanban-board`
-          }
-        ]
-      }
-    }
-    catch (error) {
-      return {
-        content: [
-          {
-            type: 'text',
-            text: `Error parsing tasks: ${error instanceof Error ? error.message : 'Invalid JSON'}`
-          }
-        ]
-      }
+        `.trim()
+      }]
     }
   },
 })
 
-// Tool for showing Todo List
-server.tool({
-  name: 'show-todo-list',
-  description: 'Display an interactive todo list',
-  inputs: [
-    {
-      name: 'todos',
-      type: 'string',
-      description: 'JSON string of todos to display',
-      required: true,
-    },
-  ],
-  fn: async (params: Record<string, any>) => {
-    const { todos } = params
-    try {
-      const todoData = JSON.parse(todos)
-      return {
-        content: [
-          {
-            type: 'text',
-            text: `Displayed Todo list with ${todoData.length || 0} items at http://localhost:${PORT}/mcp-use/widgets/todo-list`
-          }
-        ]
-      }
-    }
-    catch (error) {
-      return {
-        content: [
-          {
-            type: 'text',
-            text: `Error parsing todos: ${error instanceof Error ? error.message : 'Invalid JSON'}`
-          }
-        ]
-      }
-    }
-  },
-})
 
 
 // Start the server (MCP endpoints auto-mounted at /mcp)

From b560cb911fd83b0ac1b755cc21b1c2787f165dc7 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Sat, 11 Oct 2025 13:14:58 +0200
Subject: [PATCH 10/21] feat: enhance InspectorDashboard and ResourcesTab with
 MCP UI support 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.
---
 .../client/components/InspectorDashboard.tsx  |  28 +-
 .../src/client/components/McpUIRenderer.tsx   |  19 +-
 .../src/client/components/ResourcesTab.tsx    | 269 +++++++++++++-----
 .../src/client/components/ToolsTab.tsx        |  33 ++-
 4 files changed, 261 insertions(+), 88 deletions(-)

diff --git a/packages/inspector/src/client/components/InspectorDashboard.tsx b/packages/inspector/src/client/components/InspectorDashboard.tsx
index e7c700b5..3c8edd32 100644
--- a/packages/inspector/src/client/components/InspectorDashboard.tsx
+++ b/packages/inspector/src/client/components/InspectorDashboard.tsx
@@ -200,7 +200,7 @@ export function InspectorDashboard() {
                     <div
                       key={connection.id}
                       onClick={() => handleServerClick(connection)}
-                      className="rounded-lg bg-zinc-100 dark:bg-white/10 hover:bg-zinc-200 dark:hover:bg-white/15 p-4 transition-colors cursor-pointer"
+                      className="group rounded-lg bg-zinc-100 dark:bg-white/10 hover:bg-zinc-200 dark:hover:bg-white/15 p-4 transition-colors cursor-pointer"
                     >
                       <div className="flex items-center justify-between">
                         <div className="flex-1">
@@ -239,9 +239,29 @@ export function InspectorDashboard() {
                                   )}
                             </div>
                           </div>
-                          <p className="text-xs text-muted-foreground dark:text-zinc-400 font-mono mt-1">
-                            {connection.url}
-                          </p>
+                          <div className="flex items-center gap-2 mt-1">
+                            <p className="text-xs text-muted-foreground dark:text-zinc-400 font-mono">
+                              {connection.url}
+                            </p>
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    navigator.clipboard.writeText(connection.url)
+                                    toast.success('URL copied to clipboard')
+                                  }}
+                                  className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-white/10 rounded"
+                                  title="Copy URL"
+                                >
+                                  <Copy className="w-3 h-3 text-muted-foreground" />
+                                </button>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>Copy URL</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </div>
                         </div>
                         <div className="flex items-center gap-1">
                           <Tooltip>
diff --git a/packages/inspector/src/client/components/McpUIRenderer.tsx b/packages/inspector/src/client/components/McpUIRenderer.tsx
index f68c0fb1..ed55aca6 100644
--- a/packages/inspector/src/client/components/McpUIRenderer.tsx
+++ b/packages/inspector/src/client/components/McpUIRenderer.tsx
@@ -1,5 +1,5 @@
-import { UIResourceRenderer } from '@mcp-ui/client'
 import type { Resource } from '@modelcontextprotocol/sdk/types.js'
+import { UIResourceRenderer } from '@mcp-ui/client'
 
 interface McpUIRendererProps {
   resource: Resource
@@ -11,13 +11,15 @@ interface McpUIRendererProps {
  * Helper function to check if a resource is an MCP UI resource
  */
 export function isMcpUIResource(resource: any): boolean {
-  if (!resource?.mimeType) return false
-  
+  if (!resource?.mimeType)
+    return false
+
   const mimeType = resource.mimeType.toLowerCase()
   return (
-    mimeType === 'text/html' ||
-    mimeType === 'text/uri-list' ||
-    mimeType.startsWith('application/vnd.mcp-ui.remote-dom')
+    mimeType === 'text/html'
+    || mimeType === 'text/html+skybridge'
+    || mimeType === 'text/uri-list'
+    || mimeType.startsWith('application/vnd.mcp-ui.remote-dom')
   )
 }
 
@@ -37,9 +39,9 @@ function convertToMcpUIResource(resource: Resource): any {
  * Component to render MCP UI resources
  */
 export function McpUIRenderer({ resource, onUIAction, className }: McpUIRendererProps) {
-  const handleUIAction = (action: any) => {
+  const handleUIAction = async (action: any) => {
     console.log('MCP UI Action:', action)
-    onUIAction?.(action)
+    return onUIAction?.(action)
   }
 
   const uiResource = convertToMcpUIResource(resource)
@@ -60,4 +62,3 @@ export function McpUIRenderer({ resource, onUIAction, className }: McpUIRenderer
     </div>
   )
 }
-
diff --git a/packages/inspector/src/client/components/ResourcesTab.tsx b/packages/inspector/src/client/components/ResourcesTab.tsx
index 731375fd..10528333 100644
--- a/packages/inspector/src/client/components/ResourcesTab.tsx
+++ b/packages/inspector/src/client/components/ResourcesTab.tsx
@@ -38,6 +38,7 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
   const [_copiedResult, _setCopiedResult] = useState<number | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
   const [activeTab, setActiveTab] = useState('resources')
+  const [previewMode, setPreviewMode] = useState(true)
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   // Auto-focus the search input when the component mounts
@@ -276,7 +277,58 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
 
                   {(results.length > 0 || isLoading) && (
                     <div className="flex-1 overflow-hidden">
-                      <h4 className="text-sm font-medium text-gray-700 mb-3">Content</h4>
+                      <div className="flex items-center justify-between mb-3">
+                        <h4 className="text-sm font-medium text-gray-700">Content</h4>
+                        {(() => {
+                          // Check if any result contains MCP UI resources
+                          const hasMcpUIResources = results.some((result) => {
+                            if (!result.result)
+                              return false
+
+                            // Handle different resource data structures
+                            if (result.result.contents && Array.isArray(result.result.contents)) {
+                              // Resource response format: { contents: [...] }
+                              return result.result.contents.some((item: any) =>
+                                item.mimeType && isMcpUIResource(item),
+                              )
+                            }
+                            else if (result.result.mimeType) {
+                              // Direct resource format
+                              return isMcpUIResource(result.result)
+                            }
+                            return false
+                          })
+
+                          if (hasMcpUIResources) {
+                            return (
+                              <div className="flex items-center gap-2">
+                                <button
+                                  onClick={() => setPreviewMode(true)}
+                                  className={`text-xs font-medium ${
+                                    previewMode
+                                      ? 'text-black dark:text-white'
+                                      : 'text-zinc-500 dark:text-zinc-400'
+                                  }`}
+                                >
+                                  Preview
+                                </button>
+                                <span className="text-xs text-zinc-400">|</span>
+                                <button
+                                  onClick={() => setPreviewMode(false)}
+                                  className={`text-xs font-medium ${
+                                    !previewMode
+                                      ? 'text-black dark:text-white'
+                                      : 'text-zinc-500 dark:text-zinc-400'
+                                  }`}
+                                >
+                                  JSON
+                                </button>
+                              </div>
+                            )
+                          }
+                          return null
+                        })()}
+                      </div>
                       {isLoading && (
                         <div className="flex items-center justify-center py-8">
                           <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500 mr-2" />
@@ -284,79 +336,158 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
                         </div>
                       )}
                       <div className="space-y-3 overflow-y-auto max-h-96">
-                        {results.map((result, index) => (
-                          <div key={index} className="border dark:border-zinc-700 rounded-lg p-3 bg-gray-50 dark:bg-zinc-700">
-                            <div className="flex items-center justify-between mb-2">
-                              <span className="text-sm font-medium text-gray-700">
-                                {result.uri}
-                              </span>
-                              <div className="flex items-center gap-1">
-                                <Button
-                                  size="sm"
-                                  variant="ghost"
-                                  onClick={() => handleCopyResult(index)}
-                                  className="h-6 w-6 p-0"
-                                >
-                                  <Copy className="h-3 w-3" />
-                                </Button>
-                                <Button
-                                  size="sm"
-                                  variant="ghost"
-                                  onClick={() => handleDownloadResult(index)}
-                                  className="h-6 w-6 p-0"
-                                >
-                                  <Download className="h-3 w-3" />
-                                </Button>
+                        {results.map((result, index) => {
+                          // Check if result contains MCP UI resources
+                          let isMcpUI = false
+                          let mcpUIResources: any[] = []
+
+                          if (result.result) {
+                            if (result.result.contents && Array.isArray(result.result.contents)) {
+                              // Resource response format: { contents: [...] }
+                              mcpUIResources = result.result.contents.filter((item: any) =>
+                                item.mimeType && isMcpUIResource(item),
+                              )
+                              isMcpUI = mcpUIResources.length > 0
+                            }
+                            else if (result.result.mimeType) {
+                              // Direct resource format
+                              isMcpUI = isMcpUIResource(result.result)
+                              if (isMcpUI) {
+                                mcpUIResources = [result.result]
+                              }
+                            }
+                          }
+
+                          return (
+                            <div key={index} className="border dark:border-zinc-700 rounded-lg p-3 bg-gray-50 dark:bg-zinc-700">
+                              <div className="flex items-center justify-between mb-2">
+                                <span className="text-sm font-medium text-gray-700">
+                                  {result.uri}
+                                </span>
+                                <div className="flex items-center gap-1">
+                                  <Button
+                                    size="sm"
+                                    variant="ghost"
+                                    onClick={() => handleCopyResult(index)}
+                                    className="h-6 w-6 p-0"
+                                  >
+                                    <Copy className="h-3 w-3" />
+                                  </Button>
+                                  <Button
+                                    size="sm"
+                                    variant="ghost"
+                                    onClick={() => handleDownloadResult(index)}
+                                    className="h-6 w-6 p-0"
+                                  >
+                                    <Download className="h-3 w-3" />
+                                  </Button>
+                                </div>
                               </div>
-                            </div>
-                            <div className="text-xs text-gray-500 mb-2">
-                              {new Date(result.timestamp).toLocaleString()}
-                            </div>
-                            {result.error
-                              ? (
-                                  <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded">
-                                    {result.error}
-                                  </div>
-                                )
-                              : (() => {
-                                  // Check if the result is an MCP UI resource
-                                  const resource = result.result
-                                  if (resource && isMcpUIResource(resource)) {
+                              <div className="text-xs text-gray-500 mb-2">
+                                {new Date(result.timestamp).toLocaleString()}
+                              </div>
+                              {result.error
+                                ? (
+                                    <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded">
+                                      {result.error}
+                                    </div>
+                                  )
+                                : (() => {
+                                    if (isMcpUI) {
+                                      if (previewMode) {
+                                        return (
+                                          <div className="space-y-0 h-full">
+                                            {mcpUIResources.map((resource: any, idx: number) => (
+                                              <div key={idx} className="mx-0 size-full">
+                                                <div className="w-full h-full">
+                                                  <div className="border rounded-lg overflow-hidden">
+                                                    <div className="bg-gray-100 dark:bg-zinc-700 px-3 py-2 text-xs text-gray-600 dark:text-zinc-300 border-b dark:border-zinc-600">
+                                                      <span className="font-medium">MCP UI Resource</span>
+                                                    </div>
+                                                    <McpUIRenderer
+                                                      resource={resource}
+                                                      onUIAction={(_action) => {
+                                                        // Handle UI actions here if needed
+                                                      }}
+                                                      className="p-4"
+                                                    />
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            ))}
+                                            {/* Show JSON for non-UI content */}
+                                            {(() => {
+                                              if (result.result.contents && Array.isArray(result.result.contents)) {
+                                                const nonUIResources = result.result.contents.filter((item: any) =>
+                                                  !(item.mimeType && isMcpUIResource(item)),
+                                                )
+                                                if (nonUIResources.length > 0) {
+                                                  return (
+                                                    <div className="px-4">
+                                                      <SyntaxHighlighter
+                                                        language="json"
+                                                        style={prismStyle}
+                                                        customStyle={{
+                                                          margin: 0,
+                                                          padding: 0,
+                                                          border: 'none',
+                                                          borderRadius: 0,
+                                                          fontSize: '1rem',
+                                                          background: 'transparent',
+                                                        }}
+                                                        className="text-gray-900 dark:text-gray-100"
+                                                      >
+                                                        {JSON.stringify(nonUIResources, null, 2)}
+                                                      </SyntaxHighlighter>
+                                                    </div>
+                                                  )
+                                                }
+                                              }
+                                              return null
+                                            })()}
+                                          </div>
+                                        )
+                                      }
+                                      else {
+                                        // JSON mode for MCP UI resources
+                                        return (
+                                          <div className="max-h-64 overflow-y-auto">
+                                            <SyntaxHighlighter
+                                              language="json"
+                                              style={prismStyle}
+                                              className="text-xs rounded"
+                                              customStyle={{
+                                                margin: 0,
+                                                background: 'transparent',
+                                              }}
+                                            >
+                                              {JSON.stringify(result.result, null, 2)}
+                                            </SyntaxHighlighter>
+                                          </div>
+                                        )
+                                      }
+                                    }
+
+                                    // Default: show JSON for non-MCP UI resources
                                     return (
-                                      <div className="border rounded-lg overflow-hidden">
-                                        <div className="bg-gray-100 dark:bg-zinc-700 px-3 py-2 text-xs text-gray-600 dark:text-zinc-300 border-b dark:border-zinc-600">
-                                          <span className="font-medium">MCP UI Resource</span>
-                                        </div>
-                                        <McpUIRenderer
-                                          resource={resource}
-                                          onUIAction={(_action) => {
-                                            // Handle UI actions here if needed
+                                      <div className="max-h-64 overflow-y-auto">
+                                        <SyntaxHighlighter
+                                          language="json"
+                                          style={prismStyle}
+                                          className="text-xs rounded"
+                                          customStyle={{
+                                            margin: 0,
+                                            background: 'transparent',
                                           }}
-                                          className="p-4"
-                                        />
+                                        >
+                                          {JSON.stringify(result.result, null, 2)}
+                                        </SyntaxHighlighter>
                                       </div>
                                     )
-                                  }
-
-                                  // Default: show JSON
-                                  return (
-                                    <div className="max-h-64 overflow-y-auto">
-                                      <SyntaxHighlighter
-                                        language="json"
-                                        style={prismStyle}
-                                        className="text-xs rounded"
-                                        customStyle={{
-                                          margin: 0,
-                                          background: 'transparent',
-                                        }}
-                                      >
-                                        {JSON.stringify(result.result, null, 2)}
-                                      </SyntaxHighlighter>
-                                    </div>
-                                  )
-                                })()}
-                          </div>
-                        ))}
+                                  })()}
+                            </div>
+                          )
+                        })}
                       </div>
                     </div>
                   )}
diff --git a/packages/inspector/src/client/components/ToolsTab.tsx b/packages/inspector/src/client/components/ToolsTab.tsx
index a38d5c59..8a600d14 100644
--- a/packages/inspector/src/client/components/ToolsTab.tsx
+++ b/packages/inspector/src/client/components/ToolsTab.tsx
@@ -137,17 +137,38 @@ export function ToolsTab({ tools, callTool, isConnected }: ToolsTabProps) {
     setToolArgs((prev) => {
       const newArgs = { ...prev }
 
-      // Try to parse as JSON first, fallback to string
-      try {
-        newArgs[key] = JSON.parse(value)
+      // Check the tool's input schema to determine how to handle the value
+      if (selectedTool?.inputSchema?.properties?.[key]) {
+        const prop = selectedTool.inputSchema.properties[key] as any
+        const expectedType = prop.type
+
+        if (expectedType === 'string') {
+          // For string parameters, don't parse JSON - treat as literal string
+          newArgs[key] = value
+        }
+        else {
+          // For non-string parameters, try to parse as JSON first, fallback to string
+          try {
+            newArgs[key] = JSON.parse(value)
+          }
+          catch {
+            newArgs[key] = value
+          }
+        }
       }
-      catch {
-        newArgs[key] = value
+      else {
+        // Fallback: try to parse as JSON first, fallback to string
+        try {
+          newArgs[key] = JSON.parse(value)
+        }
+        catch {
+          newArgs[key] = value
+        }
       }
 
       return newArgs
     })
-  }, [])
+  }, [selectedTool])
 
   const executeTool = useCallback(async () => {
     if (!selectedTool || !isConnected)

From 6562884f20ec1f626bb33d9fe0010d526114f46c Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Sat, 11 Oct 2025 13:42:52 +0200
Subject: [PATCH 11/21] refactor: remove unused data visualization and todo
 list components

- 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/resources/data-visualization.tsx       | 402 -----------------
 .../templates/ui/resources/kanban-board.tsx   |   2 +-
 .../src/templates/ui/resources/todo-list.tsx  | 408 ------------------
 .../src/templates/ui/src/server.ts            |   7 +-
 .../src/client/components/McpUIRenderer.tsx   |   1 -
 test_app/src/server.ts                        |   7 +-
 6 files changed, 5 insertions(+), 822 deletions(-)
 delete mode 100644 packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx
 delete mode 100644 packages/create-mcp-use-app/src/templates/ui/resources/todo-list.tsx

diff --git a/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx b/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx
deleted file mode 100644
index 4113c1af..00000000
--- a/packages/create-mcp-use-app/src/templates/ui/resources/data-visualization.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-// CSS styles for dynamic colors
-const dynamicStyles = `
-  .dynamic-bar {
-    background-color: var(--dynamic-color, #3498db);
-    height: var(--dynamic-height, 100px);
-  }
-  .dynamic-color {
-    background-color: var(--dynamic-color, #3498db);
-  }
-`
-
-// Inject styles
-if (typeof document !== 'undefined') {
-  const styleElement = document.createElement('style')
-  styleElement.textContent = dynamicStyles
-  document.head.appendChild(styleElement)
-}
-
-interface DataPoint {
-  label: string
-  value: number
-  color?: string
-}
-
-interface DataVisualizationProps {
-  initialData?: DataPoint[]
-  chartType?: 'bar' | 'line' | 'pie'
-}
-
-const DataVisualization: React.FC<DataVisualizationProps> = ({
-  initialData = [],
-  chartType = 'bar',
-}) => {
-  const [data, setData] = useState<DataPoint[]>(initialData)
-  const [currentChartType, setCurrentChartType] = useState<'bar' | 'line' | 'pie'>(chartType)
-  const [newDataPoint, setNewDataPoint] = useState({ label: '', value: 0 })
-
-  // Load data from URL parameters or use defaults
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const dataParam = urlParams.get('data')
-    const typeParam = urlParams.get('chartType')
-
-    if (dataParam) {
-      try {
-        const parsedData = JSON.parse(decodeURIComponent(dataParam))
-        setData(parsedData)
-      }
-      catch (error) {
-        console.error('Error parsing data from URL:', error)
-      }
-    }
-    else {
-      // Default data for demo
-      setData([
-        { label: 'January', value: 65, color: '#3498db' },
-        { label: 'February', value: 59, color: '#e74c3c' },
-        { label: 'March', value: 80, color: '#2ecc71' },
-        { label: 'April', value: 81, color: '#f39c12' },
-        { label: 'May', value: 56, color: '#9b59b6' },
-        { label: 'June', value: 55, color: '#1abc9c' },
-      ])
-    }
-
-    if (typeParam) {
-      setCurrentChartType(typeParam as 'bar' | 'line' | 'pie')
-    }
-  }, [])
-
-  const addDataPoint = () => {
-    if (newDataPoint.label.trim() && newDataPoint.value > 0) {
-      const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#34495e', '#e67e22']
-      const newPoint: DataPoint = {
-        ...newDataPoint,
-        color: colors[data.length % colors.length],
-      }
-      setData([...data, newPoint])
-      setNewDataPoint({ label: '', value: 0 })
-    }
-  }
-
-  const removeDataPoint = (index: number) => {
-    setData(data.filter((_, i) => i !== index))
-  }
-
-  const getMaxValue = () => {
-    return Math.max(...data.map(d => d.value), 0)
-  }
-
-  const getTotalValue = () => {
-    return data.reduce((sum, d) => sum + d.value, 0)
-  }
-
-  const renderBarChart = () => {
-    const maxValue = getMaxValue()
-
-    return (
-      <div className="p-5">
-        <h3 className="mb-5 text-slate-700">Bar Chart</h3>
-        <div className="flex items-end gap-2.5 h-75">
-          {data.map((point, index) => (
-            <div key={index} className="flex-1 flex flex-col items-center">
-              <div
-                className="w-full rounded-t transition-all duration-300 cursor-pointer relative dynamic-bar"
-                style={{
-                  '--dynamic-color': point.color || '#3498db',
-                  '--dynamic-height': `${(point.value / maxValue) * 250}px`,
-                } as React.CSSProperties}
-                title={`${point.label}: ${point.value}`}
-              >
-                <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-1.5 py-0.5 rounded text-xs whitespace-nowrap">
-                  {point.value}
-                </div>
-              </div>
-              <div className="mt-2.5 text-xs text-center text-slate-500 break-words">
-                {point.label}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  const renderLineChart = () => {
-    const maxValue = getMaxValue()
-    const width = 600
-    const height = 300
-    const padding = 40
-
-    const points = data.map((point, index) => ({
-      x: padding + (index * (width - 2 * padding)) / (data.length - 1),
-      y: padding + ((maxValue - point.value) / maxValue) * (height - 2 * padding),
-    }))
-
-    const pathData = points.map((point, index) =>
-      `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`,
-    ).join(' ')
-
-    return (
-      <div className="p-5">
-        <h3 className="mb-5 text-slate-700">Line Chart</h3>
-        <svg width={width} height={height} className="border border-slate-200 rounded-lg">
-          {/* Grid lines */}
-          {[0, 0.25, 0.5, 0.75, 1].map(ratio => (
-            <line
-              key={ratio}
-              x1={padding}
-              y1={padding + ratio * (height - 2 * padding)}
-              x2={width - padding}
-              y2={padding + ratio * (height - 2 * padding)}
-              stroke="#ecf0f1"
-              strokeWidth="1"
-            />
-          ))}
-
-          {/* Line */}
-          <path
-            d={pathData}
-            fill="none"
-            stroke="#3498db"
-            strokeWidth="3"
-          />
-
-          {/* Data points */}
-          {points.map((point, index) => (
-            <g key={index}>
-              <circle
-                cx={point.x}
-                cy={point.y}
-                r="6"
-                fill={data[index].color || '#3498db'}
-                stroke="white"
-                strokeWidth="2"
-                className="cursor-pointer"
-              />
-              <title>{`${data[index].label}: ${data[index].value}`}</title>
-            </g>
-          ))}
-
-          {/* Labels */}
-          {data.map((point, index) => (
-            <text
-              key={index}
-              x={padding + (index * (width - 2 * padding)) / (data.length - 1)}
-              y={height - 10}
-              textAnchor="middle"
-              fontSize="12"
-              fill="#7f8c8d"
-            >
-              {point.label}
-            </text>
-          ))}
-        </svg>
-      </div>
-    )
-  }
-
-  const renderPieChart = () => {
-    const total = getTotalValue()
-    let currentAngle = 0
-
-    return (
-      <div className="p-5">
-        <h3 className="mb-5 text-slate-700">Pie Chart</h3>
-        <div className="flex gap-10 items-center">
-          <svg width="300" height="300" className="border border-slate-200 rounded-lg">
-            {data.map((point, index) => {
-              const percentage = point.value / total
-              const angle = percentage * 360
-              const startAngle = currentAngle
-              const endAngle = currentAngle + angle
-              currentAngle += angle
-
-              const centerX = 150
-              const centerY = 150
-              const radius = 120
-
-              const startAngleRad = (startAngle - 90) * (Math.PI / 180)
-              const endAngleRad = (endAngle - 90) * (Math.PI / 180)
-
-              const x1 = centerX + radius * Math.cos(startAngleRad)
-              const y1 = centerY + radius * Math.sin(startAngleRad)
-              const x2 = centerX + radius * Math.cos(endAngleRad)
-              const y2 = centerY + radius * Math.sin(endAngleRad)
-
-              const largeArcFlag = angle > 180 ? 1 : 0
-
-              const pathData = [
-                `M ${centerX} ${centerY}`,
-                `L ${x1} ${y1}`,
-                `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
-                'Z',
-              ].join(' ')
-
-              return (
-                <g key={index}>
-                  <path
-                    d={pathData}
-                    fill={point.color || '#3498db'}
-                    stroke="white"
-                    strokeWidth="2"
-                    className="cursor-pointer"
-                  />
-                  <title>{`${point.label}: ${point.value} (${(percentage * 100).toFixed(1)}%)`}</title>
-                </g>
-              )
-            })}
-          </svg>
-
-          <div className="flex-1">
-            <h4 className="mb-4 text-slate-700">Legend</h4>
-            {data.map((point, index) => (
-              <div
-                key={index}
-                className="flex items-center mb-2 p-2 bg-slate-50 rounded"
-              >
-                <div 
-                  className="w-4 h-4 rounded-sm mr-2.5 dynamic-color"
-                  style={{
-                    '--dynamic-color': point.color || '#3498db',
-                  } as React.CSSProperties}
-                />
-                <span className="flex-1 text-sm">{point.label}</span>
-                <span className="text-sm font-bold text-slate-700">
-                  {point.value}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-5">
-      <div className="mb-8">
-        <h1 className="m-0 mb-5 text-slate-700">Data Visualization</h1>
-
-        {/* Controls */}
-        <div className="bg-white p-5 rounded-lg shadow-sm mb-5">
-          <div className="flex gap-5 flex-wrap items-center mb-5">
-            <div>
-              <label className="mr-2.5 font-bold text-slate-700">Chart Type:</label>
-              <select
-                value={currentChartType}
-                onChange={e => setCurrentChartType(e.target.value as typeof currentChartType)}
-                className="px-3 py-2 border border-gray-300 rounded"
-                aria-label="Select chart type"
-              >
-                <option value="bar">Bar Chart</option>
-                <option value="line">Line Chart</option>
-                <option value="pie">Pie Chart</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="flex gap-2.5 flex-wrap items-center">
-            <input
-              type="text"
-              placeholder="Label"
-              value={newDataPoint.label}
-              onChange={e => setNewDataPoint({ ...newDataPoint, label: e.target.value })}
-              className="px-3 py-2 border border-gray-300 rounded min-w-30"
-            />
-            <input
-              type="number"
-              placeholder="Value"
-              value={newDataPoint.value}
-              onChange={e => setNewDataPoint({ ...newDataPoint, value: Number(e.target.value) })}
-              className="px-3 py-2 border border-gray-300 rounded min-w-25"
-            />
-            <button
-              onClick={addDataPoint}
-              className="px-4 py-2 bg-blue-500 text-white border-none rounded cursor-pointer"
-            >
-              Add Data Point
-            </button>
-          </div>
-        </div>
-
-        {/* Chart */}
-        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
-          {data.length === 0
-            ? (
-                <div className="text-center py-10 px-5 text-slate-500 italic">
-                  No data to visualize. Add some data points above!
-                </div>
-              )
-            : (
-                <>
-                  {currentChartType === 'bar' && renderBarChart()}
-                  {currentChartType === 'line' && renderLineChart()}
-                  {currentChartType === 'pie' && renderPieChart()}
-                </>
-              )}
-        </div>
-
-        {/* Data table */}
-        {data.length > 0 && (
-          <div className="bg-white rounded-lg shadow-sm mt-5 overflow-hidden">
-            <div className="p-5 border-b border-slate-200">
-              <h3 className="m-0 text-slate-700">Data Table</h3>
-            </div>
-            <div className="overflow-x-auto">
-              <table className="w-full border-collapse">
-                <thead>
-                  <tr className="bg-slate-50">
-                    <th className="p-3 text-left border-b border-slate-200">Label</th>
-                    <th className="p-3 text-left border-b border-slate-200">Value</th>
-                    <th className="p-3 text-left border-b border-slate-200">Percentage</th>
-                    <th className="p-3 text-left border-b border-slate-200">Color</th>
-                    <th className="p-3 text-left border-b border-slate-200">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.map((point, index) => (
-                    <tr key={index} className="border-b border-slate-200">
-                      <td className="p-3">{point.label}</td>
-                      <td className="p-3 font-bold">{point.value}</td>
-                      <td className="p-3">
-                        {((point.value / getTotalValue()) * 100).toFixed(1)}
-                        %
-                      </td>
-                      <td className="p-3">
-                        <div 
-                          className="w-5 h-5 rounded-sm inline-block dynamic-color"
-                          style={{
-                            '--dynamic-color': point.color || '#3498db',
-                          } as React.CSSProperties}
-                        />
-                      </td>
-                      <td className="p-3">
-                        <button
-                          onClick={() => removeDataPoint(index)}
-                          className="bg-red-500 text-white border-none rounded px-2 py-1 cursor-pointer text-xs"
-                        >
-                          Remove
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Mount the component
-const container = document.getElementById('widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<DataVisualization />)
-}
diff --git a/packages/create-mcp-use-app/src/templates/ui/resources/kanban-board.tsx b/packages/create-mcp-use-app/src/templates/ui/resources/kanban-board.tsx
index 40225c7d..5a4454cb 100644
--- a/packages/create-mcp-use-app/src/templates/ui/resources/kanban-board.tsx
+++ b/packages/create-mcp-use-app/src/templates/ui/resources/kanban-board.tsx
@@ -16,7 +16,7 @@ interface KanbanBoardProps {
 
 const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
   const [tasks, setTasks] = useState<Task[]>(initialTasks)
-  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as const })
+  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as Task['priority'] })
 
   // Load tasks from URL parameters or use defaults
   useEffect(() => {
diff --git a/packages/create-mcp-use-app/src/templates/ui/resources/todo-list.tsx b/packages/create-mcp-use-app/src/templates/ui/resources/todo-list.tsx
deleted file mode 100644
index 673a7592..00000000
--- a/packages/create-mcp-use-app/src/templates/ui/resources/todo-list.tsx
+++ /dev/null
@@ -1,408 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-interface Todo {
-  id: string
-  text: string
-  completed: boolean
-  priority: 'low' | 'medium' | 'high'
-  dueDate?: string
-  category?: string
-}
-
-interface TodoListProps {
-  initialTodos?: Todo[]
-}
-
-const TodoList: React.FC<TodoListProps> = ({ initialTodos = [] }) => {
-  const [todos, setTodos] = useState<Todo[]>(initialTodos)
-  const [newTodo, setNewTodo] = useState('')
-  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all')
-  const [sortBy, setSortBy] = useState<'priority' | 'dueDate' | 'created'>('priority')
-
-  // Load todos from URL parameters or use defaults
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const todosParam = urlParams.get('todos')
-
-    if (todosParam) {
-      try {
-        const parsedTodos = JSON.parse(decodeURIComponent(todosParam))
-        setTodos(parsedTodos)
-      }
-      catch (error) {
-        console.error('Error parsing todos from URL:', error)
-      }
-    }
-    else {
-      // Default todos for demo
-      setTodos([
-        { id: '1', text: 'Complete project proposal', completed: false, priority: 'high', dueDate: '2024-01-15', category: 'Work' },
-        { id: '2', text: 'Buy groceries', completed: false, priority: 'medium', dueDate: '2024-01-12', category: 'Personal' },
-        { id: '3', text: 'Call dentist', completed: true, priority: 'low', category: 'Health' },
-        { id: '4', text: 'Read React documentation', completed: false, priority: 'medium', category: 'Learning' },
-        { id: '5', text: 'Plan weekend trip', completed: false, priority: 'low', dueDate: '2024-01-20', category: 'Personal' },
-      ])
-    }
-  }, [])
-
-  const addTodo = () => {
-    if (newTodo.trim()) {
-      const todo: Todo = {
-        id: Date.now().toString(),
-        text: newTodo,
-        completed: false,
-        priority: 'medium',
-      }
-      setTodos([...todos, todo])
-      setNewTodo('')
-    }
-  }
-
-  const toggleTodo = (id: string) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-    ))
-  }
-
-  const deleteTodo = (id: string) => {
-    setTodos(todos.filter(todo => todo.id !== id))
-  }
-
-  const updateTodoPriority = (id: string, priority: Todo['priority']) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, priority } : todo,
-    ))
-  }
-
-  const getFilteredTodos = () => {
-    let filtered = todos
-
-    // Filter by status
-    switch (filter) {
-      case 'active':
-        filtered = filtered.filter(todo => !todo.completed)
-        break
-      case 'completed':
-        filtered = filtered.filter(todo => todo.completed)
-        break
-      default:
-        break
-    }
-
-    // Sort todos
-    return filtered.sort((a, b) => {
-      switch (sortBy) {
-        case 'priority':
-          const priorityOrder = { high: 3, medium: 2, low: 1 }
-          return priorityOrder[b.priority] - priorityOrder[a.priority]
-        case 'dueDate':
-          if (!a.dueDate && !b.dueDate)
-            return 0
-          if (!a.dueDate)
-            return 1
-          if (!b.dueDate)
-            return -1
-          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
-        case 'created':
-        default:
-          return Number.parseInt(b.id) - Number.parseInt(a.id)
-      }
-    })
-  }
-
-  // const getPriorityColor = (priority: Todo['priority']) => {
-  //   switch (priority) {
-  //     case 'high': return '#e74c3c'
-  //     case 'medium': return '#f39c12'
-  //     case 'low': return '#27ae60'
-  //     default: return '#95a5a6'
-  //   }
-  // }
-
-  const getPriorityIcon = (priority: Todo['priority']) => {
-    switch (priority) {
-      case 'high': return '🔴'
-      case 'medium': return '🟡'
-      case 'low': return '🟢'
-      default: return '⚪'
-    }
-  }
-
-  const completedCount = todos.filter(todo => todo.completed).length
-  const totalCount = todos.length
-  const progressPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ marginBottom: '30px' }}>
-        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Todo List</h1>
-
-        {/* Progress bar */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
-            <span style={{ fontWeight: 'bold', color: '#2c3e50' }}>Progress</span>
-            <span style={{ color: '#7f8c8d' }}>
-              {completedCount}
-              {' '}
-              of
-              {' '}
-              {totalCount}
-              {' '}
-              completed
-            </span>
-          </div>
-          <div style={{
-            background: '#ecf0f1',
-            borderRadius: '10px',
-            height: '10px',
-            overflow: 'hidden',
-          }}
-          >
-            <div style={{
-              background: 'linear-gradient(90deg, #27ae60, #2ecc71)',
-              height: '100%',
-              width: `${progressPercentage}%`,
-              transition: 'width 0.3s ease',
-            }}
-            />
-          </div>
-        </div>
-
-        {/* Add new todo */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', gap: '10px' }}>
-            <input
-              type="text"
-              placeholder="Add a new todo..."
-              value={newTodo}
-              onChange={e => setNewTodo(e.target.value)}
-              onKeyPress={e => e.key === 'Enter' && addTodo()}
-              style={{
-                flex: '1',
-                padding: '12px 16px',
-                border: '1px solid #ddd',
-                borderRadius: '6px',
-                fontSize: '16px',
-              }}
-            />
-            <button
-              onClick={addTodo}
-              style={{
-                padding: '12px 24px',
-                background: '#3498db',
-                color: 'white',
-                border: 'none',
-                borderRadius: '6px',
-                cursor: 'pointer',
-                fontSize: '16px',
-                fontWeight: 'bold',
-              }}
-            >
-              Add
-            </button>
-          </div>
-        </div>
-
-        {/* Filters and sorting */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', alignItems: 'center' }}>
-            <div>
-              <label style={{ marginRight: '10px', fontWeight: 'bold', color: '#2c3e50' }}>Filter:</label>
-              <select
-                value={filter}
-                onChange={e => setFilter(e.target.value as typeof filter)}
-                style={{
-                  padding: '8px 12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                }}
-              >
-                <option value="all">All</option>
-                <option value="active">Active</option>
-                <option value="completed">Completed</option>
-              </select>
-            </div>
-
-            <div>
-              <label style={{ marginRight: '10px', fontWeight: 'bold', color: '#2c3e50' }}>Sort by:</label>
-              <select
-                value={sortBy}
-                onChange={e => setSortBy(e.target.value as typeof sortBy)}
-                style={{
-                  padding: '8px 12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                }}
-              >
-                <option value="priority">Priority</option>
-                <option value="dueDate">Due Date</option>
-                <option value="created">Created</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Todo list */}
-      <div style={{
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        overflow: 'hidden',
-      }}
-      >
-        {getFilteredTodos().map(todo => (
-          <div
-            key={todo.id}
-            style={{
-              padding: '20px',
-              borderBottom: '1px solid #ecf0f1',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '15px',
-              background: todo.completed ? '#f8f9fa' : 'white',
-            }}
-          >
-            <input
-              type="checkbox"
-              checked={todo.completed}
-              onChange={() => toggleTodo(todo.id)}
-              style={{
-                width: '20px',
-                height: '20px',
-                cursor: 'pointer',
-              }}
-            />
-
-            <div style={{ flex: '1' }}>
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                marginBottom: '5px',
-              }}
-              >
-                <span style={{
-                  fontSize: '18px',
-                  textDecoration: todo.completed ? 'line-through' : 'none',
-                  color: todo.completed ? '#7f8c8d' : '#2c3e50',
-                }}
-                >
-                  {todo.text}
-                </span>
-
-                {todo.category && (
-                  <span style={{
-                    background: '#e9ecef',
-                    color: '#495057',
-                    padding: '2px 8px',
-                    borderRadius: '12px',
-                    fontSize: '12px',
-                  }}
-                  >
-                    {todo.category}
-                  </span>
-                )}
-              </div>
-
-              {todo.dueDate && (
-                <div style={{
-                  fontSize: '14px',
-                  color: '#7f8c8d',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '5px',
-                }}
-                >
-                  📅 Due:
-                  {' '}
-                  {new Date(todo.dueDate).toLocaleDateString()}
-                </div>
-              )}
-            </div>
-
-            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-              <select
-                value={todo.priority}
-                onChange={e => updateTodoPriority(todo.id, e.target.value as Todo['priority'])}
-                style={{
-                  padding: '4px 8px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '12px',
-                }}
-              >
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-              </select>
-
-              <span style={{ fontSize: '16px' }}>
-                {getPriorityIcon(todo.priority)}
-              </span>
-
-              <button
-                onClick={() => deleteTodo(todo.id)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: '#e74c3c',
-                  cursor: 'pointer',
-                  fontSize: '18px',
-                  padding: '5px',
-                }}
-              >
-                🗑️
-              </button>
-            </div>
-          </div>
-        ))}
-
-        {getFilteredTodos().length === 0 && (
-          <div style={{
-            textAlign: 'center',
-            padding: '40px 20px',
-            color: '#7f8c8d',
-            fontStyle: 'italic',
-          }}
-          >
-            {filter === 'all'
-              ? 'No todos yet. Add one above!'
-              : filter === 'active'
-                ? 'No active todos!'
-                : 'No completed todos!'}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Mount the component
-const container = document.getElementById('widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<TodoList />)
-}
diff --git a/packages/create-mcp-use-app/src/templates/ui/src/server.ts b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
index 885ba381..8a150b09 100644
--- a/packages/create-mcp-use-app/src/templates/ui/src/server.ts
+++ b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
@@ -54,11 +54,8 @@ server.resource({
     return {
       contents: [{
         uri: 'ui://widget/kanban-board',
-        mimeType: 'text/html+skybridge',
-        text: `
-<div id="kanban-root"></div>
-<script type="module" src="${widgetUrl}"></script>
-        `.trim()
+        mimeType: 'text/uri-list',
+        text: widgetUrl
       }]
     }
   },
diff --git a/packages/inspector/src/client/components/McpUIRenderer.tsx b/packages/inspector/src/client/components/McpUIRenderer.tsx
index ed55aca6..683005c7 100644
--- a/packages/inspector/src/client/components/McpUIRenderer.tsx
+++ b/packages/inspector/src/client/components/McpUIRenderer.tsx
@@ -40,7 +40,6 @@ function convertToMcpUIResource(resource: Resource): any {
  */
 export function McpUIRenderer({ resource, onUIAction, className }: McpUIRendererProps) {
   const handleUIAction = async (action: any) => {
-    console.log('MCP UI Action:', action)
     return onUIAction?.(action)
   }
 
diff --git a/test_app/src/server.ts b/test_app/src/server.ts
index 885ba381..8a150b09 100644
--- a/test_app/src/server.ts
+++ b/test_app/src/server.ts
@@ -54,11 +54,8 @@ server.resource({
     return {
       contents: [{
         uri: 'ui://widget/kanban-board',
-        mimeType: 'text/html+skybridge',
-        text: `
-<div id="kanban-root"></div>
-<script type="module" src="${widgetUrl}"></script>
-        `.trim()
+        mimeType: 'text/uri-list',
+        text: widgetUrl
       }]
     }
   },

From a27eb47dde53599e448be31d790fba5db410f24a Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Mon, 13 Oct 2025 17:01:14 +0200
Subject: [PATCH 12/21] fix entrypoint

---
 packages/cli/src/index.ts                      |  8 ++++----
 packages/create-mcp-use-app/src/index.ts       |  1 +
 .../src/templates/ui/README.md                 | 18 +++++++++---------
 .../src/templates/ui/index.ts                  | 12 ++++++++++++
 .../src/templates/ui/package.json              |  2 +-
 .../src/templates/ui/tsconfig.json             |  2 +-
 pnpm-lock.yaml                                 | 10 +++++-----
 test_app/README.md                             | 18 +++++++++---------
 test_app/index.ts                              |  3 +++
 test_app/package.json                          |  2 +-
 test_app/resources/kanban-board.tsx            |  2 +-
 test_app/tsconfig.json                         |  2 +-
 12 files changed, 48 insertions(+), 32 deletions(-)
 create mode 100644 packages/create-mcp-use-app/src/templates/ui/index.ts
 create mode 100644 test_app/index.ts

diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index d24cba25..a4a61b55 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -120,11 +120,11 @@ program
       }
 
       // Find the main source file
-      let serverFile = 'src/server.ts';
+      let serverFile = 'index.ts';
       try {
         await access(path.join(projectPath, serverFile));
       } catch {
-        serverFile = 'src/index.ts';
+        serverFile = 'src/server.ts';
       }
 
       // Start all processes concurrently
@@ -210,11 +210,11 @@ program
       console.log(`\x1b[36m\x1b[1mmcp-use\x1b[0m \x1b[90mVersion: ${packageJson.version}\x1b[0m\n`);
 
       // Find the built server file
-      let serverFile = 'dist/server.js';
+      let serverFile = 'dist/index.js';
       try {
         await access(path.join(projectPath, serverFile));
       } catch {
-        serverFile = 'dist/index.js';
+        serverFile = 'dist/server.js';
       }
 
       console.log('Starting production server...');
diff --git a/packages/create-mcp-use-app/src/index.ts b/packages/create-mcp-use-app/src/index.ts
index 179c0f64..3f9f58d8 100644
--- a/packages/create-mcp-use-app/src/index.ts
+++ b/packages/create-mcp-use-app/src/index.ts
@@ -172,6 +172,7 @@ program
         console.log('   │   ├── data-visualization.tsx')
         console.log('   │   ├── kanban-board.tsx')
         console.log('   │   └── todo-list.tsx')
+        console.log('   ├── index.ts')
         console.log('   ├── package.json')
         console.log('   ├── tsconfig.json')
         console.log('   └── README.md')
diff --git a/packages/create-mcp-use-app/src/templates/ui/README.md b/packages/create-mcp-use-app/src/templates/ui/README.md
index f8995b2d..a6d31caa 100644
--- a/packages/create-mcp-use-app/src/templates/ui/README.md
+++ b/packages/create-mcp-use-app/src/templates/ui/README.md
@@ -234,29 +234,29 @@ if (container) {
 npm run build
 
 # The built files will be in dist/
-# - dist/server.js (MCP server)
-# - dist/resources/ (UI widgets)
+# - dist/index.js (MCP server entry point)
+# - dist/src/server.js (MCP server implementation)  
+# - dist/resources/ (Compiled TypeScript + UI widget bundles)
 ```
 
 ## Project Structure
 
 ```
 my-ui-server/
+├── index.ts                   # Entry point (re-exports server)
 ├── src/
 │   └── server.ts              # MCP server with UI endpoints
-├── resources/                 # React components and HTML entry points
-│   ├── kanban-board.html
+├── resources/                 # React components (TSX widgets)
 │   ├── kanban-board.tsx
-│   ├── todo-list.html
 │   ├── todo-list.tsx
-│   ├── data-visualization.html
 │   └── data-visualization.tsx
 ├── dist/                      # Built files
-│   ├── server.js
-│   └── resources/
+│   ├── index.js               # Entry point
+│   ├── src/
+│   │   └── server.js          # Server implementation
+│   └── resources/             # TypeScript output + bundled widgets
 ├── package.json
 ├── tsconfig.json
-├── vite.config.ts
 └── README.md
 ```
 
diff --git a/packages/create-mcp-use-app/src/templates/ui/index.ts b/packages/create-mcp-use-app/src/templates/ui/index.ts
new file mode 100644
index 00000000..6f48dc04
--- /dev/null
+++ b/packages/create-mcp-use-app/src/templates/ui/index.ts
@@ -0,0 +1,12 @@
+/**
+ * MCP Server Entry Point
+ * 
+ * This file serves as the main entry point for the MCP server application.
+ * It re-exports all functionality from the server implementation, allowing
+ * the CLI and other tools to locate and start the server.
+ * 
+ * The server is automatically started when this module is imported, making
+ * it suitable for both direct execution and programmatic usage.
+ */
+export * from './src/server.js'
+
diff --git a/packages/create-mcp-use-app/src/templates/ui/package.json b/packages/create-mcp-use-app/src/templates/ui/package.json
index d59a0852..53158e80 100644
--- a/packages/create-mcp-use-app/src/templates/ui/package.json
+++ b/packages/create-mcp-use-app/src/templates/ui/package.json
@@ -14,7 +14,7 @@
     "ai",
     "tools"
   ],
-  "main": "dist/server.js",
+  "main": "dist/index.js",
   "scripts": {
     "build": "mcp-use build",
     "dev": "mcp-use dev",
diff --git a/packages/create-mcp-use-app/src/templates/ui/tsconfig.json b/packages/create-mcp-use-app/src/templates/ui/tsconfig.json
index c28fa523..5a2c6947 100644
--- a/packages/create-mcp-use-app/src/templates/ui/tsconfig.json
+++ b/packages/create-mcp-use-app/src/templates/ui/tsconfig.json
@@ -15,6 +15,6 @@
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "resources/**/*"],
+  "include": ["index.ts", "src/**/*", "resources/**/*"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index becdc2ee..07f60b65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ overrides:
 
 patchedDependencies:
   '@mcp-ui/server@5.11.0':
-    hash: 5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11
+    hash: q4o7znptjmfaz7quhzmm6hp4jy
     path: patches/@mcp-ui__server@5.11.0.patch
 
 importers:
@@ -125,7 +125,7 @@ importers:
     dependencies:
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
+        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -352,7 +352,7 @@ importers:
         version: 0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(ws@8.18.3)
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
+        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
       '@mcp-use/inspector':
         specifier: workspace:*
         version: link:../inspector
@@ -523,7 +523,7 @@ importers:
     dependencies:
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
+        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -7921,7 +7921,7 @@ snapshots:
       - preact
       - supports-color
 
-  '@mcp-ui/server@5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)':
+  '@mcp-ui/server@5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)':
     dependencies:
       '@modelcontextprotocol/sdk': 1.12.1
     transitivePeerDependencies:
diff --git a/test_app/README.md b/test_app/README.md
index f8995b2d..a6d31caa 100644
--- a/test_app/README.md
+++ b/test_app/README.md
@@ -234,29 +234,29 @@ if (container) {
 npm run build
 
 # The built files will be in dist/
-# - dist/server.js (MCP server)
-# - dist/resources/ (UI widgets)
+# - dist/index.js (MCP server entry point)
+# - dist/src/server.js (MCP server implementation)  
+# - dist/resources/ (Compiled TypeScript + UI widget bundles)
 ```
 
 ## Project Structure
 
 ```
 my-ui-server/
+├── index.ts                   # Entry point (re-exports server)
 ├── src/
 │   └── server.ts              # MCP server with UI endpoints
-├── resources/                 # React components and HTML entry points
-│   ├── kanban-board.html
+├── resources/                 # React components (TSX widgets)
 │   ├── kanban-board.tsx
-│   ├── todo-list.html
 │   ├── todo-list.tsx
-│   ├── data-visualization.html
 │   └── data-visualization.tsx
 ├── dist/                      # Built files
-│   ├── server.js
-│   └── resources/
+│   ├── index.js               # Entry point
+│   ├── src/
+│   │   └── server.js          # Server implementation
+│   └── resources/             # TypeScript output + bundled widgets
 ├── package.json
 ├── tsconfig.json
-├── vite.config.ts
 └── README.md
 ```
 
diff --git a/test_app/index.ts b/test_app/index.ts
new file mode 100644
index 00000000..67a36fc7
--- /dev/null
+++ b/test_app/index.ts
@@ -0,0 +1,3 @@
+// Entry point - re-exports the server for production use
+export * from './src/server.js'
+
diff --git a/test_app/package.json b/test_app/package.json
index 9b88d1a9..aa6fd9d3 100644
--- a/test_app/package.json
+++ b/test_app/package.json
@@ -14,7 +14,7 @@
     "ai",
     "tools"
   ],
-  "main": "dist/server.js",
+  "main": "dist/index.js",
   "scripts": {
     "build": "mcp-use build",
     "dev": "mcp-use dev",
diff --git a/test_app/resources/kanban-board.tsx b/test_app/resources/kanban-board.tsx
index 40225c7d..5a4454cb 100644
--- a/test_app/resources/kanban-board.tsx
+++ b/test_app/resources/kanban-board.tsx
@@ -16,7 +16,7 @@ interface KanbanBoardProps {
 
 const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
   const [tasks, setTasks] = useState<Task[]>(initialTasks)
-  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as const })
+  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as Task['priority'] })
 
   // Load tasks from URL parameters or use defaults
   useEffect(() => {
diff --git a/test_app/tsconfig.json b/test_app/tsconfig.json
index c28fa523..5a2c6947 100644
--- a/test_app/tsconfig.json
+++ b/test_app/tsconfig.json
@@ -15,6 +15,6 @@
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*", "resources/**/*"],
+  "include": ["index.ts", "src/**/*", "resources/**/*"],
   "exclude": ["node_modules", "dist"]
 }

From 8412002712ad054655143d2c11ee030ef50738b0 Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Mon, 13 Oct 2025 18:40:17 +0200
Subject: [PATCH 13/21] simplify release workflows with single npm token

---
 .github/workflows/release.yml      | 51 +++-----------------------
 .github/workflows/release_beta.yml | 57 +++---------------------------
 2 files changed, 10 insertions(+), 98 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index f64619fa..f0eb863e 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -36,55 +36,14 @@ jobs:
       - name: Install Dependencies
         run: pnpm install
 
-      - name: Build Packages
-        run: pnpm build
-
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
-          version: pnpm run version
-          commit: 'chore: version packages'
-          title: 'chore: version packages'
+          publish: pnpm release
+          version: pnpm version
+          commit: 'chore(release): version packages'
+          title: 'chore(release): version packages'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      
-      - name: Publish mcp-use package with NPM_TOKEN
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
-          echo "📦 Publishing mcp-use with NPM_TOKEN..."
-          cd packages/mcp-use && pnpm publish --access public --no-git-checks
-          cd ../..
-          rm -f .npmrc
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      
-      - name: Publish other packages with NPM_TOKEN_ORG
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_ORG }}" > .npmrc
-          
-          # Publish in dependency order: inspector and create-mcp-use-app first, then cli
-          echo "📦 Publishing @mcp-use/inspector with NPM_TOKEN_ORG..."
-          cd packages/inspector && pnpm publish --access public --no-git-checks
-          cd ../..
-          
-          echo "📦 Publishing create-mcp-use-app with NPM_TOKEN_ORG..."
-          cd packages/create-mcp-use-app && pnpm publish --access public --no-git-checks
-          cd ../..
-          
-          echo "📦 Publishing @mcp-use/cli with NPM_TOKEN_ORG..."
-          cd packages/cli && pnpm publish --access public --no-git-checks
-          cd ../..
-          
-          rm -f .npmrc
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_ORG }}
-
-      - name: Send Notification on Success
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: |
-          echo "✅ Packages published successfully!"
-          echo "📦 mcp-use published with NPM_TOKEN"
-          echo "📦 Other packages published with NPM_TOKEN_ORG"
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN_ORG }}
diff --git a/.github/workflows/release_beta.yml b/.github/workflows/release_beta.yml
index 1c1111e5..42fc80d8 100644
--- a/.github/workflows/release_beta.yml
+++ b/.github/workflows/release_beta.yml
@@ -36,62 +36,15 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --no-frozen-lockfile
 
-      - name: Build Packages
-        run: pnpm build
-
       - name: Create Release Pull Request or Publish to npm
         id: changesets
         uses: changesets/action@v1
         with:
-          version: pnpm run version
-          commit: 'chore: version packages (beta)'
-          title: 'chore: version packages (beta)'
+          publish: pnpm release
+          version: pnpm version
+          commit: 'chore(release): version packages (beta)'
+          title: 'chore(release): version packages (beta)'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      
-      - name: Publish mcp-use package with NPM_TOKEN (beta)
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
-          echo "📦 Publishing mcp-use@beta with NPM_TOKEN..."
-          cd packages/mcp-use && pnpm publish --access public --no-git-checks --tag beta
-          cd ../..
-          rm -f .npmrc
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-      
-      - name: Publish other packages with NPM_TOKEN_ORG (beta)
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: |
-          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN_ORG }}" > .npmrc
-          
-          # Publish in dependency order: inspector and create-mcp-use-app first, then cli
-          echo "📦 Publishing @mcp-use/inspector@beta with NPM_TOKEN_ORG..."
-          cd packages/inspector && pnpm publish --access public --no-git-checks --tag beta
-          cd ../..
-          
-          echo "📦 Publishing create-mcp-use-app@beta with NPM_TOKEN_ORG..."
-          cd packages/create-mcp-use-app && pnpm publish --access public --no-git-checks --tag beta
-          cd ../..
-          
-          echo "📦 Publishing @mcp-use/cli@beta with NPM_TOKEN_ORG..."
-          cd packages/cli && pnpm publish --access public --no-git-checks --tag beta
-          cd ../..
-          
-          rm -f .npmrc
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN_ORG }}
-
-      - name: Send Notification on Success
-        if: steps.changesets.outputs.hasChangesets == 'false'
-        run: |
-          echo "✅ Beta packages published successfully!"
-          echo "📦 mcp-use@beta published with NPM_TOKEN"
-          echo "📦 Other packages@beta published with NPM_TOKEN_ORG"
-          echo ""
-          echo "Install beta versions with:"
-          echo "  npm install mcp-use@beta"
-          echo "  npm install @mcp-use/cli@beta"
-          echo "  npm install @mcp-use/inspector@beta"
-          echo "  npm install create-mcp-use-app@beta"
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN_ORG }}
 

From 68b92eae69a8f21661b180384cdae58e461818af Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Mon, 13 Oct 2025 18:52:51 +0200
Subject: [PATCH 14/21] remove ignored pkg in changeset

---
 .changeset/config.json                                    | 2 +-
 VERSIONING.md                                             | 2 +-
 packages/create-mcp-use-app/src/templates/ui/package.json | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index cd1bcf04..2be13d43 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["test-ui"]
+  "ignore": []
 }
diff --git a/VERSIONING.md b/VERSIONING.md
index 2038bd96..6e4895e9 100644
--- a/VERSIONING.md
+++ b/VERSIONING.md
@@ -216,7 +216,7 @@ If you want packages to always have the same version:
 ### Ignore Packages
 
 Packages already ignored (in `.changeset/config.json`):
-- `test-ui` (test application, not published)
+- add the package in `"ignore": []`
 
 ## CI/CD Integration
 
diff --git a/packages/create-mcp-use-app/src/templates/ui/package.json b/packages/create-mcp-use-app/src/templates/ui/package.json
index 53158e80..bd084460 100644
--- a/packages/create-mcp-use-app/src/templates/ui/package.json
+++ b/packages/create-mcp-use-app/src/templates/ui/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "test-ui",
+  "name": "mcp-use-server-with-mcp-ui",
   "type": "module",
   "version": "1.0.0",
-  "description": "MCP server: test-ui",
+  "description": "MCP server: mcp-use-server-with-mcp-ui",
   "author": "",
   "license": "MIT",
   "keywords": [

From 07564bfd0deffe280199a1ed9a829df784b152cb Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Mon, 13 Oct 2025 18:55:29 +0200
Subject: [PATCH 15/21] remove test_app

---
 INSPECTOR_INTEGRATION.md                  |  22 --
 VERSIONING.md                             |   1 -
 package.json                              |   3 +-
 pnpm-workspace.yaml                       |   1 -
 test_app/README.md                        | 454 ----------------------
 test_app/index.ts                         |   3 -
 test_app/package.json                     |  45 ---
 test_app/resources/data-visualization.tsx | 402 -------------------
 test_app/resources/kanban-board.tsx       | 306 ---------------
 test_app/resources/todo-list.tsx          | 408 -------------------
 test_app/src/server.ts                    |  67 ----
 test_app/tsconfig.json                    |  20 -
 12 files changed, 1 insertion(+), 1731 deletions(-)
 delete mode 100644 test_app/README.md
 delete mode 100644 test_app/index.ts
 delete mode 100644 test_app/package.json
 delete mode 100644 test_app/resources/data-visualization.tsx
 delete mode 100644 test_app/resources/kanban-board.tsx
 delete mode 100644 test_app/resources/todo-list.tsx
 delete mode 100644 test_app/src/server.ts
 delete mode 100644 test_app/tsconfig.json

diff --git a/INSPECTOR_INTEGRATION.md b/INSPECTOR_INTEGRATION.md
index 616c01a4..4038f635 100644
--- a/INSPECTOR_INTEGRATION.md
+++ b/INSPECTOR_INTEGRATION.md
@@ -121,26 +121,4 @@ For published packages:
 - `packages/mcp-use/package.json` - Added inspector as optional peer dependency
 - `packages/create-mcp-use-app/src/templates/ui/package.json` - Added inspector dependency
 - `packages/create-mcp-use-app/src/templates/ui/src/server.ts` - Updated comments
-- `test_app/package.json` - Added inspector dependency
-- `test_app/src/server.ts` - Updated comments
-
-## Testing
-
-To test the integration:
-
-1. Build all packages:
-   ```bash
-   cd /Users/e.t./Projects/mcp-use/mcp-use-ts
-   pnpm install
-   cd packages/inspector && pnpm build
-   cd ../mcp-use && pnpm build
-   ```
-
-2. Run the test app:
-   ```bash
-   cd test_app
-   pnpm dev
-   ```
-
-3. Open `http://localhost:3000/inspector` in your browser
 
diff --git a/VERSIONING.md b/VERSIONING.md
index 6e4895e9..6ee3a7c4 100644
--- a/VERSIONING.md
+++ b/VERSIONING.md
@@ -299,7 +299,6 @@ Make sure all packages are in the workspace config (`pnpm-workspace.yaml`):
 ```yaml
 packages:
   - 'packages/*'
-  - 'test_app'
 ```
 
 ### "Package is not published"
diff --git a/package.json b/package.json
index d90066d7..e9278a44 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,7 @@
   "private": true,
   "type": "module",
   "workspaces": [
-    "packages/*",
-    "test_app"
+    "packages/*"
   ],
   "scripts": {
     "build": "pnpm run build:mcp-use && pnpm run build:other",
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index cd64b37d..28363ba3 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,4 +3,3 @@ packages:
   - 'packages/mcp-use/examples/client/react'
   - 'packages/mcp-use/examples/server/simple'
   - 'packages/create-mcp-use-app/src/templates/ui'
-  - 'test_app'
diff --git a/test_app/README.md b/test_app/README.md
deleted file mode 100644
index a6d31caa..00000000
--- a/test_app/README.md
+++ /dev/null
@@ -1,454 +0,0 @@
-# UI MCP Server
-
-An MCP server with React UI widgets created with `create-mcp-app` that provides interactive web components for MCP clients.
-
-## Features
-
-- **🎨 React Components**: Interactive UI widgets built with React
-- **🔥 Hot Reloading**: Development server with instant updates
-- **📦 Production Builds**: Optimized bundles for production
-- **🌐 Web Endpoints**: Serve widgets at `/mcp-use/widgets/{widget-name}`
-- **🛠️ Development Tools**: Full TypeScript support and modern tooling
-
-## Getting Started
-
-### Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server with hot reloading
-npm run dev
-```
-
-This will start:
-
-- MCP server on port 3000
-- Vite dev server on port 3001 with hot reloading
-
-### Production
-
-```bash
-# Build the server and UI components
-npm run build
-
-# Run the built server
-npm start
-```
-
-## Available Widgets
-
-### 1. Kanban Board (`/mcp-use/widgets/kanban-board`)
-
-Interactive Kanban board for task management.
-
-**Features:**
-
-- Drag and drop tasks between columns
-- Add/remove tasks
-- Priority levels and assignees
-- Real-time updates
-
-**Usage:**
-
-```typescript
-mcp.tool({
-  name: 'show-kanban',
-  inputs: [{ name: 'tasks', type: 'string', required: true }],
-  fn: async ({ tasks }) => {
-    // Display Kanban board with tasks
-  }
-})
-```
-
-### 2. Todo List (`/mcp-use/widgets/todo-list`)
-
-Interactive todo list with filtering and sorting.
-
-**Features:**
-
-- Add/complete/delete todos
-- Filter by status (all/active/completed)
-- Sort by priority, due date, or creation time
-- Progress tracking
-- Categories and due dates
-
-**Usage:**
-
-```typescript
-mcp.tool({
-  name: 'show-todo-list',
-  inputs: [{ name: 'todos', type: 'string', required: true }],
-  fn: async ({ todos }) => {
-    // Display todo list with todos
-  }
-})
-```
-
-### 3. Data Visualization (`/mcp-use/widgets/data-visualization`)
-
-Interactive charts and data visualization.
-
-**Features:**
-
-- Bar charts, line charts, and pie charts
-- Add/remove data points
-- Interactive legends
-- Data table view
-- Multiple chart types
-
-**Usage:**
-
-```typescript
-mcp.tool({
-  name: 'show-data-viz',
-  inputs: [
-    { name: 'data', type: 'string', required: true },
-    { name: 'chartType', type: 'string', required: false }
-  ],
-  fn: async ({ data, chartType }) => {
-    // Display data visualization
-  }
-})
-```
-
-## Development Workflow
-
-### 1. Create a New Widget
-
-1. **Create the React component:**
-
-   ```bash
-   # Create resources/my-widget.tsx
-   touch resources/my-widget.tsx
-   ```
-
-2. **Create the HTML entry point:**
-
-   ```bash
-   # Create resources/my-widget.html
-   touch resources/my-widget.html
-   ```
-
-3. **Add to Vite config:**
-
-   ```typescript
-   // vite.config.ts
-   rollupOptions: {
-     input: {
-       'my-widget': resolve(__dirname, 'resources/my-widget.html')
-     }
-   }
-   ```
-
-4. **Add MCP resource:**
-   ```typescript
-   // src/server.ts
-   mcp.resource({
-     uri: 'ui://widget/my-widget',
-     name: 'My Widget',
-     mimeType: 'text/html+skybridge',
-     fn: async () => {
-       const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/my-widget`
-       return `<div id="my-widget-root"></div><script type="module" src="${widgetUrl}"></script>`
-     }
-   })
-   ```
-
-### 2. Development with Hot Reloading
-
-```bash
-# Start development
-npm run dev
-
-# Visit your widget
-open http://localhost:3001/my-widget.html
-```
-
-Changes to your React components will automatically reload!
-
-### 3. Widget Development Best Practices
-
-#### Component Structure
-
-```typescript
-import React, { useState, useEffect } from 'react'
-import { createRoot } from 'react-dom/client'
-
-interface MyWidgetProps {
-  initialData?: any
-}
-
-const MyWidget: React.FC<MyWidgetProps> = ({ initialData = [] }) => {
-  const [data, setData] = useState(initialData)
-
-  // Load data from URL parameters
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const dataParam = urlParams.get('data')
-
-    if (dataParam) {
-      try {
-        const parsedData = JSON.parse(decodeURIComponent(dataParam))
-        setData(parsedData)
-      } catch (error) {
-        console.error('Error parsing data:', error)
-      }
-    }
-  }, [])
-
-  return (
-    <div>
-      {/* Your widget content */}
-    </div>
-  )
-}
-
-// Render the component
-const container = document.getElementById('my-widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<MyWidget />)
-}
-```
-
-#### Styling Guidelines
-
-- Use inline styles for simplicity
-- Follow the existing design system
-- Ensure responsive design
-- Use consistent color palette
-
-#### Data Handling
-
-- Accept data via URL parameters
-- Provide sensible defaults
-- Handle errors gracefully
-- Use TypeScript for type safety
-
-### 4. Production Deployment
-
-```bash
-# Build everything
-npm run build
-
-# The built files will be in dist/
-# - dist/index.js (MCP server entry point)
-# - dist/src/server.js (MCP server implementation)  
-# - dist/resources/ (Compiled TypeScript + UI widget bundles)
-```
-
-## Project Structure
-
-```
-my-ui-server/
-├── index.ts                   # Entry point (re-exports server)
-├── src/
-│   └── server.ts              # MCP server with UI endpoints
-├── resources/                 # React components (TSX widgets)
-│   ├── kanban-board.tsx
-│   ├── todo-list.tsx
-│   └── data-visualization.tsx
-├── dist/                      # Built files
-│   ├── index.js               # Entry point
-│   ├── src/
-│   │   └── server.js          # Server implementation
-│   └── resources/             # TypeScript output + bundled widgets
-├── package.json
-├── tsconfig.json
-└── README.md
-```
-
-## API Reference
-
-### MCP Resources
-
-All UI widgets are available as MCP resources:
-
-- `ui://status` - Server status and available widgets
-- `ui://widget/kanban-board` - Kanban board widget
-- `ui://widget/todo-list` - Todo list widget
-- `ui://widget/data-visualization` - Data visualization widget
-
-### MCP Tools
-
-- `show-kanban` - Display Kanban board with tasks
-- `show-todo-list` - Display todo list with items
-- `show-data-viz` - Display data visualization
-
-### MCP Prompts
-
-- `ui-development` - Generate UI development guidance
-
-## Customization
-
-### Adding New Dependencies
-
-```bash
-# Add React libraries
-npm install @types/react-router-dom react-router-dom
-
-# Add UI libraries
-npm install @mui/material @emotion/react @emotion/styled
-```
-
-### Environment Variables
-
-Create a `.env` file:
-
-```bash
-# Server configuration
-PORT=3000
-NODE_ENV=development
-
-# UI configuration
-VITE_API_URL=http://localhost:3000
-```
-
-### Custom Build Configuration
-
-```typescript
-// vite.config.ts
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    rollupOptions: {
-      input: {
-        'my-custom-widget': resolve(__dirname, 'resources/my-custom-widget.html')
-      }
-    }
-  }
-})
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **"Cannot find module" errors**
-
-   - Make sure all dependencies are installed: `npm install`
-   - Check that TypeScript paths are correct
-
-2. **Hot reloading not working**
-
-   - Ensure Vite dev server is running on port 3001
-   - Check that the widget HTML file exists
-
-3. **Widget not loading**
-
-   - Verify the widget is added to vite.config.ts
-   - Check that the MCP resource is properly configured
-
-4. **Build errors**
-   - Run `npm run build` to see detailed error messages
-   - Check that all imports are correct
-
-### Development Tips
-
-- Use browser dev tools to debug React components
-- Check the Network tab for failed requests
-- Use React DevTools browser extension
-- Monitor console for errors
-
-## Learn More
-
-- [React Documentation](https://react.dev/)
-- [Vite Documentation](https://vitejs.dev/)
-- [MCP Documentation](https://modelcontextprotocol.io)
-- [mcp-use Documentation](https://docs.mcp-use.io)
-
-## Examples
-
-### Simple Counter Widget
-
-```typescript
-// resources/counter.tsx
-import React, { useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-const Counter: React.FC = () => {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div style={{ padding: '20px', textAlign: 'center' }}>
-      <h1>Counter: {count}</h1>
-      <button onClick={() => setCount(count + 1)}>
-        Increment
-      </button>
-      <button onClick={() => setCount(count - 1)}>
-        Decrement
-      </button>
-    </div>
-  )
-}
-
-const container = document.getElementById('counter-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<Counter />)
-}
-```
-
-### Data Table Widget
-
-```typescript
-// resources/data-table.tsx
-import React, { useState, useEffect } from 'react'
-import { createRoot } from 'react-dom/client'
-
-interface TableData {
-  id: string
-  name: string
-  value: number
-}
-
-const DataTable: React.FC = () => {
-  const [data, setData] = useState<TableData[]>([])
-
-  useEffect(() => {
-    // Load data from URL or use defaults
-    const urlParams = new URLSearchParams(window.location.search)
-    const dataParam = urlParams.get('data')
-
-    if (dataParam) {
-      try {
-        setData(JSON.parse(decodeURIComponent(dataParam)))
-      } catch (error) {
-        console.error('Error parsing data:', error)
-      }
-    }
-  }, [])
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <h1>Data Table</h1>
-      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Value</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map(row => (
-            <tr key={row.id}>
-              <td>{row.name}</td>
-              <td>{row.value}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
-
-const container = document.getElementById('data-table-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<DataTable />)
-}
-```
-
-Happy coding! 🚀
diff --git a/test_app/index.ts b/test_app/index.ts
deleted file mode 100644
index 67a36fc7..00000000
--- a/test_app/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// Entry point - re-exports the server for production use
-export * from './src/server.js'
-
diff --git a/test_app/package.json b/test_app/package.json
deleted file mode 100644
index aa6fd9d3..00000000
--- a/test_app/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
-  "name": "test_app",
-  "type": "module",
-  "version": "1.0.0",
-  "description": "MCP server: test_app",
-  "author": "",
-  "license": "MIT",
-  "keywords": [
-    "mcp",
-    "server",
-    "ui",
-    "react",
-    "widgets",
-    "ai",
-    "tools"
-  ],
-  "main": "dist/index.js",
-  "scripts": {
-    "build": "mcp-use build",
-    "dev": "mcp-use dev",
-    "start": "mcp-use start"
-  },
-  "dependencies": {
-    "@mcp-ui/server": "^5.11.0",
-    "cors": "^2.8.5",
-    "express": "^4.18.0",
-    "mcp-use": "^1.0.0"
-  },
-  "devDependencies": {
-    "@mcp-use/cli": "^2.1.2",
-    "@mcp-use/inspector": "^0.3.2",
-    "@types/cors": "^2.8.0",
-    "@types/express": "^4.17.0",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "concurrently": "^8.0.0",
-    "esbuild": "^0.23.0",
-    "globby": "^14.0.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.0.0"
-  }
-}
\ No newline at end of file
diff --git a/test_app/resources/data-visualization.tsx b/test_app/resources/data-visualization.tsx
deleted file mode 100644
index 4113c1af..00000000
--- a/test_app/resources/data-visualization.tsx
+++ /dev/null
@@ -1,402 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-// CSS styles for dynamic colors
-const dynamicStyles = `
-  .dynamic-bar {
-    background-color: var(--dynamic-color, #3498db);
-    height: var(--dynamic-height, 100px);
-  }
-  .dynamic-color {
-    background-color: var(--dynamic-color, #3498db);
-  }
-`
-
-// Inject styles
-if (typeof document !== 'undefined') {
-  const styleElement = document.createElement('style')
-  styleElement.textContent = dynamicStyles
-  document.head.appendChild(styleElement)
-}
-
-interface DataPoint {
-  label: string
-  value: number
-  color?: string
-}
-
-interface DataVisualizationProps {
-  initialData?: DataPoint[]
-  chartType?: 'bar' | 'line' | 'pie'
-}
-
-const DataVisualization: React.FC<DataVisualizationProps> = ({
-  initialData = [],
-  chartType = 'bar',
-}) => {
-  const [data, setData] = useState<DataPoint[]>(initialData)
-  const [currentChartType, setCurrentChartType] = useState<'bar' | 'line' | 'pie'>(chartType)
-  const [newDataPoint, setNewDataPoint] = useState({ label: '', value: 0 })
-
-  // Load data from URL parameters or use defaults
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const dataParam = urlParams.get('data')
-    const typeParam = urlParams.get('chartType')
-
-    if (dataParam) {
-      try {
-        const parsedData = JSON.parse(decodeURIComponent(dataParam))
-        setData(parsedData)
-      }
-      catch (error) {
-        console.error('Error parsing data from URL:', error)
-      }
-    }
-    else {
-      // Default data for demo
-      setData([
-        { label: 'January', value: 65, color: '#3498db' },
-        { label: 'February', value: 59, color: '#e74c3c' },
-        { label: 'March', value: 80, color: '#2ecc71' },
-        { label: 'April', value: 81, color: '#f39c12' },
-        { label: 'May', value: 56, color: '#9b59b6' },
-        { label: 'June', value: 55, color: '#1abc9c' },
-      ])
-    }
-
-    if (typeParam) {
-      setCurrentChartType(typeParam as 'bar' | 'line' | 'pie')
-    }
-  }, [])
-
-  const addDataPoint = () => {
-    if (newDataPoint.label.trim() && newDataPoint.value > 0) {
-      const colors = ['#3498db', '#e74c3c', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#34495e', '#e67e22']
-      const newPoint: DataPoint = {
-        ...newDataPoint,
-        color: colors[data.length % colors.length],
-      }
-      setData([...data, newPoint])
-      setNewDataPoint({ label: '', value: 0 })
-    }
-  }
-
-  const removeDataPoint = (index: number) => {
-    setData(data.filter((_, i) => i !== index))
-  }
-
-  const getMaxValue = () => {
-    return Math.max(...data.map(d => d.value), 0)
-  }
-
-  const getTotalValue = () => {
-    return data.reduce((sum, d) => sum + d.value, 0)
-  }
-
-  const renderBarChart = () => {
-    const maxValue = getMaxValue()
-
-    return (
-      <div className="p-5">
-        <h3 className="mb-5 text-slate-700">Bar Chart</h3>
-        <div className="flex items-end gap-2.5 h-75">
-          {data.map((point, index) => (
-            <div key={index} className="flex-1 flex flex-col items-center">
-              <div
-                className="w-full rounded-t transition-all duration-300 cursor-pointer relative dynamic-bar"
-                style={{
-                  '--dynamic-color': point.color || '#3498db',
-                  '--dynamic-height': `${(point.value / maxValue) * 250}px`,
-                } as React.CSSProperties}
-                title={`${point.label}: ${point.value}`}
-              >
-                <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-80 text-white px-1.5 py-0.5 rounded text-xs whitespace-nowrap">
-                  {point.value}
-                </div>
-              </div>
-              <div className="mt-2.5 text-xs text-center text-slate-500 break-words">
-                {point.label}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  const renderLineChart = () => {
-    const maxValue = getMaxValue()
-    const width = 600
-    const height = 300
-    const padding = 40
-
-    const points = data.map((point, index) => ({
-      x: padding + (index * (width - 2 * padding)) / (data.length - 1),
-      y: padding + ((maxValue - point.value) / maxValue) * (height - 2 * padding),
-    }))
-
-    const pathData = points.map((point, index) =>
-      `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`,
-    ).join(' ')
-
-    return (
-      <div className="p-5">
-        <h3 className="mb-5 text-slate-700">Line Chart</h3>
-        <svg width={width} height={height} className="border border-slate-200 rounded-lg">
-          {/* Grid lines */}
-          {[0, 0.25, 0.5, 0.75, 1].map(ratio => (
-            <line
-              key={ratio}
-              x1={padding}
-              y1={padding + ratio * (height - 2 * padding)}
-              x2={width - padding}
-              y2={padding + ratio * (height - 2 * padding)}
-              stroke="#ecf0f1"
-              strokeWidth="1"
-            />
-          ))}
-
-          {/* Line */}
-          <path
-            d={pathData}
-            fill="none"
-            stroke="#3498db"
-            strokeWidth="3"
-          />
-
-          {/* Data points */}
-          {points.map((point, index) => (
-            <g key={index}>
-              <circle
-                cx={point.x}
-                cy={point.y}
-                r="6"
-                fill={data[index].color || '#3498db'}
-                stroke="white"
-                strokeWidth="2"
-                className="cursor-pointer"
-              />
-              <title>{`${data[index].label}: ${data[index].value}`}</title>
-            </g>
-          ))}
-
-          {/* Labels */}
-          {data.map((point, index) => (
-            <text
-              key={index}
-              x={padding + (index * (width - 2 * padding)) / (data.length - 1)}
-              y={height - 10}
-              textAnchor="middle"
-              fontSize="12"
-              fill="#7f8c8d"
-            >
-              {point.label}
-            </text>
-          ))}
-        </svg>
-      </div>
-    )
-  }
-
-  const renderPieChart = () => {
-    const total = getTotalValue()
-    let currentAngle = 0
-
-    return (
-      <div className="p-5">
-        <h3 className="mb-5 text-slate-700">Pie Chart</h3>
-        <div className="flex gap-10 items-center">
-          <svg width="300" height="300" className="border border-slate-200 rounded-lg">
-            {data.map((point, index) => {
-              const percentage = point.value / total
-              const angle = percentage * 360
-              const startAngle = currentAngle
-              const endAngle = currentAngle + angle
-              currentAngle += angle
-
-              const centerX = 150
-              const centerY = 150
-              const radius = 120
-
-              const startAngleRad = (startAngle - 90) * (Math.PI / 180)
-              const endAngleRad = (endAngle - 90) * (Math.PI / 180)
-
-              const x1 = centerX + radius * Math.cos(startAngleRad)
-              const y1 = centerY + radius * Math.sin(startAngleRad)
-              const x2 = centerX + radius * Math.cos(endAngleRad)
-              const y2 = centerY + radius * Math.sin(endAngleRad)
-
-              const largeArcFlag = angle > 180 ? 1 : 0
-
-              const pathData = [
-                `M ${centerX} ${centerY}`,
-                `L ${x1} ${y1}`,
-                `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
-                'Z',
-              ].join(' ')
-
-              return (
-                <g key={index}>
-                  <path
-                    d={pathData}
-                    fill={point.color || '#3498db'}
-                    stroke="white"
-                    strokeWidth="2"
-                    className="cursor-pointer"
-                  />
-                  <title>{`${point.label}: ${point.value} (${(percentage * 100).toFixed(1)}%)`}</title>
-                </g>
-              )
-            })}
-          </svg>
-
-          <div className="flex-1">
-            <h4 className="mb-4 text-slate-700">Legend</h4>
-            {data.map((point, index) => (
-              <div
-                key={index}
-                className="flex items-center mb-2 p-2 bg-slate-50 rounded"
-              >
-                <div 
-                  className="w-4 h-4 rounded-sm mr-2.5 dynamic-color"
-                  style={{
-                    '--dynamic-color': point.color || '#3498db',
-                  } as React.CSSProperties}
-                />
-                <span className="flex-1 text-sm">{point.label}</span>
-                <span className="text-sm font-bold text-slate-700">
-                  {point.value}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-5">
-      <div className="mb-8">
-        <h1 className="m-0 mb-5 text-slate-700">Data Visualization</h1>
-
-        {/* Controls */}
-        <div className="bg-white p-5 rounded-lg shadow-sm mb-5">
-          <div className="flex gap-5 flex-wrap items-center mb-5">
-            <div>
-              <label className="mr-2.5 font-bold text-slate-700">Chart Type:</label>
-              <select
-                value={currentChartType}
-                onChange={e => setCurrentChartType(e.target.value as typeof currentChartType)}
-                className="px-3 py-2 border border-gray-300 rounded"
-                aria-label="Select chart type"
-              >
-                <option value="bar">Bar Chart</option>
-                <option value="line">Line Chart</option>
-                <option value="pie">Pie Chart</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="flex gap-2.5 flex-wrap items-center">
-            <input
-              type="text"
-              placeholder="Label"
-              value={newDataPoint.label}
-              onChange={e => setNewDataPoint({ ...newDataPoint, label: e.target.value })}
-              className="px-3 py-2 border border-gray-300 rounded min-w-30"
-            />
-            <input
-              type="number"
-              placeholder="Value"
-              value={newDataPoint.value}
-              onChange={e => setNewDataPoint({ ...newDataPoint, value: Number(e.target.value) })}
-              className="px-3 py-2 border border-gray-300 rounded min-w-25"
-            />
-            <button
-              onClick={addDataPoint}
-              className="px-4 py-2 bg-blue-500 text-white border-none rounded cursor-pointer"
-            >
-              Add Data Point
-            </button>
-          </div>
-        </div>
-
-        {/* Chart */}
-        <div className="bg-white rounded-lg shadow-sm overflow-hidden">
-          {data.length === 0
-            ? (
-                <div className="text-center py-10 px-5 text-slate-500 italic">
-                  No data to visualize. Add some data points above!
-                </div>
-              )
-            : (
-                <>
-                  {currentChartType === 'bar' && renderBarChart()}
-                  {currentChartType === 'line' && renderLineChart()}
-                  {currentChartType === 'pie' && renderPieChart()}
-                </>
-              )}
-        </div>
-
-        {/* Data table */}
-        {data.length > 0 && (
-          <div className="bg-white rounded-lg shadow-sm mt-5 overflow-hidden">
-            <div className="p-5 border-b border-slate-200">
-              <h3 className="m-0 text-slate-700">Data Table</h3>
-            </div>
-            <div className="overflow-x-auto">
-              <table className="w-full border-collapse">
-                <thead>
-                  <tr className="bg-slate-50">
-                    <th className="p-3 text-left border-b border-slate-200">Label</th>
-                    <th className="p-3 text-left border-b border-slate-200">Value</th>
-                    <th className="p-3 text-left border-b border-slate-200">Percentage</th>
-                    <th className="p-3 text-left border-b border-slate-200">Color</th>
-                    <th className="p-3 text-left border-b border-slate-200">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {data.map((point, index) => (
-                    <tr key={index} className="border-b border-slate-200">
-                      <td className="p-3">{point.label}</td>
-                      <td className="p-3 font-bold">{point.value}</td>
-                      <td className="p-3">
-                        {((point.value / getTotalValue()) * 100).toFixed(1)}
-                        %
-                      </td>
-                      <td className="p-3">
-                        <div 
-                          className="w-5 h-5 rounded-sm inline-block dynamic-color"
-                          style={{
-                            '--dynamic-color': point.color || '#3498db',
-                          } as React.CSSProperties}
-                        />
-                      </td>
-                      <td className="p-3">
-                        <button
-                          onClick={() => removeDataPoint(index)}
-                          className="bg-red-500 text-white border-none rounded px-2 py-1 cursor-pointer text-xs"
-                        >
-                          Remove
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Mount the component
-const container = document.getElementById('widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<DataVisualization />)
-}
diff --git a/test_app/resources/kanban-board.tsx b/test_app/resources/kanban-board.tsx
deleted file mode 100644
index 5a4454cb..00000000
--- a/test_app/resources/kanban-board.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-interface Task {
-  id: string
-  title: string
-  description: string
-  status: 'todo' | 'in-progress' | 'done'
-  priority: 'low' | 'medium' | 'high'
-  assignee?: string
-}
-
-interface KanbanBoardProps {
-  initialTasks?: Task[]
-}
-
-const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
-  const [tasks, setTasks] = useState<Task[]>(initialTasks)
-  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as Task['priority'] })
-
-  // Load tasks from URL parameters or use defaults
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const tasksParam = urlParams.get('tasks')
-
-    if (tasksParam) {
-      try {
-        const parsedTasks = JSON.parse(decodeURIComponent(tasksParam))
-        setTasks(parsedTasks)
-      }
-      catch (error) {
-        console.error('Error parsing tasks from URL:', error)
-      }
-    }
-    else {
-      // Default tasks for demo
-      setTasks([
-        { id: '1', title: 'Design UI mockups', description: 'Create wireframes for the new dashboard', status: 'todo', priority: 'high', assignee: 'Alice' },
-        { id: '2', title: 'Implement authentication', description: 'Add login and registration functionality', status: 'in-progress', priority: 'high', assignee: 'Bob' },
-        { id: '3', title: 'Write documentation', description: 'Document the API endpoints', status: 'done', priority: 'medium', assignee: 'Charlie' },
-        { id: '4', title: 'Setup CI/CD', description: 'Configure automated testing and deployment', status: 'todo', priority: 'medium' },
-        { id: '5', title: 'Code review', description: 'Review pull requests from the team', status: 'in-progress', priority: 'low', assignee: 'David' },
-      ])
-    }
-  }, [])
-
-  const addTask = () => {
-    if (newTask.title.trim()) {
-      const task: Task = {
-        id: Date.now().toString(),
-        title: newTask.title,
-        description: newTask.description,
-        status: 'todo',
-        priority: newTask.priority,
-      }
-      setTasks([...tasks, task])
-      setNewTask({ title: '', description: '', priority: 'medium' })
-    }
-  }
-
-  const moveTask = (taskId: string, newStatus: Task['status']) => {
-    setTasks(tasks.map(task =>
-      task.id === taskId ? { ...task, status: newStatus } : task,
-    ))
-  }
-
-  const deleteTask = (taskId: string) => {
-    setTasks(tasks.filter(task => task.id !== taskId))
-  }
-
-  const getTasksByStatus = (status: Task['status']) => {
-    return tasks.filter(task => task.status === status)
-  }
-
-  const getPriorityColor = (priority: Task['priority']) => {
-    switch (priority) {
-      case 'high': return '#ff4757'
-      case 'medium': return '#ffa502'
-      case 'low': return '#2ed573'
-      default: return '#57606f'
-    }
-  }
-
-  const columns = [
-    { id: 'todo', title: 'To Do', color: '#57606f' },
-    { id: 'in-progress', title: 'In Progress', color: '#ffa502' },
-    { id: 'done', title: 'Done', color: '#2ed573' },
-  ] as const
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ marginBottom: '30px' }}>
-        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Kanban Board</h1>
-
-        {/* Add new task form */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <h3 style={{ margin: '0 0 15px 0' }}>Add New Task</h3>
-          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
-            <input
-              type="text"
-              placeholder="Task title"
-              value={newTask.title}
-              onChange={e => setNewTask({ ...newTask, title: e.target.value })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                flex: '1',
-                minWidth: '200px',
-              }}
-            />
-            <input
-              type="text"
-              placeholder="Description"
-              value={newTask.description}
-              onChange={e => setNewTask({ ...newTask, description: e.target.value })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                flex: '1',
-                minWidth: '200px',
-              }}
-            />
-            <select
-              title="Priority"
-              value={newTask.priority}
-              onChange={e => setNewTask({ ...newTask, priority: e.target.value as Task['priority'] })}
-              style={{
-                padding: '8px 12px',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-              }}
-            >
-              <option value="low">Low Priority</option>
-              <option value="medium">Medium Priority</option>
-              <option value="high">High Priority</option>
-            </select>
-            <button
-              onClick={addTask}
-              style={{
-                padding: '8px 16px',
-                background: '#3498db',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-              }}
-            >
-              Add Task
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Kanban columns */}
-      <div style={{ display: 'flex', gap: '20px', overflowX: 'auto' }}>
-        {columns.map(column => (
-          <div
-            key={column.id}
-            style={{
-              flex: '1',
-              minWidth: '300px',
-              background: 'white',
-              borderRadius: '8px',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-              overflow: 'hidden',
-            }}
-          >
-            <div
-              style={{
-                background: column.color,
-                color: 'white',
-                padding: '15px 20px',
-                fontWeight: 'bold',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}
-            >
-              <span>{column.title}</span>
-              <span style={{
-                background: 'rgba(255,255,255,0.2)',
-                padding: '4px 8px',
-                borderRadius: '12px',
-                fontSize: '12px',
-              }}
-              >
-                {getTasksByStatus(column.id).length}
-              </span>
-            </div>
-
-            <div style={{ padding: '20px', minHeight: '400px' }}>
-              {getTasksByStatus(column.id).map(task => (
-                <div
-                  key={task.id}
-                  style={{
-                    background: '#f8f9fa',
-                    border: '1px solid #e9ecef',
-                    borderRadius: '6px',
-                    padding: '15px',
-                    marginBottom: '10px',
-                    cursor: 'grab',
-                  }}
-                  draggable
-                  onDragStart={(e) => {
-                    e.dataTransfer.setData('text/plain', task.id)
-                  }}
-                  onDragOver={e => e.preventDefault()}
-                  onDrop={(e) => {
-                    e.preventDefault()
-                    const taskId = e.dataTransfer.getData('text/plain')
-                    if (taskId === task.id) {
-                      // Move to next column
-                      const currentIndex = columns.findIndex(col => col.id === column.id)
-                      const nextColumn = columns[currentIndex + 1]
-                      if (nextColumn) {
-                        moveTask(taskId, nextColumn.id)
-                      }
-                    }
-                  }}
-                >
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
-                    <h4 style={{ margin: '0', color: '#2c3e50' }}>{task.title}</h4>
-                    <button
-                      onClick={() => deleteTask(task.id)}
-                      style={{
-                        background: 'none',
-                        border: 'none',
-                        color: '#e74c3c',
-                        cursor: 'pointer',
-                        fontSize: '16px',
-                      }}
-                    >
-                      ×
-                    </button>
-                  </div>
-
-                  {task.description && (
-                    <p style={{ margin: '0 0 10px 0', color: '#6c757d', fontSize: '14px' }}>
-                      {task.description}
-                    </p>
-                  )}
-
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    <div
-                      style={{
-                        background: getPriorityColor(task.priority),
-                        color: 'white',
-                        padding: '2px 8px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        fontWeight: 'bold',
-                      }}
-                    >
-                      {task.priority.toUpperCase()}
-                    </div>
-
-                    {task.assignee && (
-                      <span style={{
-                        background: '#e9ecef',
-                        padding: '2px 8px',
-                        borderRadius: '12px',
-                        fontSize: '12px',
-                        color: '#495057',
-                      }}
-                      >
-                        {task.assignee}
-                      </span>
-                    )}
-                  </div>
-                </div>
-              ))}
-
-              {getTasksByStatus(column.id).length === 0 && (
-                <div style={{
-                  textAlign: 'center',
-                  color: '#6c757d',
-                  padding: '40px 20px',
-                  fontStyle: 'italic',
-                }}
-                >
-                  No tasks in this column
-                </div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-// Mount the component
-const container = document.getElementById('widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<KanbanBoard />)
-}
diff --git a/test_app/resources/todo-list.tsx b/test_app/resources/todo-list.tsx
deleted file mode 100644
index 673a7592..00000000
--- a/test_app/resources/todo-list.tsx
+++ /dev/null
@@ -1,408 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-
-interface Todo {
-  id: string
-  text: string
-  completed: boolean
-  priority: 'low' | 'medium' | 'high'
-  dueDate?: string
-  category?: string
-}
-
-interface TodoListProps {
-  initialTodos?: Todo[]
-}
-
-const TodoList: React.FC<TodoListProps> = ({ initialTodos = [] }) => {
-  const [todos, setTodos] = useState<Todo[]>(initialTodos)
-  const [newTodo, setNewTodo] = useState('')
-  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('all')
-  const [sortBy, setSortBy] = useState<'priority' | 'dueDate' | 'created'>('priority')
-
-  // Load todos from URL parameters or use defaults
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search)
-    const todosParam = urlParams.get('todos')
-
-    if (todosParam) {
-      try {
-        const parsedTodos = JSON.parse(decodeURIComponent(todosParam))
-        setTodos(parsedTodos)
-      }
-      catch (error) {
-        console.error('Error parsing todos from URL:', error)
-      }
-    }
-    else {
-      // Default todos for demo
-      setTodos([
-        { id: '1', text: 'Complete project proposal', completed: false, priority: 'high', dueDate: '2024-01-15', category: 'Work' },
-        { id: '2', text: 'Buy groceries', completed: false, priority: 'medium', dueDate: '2024-01-12', category: 'Personal' },
-        { id: '3', text: 'Call dentist', completed: true, priority: 'low', category: 'Health' },
-        { id: '4', text: 'Read React documentation', completed: false, priority: 'medium', category: 'Learning' },
-        { id: '5', text: 'Plan weekend trip', completed: false, priority: 'low', dueDate: '2024-01-20', category: 'Personal' },
-      ])
-    }
-  }, [])
-
-  const addTodo = () => {
-    if (newTodo.trim()) {
-      const todo: Todo = {
-        id: Date.now().toString(),
-        text: newTodo,
-        completed: false,
-        priority: 'medium',
-      }
-      setTodos([...todos, todo])
-      setNewTodo('')
-    }
-  }
-
-  const toggleTodo = (id: string) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo,
-    ))
-  }
-
-  const deleteTodo = (id: string) => {
-    setTodos(todos.filter(todo => todo.id !== id))
-  }
-
-  const updateTodoPriority = (id: string, priority: Todo['priority']) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, priority } : todo,
-    ))
-  }
-
-  const getFilteredTodos = () => {
-    let filtered = todos
-
-    // Filter by status
-    switch (filter) {
-      case 'active':
-        filtered = filtered.filter(todo => !todo.completed)
-        break
-      case 'completed':
-        filtered = filtered.filter(todo => todo.completed)
-        break
-      default:
-        break
-    }
-
-    // Sort todos
-    return filtered.sort((a, b) => {
-      switch (sortBy) {
-        case 'priority':
-          const priorityOrder = { high: 3, medium: 2, low: 1 }
-          return priorityOrder[b.priority] - priorityOrder[a.priority]
-        case 'dueDate':
-          if (!a.dueDate && !b.dueDate)
-            return 0
-          if (!a.dueDate)
-            return 1
-          if (!b.dueDate)
-            return -1
-          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
-        case 'created':
-        default:
-          return Number.parseInt(b.id) - Number.parseInt(a.id)
-      }
-    })
-  }
-
-  // const getPriorityColor = (priority: Todo['priority']) => {
-  //   switch (priority) {
-  //     case 'high': return '#e74c3c'
-  //     case 'medium': return '#f39c12'
-  //     case 'low': return '#27ae60'
-  //     default: return '#95a5a6'
-  //   }
-  // }
-
-  const getPriorityIcon = (priority: Todo['priority']) => {
-    switch (priority) {
-      case 'high': return '🔴'
-      case 'medium': return '🟡'
-      case 'low': return '🟢'
-      default: return '⚪'
-    }
-  }
-
-  const completedCount = todos.filter(todo => todo.completed).length
-  const totalCount = todos.length
-  const progressPercentage = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
-
-  return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ marginBottom: '30px' }}>
-        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Todo List</h1>
-
-        {/* Progress bar */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
-            <span style={{ fontWeight: 'bold', color: '#2c3e50' }}>Progress</span>
-            <span style={{ color: '#7f8c8d' }}>
-              {completedCount}
-              {' '}
-              of
-              {' '}
-              {totalCount}
-              {' '}
-              completed
-            </span>
-          </div>
-          <div style={{
-            background: '#ecf0f1',
-            borderRadius: '10px',
-            height: '10px',
-            overflow: 'hidden',
-          }}
-          >
-            <div style={{
-              background: 'linear-gradient(90deg, #27ae60, #2ecc71)',
-              height: '100%',
-              width: `${progressPercentage}%`,
-              transition: 'width 0.3s ease',
-            }}
-            />
-          </div>
-        </div>
-
-        {/* Add new todo */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', gap: '10px' }}>
-            <input
-              type="text"
-              placeholder="Add a new todo..."
-              value={newTodo}
-              onChange={e => setNewTodo(e.target.value)}
-              onKeyPress={e => e.key === 'Enter' && addTodo()}
-              style={{
-                flex: '1',
-                padding: '12px 16px',
-                border: '1px solid #ddd',
-                borderRadius: '6px',
-                fontSize: '16px',
-              }}
-            />
-            <button
-              onClick={addTodo}
-              style={{
-                padding: '12px 24px',
-                background: '#3498db',
-                color: 'white',
-                border: 'none',
-                borderRadius: '6px',
-                cursor: 'pointer',
-                fontSize: '16px',
-                fontWeight: 'bold',
-              }}
-            >
-              Add
-            </button>
-          </div>
-        </div>
-
-        {/* Filters and sorting */}
-        <div style={{
-          background: 'white',
-          padding: '20px',
-          borderRadius: '8px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-          marginBottom: '20px',
-        }}
-        >
-          <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap', alignItems: 'center' }}>
-            <div>
-              <label style={{ marginRight: '10px', fontWeight: 'bold', color: '#2c3e50' }}>Filter:</label>
-              <select
-                value={filter}
-                onChange={e => setFilter(e.target.value as typeof filter)}
-                style={{
-                  padding: '8px 12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                }}
-              >
-                <option value="all">All</option>
-                <option value="active">Active</option>
-                <option value="completed">Completed</option>
-              </select>
-            </div>
-
-            <div>
-              <label style={{ marginRight: '10px', fontWeight: 'bold', color: '#2c3e50' }}>Sort by:</label>
-              <select
-                value={sortBy}
-                onChange={e => setSortBy(e.target.value as typeof sortBy)}
-                style={{
-                  padding: '8px 12px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                }}
-              >
-                <option value="priority">Priority</option>
-                <option value="dueDate">Due Date</option>
-                <option value="created">Created</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Todo list */}
-      <div style={{
-        background: 'white',
-        borderRadius: '8px',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-        overflow: 'hidden',
-      }}
-      >
-        {getFilteredTodos().map(todo => (
-          <div
-            key={todo.id}
-            style={{
-              padding: '20px',
-              borderBottom: '1px solid #ecf0f1',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '15px',
-              background: todo.completed ? '#f8f9fa' : 'white',
-            }}
-          >
-            <input
-              type="checkbox"
-              checked={todo.completed}
-              onChange={() => toggleTodo(todo.id)}
-              style={{
-                width: '20px',
-                height: '20px',
-                cursor: 'pointer',
-              }}
-            />
-
-            <div style={{ flex: '1' }}>
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                marginBottom: '5px',
-              }}
-              >
-                <span style={{
-                  fontSize: '18px',
-                  textDecoration: todo.completed ? 'line-through' : 'none',
-                  color: todo.completed ? '#7f8c8d' : '#2c3e50',
-                }}
-                >
-                  {todo.text}
-                </span>
-
-                {todo.category && (
-                  <span style={{
-                    background: '#e9ecef',
-                    color: '#495057',
-                    padding: '2px 8px',
-                    borderRadius: '12px',
-                    fontSize: '12px',
-                  }}
-                  >
-                    {todo.category}
-                  </span>
-                )}
-              </div>
-
-              {todo.dueDate && (
-                <div style={{
-                  fontSize: '14px',
-                  color: '#7f8c8d',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '5px',
-                }}
-                >
-                  📅 Due:
-                  {' '}
-                  {new Date(todo.dueDate).toLocaleDateString()}
-                </div>
-              )}
-            </div>
-
-            <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-              <select
-                value={todo.priority}
-                onChange={e => updateTodoPriority(todo.id, e.target.value as Todo['priority'])}
-                style={{
-                  padding: '4px 8px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  fontSize: '12px',
-                }}
-              >
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-              </select>
-
-              <span style={{ fontSize: '16px' }}>
-                {getPriorityIcon(todo.priority)}
-              </span>
-
-              <button
-                onClick={() => deleteTodo(todo.id)}
-                style={{
-                  background: 'none',
-                  border: 'none',
-                  color: '#e74c3c',
-                  cursor: 'pointer',
-                  fontSize: '18px',
-                  padding: '5px',
-                }}
-              >
-                🗑️
-              </button>
-            </div>
-          </div>
-        ))}
-
-        {getFilteredTodos().length === 0 && (
-          <div style={{
-            textAlign: 'center',
-            padding: '40px 20px',
-            color: '#7f8c8d',
-            fontStyle: 'italic',
-          }}
-          >
-            {filter === 'all'
-              ? 'No todos yet. Add one above!'
-              : filter === 'active'
-                ? 'No active todos!'
-                : 'No completed todos!'}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// Mount the component
-const container = document.getElementById('widget-root')
-if (container) {
-  const root = createRoot(container)
-  root.render(<TodoList />)
-}
diff --git a/test_app/src/server.ts b/test_app/src/server.ts
deleted file mode 100644
index 8a150b09..00000000
--- a/test_app/src/server.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { createMCPServer } from 'mcp-use'
-import { createUIResource } from '@mcp-ui/server';
-
-// Create an MCP server (which is also an Express app)
-// The MCP Inspector is automatically mounted at /inspector
-const server = createMCPServer('ui-mcp-server', {
-  version: '1.0.0',
-  description: 'An MCP server with React UI widgets',
-})
-
-const PORT = process.env.PORT || 3000
-
-
-server.tool({
-  name: 'test-tool',
-  description: 'Test tool',
-  inputs: [
-    {
-      name: 'test',
-      type: 'string',
-      description: 'Test input',
-      required: true,
-    },
-  ],
-  fn: async () => {
-    const uiResource = createUIResource({
-      uri: 'ui://widget/kanban-board',
-      content: {
-        type: 'externalUrl',
-        iframeUrl: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
-      },
-      encoding: 'text',
-    })
-    return {
-      content: [uiResource]
-    }
-  },
-})
-
-
-// MCP Resource for Kanban Board widget
-server.resource({
-  name: 'Kanban Board Widget',
-  uri: 'ui://widget/kanban-board',
-  title: 'Kanban Board Widget',
-  mimeType: 'text/html+skybridge',
-  description: 'Interactive Kanban board widget',
-  annotations: {
-    audience: ['user', 'assistant'],
-    priority: 0.7
-  },
-  fn: async () => {
-    const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
-    return {
-      contents: [{
-        uri: 'ui://widget/kanban-board',
-        mimeType: 'text/uri-list',
-        text: widgetUrl
-      }]
-    }
-  },
-})
-
-
-
-// Start the server (MCP endpoints auto-mounted at /mcp)
-server.listen(PORT)
diff --git a/test_app/tsconfig.json b/test_app/tsconfig.json
deleted file mode 100644
index 5a2c6947..00000000
--- a/test_app/tsconfig.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "allowJs": true,
-    "strict": true,
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "./dist",
-    "sourceMap": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true
-  },
-  "include": ["index.ts", "src/**/*", "resources/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

From 04372cccd5d4f2d95dce50b7d8294d16c69e4598 Mon Sep 17 00:00:00 2001
From: Luigi Pederzani <luigipederzani@gmail.com>
Date: Mon, 13 Oct 2025 19:10:39 +0200
Subject: [PATCH 16/21] moved versioning changest stuff

---
 BETA_RELEASES.md => .github/BETA_RELEASES.md  |  0
 .../CHANGESET_WORKFLOW.md                     |  0
 .github/PULL_REQUEST_TEMPLATE.md              | 45 +++++++++++++++++++
 VERSIONING.md => .github/VERSIONING.md        |  0
 4 files changed, 45 insertions(+)
 rename BETA_RELEASES.md => .github/BETA_RELEASES.md (100%)
 rename CHANGESET_WORKFLOW.md => .github/CHANGESET_WORKFLOW.md (100%)
 rename VERSIONING.md => .github/VERSIONING.md (100%)

diff --git a/BETA_RELEASES.md b/.github/BETA_RELEASES.md
similarity index 100%
rename from BETA_RELEASES.md
rename to .github/BETA_RELEASES.md
diff --git a/CHANGESET_WORKFLOW.md b/.github/CHANGESET_WORKFLOW.md
similarity index 100%
rename from CHANGESET_WORKFLOW.md
rename to .github/CHANGESET_WORKFLOW.md
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 97daa34c..968a6578 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,11 +12,56 @@ Fixes # (issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] Documentation update
+- [ ] Internal change (refactoring, tests, tooling)
+
+## 📦 Changeset Required?
+
+<!-- Most changes need a changeset! See the guide below for details. -->
+
+**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:**
+```bash
+pnpm changeset  # Creates a changeset interactively
+```
+
+**📚 Full guide:** [Changeset Workflow Guide](.github/CHANGESET_WORKFLOW.md)  
+**Need help?** See [when to create changesets](.github/CHANGESET_WORKFLOW.md#-changeset-types) and [examples](.github/CHANGESET_WORKFLOW.md#-changeset-types)
+
+## 🚀 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](.github/BETA_RELEASES.md) 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](https://www.conventionalcommits.org/) 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
+
+<!-- Optional: Add any additional context, screenshots, or notes for reviewers -->
diff --git a/VERSIONING.md b/.github/VERSIONING.md
similarity index 100%
rename from VERSIONING.md
rename to .github/VERSIONING.md

From c7f88c747217b273ed9685a61372f7a6a9b40819 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:17:49 +0200
Subject: [PATCH 17/21] update sdk version

---
 packages/inspector/package.json |  2 +-
 packages/mcp-use/package.json   |  2 +-
 pnpm-lock.yaml                  | 66 ++-------------------------------
 3 files changed, 6 insertions(+), 64 deletions(-)

diff --git a/packages/inspector/package.json b/packages/inspector/package.json
index 36c25bf3..28b7b30f 100644
--- a/packages/inspector/package.json
+++ b/packages/inspector/package.json
@@ -56,7 +56,7 @@
   "dependencies": {
     "@hono/node-server": "^1.19.5",
     "@mcp-ui/client": "^5.12.1",
-    "@modelcontextprotocol/sdk": "1.12.1",
+    "@modelcontextprotocol/sdk": "1.20.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
diff --git a/packages/mcp-use/package.json b/packages/mcp-use/package.json
index 82adf3ee..ecda5977 100644
--- a/packages/mcp-use/package.json
+++ b/packages/mcp-use/package.json
@@ -118,7 +118,7 @@
     "@langchain/core": "^0.3.72",
     "@langchain/openai": "^0.6.9",
     "@mcp-ui/server": "^5.11.0",
-    "@modelcontextprotocol/sdk": "1.12.1",
+    "@modelcontextprotocol/sdk": "1.20.0",
     "@scarf/scarf": "^1.4.0",
     "ai": "^4.3.19",
     "commander": "^14.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07f60b65..499955e2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ overrides:
 
 patchedDependencies:
   '@mcp-ui/server@5.11.0':
-    hash: q4o7znptjmfaz7quhzmm6hp4jy
+    hash: 5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11
     path: patches/@mcp-ui__server@5.11.0.patch
 
 importers:
@@ -125,7 +125,7 @@ importers:
     dependencies:
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -352,7 +352,7 @@ importers:
         version: 0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(ws@8.18.3)
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       '@mcp-use/inspector':
         specifier: workspace:*
         version: link:../inspector
@@ -519,64 +519,6 @@ importers:
         specifier: ^5.0.0
         version: 5.9.3
 
-  test_app:
-    dependencies:
-      '@mcp-ui/server':
-        specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
-      cors:
-        specifier: ^2.8.5
-        version: 2.8.5
-      express:
-        specifier: ^4.18.0
-        version: 4.21.2
-      mcp-use:
-        specifier: workspace:*
-        version: link:../packages/mcp-use
-    devDependencies:
-      '@mcp-use/cli':
-        specifier: workspace:*
-        version: link:../packages/cli
-      '@mcp-use/inspector':
-        specifier: workspace:*
-        version: link:../packages/inspector
-      '@types/cors':
-        specifier: ^2.8.0
-        version: 2.8.19
-      '@types/express':
-        specifier: ^4.17.0
-        version: 4.17.23
-      '@types/node':
-        specifier: ^20.0.0
-        version: 20.19.19
-      '@types/react':
-        specifier: ^18.0.0
-        version: 18.3.26
-      '@types/react-dom':
-        specifier: ^18.0.0
-        version: 18.3.7(@types/react@18.3.26)
-      concurrently:
-        specifier: ^8.0.0
-        version: 8.2.2
-      esbuild:
-        specifier: ^0.23.0
-        version: 0.23.1
-      globby:
-        specifier: ^14.0.2
-        version: 14.1.0
-      react:
-        specifier: ^19.2.0
-        version: 19.2.0
-      react-dom:
-        specifier: ^19.2.0
-        version: 19.2.0(react@19.2.0)
-      tsx:
-        specifier: ^4.0.0
-        version: 4.20.6
-      typescript:
-        specifier: ^5.0.0
-        version: 5.9.3
-
 packages:
 
   '@ai-sdk/provider-utils@2.2.8':
@@ -7921,7 +7863,7 @@ snapshots:
       - preact
       - supports-color
 
-  '@mcp-ui/server@5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)':
+  '@mcp-ui/server@5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)':
     dependencies:
       '@modelcontextprotocol/sdk': 1.12.1
     transitivePeerDependencies:

From c780b17ac1402c25da83406a4db7fc3ed3359267 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:29:36 +0200
Subject: [PATCH 18/21] feat: enhance InspectorDashboard with connection state
 management and 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.
---
 packages/inspector/src/cli/inspect.ts         |   3 -
 .../client/components/InspectorDashboard.tsx  | 133 +++++++++++++-----
 .../src/client/components/Layout.tsx          |   4 +-
 .../src/client/components/ServerIcon.tsx      |  70 ++++++++-
 .../src/client/context/McpContext.tsx         | 125 +++++++++++-----
 .../inspector/src/components/ui/not-found.tsx |  32 +++++
 .../inspector/src/server/favicon-proxy.ts     |  45 ------
 packages/inspector/src/server/middleware.ts   |  31 +---
 packages/inspector/src/server/server.ts       |  91 ++++++++----
 packages/inspector/src/server/shared-utils.ts | 125 ----------------
 packages/mcp-use/src/auth/browser-provider.ts |   2 +-
 packages/mcp-use/src/connectors/http.ts       |  42 +++++-
 packages/mcp-use/src/react/useMcp.ts          |   2 +-
 pnpm-lock.yaml                                |  10 +-
 14 files changed, 395 insertions(+), 320 deletions(-)
 create mode 100644 packages/inspector/src/components/ui/not-found.tsx
 delete mode 100644 packages/inspector/src/server/favicon-proxy.ts

diff --git a/packages/inspector/src/cli/inspect.ts b/packages/inspector/src/cli/inspect.ts
index ba54af9f..51179dea 100644
--- a/packages/inspector/src/cli/inspect.ts
+++ b/packages/inspector/src/cli/inspect.ts
@@ -9,7 +9,6 @@ import { join, dirname } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { exec } from 'node:child_process'
 import { promisify } from 'node:util'
-import faviconProxy from '../server/favicon-proxy.js'
 import { MCPInspector } from '../server/mcp-inspector.js'
 
 const __filename = fileURLToPath(import.meta.url)
@@ -81,8 +80,6 @@ const app = new Hono()
 app.use('*', cors())
 app.use('*', logger())
 
-// Mount favicon proxy
-app.route('/api/favicon', faviconProxy)
 
 // Health check
 app.get('/health', (c) => {
diff --git a/packages/inspector/src/client/components/InspectorDashboard.tsx b/packages/inspector/src/client/components/InspectorDashboard.tsx
index 3c8edd32..75cea06d 100644
--- a/packages/inspector/src/client/components/InspectorDashboard.tsx
+++ b/packages/inspector/src/client/components/InspectorDashboard.tsx
@@ -1,15 +1,15 @@
 import type { CustomHeader } from './CustomHeadersEditor'
-import { CircleMinus, Cog, Copy, FileText, RotateCcw, Server, Shield } from 'lucide-react'
-import { useState } from 'react'
+import { CircleMinus, Cog, Copy, FileText, RotateCcw, Shield } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'sonner'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { NotFound } from '@/components/ui/not-found'
 import { RandomGradientBackground } from '@/components/ui/random-gradient-background'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
@@ -17,9 +17,13 @@ import { useMcpContext } from '../context/McpContext'
 import { CustomHeadersEditor } from './CustomHeadersEditor'
 
 export function InspectorDashboard() {
-  const { connections, addConnection, removeConnection } = useMcpContext()
+  const mcpContext = useMcpContext()
+  const { connections, addConnection, removeConnection } = mcpContext
   const navigate = useNavigate()
 
+  // Log connections on every render to debug
+  console.warn('[InspectorDashboard] Render - connections:', connections.map(c => ({ id: c.id, state: c.state })))
+
   // Form state
   const [transportType, setTransportType] = useState('SSE')
   const [url, setUrl] = useState('')
@@ -28,7 +32,7 @@ export function InspectorDashboard() {
   const [requestTimeout, setRequestTimeout] = useState('10000')
   const [resetTimeoutOnProgress, setResetTimeoutOnProgress] = useState('True')
   const [maxTotalTimeout, setMaxTotalTimeout] = useState('60000')
-  const [proxyAddress, setProxyAddress] = useState('')
+  const [proxyAddress, setProxyAddress] = useState(`${window.location.origin}/inspector/api/proxy`)
   const [proxyToken, setProxyToken] = useState('c96aeb0c195aa9c7d3846b90aec9bc5fcdd5df97b3049aaede8f5dd1a15d2d87')
 
   // OAuth fields
@@ -36,7 +40,7 @@ export function InspectorDashboard() {
   const [redirectUrl, setRedirectUrl] = useState(
     typeof window !== 'undefined'
       ? new URL('/oauth/callback', window.location.origin).toString()
-      : 'http://localhost:3000/oauth/callback',
+      : '/oauth/callback',
   )
   const [scope, setScope] = useState('')
 
@@ -44,19 +48,84 @@ export function InspectorDashboard() {
   const [headersDialogOpen, setHeadersDialogOpen] = useState(false)
   const [authDialogOpen, setAuthDialogOpen] = useState(false)
   const [configDialogOpen, setConfigDialogOpen] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(false)
+  const [pendingConnectionUrl, setPendingConnectionUrl] = useState<string | null>(null)
+  const hasShownToastRef = useRef(false)
+
+  // Monitor the pending connection state
+  useEffect(() => {
+    if (!pendingConnectionUrl)
+      return
+
+    const connection = connections.find(c => c.id === pendingConnectionUrl)
+    if (!connection) {
+      console.warn('[InspectorDashboard] Pending connection not found yet:', pendingConnectionUrl)
+      return
+    }
+
+    console.warn('[InspectorDashboard] Connection state:', connection.state, 'for', pendingConnectionUrl)
+
+    // Skip if we've already shown a toast for this connection
+    if (hasShownToastRef.current)
+      return
+
+    // Connection succeeded
+    if (connection.state === 'ready') {
+      console.warn('[InspectorDashboard] Connection ready!')
+      hasShownToastRef.current = true
+      setIsConnecting(false)
+      setPendingConnectionUrl(null)
+      toast.success('Connection established successfully')
+
+      // Reset form
+      setUrl('')
+      setCustomHeaders([])
+      setClientId('')
+      setScope('')
+    }
+    // Connection failed
+    else if (connection.state === 'failed' || connection.error) {
+      console.warn('[InspectorDashboard] Connection failed:', connection.error)
+      hasShownToastRef.current = true
+      setIsConnecting(false)
+      setPendingConnectionUrl(null)
+      const errorMessage = connection.error || 'Failed to connect to server'
+      toast.error(errorMessage)
+      // Don't remove the connection - let user see it in the list and manually remove if needed
+    }
+  }, [connections, pendingConnectionUrl])
 
   const handleAddConnection = () => {
     if (!url.trim())
       return
 
-    // For now, use URL as both ID and name - this will need proper implementation
-    addConnection(url, url)
+    setIsConnecting(true)
+    hasShownToastRef.current = false
+    setPendingConnectionUrl(url)
+
+    // Prepare proxy configuration if "Via Proxy" is selected
+    const proxyConfig = connectionType === 'Via Proxy' && proxyAddress.trim()
+      ? {
+          proxyAddress: proxyAddress.trim(),
+          proxyToken: proxyToken.trim(),
+          customHeaders: customHeaders.reduce((acc, header) => {
+            if (header.name && header.value) {
+              acc[header.name] = header.value
+            }
+            return acc
+          }, {} as Record<string, string>),
+        }
+      : {
+          customHeaders: customHeaders.reduce((acc, header) => {
+            if (header.name && header.value) {
+              acc[header.name] = header.value
+            }
+            return acc
+          }, {} as Record<string, string>),
+        }
 
-    // Reset form
-    setUrl('')
-    setCustomHeaders([])
-    setClientId('')
-    setScope('')
+    // For now, use URL as both ID and name - this will need proper implementation
+    addConnection(url, url, proxyConfig)
   }
 
   const handleClearAllConnections = () => {
@@ -184,15 +253,7 @@ export function InspectorDashboard() {
           </div>
           {connections.length === 0
             ? (
-                <Card>
-                  <CardContent className="flex flex-col items-center justify-center py-8">
-                    <Server className="h-12 w-12 text-muted-foreground mb-4" />
-                    <p className="text-muted-foreground">No servers connected yet</p>
-                    <p className="text-sm text-muted-foreground">
-                      Add a server above to get started
-                    </p>
-                  </CardContent>
-                </Card>
+                <NotFound message="No servers connected yet. Add a server above to get started." />
               )
             : (
                 <div className="grid gap-3">
@@ -584,20 +645,28 @@ export function InspectorDashboard() {
           {/* Connect Button */}
           <Button
             onClick={handleAddConnection}
-            disabled={!url.trim()}
+            disabled={!url.trim() || isConnecting}
             className="w-full bg-white text-black hover:bg-white/90 font-semibold mt-4"
           >
-            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            Connect
+            {isConnecting
+              ? (
+                  <>
+                    <svg className="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                    Connecting...
+                  </>
+                )
+              : (
+                  <>
+                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                    Connect
+                  </>
+                )}
           </Button>
 
-          {/* Status */}
-          <div className="flex items-center justify-center gap-2 text-white/60 text-sm">
-            <div className="w-2 h-2 rounded-full bg-red-500 animate-status-pulse-red"></div>
-            Disconnected
-          </div>
         </div>
         <RandomGradientBackground className="absolute inset-0" />
       </div>
diff --git a/packages/inspector/src/client/components/Layout.tsx b/packages/inspector/src/client/components/Layout.tsx
index 42956f79..bab992d2 100644
--- a/packages/inspector/src/client/components/Layout.tsx
+++ b/packages/inspector/src/client/components/Layout.tsx
@@ -355,7 +355,7 @@ export function Layout({ children }: LayoutProps) {
     <TooltipProvider>
       <div className="h-screen bg-[#f3f3f3] dark:bg-zinc-900 flex flex-col px-4 py-4 gap-4">
         {/* Header */}
-        <header className="max-w-screen-2xl w-full mx-auto">
+        <header className=" w-full mx-auto">
           <div className="flex items-center justify-between">
             {/* Left side: Server dropdown + Tabs */}
             <div className="flex items-center space-x-6">
@@ -588,7 +588,7 @@ export function Layout({ children }: LayoutProps) {
         </header>
 
         {/* Main Content */}
-        <main className="flex-1 max-w-screen-2xl w-full mx-auto bg-white dark:bg-zinc-800 rounded-2xl border border-zinc-200 dark:border-zinc-700 p-0 overflow-auto">
+        <main className="flex-1 w-full mx-auto bg-white dark:bg-zinc-800 rounded-2xl border border-zinc-200 dark:border-zinc-700 p-0 overflow-auto">
           {selectedServer && activeTab === 'tools'
             ? (
                 <ToolsTab
diff --git a/packages/inspector/src/client/components/ServerIcon.tsx b/packages/inspector/src/client/components/ServerIcon.tsx
index 2625f332..91f890d3 100644
--- a/packages/inspector/src/client/components/ServerIcon.tsx
+++ b/packages/inspector/src/client/components/ServerIcon.tsx
@@ -36,17 +36,73 @@ export function ServerIcon({
       setFaviconError(false)
 
       try {
-        const encodedUrl = encodeURIComponent(serverUrl)
-        const proxyUrl = `/inspector/api/favicon/${encodedUrl}`
-
-        // Test if favicon exists
-        const response = await fetch(proxyUrl)
-        if (response.ok) {
-          setFaviconUrl(proxyUrl)
+        // Extract domain from serverUrl
+        let domain = serverUrl
+        if (serverUrl.startsWith('http://') || serverUrl.startsWith('https://')) {
+          domain = new URL(serverUrl).hostname
+        }
+        else if (serverUrl.includes('://')) {
+          domain = serverUrl.split('://')[1].split('/')[0]
         }
         else {
+          domain = serverUrl.split('/')[0]
+        }
+
+        // Check if this is a local server - skip remote favicon services
+        const isLocalServer = domain === 'localhost'
+          || domain === '127.0.0.1'
+          || domain.startsWith('127.')
+          || domain.startsWith('192.168.')
+          || domain.startsWith('10.')
+          || domain.startsWith('172.')
+
+        if (isLocalServer) {
+          // For local servers, skip favicon fetching and go straight to fallback
           setFaviconError(true)
+          return
+        }
+
+        // Try full domain first, then base domain with 1s timeout
+        const baseDomain = domain.split('.').slice(-2).join('.')
+        const domainsToTry = domain !== baseDomain ? [domain, baseDomain] : [domain]
+
+        const faviconServices = [
+          // list of providers, google and duckduckgo are not working due to CORS
+          // `https://www.google.com/s2/favicons?domain={domain}&sz=128`,
+          `https://icon.horse/icon/{domain}`,
+          // `https://icons.duckduckgo.com/ip3/{domain}.ico`,
+        ]
+
+        for (const currentDomain of domainsToTry) {
+          for (const serviceTemplate of faviconServices) {
+            try {
+              const faviconUrl = serviceTemplate.replace('{domain}', currentDomain)
+
+              // Create a timeout promise
+              const timeoutPromise = new Promise<never>((_, reject) => {
+                setTimeout(() => reject(new Error('Timeout')), 1000)
+              })
+
+              // Race between fetch and timeout
+              const response = await Promise.race([
+                fetch(faviconUrl),
+                timeoutPromise,
+              ])
+
+              if (response.ok) {
+                setFaviconUrl(faviconUrl)
+                return
+              }
+            }
+            catch {
+              // Continue to next service
+              continue
+            }
+          }
         }
+
+        // If all services fail
+        setFaviconError(true)
       }
       catch {
         setFaviconError(true)
diff --git a/packages/inspector/src/client/context/McpContext.tsx b/packages/inspector/src/client/context/McpContext.tsx
index 8b55bf84..fae8a60e 100644
--- a/packages/inspector/src/client/context/McpContext.tsx
+++ b/packages/inspector/src/client/context/McpContext.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { useMcp } from 'mcp-use/react'
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 
 interface MCPConnection {
   id: string
@@ -21,7 +21,7 @@ interface MCPConnection {
 
 interface McpContextType {
   connections: MCPConnection[]
-  addConnection: (url: string, name?: string) => void
+  addConnection: (url: string, name?: string, proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }) => void
   removeConnection: (id: string) => void
   getConnection: (id: string) => MCPConnection | undefined
 }
@@ -32,11 +32,13 @@ interface SavedConnection {
   id: string
   url: string
   name: string
+  proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }
 }
 
-function McpConnectionWrapper({ url, name, onUpdate, onRemove: _onRemove }: {
+function McpConnectionWrapper({ url, name, proxyConfig, onUpdate, onRemove: _onRemove }: {
   url: string
   name: string
+  proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }
   onUpdate: (connection: MCPConnection) => void
   onRemove: () => void
 }) {
@@ -47,7 +49,37 @@ function McpConnectionWrapper({ url, name, onUpdate, onRemove: _onRemove }: {
     ? new URL('/oauth/callback', window.location.origin).toString()
     : '/oauth/callback'
 
-  const mcpHook = useMcp({ url, callbackUrl })
+  // Apply proxy configuration if provided
+  let finalUrl = url
+  let customHeaders: Record<string, string> = {}
+
+  if (proxyConfig?.proxyAddress) {
+    // If proxy is configured, use the proxy address as the URL
+    // For MCP connections, we need to append the SSE endpoint to the proxy URL
+    const proxyUrl = new URL(proxyConfig.proxyAddress)
+    const originalUrl = new URL(url)
+
+    // Construct the final proxy URL by combining proxy base with original path
+    finalUrl = `${proxyUrl.origin}${proxyUrl.pathname}${originalUrl.pathname}${originalUrl.search}`
+
+    // Add proxy token as header if provided
+    if (proxyConfig.proxyToken) {
+      customHeaders['X-Proxy-Token'] = proxyConfig.proxyToken
+    }
+    // Add original URL as a header so the proxy knows where to forward the request
+    customHeaders['X-Target-URL'] = url
+  }
+
+  // Merge any additional custom headers
+  if (proxyConfig?.customHeaders) {
+    customHeaders = { ...customHeaders, ...proxyConfig.customHeaders }
+  }
+
+  const mcpHook = useMcp({
+    url: finalUrl,
+    callbackUrl,
+    customHeaders: Object.keys(customHeaders).length > 0 ? customHeaders : undefined,
+  })
   const onUpdateRef = useRef(onUpdate)
   const prevConnectionRef = useRef<MCPConnection | null>(null)
 
@@ -59,36 +91,40 @@ function McpConnectionWrapper({ url, name, onUpdate, onRemove: _onRemove }: {
   // Create a stable connection object
   // Only update when data actually changes
   useEffect(() => {
-    const connection: MCPConnection = {
-      id: url,
-      url,
-      name,
-      state: mcpHook.state,
-      tools: mcpHook.tools,
-      resources: mcpHook.resources,
-      prompts: mcpHook.prompts,
-      error: mcpHook.error ?? null,
-      authUrl: mcpHook.authUrl ?? null,
-      callTool: mcpHook.callTool,
-      readResource: mcpHook.readResource,
-      authenticate: mcpHook.authenticate,
-      retry: mcpHook.retry,
-      clearStorage: mcpHook.clearStorage,
-    }
+    // Use queueMicrotask to defer state updates and avoid React warnings
+    // about updating one component while rendering another
+    queueMicrotask(() => {
+      const connection: MCPConnection = {
+        id: url,
+        url,
+        name,
+        state: mcpHook.state,
+        tools: mcpHook.tools,
+        resources: mcpHook.resources,
+        prompts: mcpHook.prompts,
+        error: mcpHook.error ?? null,
+        authUrl: mcpHook.authUrl ?? null,
+        callTool: mcpHook.callTool,
+        readResource: mcpHook.readResource,
+        authenticate: mcpHook.authenticate,
+        retry: mcpHook.retry,
+        clearStorage: mcpHook.clearStorage,
+      }
 
-    // Only update if something actually changed
-    const prev = prevConnectionRef.current
-    if (!prev
-      || prev.state !== connection.state
-      || prev.error !== connection.error
-      || prev.authUrl !== connection.authUrl
-      || prev.tools.length !== connection.tools.length
-      || prev.resources.length !== connection.resources.length
-      || prev.prompts.length !== connection.prompts.length
-    ) {
-      prevConnectionRef.current = connection
-      onUpdateRef.current(connection)
-    }
+      // Only update if something actually changed
+      const prev = prevConnectionRef.current
+      if (!prev
+        || prev.state !== connection.state
+        || prev.error !== connection.error
+        || prev.authUrl !== connection.authUrl
+        || prev.tools.length !== connection.tools.length
+        || prev.resources.length !== connection.resources.length
+        || prev.prompts.length !== connection.prompts.length
+      ) {
+        prevConnectionRef.current = connection
+        onUpdateRef.current(connection)
+      }
+    })
   }, [
     url,
     name,
@@ -106,6 +142,7 @@ function McpConnectionWrapper({ url, name, onUpdate, onRemove: _onRemove }: {
 export function McpProvider({ children }: { children: ReactNode }) {
   const [savedConnections, setSavedConnections] = useState<SavedConnection[]>([])
   const [activeConnections, setActiveConnections] = useState<Map<string, MCPConnection>>(new Map())
+  const [connectionVersion, setConnectionVersion] = useState(0)
 
   // Load saved connections from localStorage on mount
   useEffect(() => {
@@ -143,14 +180,16 @@ export function McpProvider({ children }: { children: ReactNode }) {
 
   const updateConnection = useCallback((connection: MCPConnection) => {
     setActiveConnections(prev => new Map(prev).set(connection.id, connection))
+    setConnectionVersion(v => v + 1)
   }, [])
 
-  const addConnection = useCallback((url: string, name?: string) => {
+  const addConnection = useCallback((url: string, name?: string, proxyConfig?: { proxyAddress?: string, proxyToken?: string, customHeaders?: Record<string, string> }) => {
     const connectionName = name || url
     const newConnection: SavedConnection = {
       id: url,
       url,
       name: connectionName,
+      proxyConfig,
     }
 
     setSavedConnections((prev) => {
@@ -192,15 +231,29 @@ export function McpProvider({ children }: { children: ReactNode }) {
     return activeConnections.get(id)
   }, [activeConnections])
 
-  const connections = Array.from(activeConnections.values())
+  // Use connectionVersion to force array recreation when connections update
+  const connections = useMemo(() => {
+    const conns = Array.from(activeConnections.values())
+    console.warn('[McpContext] Connections updated, version:', connectionVersion, 'count:', conns.length, 'states:', conns.map(c => `${c.id}:${c.state}`))
+    return conns
+  }, [activeConnections, connectionVersion])
+
+  // Memoize the context value to prevent unnecessary re-renders and HMR issues
+  const contextValue = useMemo(() => ({
+    connections,
+    addConnection,
+    removeConnection,
+    getConnection,
+  }), [connections, addConnection, removeConnection, getConnection])
 
   return (
-    <McpContext.Provider value={{ connections, addConnection, removeConnection, getConnection }}>
+    <McpContext.Provider value={contextValue}>
       {savedConnections.map(saved => (
         <McpConnectionWrapper
           key={saved.id}
           url={saved.url}
           name={saved.name}
+          proxyConfig={saved.proxyConfig}
           onUpdate={updateConnection}
           onRemove={() => removeConnection(saved.id)}
         />
diff --git a/packages/inspector/src/components/ui/not-found.tsx b/packages/inspector/src/components/ui/not-found.tsx
new file mode 100644
index 00000000..c3ad747f
--- /dev/null
+++ b/packages/inspector/src/components/ui/not-found.tsx
@@ -0,0 +1,32 @@
+import type React from 'react'
+
+interface NotFoundProps {
+  message: string
+  className?: string
+}
+
+export function NotFound({ message, className = '' }: NotFoundProps) {
+  return (
+    <div className={`mt-2 border rounded-md p-6 ${className}`}>
+      <p className="text-sm text-muted-foreground flex items-center gap-4">
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 273 273"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          className="flex-shrink-0"
+        >
+          <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+            <g transform="translate(5.320900, 5.320900)" fillRule="nonzero" className="stroke-black dark:stroke-white" strokeWidth="4">
+              <path d="M49.953025,-2.10854389 C63.26892,-2.21867124 76.6185256,2.70621155 86.9019463,12.6653164 L86.9019463,12.6653164 L87.505627,13.2592944 C97.5154947,23.2654892 102.640454,36.3074513 102.880738,49.4222247 C103.08932,77.4533067 113.877287,105.391753 135.242867,126.757333 C156.613383,148.127849 184.559216,158.914875 212.568138,159.119313 L212.568138,159.119313 L213.212264,159.134159 C225.843948,159.517566 238.363557,164.434972 248.121998,173.886137 L248.121998,173.886137 L248.725621,174.480088 C258.982114,184.732164 264.11035,198.171134 264.11035,211.6101 C264.11035,225.04592 258.984514,238.481745 248.732867,248.732867 C238.592792,258.872942 225.336706,263.997882 212.046872,264.107794 C198.731075,264.21792 185.381569,259.293085 175.098248,249.334078 L175.098248,249.334078 L174.494602,248.740134 C163.75802,238.008189 158.640853,223.784027 159.143413,209.719372 C158.258245,182.640933 147.489786,155.83332 126.828333,135.171867 C106.351297,114.694831 79.8363505,103.934873 53.0237258,102.891841 L53.0237258,102.891841 L52.2811438,102.865674 C38.4791718,103.347421 24.5325234,98.4328111 13.8776628,88.1140866 L13.8776628,88.1140866 L13.2739843,87.5201168 C3.12895117,77.3789607 -1.9984796,64.1195994 -2.10841888,50.8264755 C-2.21854669,37.5105567 2.70635908,24.1609269 12.6655135,13.8774565 L12.6655135,13.8774565 L13.2594878,13.2737797 C23.4005926,3.12880025 36.659927,-1.99860507 49.953025,-2.10854389 Z" />
+              <circle cx="50" cy="212.0001" r="52.5" />
+              <circle cx="212.0001" cy="50" r="52.5" />
+            </g>
+          </g>
+        </svg>
+        {message}
+      </p>
+    </div>
+  )
+}
diff --git a/packages/inspector/src/server/favicon-proxy.ts b/packages/inspector/src/server/favicon-proxy.ts
deleted file mode 100644
index fa0e0547..00000000
--- a/packages/inspector/src/server/favicon-proxy.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Hono } from 'hono'
-import { cors } from 'hono/cors'
-import { fetchFavicon } from './shared-utils.js'
-
-const app = new Hono()
-
-// Enable CORS for all routes
-app.use('*', cors())
-
-// Favicon proxy endpoint
-app.get('/:url', async (c) => {
-  const url = c.req.param('url')
-
-  if (!url) {
-    return c.json({ error: 'URL parameter is required' }, 400)
-  }
-
-  try {
-    const result = await fetchFavicon(url)
-
-    if (result) {
-      return new Response(result.data, {
-        headers: {
-          'Content-Type': result.contentType,
-          'Cache-Control': 'public, max-age=86400, immutable', // Cache for 24 hours
-          'Access-Control-Allow-Origin': '*',
-        },
-      })
-    }
-
-    // If no favicon found, return a default icon
-    return c.json({ error: 'No favicon found' }, 404)
-  }
-  catch (error) {
-    console.error('Favicon proxy error:', error)
-    return c.json({ error: 'Invalid URL or fetch failed' }, 400)
-  }
-})
-
-// Health check endpoint
-app.get('/health', (c) => {
-  return c.json({ status: 'ok', service: 'favicon-proxy' })
-})
-
-export default app
diff --git a/packages/inspector/src/server/middleware.ts b/packages/inspector/src/server/middleware.ts
index 43706215..1f5cb86b 100644
--- a/packages/inspector/src/server/middleware.ts
+++ b/packages/inspector/src/server/middleware.ts
@@ -1,8 +1,7 @@
 import type { Express, Request, Response } from 'express'
-import { Buffer } from 'node:buffer'
 import { existsSync } from 'node:fs'
 import { join } from 'node:path'
-import { checkClientFiles, fetchFavicon, getClientDistPath, getContentType, handleChatRequest } from './shared-utils.js'
+import { checkClientFiles, getClientDistPath, getContentType, handleChatRequest } from './shared-utils.js'
 
 /**
  * Mount the MCP Inspector UI at a specified path on an Express app
@@ -55,34 +54,6 @@ export function mountInspector(app: Express, path: string = '/inspector', mcpSer
     }
   })
 
-  // Favicon proxy endpoint
-  app.get(`${basePath}/api/favicon/:url`, async (req: Request, res: Response) => {
-    const url = req.params.url
-
-    if (!url) {
-      res.status(400).json({ error: 'URL parameter is required' })
-      return
-    }
-
-    try {
-      const result = await fetchFavicon(url)
-
-      if (result) {
-        res.setHeader('Content-Type', result.contentType)
-        res.setHeader('Cache-Control', 'public, max-age=86400')
-        res.setHeader('Access-Control-Allow-Origin', '*')
-        res.send(Buffer.from(result.data))
-        return
-      }
-
-      // If no favicon found, return 404
-      res.status(404).json({ error: 'No favicon found' })
-    }
-    catch (error) {
-      console.error('Favicon proxy error:', error)
-      res.status(400).json({ error: 'Invalid URL or fetch failed' })
-    }
-  })
 
   // Serve static assets
   app.use(`${basePath}/assets`, (_req: Request, res: Response) => {
diff --git a/packages/inspector/src/server/server.ts b/packages/inspector/src/server/server.ts
index c897882b..d025469a 100644
--- a/packages/inspector/src/server/server.ts
+++ b/packages/inspector/src/server/server.ts
@@ -6,9 +6,8 @@ import { serve } from '@hono/node-server'
 import { Hono } from 'hono'
 import { cors } from 'hono/cors'
 import { logger } from 'hono/logger'
-import faviconProxy from './favicon-proxy.js'
 import { MCPInspector } from './mcp-inspector.js'
-import { checkClientFiles, fetchFavicon, getClientDistPath, getContentType, handleChatRequest } from './shared-utils.js'
+import { checkClientFiles, getClientDistPath, getContentType, handleChatRequest } from './shared-utils.js'
 
 const execAsync = promisify(exec)
 
@@ -31,9 +30,6 @@ const app = new Hono()
 app.use('*', cors())
 app.use('*', logger())
 
-// Mount favicon proxy
-app.route('/api/favicon', faviconProxy)
-
 // Health check
 app.get('/health', (c) => {
   return c.json({ status: 'ok', timestamp: new Date().toISOString() })
@@ -146,40 +142,79 @@ app.post('/inspector/api/chat', async (c) => {
   }
 })
 
-// Inspector config endpoint
-app.get('/inspector/config.json', (c) => {
-  return c.json({
-    autoConnectUrl: null,
-  })
-})
+// MCP Proxy endpoint - proxies MCP requests to target servers
+app.all('/inspector/api/proxy/*', async (c) => {
+  try {
+    const targetUrl = c.req.header('X-Target-URL')
+    const proxyToken = c.req.header('X-Proxy-Token')
 
-// Inspector favicon proxy endpoint
-app.get('/inspector/api/favicon/:url', async (c) => {
-  const url = c.req.param('url')
+    if (!targetUrl) {
+      return c.json({ error: 'X-Target-URL header is required' }, 400)
+    }
 
-  if (!url) {
-    return c.json({ error: 'URL parameter is required' }, 400)
-  }
+    // Validate proxy token if provided
+    if (proxyToken && proxyToken !== 'c96aeb0c195aa9c7d3846b90aec9bc5fcdd5df97b3049aaede8f5dd1a15d2d87') {
+      return c.json({ error: 'Invalid proxy token' }, 401)
+    }
 
-  try {
-    const result = await fetchFavicon(url)
+    // Forward the request to the target MCP server
+    const method = c.req.method
+    const headers: Record<string, string> = {}
+
+    // Copy relevant headers, excluding proxy-specific ones
+    const requestHeaders = c.req.header()
+    for (const [key, value] of Object.entries(requestHeaders)) {
+      if (!key.toLowerCase().startsWith('x-proxy-')
+        && !key.toLowerCase().startsWith('x-target-')
+        && key.toLowerCase() !== 'host') {
+        headers[key] = value
+      }
+    }
 
-    if (result) {
-      c.header('Content-Type', result.contentType)
-      c.header('Cache-Control', 'public, max-age=86400')
-      c.header('Access-Control-Allow-Origin', '*')
-      return c.body(new Uint8Array(result.data))
+    // Set the target URL as the host
+    try {
+      const targetUrlObj = new URL(targetUrl)
+      headers.Host = targetUrlObj.host
+    }
+    catch {
+      return c.json({ error: 'Invalid target URL' }, 400)
     }
 
-    // If no favicon found, return 404
-    return c.json({ error: 'No favicon found' }, 404)
+    const body = method !== 'GET' && method !== 'HEAD' ? await c.req.arrayBuffer() : undefined
+
+    const response = await fetch(targetUrl, {
+      method,
+      headers,
+      body: body ? new Uint8Array(body) : undefined,
+    })
+
+    // Forward the response
+    const responseHeaders: Record<string, string> = {}
+    response.headers.forEach((value, key) => {
+      responseHeaders[key] = value
+    })
+
+    return new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: responseHeaders,
+    })
   }
   catch (error) {
-    console.error('Favicon proxy error:', error)
-    return c.json({ error: 'Invalid URL or fetch failed' }, 400)
+    console.error('Proxy error:', error)
+    return c.json({
+      error: error instanceof Error ? error.message : 'Failed to proxy request',
+    }, 500)
   }
 })
 
+// Inspector config endpoint
+app.get('/inspector/config.json', (c) => {
+  return c.json({
+    autoConnectUrl: null,
+  })
+})
+
 // Check if we're in development mode (Vite dev server running)
 const isDev = process.env.NODE_ENV === 'development' || process.env.VITE_DEV === 'true'
 
diff --git a/packages/inspector/src/server/shared-utils.ts b/packages/inspector/src/server/shared-utils.ts
index 9f1fb058..3b64b8a2 100644
--- a/packages/inspector/src/server/shared-utils.ts
+++ b/packages/inspector/src/server/shared-utils.ts
@@ -7,131 +7,6 @@ import { fileURLToPath } from 'node:url'
  * Shared utilities for MCP Inspector server functionality
  */
 
-// In-memory cache for favicons
-interface CacheEntry {
-  data: ArrayBuffer
-  contentType: string
-  timestamp: number
-  ttl: number
-}
-
-const faviconCache = new Map<string, CacheEntry>()
-const CACHE_TTL = 24 * 60 * 60 * 1000 // 24 hours in milliseconds
-const MAX_CACHE_SIZE = 1000 // Maximum number of cached favicons
-
-// Clean up expired cache entries
-function cleanupCache() {
-  const now = Date.now()
-  for (const [key, entry] of faviconCache.entries()) {
-    if (now - entry.timestamp > entry.ttl) {
-      faviconCache.delete(key)
-    }
-  }
-}
-
-// Run cleanup every hour
-setInterval(cleanupCache, 60 * 60 * 1000)
-
-// Get cache key for a URL
-function getCacheKey(url: string): string {
-  try {
-    const urlObj = new URL(url)
-    return urlObj.hostname.toLowerCase()
-  }
-  catch {
-    return url.toLowerCase()
-  }
-}
-
-/**
- * Fetch favicon for a given URL with caching
- */
-export async function fetchFavicon(url: string): Promise<{ data: ArrayBuffer; contentType: string } | null> {
-  try {
-    // Decode the URL
-    const decodedUrl = decodeURIComponent(url)
-
-    // Add protocol if missing
-    let fullUrl = decodedUrl
-    if (!decodedUrl.startsWith('http://') && !decodedUrl.startsWith('https://')) {
-      fullUrl = `https://${decodedUrl}`
-    }
-
-    // Validate URL
-    const urlObj = new URL(fullUrl)
-    const cacheKey = getCacheKey(fullUrl)
-
-    // Check cache first
-    const cachedEntry = faviconCache.get(cacheKey)
-    if (cachedEntry && (Date.now() - cachedEntry.timestamp) < cachedEntry.ttl) {
-      return {
-        data: cachedEntry.data,
-        contentType: cachedEntry.contentType,
-      }
-    }
-
-    const protocol = urlObj.protocol
-    const baseDomain = `${protocol}//${urlObj.origin.split('.').slice(-2).join('.')}`
-
-    // Try to fetch favicon from common locations
-    const faviconUrls = [
-      `${urlObj.origin}/favicon.ico`,
-      `${urlObj.origin}/favicon.png`,
-      `${urlObj.origin}/apple-touch-icon.png`,
-      `${urlObj.origin}/icon.png`,
-      `${baseDomain}/favicon.ico`,
-      `${baseDomain}/favicon.png`,
-      `${baseDomain}/apple-touch-icon.png`,
-      `${baseDomain}/icon.png`,
-    ]
-
-    for (const faviconUrl of faviconUrls) {
-      try {
-        const response = await fetch(faviconUrl, {
-          headers: {
-            'User-Agent': 'Mozilla/5.0 (compatible; MCP-Inspector/1.0)',
-          },
-        })
-
-        if (response.ok) {
-          const contentType = response.headers.get('content-type') || 'image/x-icon'
-          const buffer = await response.arrayBuffer()
-
-          // Cache the result
-          if (faviconCache.size >= MAX_CACHE_SIZE) {
-            // Remove oldest entries if cache is full
-            const entries = Array.from(faviconCache.entries())
-            entries.sort((a, b) => a[1].timestamp - b[1].timestamp)
-            const toRemove = entries.slice(0, Math.floor(MAX_CACHE_SIZE / 4))
-            toRemove.forEach(([key]) => faviconCache.delete(key))
-          }
-
-          faviconCache.set(cacheKey, {
-            data: buffer,
-            contentType,
-            timestamp: Date.now(),
-            ttl: CACHE_TTL,
-          })
-
-          return {
-            data: buffer,
-            contentType,
-          }
-        }
-      }
-      catch {
-        // Continue to next URL
-        continue
-      }
-    }
-
-    return null
-  }
-  catch (error) {
-    console.error('Favicon fetch error:', error)
-    return null
-  }
-}
 
 /**
  * Handle chat API request with MCP agent
diff --git a/packages/mcp-use/src/auth/browser-provider.ts b/packages/mcp-use/src/auth/browser-provider.ts
index 74b0823f..c5556987 100644
--- a/packages/mcp-use/src/auth/browser-provider.ts
+++ b/packages/mcp-use/src/auth/browser-provider.ts
@@ -32,7 +32,7 @@ export class BrowserOAuthClientProvider implements OAuthClientProvider {
     this.serverUrl = serverUrl
     this.storageKeyPrefix = options.storageKeyPrefix || 'mcp:auth'
     this.serverUrlHash = this.hashString(serverUrl)
-    this.clientName = options.clientName || 'MCP Browser Client'
+    this.clientName = options.clientName || 'mcp-use'
     this.clientUri = options.clientUri || (typeof window !== 'undefined' ? window.location.origin : '')
     this.callbackUrl = sanitizeUrl(
       options.callbackUrl ||
diff --git a/packages/mcp-use/src/connectors/http.ts b/packages/mcp-use/src/connectors/http.ts
index d0a3a906..aa1d3d3e 100644
--- a/packages/mcp-use/src/connectors/http.ts
+++ b/packages/mcp-use/src/connectors/http.ts
@@ -60,15 +60,21 @@ export class HttpConnector extends BaseConnector {
 
     try {
       // Try streamable HTTP transport first
-      logger.debug('Attempting streamable HTTP transport...')
+      logger.info('🔄 Attempting streamable HTTP transport...')
       await this.connectWithStreamableHttp(baseUrl)
+      logger.info('✅ Successfully connected via streamable HTTP')
     }
     catch (err) {
       // Check if this is a 4xx error that indicates we should try SSE fallback
       let fallbackReason = 'Unknown error'
 
       if (err instanceof StreamableHTTPError) {
-        if (err.code === 404 || err.code === 405) {
+        // Check for "Missing session ID" error (HTTP 400 from FastMCP)
+        if (err.code === 400 && err.message.includes('Missing session ID')) {
+          fallbackReason = 'Server requires session ID (FastMCP compatibility) - using SSE transport'
+          logger.warn(`⚠️  ${fallbackReason}`)
+        }
+        else if (err.code === 404 || err.code === 405) {
           fallbackReason = `Server returned ${err.code} - server likely doesn't support streamable HTTP`
           logger.debug(fallbackReason)
         }
@@ -80,7 +86,16 @@ export class HttpConnector extends BaseConnector {
       else if (err instanceof Error) {
         // Check for 404/405 in error message as fallback detection
         const errorStr = err.toString()
-        if (errorStr.includes('405 Method Not Allowed') || errorStr.includes('404 Not Found')) {
+        const errorMsg = err.message || ''
+        
+        // Check for "Missing session ID" error in the message (from both direct errors and wrapped errors)
+        if (errorStr.includes('Missing session ID') 
+            || errorStr.includes('Bad Request: Missing session ID')
+            || errorMsg.includes('FastMCP session ID error')) {
+          fallbackReason = 'Server requires session ID (FastMCP compatibility) - using SSE transport'
+          logger.warn(`⚠️  ${fallbackReason}`)
+        }
+        else if (errorStr.includes('405 Method Not Allowed') || errorStr.includes('404 Not Found')) {
           fallbackReason = 'Server doesn\'t support streamable HTTP (405/404)'
           logger.debug(fallbackReason)
         }
@@ -91,7 +106,7 @@ export class HttpConnector extends BaseConnector {
       }
 
       // Always try SSE fallback for maximum compatibility
-      logger.debug('Falling back to SSE transport...')
+      logger.info('🔄 Falling back to SSE transport...')
 
       try {
         await this.connectWithSse(baseUrl)
@@ -127,8 +142,25 @@ export class HttpConnector extends BaseConnector {
       const transport = await this.connectionManager.start()
 
       // Create and connect the client
+      // This performs both initialize AND initialized notification
       this.client = new Client(this.clientInfo, this.opts.clientOptions)
-      await this.client.connect(transport)
+      
+      try {
+        await this.client.connect(transport)
+      }
+      catch (connectErr) {
+        // Check if the error is due to missing session ID during connection handshake
+        if (connectErr instanceof Error) {
+          const errMsg = connectErr.message || connectErr.toString()
+          if (errMsg.includes('Missing session ID') || errMsg.includes('Bad Request: Missing session ID')) {
+            // Wrap it in a more specific error so the outer catch can detect it
+            const wrappedError = new Error(`FastMCP session ID error: ${errMsg}`)
+            wrappedError.cause = connectErr
+            throw wrappedError
+          }
+        }
+        throw connectErr
+      }
 
       this.connected = true
       this.transportType = 'streamable-http'
diff --git a/packages/mcp-use/src/react/useMcp.ts b/packages/mcp-use/src/react/useMcp.ts
index ee42d6e4..8dace279 100644
--- a/packages/mcp-use/src/react/useMcp.ts
+++ b/packages/mcp-use/src/react/useMcp.ts
@@ -180,7 +180,7 @@ export function useMcp(options: UseMcpOptions): UseMcpResult {
     }
     if (!clientRef.current) {
       clientRef.current = new Client(
-        { name: clientConfig.name || 'use-mcp-react-client', version: clientConfig.version || '0.1.0' },
+        { name: clientConfig.name || 'mcp-use', version: clientConfig.version || '0.1.0' },
         { capabilities: {} },
       )
       addLog('debug', 'MCP Client initialized in connect.')
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 07f60b65..becdc2ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ overrides:
 
 patchedDependencies:
   '@mcp-ui/server@5.11.0':
-    hash: q4o7znptjmfaz7quhzmm6hp4jy
+    hash: 5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11
     path: patches/@mcp-ui__server@5.11.0.patch
 
 importers:
@@ -125,7 +125,7 @@ importers:
     dependencies:
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -352,7 +352,7 @@ importers:
         version: 0.6.14(@langchain/core@0.3.78(@opentelemetry/api@1.9.0)(openai@5.12.2(ws@8.18.3)(zod@3.25.76)))(ws@8.18.3)
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       '@mcp-use/inspector':
         specifier: workspace:*
         version: link:../inspector
@@ -523,7 +523,7 @@ importers:
     dependencies:
       '@mcp-ui/server':
         specifier: ^5.11.0
-        version: 5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)
+        version: 5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)
       cors:
         specifier: ^2.8.5
         version: 2.8.5
@@ -7921,7 +7921,7 @@ snapshots:
       - preact
       - supports-color
 
-  '@mcp-ui/server@5.11.0(patch_hash=q4o7znptjmfaz7quhzmm6hp4jy)':
+  '@mcp-ui/server@5.11.0(patch_hash=5d24b4104a7d6d537b7de1dc183b27e42d9c1b3fde96a28dbeb722713ba85f11)':
     dependencies:
       '@modelcontextprotocol/sdk': 1.12.1
     transitivePeerDependencies:

From 1ccab891408a971bc6d4302f152ab9f20c84cff3 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Tue, 14 Oct 2025 14:40:52 +0200
Subject: [PATCH 19/21] refactor: update MCP server import paths and bump SDK
 version

- Changed import path for `createMCPServer` to `mcp-use/server` across multiple files for consistency.
- Updated `@modelcontextprotocol/sdk` version from 1.12.1 to 1.20.0 in `pnpm-lock.yaml` and related files.
- Adjusted TypeScript configuration to use `bundler` for module resolution in example projects.
- Added `test_app` to the workspace configuration.
---
 INSPECTOR_INTEGRATION.md                      |   2 +-
 .../src/templates/ui/src/server.ts            |   2 +-
 .../src/templates/ui/tsconfig.json            |   2 +-
 packages/inspector/README.md                  |   2 +-
 packages/inspector/src/server/middleware.ts   |   2 +-
 .../examples/server/simple/src/server.ts      |   2 +-
 .../examples/server/simple/tsconfig.json      |   2 +-
 packages/mcp-use/index.ts                     |  20 +-
 packages/mcp-use/src/server/index.ts          |   6 +
 pnpm-lock.yaml                                |  34 +-
 pnpm-workspace.yaml                           |   1 +
 test_app/README.md                            | 454 ++++++++++++++++++
 test_app/index.ts                             |  12 +
 test_app/package.json                         |  45 ++
 test_app/resources/kanban-board.tsx           | 306 ++++++++++++
 test_app/src/server.ts                        |  67 +++
 test_app/tsconfig.json                        |  20 +
 17 files changed, 948 insertions(+), 31 deletions(-)
 create mode 100644 test_app/README.md
 create mode 100644 test_app/index.ts
 create mode 100644 test_app/package.json
 create mode 100644 test_app/resources/kanban-board.tsx
 create mode 100644 test_app/src/server.ts
 create mode 100644 test_app/tsconfig.json

diff --git a/INSPECTOR_INTEGRATION.md b/INSPECTOR_INTEGRATION.md
index 4038f635..f1a7c336 100644
--- a/INSPECTOR_INTEGRATION.md
+++ b/INSPECTOR_INTEGRATION.md
@@ -33,7 +33,7 @@ The MCP Inspector is now automatically mounted at `/inspector` for all MCP serve
 When developers create a new MCP server:
 
 ```typescript
-import { createMCPServer } from 'mcp-use'
+import { createMCPServer } from 'mcp-use/server'
 
 const server = createMCPServer('my-server', {
   version: '1.0.0',
diff --git a/packages/create-mcp-use-app/src/templates/ui/src/server.ts b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
index 8a150b09..e33eb641 100644
--- a/packages/create-mcp-use-app/src/templates/ui/src/server.ts
+++ b/packages/create-mcp-use-app/src/templates/ui/src/server.ts
@@ -1,4 +1,4 @@
-import { createMCPServer } from 'mcp-use'
+import { createMCPServer } from 'mcp-use/server'
 import { createUIResource } from '@mcp-ui/server';
 
 // Create an MCP server (which is also an Express app)
diff --git a/packages/create-mcp-use-app/src/templates/ui/tsconfig.json b/packages/create-mcp-use-app/src/templates/ui/tsconfig.json
index 5a2c6947..cafb2cf5 100644
--- a/packages/create-mcp-use-app/src/templates/ui/tsconfig.json
+++ b/packages/create-mcp-use-app/src/templates/ui/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "ES2022",
     "jsx": "react-jsx",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowJs": true,
     "strict": true,
     "declaration": true,
diff --git a/packages/inspector/README.md b/packages/inspector/README.md
index 90cf56e4..700ed078 100644
--- a/packages/inspector/README.md
+++ b/packages/inspector/README.md
@@ -21,7 +21,7 @@ A web-based interface for connecting to and managing MCP (Model Context Protocol
 The inspector is automatically available when you create an MCP server:
 
 ```typescript
-import { createMCPServer } from 'mcp-use'
+import { createMCPServer } from 'mcp-use/server'
 
 const server = createMCPServer('my-server', {
   version: '1.0.0',
diff --git a/packages/inspector/src/server/middleware.ts b/packages/inspector/src/server/middleware.ts
index 1f5cb86b..2fbe428d 100644
--- a/packages/inspector/src/server/middleware.ts
+++ b/packages/inspector/src/server/middleware.ts
@@ -13,7 +13,7 @@ import { checkClientFiles, getClientDistPath, getContentType, handleChatRequest
  *
  * @example
  * ```typescript
- * import { createMCPServer } from 'mcp-use'
+ * import { createMCPServer } from 'mcp-use/server'
  * import { mountInspector } from '@mcp-use/inspector'
  *
  * const server = createMCPServer('my-server')
diff --git a/packages/mcp-use/examples/server/simple/src/server.ts b/packages/mcp-use/examples/server/simple/src/server.ts
index 50c4bb67..10cc2be2 100644
--- a/packages/mcp-use/examples/server/simple/src/server.ts
+++ b/packages/mcp-use/examples/server/simple/src/server.ts
@@ -1,4 +1,4 @@
-import { createMCPServer } from 'mcp-use'
+import { createMCPServer } from 'mcp-use/server'
 
 // Create an MCP server (which is also an Express app)
 // The MCP Inspector is automatically mounted at /inspector
diff --git a/packages/mcp-use/examples/server/simple/tsconfig.json b/packages/mcp-use/examples/server/simple/tsconfig.json
index b223ac84..12ee9fec 100644
--- a/packages/mcp-use/examples/server/simple/tsconfig.json
+++ b/packages/mcp-use/examples/server/simple/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ES2022",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "allowJs": true,
diff --git a/packages/mcp-use/index.ts b/packages/mcp-use/index.ts
index 3ec34719..b67f64d5 100644
--- a/packages/mcp-use/index.ts
+++ b/packages/mcp-use/index.ts
@@ -1,10 +1,8 @@
 import { MCPAgent } from './src/agents/mcp_agent.js'
 import { RemoteAgent } from './src/agents/remote.js'
 import { MCPClient } from './src/client.js'
-import { loadConfigFile } from './src/config.js'
 import { BaseConnector } from './src/connectors/base.js'
 import { HttpConnector } from './src/connectors/http.js'
-import { StdioConnector } from './src/connectors/stdio.js'
 import { WebSocketConnector } from './src/connectors/websocket.js'
 
 import { Logger, logger } from './src/logging.js'
@@ -20,19 +18,9 @@ export * from './src/managers/tools/index.js'
 // Export observability utilities
 export { type ObservabilityConfig, ObservabilityManager } from './src/observability/index.js'
 
-// Export server utilities
-export { createMCPServer } from './src/server/index.js'
-
-export type {
-  InputDefinition,
-  PromptDefinition,
-  PromptHandler,
-  ResourceDefinition,
-  ResourceHandler,
-  ServerConfig,
-  ToolDefinition,
-  ToolHandler,
-} from './src/server/types.js'
+// Note: Server utilities (createMCPServer, ServerConfig, etc.) are available via 'mcp-use/server'
+// This keeps the root export client-safe for edge environments like Cloudflare Workers
+
 // Export telemetry utilities
 export { setTelemetrySource, Telemetry } from './src/telemetry/index.js'
 
@@ -53,4 +41,4 @@ export { AIMessage, BaseMessage, HumanMessage, SystemMessage, ToolMessage } from
 // Re-export StreamEvent type from LangChain for convenience
 export type { StreamEvent } from '@langchain/core/tracers/log_stream'
 
-export { BaseConnector, HttpConnector, loadConfigFile, Logger, logger, MCPAgent, MCPClient, MCPSession, RemoteAgent, StdioConnector, WebSocketConnector }
+export { BaseConnector, HttpConnector, Logger, logger, MCPAgent, MCPClient, MCPSession, RemoteAgent, WebSocketConnector }
diff --git a/packages/mcp-use/src/server/index.ts b/packages/mcp-use/src/server/index.ts
index 52e80796..08701b8f 100644
--- a/packages/mcp-use/src/server/index.ts
+++ b/packages/mcp-use/src/server/index.ts
@@ -1,3 +1,9 @@
+// Server-specific MCPClient with Node.js features
+export { MCPClient } from '../client.js'
+export { loadConfigFile, createConnectorFromConfig } from '../config.js'
+export { StdioConnector } from '../connectors/stdio.js'
+
+// Server creation utilities
 export { 
   createMCPServer
 } from './mcp-server.js'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7eb0382..24d574cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -188,8 +188,8 @@ importers:
         specifier: ^5.12.1
         version: 5.12.1(@preact/signals-core@1.12.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@modelcontextprotocol/sdk':
-        specifier: 1.12.1
-        version: 1.12.1
+        specifier: 1.20.0
+        version: 1.20.0
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.15
         version: 1.1.15(@types/react-dom@19.2.1(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -357,8 +357,8 @@ importers:
         specifier: workspace:*
         version: link:../inspector
       '@modelcontextprotocol/sdk':
-        specifier: 1.12.1
-        version: 1.12.1
+        specifier: 1.20.0
+        version: 1.20.0
       '@scarf/scarf':
         specifier: ^1.4.0
         version: 1.4.0
@@ -519,8 +519,6 @@ importers:
         specifier: ^5.0.0
         version: 5.9.3
 
-<<<<<<< HEAD
-=======
   test_app:
     dependencies:
       '@mcp-ui/server':
@@ -579,7 +577,6 @@ importers:
         specifier: ^5.0.0
         version: 5.9.3
 
->>>>>>> changes
 packages:
 
   '@ai-sdk/provider-utils@2.2.8':
@@ -1857,6 +1854,10 @@ packages:
     resolution: {integrity: sha512-KG1CZhZfWg+u8pxeM/mByJDScJSrjjxLc8fwQqbsS8xCjBmQfMNEBTotYdNanKekepnfRI85GtgQlctLFpcYPw==}
     engines: {node: '>=18'}
 
+  '@modelcontextprotocol/sdk@1.20.0':
+    resolution: {integrity: sha512-kOQ4+fHuT4KbR2iq2IjeV32HiihueuOf1vJkq18z08CLZ1UQrTc8BXJpVfxZkq45+inLLD+D4xx4nBjUelJa4Q==}
+    engines: {node: '>=18'}
+
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -7912,7 +7913,7 @@ snapshots:
 
   '@mcp-ui/client@5.12.1(@preact/signals-core@1.12.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
-      '@modelcontextprotocol/sdk': 1.12.1
+      '@modelcontextprotocol/sdk': 1.20.0
       '@quilted/threads': 3.3.1(@preact/signals-core@1.12.1)
       '@r2wc/react-to-web-component': 2.1.0(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@remote-dom/core': 1.10.0(@preact/signals-core@1.12.1)
@@ -7946,6 +7947,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@modelcontextprotocol/sdk@1.20.0':
+    dependencies:
+      ajv: 6.12.6
+      content-type: 1.0.5
+      cors: 2.8.5
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.6
+      express: 5.1.0
+      express-rate-limit: 7.5.1(express@5.1.0)
+      pkce-challenge: 5.0.0
+      raw-body: 3.0.1
+      zod: 3.25.76
+      zod-to-json-schema: 3.24.6(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.5.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 28363ba3..cd64b37d 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,3 +3,4 @@ packages:
   - 'packages/mcp-use/examples/client/react'
   - 'packages/mcp-use/examples/server/simple'
   - 'packages/create-mcp-use-app/src/templates/ui'
+  - 'test_app'
diff --git a/test_app/README.md b/test_app/README.md
new file mode 100644
index 00000000..a6d31caa
--- /dev/null
+++ b/test_app/README.md
@@ -0,0 +1,454 @@
+# UI MCP Server
+
+An MCP server with React UI widgets created with `create-mcp-app` that provides interactive web components for MCP clients.
+
+## Features
+
+- **🎨 React Components**: Interactive UI widgets built with React
+- **🔥 Hot Reloading**: Development server with instant updates
+- **📦 Production Builds**: Optimized bundles for production
+- **🌐 Web Endpoints**: Serve widgets at `/mcp-use/widgets/{widget-name}`
+- **🛠️ Development Tools**: Full TypeScript support and modern tooling
+
+## Getting Started
+
+### Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server with hot reloading
+npm run dev
+```
+
+This will start:
+
+- MCP server on port 3000
+- Vite dev server on port 3001 with hot reloading
+
+### Production
+
+```bash
+# Build the server and UI components
+npm run build
+
+# Run the built server
+npm start
+```
+
+## Available Widgets
+
+### 1. Kanban Board (`/mcp-use/widgets/kanban-board`)
+
+Interactive Kanban board for task management.
+
+**Features:**
+
+- Drag and drop tasks between columns
+- Add/remove tasks
+- Priority levels and assignees
+- Real-time updates
+
+**Usage:**
+
+```typescript
+mcp.tool({
+  name: 'show-kanban',
+  inputs: [{ name: 'tasks', type: 'string', required: true }],
+  fn: async ({ tasks }) => {
+    // Display Kanban board with tasks
+  }
+})
+```
+
+### 2. Todo List (`/mcp-use/widgets/todo-list`)
+
+Interactive todo list with filtering and sorting.
+
+**Features:**
+
+- Add/complete/delete todos
+- Filter by status (all/active/completed)
+- Sort by priority, due date, or creation time
+- Progress tracking
+- Categories and due dates
+
+**Usage:**
+
+```typescript
+mcp.tool({
+  name: 'show-todo-list',
+  inputs: [{ name: 'todos', type: 'string', required: true }],
+  fn: async ({ todos }) => {
+    // Display todo list with todos
+  }
+})
+```
+
+### 3. Data Visualization (`/mcp-use/widgets/data-visualization`)
+
+Interactive charts and data visualization.
+
+**Features:**
+
+- Bar charts, line charts, and pie charts
+- Add/remove data points
+- Interactive legends
+- Data table view
+- Multiple chart types
+
+**Usage:**
+
+```typescript
+mcp.tool({
+  name: 'show-data-viz',
+  inputs: [
+    { name: 'data', type: 'string', required: true },
+    { name: 'chartType', type: 'string', required: false }
+  ],
+  fn: async ({ data, chartType }) => {
+    // Display data visualization
+  }
+})
+```
+
+## Development Workflow
+
+### 1. Create a New Widget
+
+1. **Create the React component:**
+
+   ```bash
+   # Create resources/my-widget.tsx
+   touch resources/my-widget.tsx
+   ```
+
+2. **Create the HTML entry point:**
+
+   ```bash
+   # Create resources/my-widget.html
+   touch resources/my-widget.html
+   ```
+
+3. **Add to Vite config:**
+
+   ```typescript
+   // vite.config.ts
+   rollupOptions: {
+     input: {
+       'my-widget': resolve(__dirname, 'resources/my-widget.html')
+     }
+   }
+   ```
+
+4. **Add MCP resource:**
+   ```typescript
+   // src/server.ts
+   mcp.resource({
+     uri: 'ui://widget/my-widget',
+     name: 'My Widget',
+     mimeType: 'text/html+skybridge',
+     fn: async () => {
+       const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/my-widget`
+       return `<div id="my-widget-root"></div><script type="module" src="${widgetUrl}"></script>`
+     }
+   })
+   ```
+
+### 2. Development with Hot Reloading
+
+```bash
+# Start development
+npm run dev
+
+# Visit your widget
+open http://localhost:3001/my-widget.html
+```
+
+Changes to your React components will automatically reload!
+
+### 3. Widget Development Best Practices
+
+#### Component Structure
+
+```typescript
+import React, { useState, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface MyWidgetProps {
+  initialData?: any
+}
+
+const MyWidget: React.FC<MyWidgetProps> = ({ initialData = [] }) => {
+  const [data, setData] = useState(initialData)
+
+  // Load data from URL parameters
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const dataParam = urlParams.get('data')
+
+    if (dataParam) {
+      try {
+        const parsedData = JSON.parse(decodeURIComponent(dataParam))
+        setData(parsedData)
+      } catch (error) {
+        console.error('Error parsing data:', error)
+      }
+    }
+  }, [])
+
+  return (
+    <div>
+      {/* Your widget content */}
+    </div>
+  )
+}
+
+// Render the component
+const container = document.getElementById('my-widget-root')
+if (container) {
+  const root = createRoot(container)
+  root.render(<MyWidget />)
+}
+```
+
+#### Styling Guidelines
+
+- Use inline styles for simplicity
+- Follow the existing design system
+- Ensure responsive design
+- Use consistent color palette
+
+#### Data Handling
+
+- Accept data via URL parameters
+- Provide sensible defaults
+- Handle errors gracefully
+- Use TypeScript for type safety
+
+### 4. Production Deployment
+
+```bash
+# Build everything
+npm run build
+
+# The built files will be in dist/
+# - dist/index.js (MCP server entry point)
+# - dist/src/server.js (MCP server implementation)  
+# - dist/resources/ (Compiled TypeScript + UI widget bundles)
+```
+
+## Project Structure
+
+```
+my-ui-server/
+├── index.ts                   # Entry point (re-exports server)
+├── src/
+│   └── server.ts              # MCP server with UI endpoints
+├── resources/                 # React components (TSX widgets)
+│   ├── kanban-board.tsx
+│   ├── todo-list.tsx
+│   └── data-visualization.tsx
+├── dist/                      # Built files
+│   ├── index.js               # Entry point
+│   ├── src/
+│   │   └── server.js          # Server implementation
+│   └── resources/             # TypeScript output + bundled widgets
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## API Reference
+
+### MCP Resources
+
+All UI widgets are available as MCP resources:
+
+- `ui://status` - Server status and available widgets
+- `ui://widget/kanban-board` - Kanban board widget
+- `ui://widget/todo-list` - Todo list widget
+- `ui://widget/data-visualization` - Data visualization widget
+
+### MCP Tools
+
+- `show-kanban` - Display Kanban board with tasks
+- `show-todo-list` - Display todo list with items
+- `show-data-viz` - Display data visualization
+
+### MCP Prompts
+
+- `ui-development` - Generate UI development guidance
+
+## Customization
+
+### Adding New Dependencies
+
+```bash
+# Add React libraries
+npm install @types/react-router-dom react-router-dom
+
+# Add UI libraries
+npm install @mui/material @emotion/react @emotion/styled
+```
+
+### Environment Variables
+
+Create a `.env` file:
+
+```bash
+# Server configuration
+PORT=3000
+NODE_ENV=development
+
+# UI configuration
+VITE_API_URL=http://localhost:3000
+```
+
+### Custom Build Configuration
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rollupOptions: {
+      input: {
+        'my-custom-widget': resolve(__dirname, 'resources/my-custom-widget.html')
+      }
+    }
+  }
+})
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Cannot find module" errors**
+
+   - Make sure all dependencies are installed: `npm install`
+   - Check that TypeScript paths are correct
+
+2. **Hot reloading not working**
+
+   - Ensure Vite dev server is running on port 3001
+   - Check that the widget HTML file exists
+
+3. **Widget not loading**
+
+   - Verify the widget is added to vite.config.ts
+   - Check that the MCP resource is properly configured
+
+4. **Build errors**
+   - Run `npm run build` to see detailed error messages
+   - Check that all imports are correct
+
+### Development Tips
+
+- Use browser dev tools to debug React components
+- Check the Network tab for failed requests
+- Use React DevTools browser extension
+- Monitor console for errors
+
+## Learn More
+
+- [React Documentation](https://react.dev/)
+- [Vite Documentation](https://vitejs.dev/)
+- [MCP Documentation](https://modelcontextprotocol.io)
+- [mcp-use Documentation](https://docs.mcp-use.io)
+
+## Examples
+
+### Simple Counter Widget
+
+```typescript
+// resources/counter.tsx
+import React, { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+
+const Counter: React.FC = () => {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div style={{ padding: '20px', textAlign: 'center' }}>
+      <h1>Counter: {count}</h1>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+      <button onClick={() => setCount(count - 1)}>
+        Decrement
+      </button>
+    </div>
+  )
+}
+
+const container = document.getElementById('counter-root')
+if (container) {
+  const root = createRoot(container)
+  root.render(<Counter />)
+}
+```
+
+### Data Table Widget
+
+```typescript
+// resources/data-table.tsx
+import React, { useState, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface TableData {
+  id: string
+  name: string
+  value: number
+}
+
+const DataTable: React.FC = () => {
+  const [data, setData] = useState<TableData[]>([])
+
+  useEffect(() => {
+    // Load data from URL or use defaults
+    const urlParams = new URLSearchParams(window.location.search)
+    const dataParam = urlParams.get('data')
+
+    if (dataParam) {
+      try {
+        setData(JSON.parse(decodeURIComponent(dataParam)))
+      } catch (error) {
+        console.error('Error parsing data:', error)
+      }
+    }
+  }, [])
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h1>Data Table</h1>
+      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map(row => (
+            <tr key={row.id}>
+              <td>{row.name}</td>
+              <td>{row.value}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+const container = document.getElementById('data-table-root')
+if (container) {
+  const root = createRoot(container)
+  root.render(<DataTable />)
+}
+```
+
+Happy coding! 🚀
diff --git a/test_app/index.ts b/test_app/index.ts
new file mode 100644
index 00000000..6f48dc04
--- /dev/null
+++ b/test_app/index.ts
@@ -0,0 +1,12 @@
+/**
+ * MCP Server Entry Point
+ * 
+ * This file serves as the main entry point for the MCP server application.
+ * It re-exports all functionality from the server implementation, allowing
+ * the CLI and other tools to locate and start the server.
+ * 
+ * The server is automatically started when this module is imported, making
+ * it suitable for both direct execution and programmatic usage.
+ */
+export * from './src/server.js'
+
diff --git a/test_app/package.json b/test_app/package.json
new file mode 100644
index 00000000..0fc2f058
--- /dev/null
+++ b/test_app/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "test_app",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "MCP server: test_app",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "mcp",
+    "server",
+    "ui",
+    "react",
+    "widgets",
+    "ai",
+    "tools"
+  ],
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "mcp-use build",
+    "dev": "mcp-use dev",
+    "start": "mcp-use start"
+  },
+  "dependencies": {
+    "@mcp-ui/server": "^5.11.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.0",
+    "mcp-use": "workspace:*"
+  },
+  "devDependencies": {
+    "@mcp-use/cli": "workspace:*",
+    "@mcp-use/inspector": "workspace:*",
+    "@types/cors": "^2.8.0",
+    "@types/express": "^4.17.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "concurrently": "^8.0.0",
+    "esbuild": "^0.23.0",
+    "globby": "^14.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
+  }
+}
\ No newline at end of file
diff --git a/test_app/resources/kanban-board.tsx b/test_app/resources/kanban-board.tsx
new file mode 100644
index 00000000..5a4454cb
--- /dev/null
+++ b/test_app/resources/kanban-board.tsx
@@ -0,0 +1,306 @@
+import React, { useEffect, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface Task {
+  id: string
+  title: string
+  description: string
+  status: 'todo' | 'in-progress' | 'done'
+  priority: 'low' | 'medium' | 'high'
+  assignee?: string
+}
+
+interface KanbanBoardProps {
+  initialTasks?: Task[]
+}
+
+const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
+  const [tasks, setTasks] = useState<Task[]>(initialTasks)
+  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as Task['priority'] })
+
+  // Load tasks from URL parameters or use defaults
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const tasksParam = urlParams.get('tasks')
+
+    if (tasksParam) {
+      try {
+        const parsedTasks = JSON.parse(decodeURIComponent(tasksParam))
+        setTasks(parsedTasks)
+      }
+      catch (error) {
+        console.error('Error parsing tasks from URL:', error)
+      }
+    }
+    else {
+      // Default tasks for demo
+      setTasks([
+        { id: '1', title: 'Design UI mockups', description: 'Create wireframes for the new dashboard', status: 'todo', priority: 'high', assignee: 'Alice' },
+        { id: '2', title: 'Implement authentication', description: 'Add login and registration functionality', status: 'in-progress', priority: 'high', assignee: 'Bob' },
+        { id: '3', title: 'Write documentation', description: 'Document the API endpoints', status: 'done', priority: 'medium', assignee: 'Charlie' },
+        { id: '4', title: 'Setup CI/CD', description: 'Configure automated testing and deployment', status: 'todo', priority: 'medium' },
+        { id: '5', title: 'Code review', description: 'Review pull requests from the team', status: 'in-progress', priority: 'low', assignee: 'David' },
+      ])
+    }
+  }, [])
+
+  const addTask = () => {
+    if (newTask.title.trim()) {
+      const task: Task = {
+        id: Date.now().toString(),
+        title: newTask.title,
+        description: newTask.description,
+        status: 'todo',
+        priority: newTask.priority,
+      }
+      setTasks([...tasks, task])
+      setNewTask({ title: '', description: '', priority: 'medium' })
+    }
+  }
+
+  const moveTask = (taskId: string, newStatus: Task['status']) => {
+    setTasks(tasks.map(task =>
+      task.id === taskId ? { ...task, status: newStatus } : task,
+    ))
+  }
+
+  const deleteTask = (taskId: string) => {
+    setTasks(tasks.filter(task => task.id !== taskId))
+  }
+
+  const getTasksByStatus = (status: Task['status']) => {
+    return tasks.filter(task => task.status === status)
+  }
+
+  const getPriorityColor = (priority: Task['priority']) => {
+    switch (priority) {
+      case 'high': return '#ff4757'
+      case 'medium': return '#ffa502'
+      case 'low': return '#2ed573'
+      default: return '#57606f'
+    }
+  }
+
+  const columns = [
+    { id: 'todo', title: 'To Do', color: '#57606f' },
+    { id: 'in-progress', title: 'In Progress', color: '#ffa502' },
+    { id: 'done', title: 'Done', color: '#2ed573' },
+  ] as const
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '30px' }}>
+        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Kanban Board</h1>
+
+        {/* Add new task form */}
+        <div style={{
+          background: 'white',
+          padding: '20px',
+          borderRadius: '8px',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          marginBottom: '20px',
+        }}
+        >
+          <h3 style={{ margin: '0 0 15px 0' }}>Add New Task</h3>
+          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+            <input
+              type="text"
+              placeholder="Task title"
+              value={newTask.title}
+              onChange={e => setNewTask({ ...newTask, title: e.target.value })}
+              style={{
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                flex: '1',
+                minWidth: '200px',
+              }}
+            />
+            <input
+              type="text"
+              placeholder="Description"
+              value={newTask.description}
+              onChange={e => setNewTask({ ...newTask, description: e.target.value })}
+              style={{
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                flex: '1',
+                minWidth: '200px',
+              }}
+            />
+            <select
+              title="Priority"
+              value={newTask.priority}
+              onChange={e => setNewTask({ ...newTask, priority: e.target.value as Task['priority'] })}
+              style={{
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+            >
+              <option value="low">Low Priority</option>
+              <option value="medium">Medium Priority</option>
+              <option value="high">High Priority</option>
+            </select>
+            <button
+              onClick={addTask}
+              style={{
+                padding: '8px 16px',
+                background: '#3498db',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Add Task
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Kanban columns */}
+      <div style={{ display: 'flex', gap: '20px', overflowX: 'auto' }}>
+        {columns.map(column => (
+          <div
+            key={column.id}
+            style={{
+              flex: '1',
+              minWidth: '300px',
+              background: 'white',
+              borderRadius: '8px',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                background: column.color,
+                color: 'white',
+                padding: '15px 20px',
+                fontWeight: 'bold',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <span>{column.title}</span>
+              <span style={{
+                background: 'rgba(255,255,255,0.2)',
+                padding: '4px 8px',
+                borderRadius: '12px',
+                fontSize: '12px',
+              }}
+              >
+                {getTasksByStatus(column.id).length}
+              </span>
+            </div>
+
+            <div style={{ padding: '20px', minHeight: '400px' }}>
+              {getTasksByStatus(column.id).map(task => (
+                <div
+                  key={task.id}
+                  style={{
+                    background: '#f8f9fa',
+                    border: '1px solid #e9ecef',
+                    borderRadius: '6px',
+                    padding: '15px',
+                    marginBottom: '10px',
+                    cursor: 'grab',
+                  }}
+                  draggable
+                  onDragStart={(e) => {
+                    e.dataTransfer.setData('text/plain', task.id)
+                  }}
+                  onDragOver={e => e.preventDefault()}
+                  onDrop={(e) => {
+                    e.preventDefault()
+                    const taskId = e.dataTransfer.getData('text/plain')
+                    if (taskId === task.id) {
+                      // Move to next column
+                      const currentIndex = columns.findIndex(col => col.id === column.id)
+                      const nextColumn = columns[currentIndex + 1]
+                      if (nextColumn) {
+                        moveTask(taskId, nextColumn.id)
+                      }
+                    }
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
+                    <h4 style={{ margin: '0', color: '#2c3e50' }}>{task.title}</h4>
+                    <button
+                      onClick={() => deleteTask(task.id)}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        color: '#e74c3c',
+                        cursor: 'pointer',
+                        fontSize: '16px',
+                      }}
+                    >
+                      ×
+                    </button>
+                  </div>
+
+                  {task.description && (
+                    <p style={{ margin: '0 0 10px 0', color: '#6c757d', fontSize: '14px' }}>
+                      {task.description}
+                    </p>
+                  )}
+
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div
+                      style={{
+                        background: getPriorityColor(task.priority),
+                        color: 'white',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        fontSize: '12px',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {task.priority.toUpperCase()}
+                    </div>
+
+                    {task.assignee && (
+                      <span style={{
+                        background: '#e9ecef',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        fontSize: '12px',
+                        color: '#495057',
+                      }}
+                      >
+                        {task.assignee}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+
+              {getTasksByStatus(column.id).length === 0 && (
+                <div style={{
+                  textAlign: 'center',
+                  color: '#6c757d',
+                  padding: '40px 20px',
+                  fontStyle: 'italic',
+                }}
+                >
+                  No tasks in this column
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Mount the component
+const container = document.getElementById('widget-root')
+if (container) {
+  const root = createRoot(container)
+  root.render(<KanbanBoard />)
+}
diff --git a/test_app/src/server.ts b/test_app/src/server.ts
new file mode 100644
index 00000000..e33eb641
--- /dev/null
+++ b/test_app/src/server.ts
@@ -0,0 +1,67 @@
+import { createMCPServer } from 'mcp-use/server'
+import { createUIResource } from '@mcp-ui/server';
+
+// Create an MCP server (which is also an Express app)
+// The MCP Inspector is automatically mounted at /inspector
+const server = createMCPServer('ui-mcp-server', {
+  version: '1.0.0',
+  description: 'An MCP server with React UI widgets',
+})
+
+const PORT = process.env.PORT || 3000
+
+
+server.tool({
+  name: 'test-tool',
+  description: 'Test tool',
+  inputs: [
+    {
+      name: 'test',
+      type: 'string',
+      description: 'Test input',
+      required: true,
+    },
+  ],
+  fn: async () => {
+    const uiResource = createUIResource({
+      uri: 'ui://widget/kanban-board',
+      content: {
+        type: 'externalUrl',
+        iframeUrl: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
+      },
+      encoding: 'text',
+    })
+    return {
+      content: [uiResource]
+    }
+  },
+})
+
+
+// MCP Resource for Kanban Board widget
+server.resource({
+  name: 'Kanban Board Widget',
+  uri: 'ui://widget/kanban-board',
+  title: 'Kanban Board Widget',
+  mimeType: 'text/html+skybridge',
+  description: 'Interactive Kanban board widget',
+  annotations: {
+    audience: ['user', 'assistant'],
+    priority: 0.7
+  },
+  fn: async () => {
+    const widgetUrl = `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
+    return {
+      contents: [{
+        uri: 'ui://widget/kanban-board',
+        mimeType: 'text/uri-list',
+        text: widgetUrl
+      }]
+    }
+  },
+})
+
+
+
+// Start the server (MCP endpoints auto-mounted at /mcp)
+server.listen(PORT)
diff --git a/test_app/tsconfig.json b/test_app/tsconfig.json
new file mode 100644
index 00000000..cafb2cf5
--- /dev/null
+++ b/test_app/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["index.ts", "src/**/*", "resources/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

From 5b470a39c459b479e05c7d0de59d18ef4caca6b3 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Tue, 14 Oct 2025 14:42:19 +0200
Subject: [PATCH 20/21] chore: add changesets

---
 .changeset/slick-shirts-run.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/slick-shirts-run.md

diff --git a/.changeset/slick-shirts-run.md b/.changeset/slick-shirts-run.md
new file mode 100644
index 00000000..bf49716c
--- /dev/null
+++ b/.changeset/slick-shirts-run.md
@@ -0,0 +1,8 @@
+---
+'create-mcp-use-app': patch
+'@mcp-use/inspector': patch
+'mcp-use': patch
+'@mcp-use/cli': patch
+---
+
+fix: export server stuff from mcp-use/server instead of root

From 6a03a44520ebb04d48bdd0639047153f3f4d8399 Mon Sep 17 00:00:00 2001
From: Enrico Toniato <2827496+tonxxd@users.noreply.github.com>
Date: Tue, 14 Oct 2025 14:46:58 +0200
Subject: [PATCH 21/21] chore: bump versions

---
 .changeset/slick-shirts-run.md           | 8 --------
 packages/cli/CHANGELOG.md                | 9 +++++++++
 packages/cli/package.json                | 2 +-
 packages/create-mcp-use-app/CHANGELOG.md | 6 ++++++
 packages/create-mcp-use-app/package.json | 2 +-
 packages/inspector/CHANGELOG.md          | 8 ++++++++
 packages/inspector/package.json          | 2 +-
 packages/mcp-use/CHANGELOG.md            | 8 ++++++++
 packages/mcp-use/package.json            | 4 ++--
 9 files changed, 36 insertions(+), 13 deletions(-)
 delete mode 100644 .changeset/slick-shirts-run.md

diff --git a/.changeset/slick-shirts-run.md b/.changeset/slick-shirts-run.md
deleted file mode 100644
index bf49716c..00000000
--- a/.changeset/slick-shirts-run.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-'create-mcp-use-app': patch
-'@mcp-use/inspector': patch
-'mcp-use': patch
-'@mcp-use/cli': patch
----
-
-fix: export server stuff from mcp-use/server instead of root
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index f87f8f9f..a7397642 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @mcp-use/cli
 
+## 2.1.3
+
+### Patch Changes
+
+- 5b470a3: fix: export server stuff from mcp-use/server instead of root
+- Updated dependencies [5b470a3]
+  - @mcp-use/inspector@0.3.3
+  - mcp-use@1.0.1
+
 ## 2.1.2
 
 ### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 69d76c82..ba8ec27f 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mcp-use/cli",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Build tool for MCP UI widgets - bundles React components into standalone HTML pages for Model Context Protocol servers",
   "author": "mcp-use, Inc.",
   "license": "MIT",
diff --git a/packages/create-mcp-use-app/CHANGELOG.md b/packages/create-mcp-use-app/CHANGELOG.md
index ab0f728b..beb833e5 100644
--- a/packages/create-mcp-use-app/CHANGELOG.md
+++ b/packages/create-mcp-use-app/CHANGELOG.md
@@ -1,5 +1,11 @@
 # create-mcp-use-app
 
+## 0.3.2
+
+### Patch Changes
+
+- 5b470a3: fix: export server stuff from mcp-use/server instead of root
+
 ## 0.3.1
 
 ### Patch Changes
diff --git a/packages/create-mcp-use-app/package.json b/packages/create-mcp-use-app/package.json
index b99e3445..6f5dfec5 100644
--- a/packages/create-mcp-use-app/package.json
+++ b/packages/create-mcp-use-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",
diff --git a/packages/inspector/CHANGELOG.md b/packages/inspector/CHANGELOG.md
index bdcd90a1..58dae2ea 100644
--- a/packages/inspector/CHANGELOG.md
+++ b/packages/inspector/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @mcp-use/inspector
 
+## 0.3.3
+
+### Patch Changes
+
+- 5b470a3: fix: export server stuff from mcp-use/server instead of root
+- Updated dependencies [5b470a3]
+  - mcp-use@1.0.1
+
 ## 0.3.2
 
 ### Patch Changes
diff --git a/packages/inspector/package.json b/packages/inspector/package.json
index 28b7b30f..b8b4c293 100644
--- a/packages/inspector/package.json
+++ b/packages/inspector/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mcp-use/inspector",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "MCP Inspector - A tool for inspecting and debugging MCP servers",
   "author": "",
   "license": "MIT",
diff --git a/packages/mcp-use/CHANGELOG.md b/packages/mcp-use/CHANGELOG.md
index 62a33d09..afd96206 100644
--- a/packages/mcp-use/CHANGELOG.md
+++ b/packages/mcp-use/CHANGELOG.md
@@ -1,5 +1,13 @@
 # mcp-use
 
+## 1.0.1
+
+### Patch Changes
+
+- 5b470a3: fix: export server stuff from mcp-use/server instead of root
+- Updated dependencies [5b470a3]
+  - @mcp-use/inspector@0.3.3
+
 ## 1.0.0
 
 ### Patch Changes
diff --git a/packages/mcp-use/package.json b/packages/mcp-use/package.json
index ecda5977..3691c9a8 100644
--- a/packages/mcp-use/package.json
+++ b/packages/mcp-use/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mcp-use",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "packageManager": "pnpm@10.6.1",
   "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.",
@@ -88,7 +88,7 @@
     "example:observability": "npm run build && node dist/examples/observability.js"
   },
   "peerDependencies": {
-    "@mcp-use/inspector": "^0.3.0",
+    "@mcp-use/inspector": "^0.3.3",
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "langfuse": "^3.32.0",