Nuxt 3 MCP-B Demo
by mikechao
A demonstration of WebMCP (MCP-B) integration within Nuxt 3, enabling websites to act as MCP servers.
What it does
This project demonstrates how to integrate MCP-B (Model Context Protocol Browser) into a Nuxt 3 application. It transforms a standard website into an MCP server, allowing AI agents to interact with the site's content and functionality via the browser.
Tools
As a demo of the WebMCP pattern, it exposes capabilities that allow an AI to interact with the current web page context, though specific tools are defined within the app.vue implementation to showcase how the browser-based transport works.
Installation
- Install the MCP-B Chrome Extension.
- Clone and run the Nuxt 3 server:
npm install npm run dev
3. Navigate to `http://localhost:3000` and use an MCP-compatible client via the extension.
## Supported hosts
- claude
Quick install
npm install && npm run devInformation
- Pricing
- free
- Published
- 7/24/2026
- stars
- 0
Categories
Choose your AI client and follow the steps below.
Claude Desktop
Requires MCP-B Chrome Extension and site running at http://localhost:3000Related Apps
nanobot
MCP ServerUltra-lightweight personal AI agent framework with built-in MCP, long-term memory, and multi-channel chat support.
FinanceToolkit
MCP ServerProfessional-grade financial analysis toolkit for equities, options, and risk management.
DiffSitter MCP
MCP ServerAI-powered structural code navigation using tree-sitter ASTs for semantic understanding across 14+ languages.
OpenAI Apps SDK Examples
MCP AppOfficial example gallery of interactive MCP widgets for ChatGPT — 3D viewers, maps, carousels, shopping carts, and more.
Human MCP
MCP ServerGive AI agents human-like senses: visual analysis, image/video generation, speech synthesis, browser automation, and advanced reasoning — 29 MCP tools in one se
Containarium
MCP ServerSelf-hostable agent runtime with SSH-native isolation, eBPF egress policy, and MCP-native CLI.
Shopify MCP Server
MCP ServerDirect interaction with Shopify store data via GraphQL API for managing products, customers, and orders.
Git MCP Server
MCP ServerFull-featured Git MCP server exposing 28 tools for AI agents to clone, commit, branch, diff, merge, rebase, and more via STDIO or Streamable HTTP.