Troubleshooting

git clone https://github.com/WebMCP-org/npm-packages.git
cd npm-packages
git pull origin main

Cannot find module '/path/to/apps/native-server/dist/scripts/postinstall.js'

# Ensure the workspace is properly built:
pnpm build:shared  # Build internal shared packages
pnpm build:apps    # Build all applications

# Or run from the root with workspace support:
pnpm dev

// Add logging to confirm server startup
console.log('MCP Server starting...');
await server.connect(transport);
console.log('MCP Server connected!');

// Check allowedOrigins includes your domain
new TabServerTransport({
  allowedOrigins: ["*"] // Or specific domains
})

// For navigator.modelContext approach (recommended)
navigator.modelContext.registerTool({
  name: "myTool",
  description: "Description",
  inputSchema: { type: "object", properties: {} },
  async execute(args) {
    return { content: [{ type: "text", text: "Result" }] };
  }
});

# Clean install
rm -rf node_modules
rm pnpm-lock.yaml

# Reinstall
pnpm install

# Build shared packages first
pnpm build:shared

# Then build apps
pnpm build:apps

# Run in dev mode
pnpm --filter @mcp-b/extension dev

// Ensure proper imports
import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";

// Use .js extensions for MCP SDK imports
import { TabServerTransport } from "@mcp-b/transports";

# Verify global installation
npm list -g @mcp-b/native-server

# Reinstall if needed
npm uninstall -g @mcp-b/native-server
npm install -g @mcp-b/native-server

# Check if port 12306 is in use
lsof -i :12306  # Mac/Linux
netstat -an | findstr 12306  # Windows

{
  "type": "streamable-http",
  "url": "http://127.0.0.1:12306/mcp"
}

# Create .env file
cp apps/native-server/.env.example apps/native-server/.env

# Edit with your extension ID
echo "DEV_EXTENSION_ID=your-extension-id" > apps/native-server/.env

# Rebuild and restart
pnpm build
pnpm dev

// After registering a tool
console.log('Tool registered');

// Check if navigator.modelContext is available
if ('modelContext' in navigator) {
  console.log('WebMCP is loaded');
}

navigator.modelContext.registerTool({
  name: "myTool",
  description: "Description",
  inputSchema: { type: "object", properties: {} },
  async execute(params) {
    try {
      // Your tool logic
      return { content: [{ type: "text", text: "Success" }] };
    } catch (error) {
      console.error('Tool error:', error);
      // Return error response
      return {
        content: [{ type: "text", text: `Error: ${error.message}` }],
        isError: true
      };
    }
  }
});

// Always use same-origin credentials
fetch('/api/endpoint', {
  method: 'POST',
  credentials: 'same-origin', // Important!
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

// Register tools lazily based on page context
const registerToolsForPage = (page) => {
  // Only register relevant tools
  if (page === 'dashboard') {
    const reg = navigator.modelContext.registerTool({
      name: 'dashboard_tool',
      description: 'Dashboard-specific tool',
      inputSchema: { type: "object", properties: {} },
      async execute() {
        // Tool logic
        return { content: [{ type: "text", text: "Result" }] };
      }
    });

    // Store registration for cleanup
    return reg;
  }
};

// Unregister when not needed
const cleanup = (registration) => {
  registration.unregister();
};

// In React with useWebMCP
import { useWebMCP } from '@mcp-b/react-webmcp';

// Auto cleanup when component unmounts
useWebMCP({
  name: 'my_tool',
  description: 'Tool description',
  handler: async () => {
    return { success: true };
  }
});

// In vanilla JS
const registration = navigator.modelContext.registerTool({
  name: 'my_tool',
  description: 'Tool description',
  inputSchema: { type: "object", properties: {} },
  async execute() {
    return { content: [{ type: "text", text: "Result" }] };
  }
});

// Unregister when done
window.addEventListener('beforeunload', () => {
  registration.unregister();
});