From f643637d2922995c51a42af2a1031c9fe51983e9 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 6 Dec 2025 07:29:06 +0000 Subject: [PATCH 1/2] docs: fix code block icons in quickstart to follow style guide Change bash install command icons from icon="react" and icon="node" to icon="npm" to align with the CODE_BLOCKS_STYLE_GUIDE.md which specifies that package installation commands should use icon="npm". --- quickstart.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/quickstart.mdx b/quickstart.mdx index 8ab466a..b3da5e5 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -33,7 +33,7 @@ Before you begin, ensure you have: - ```bash icon="react" + ```bash icon="npm" pnpm add @mcp-b/react-webmcp @mcp-b/global zod ``` @@ -63,7 +63,7 @@ Before you begin, ensure you have: - ```bash icon="node" + ```bash icon="npm" pnpm add @mcp-b/global ``` From 5e6375a5c0b56103af524b59f0d233822d2d14d7 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 6 Dec 2025 07:33:23 +0000 Subject: [PATCH 2/2] docs: simplify quickstart with show-don't-tell approach Remove redundant static code blocks from Installation and Real-World Example sections. The interactive quickstart component already demonstrates code live, so static code examples are unnecessary duplication. Changes: - Keep install commands, link to live examples instead of inline code - Remove Real-World Example section (covered by interactive demo) - Fix code block icons to use icon="npm" per style guide The page now focuses on "show don't tell" - interactive demo + links to real working examples in GitHub. --- quickstart.mdx | 119 +++---------------------------------------------- 1 file changed, 6 insertions(+), 113 deletions(-) diff --git a/quickstart.mdx b/quickstart.mdx index b3da5e5..5c3da6b 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -37,29 +37,7 @@ Before you begin, ensure you have: pnpm add @mcp-b/react-webmcp @mcp-b/global zod ``` - ```tsx "MyComponent.tsx" twoslash lines icon="react" highlight={5-17} - import '@mcp-b/global'; - import { useWebMCP } from '@mcp-b/react-webmcp'; - import { z } from 'zod'; - - function MyComponent() { - useWebMCP({ - name: 'get_page_info', - description: 'Get current page information', - inputSchema: { - includeUrl: z.boolean().optional() - }, - handler: async ({ includeUrl }) => { - return { - title: document.title, - ...(includeUrl && { url: window.location.href }) - }; - } - }); - - return
My Component
; - } - ``` + See the interactive example above or explore the [webmcp.sh source code](https://github.com/WebMCP-org/webmcp-sh) for a production React implementation. @@ -67,102 +45,17 @@ Before you begin, ensure you have: pnpm add @mcp-b/global ``` - ```javascript "tool-registration.js" lines icon="square-js" highlight={4-12} - import '@mcp-b/global'; - - // Register individual tools (recommended) - const registration = navigator.modelContext.registerTool({ - name: "get_page_title", - description: "Get current page title", - inputSchema: { type: "object", properties: {} }, - async execute() { - return { - content: [{ type: "text", text: document.title }] - }; - } - }); - - // Later, unregister if needed - // registration.unregister(); - ``` + See the interactive example above or explore the [Vanilla TypeScript example](https://github.com/WebMCP-org/examples/tree/main/vanilla-ts). - ```html "index.html" lines icon="code" highlight={3-10} - - - ``` - - - -## Real-World Example + No installation required - add this script to your HTML: -Wrap your existing application logic as tools: - - - - ```tsx "ProductPage.tsx" twoslash lines icon="react" highlight={5-18} - import { useWebMCP } from '@mcp-b/react-webmcp'; - import { z } from 'zod'; - - function ProductPage() { - useWebMCP({ - name: "add_to_cart", - description: "Add item to shopping cart", - inputSchema: { - productId: z.string(), - quantity: z.number().min(1) - }, - handler: async ({ productId, quantity }) => { - await fetch('/api/cart/add', { - method: 'POST', - credentials: 'same-origin', - body: JSON.stringify({ productId, quantity }) - }); - return { success: true, quantity }; - } - }); - - return
Product Page
; - } + ```html icon="code" + ``` - - - ```javascript "cart-tool.js" lines icon="square-js" highlight={1-23} - navigator.modelContext.registerTool({ - name: "add_to_cart", - description: "Add item to shopping cart", - inputSchema: { - type: "object", - properties: { - productId: { type: "string" }, - quantity: { type: "number", minimum: 1 } - }, - required: ["productId", "quantity"] - }, - async execute({ productId, quantity }) { - await fetch('/api/cart/add', { - method: 'POST', - credentials: 'same-origin', - body: JSON.stringify({ productId, quantity }) - }); - return { - content: [{ type: "text", text: `Added ${quantity} items` }] - }; - } - }); - ``` + See the [Script Tag example](https://github.com/WebMCP-org/examples/tree/main/script-tag) for a complete working demo.