[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mcp-use-mcp-builder":3,"mdc-cwt3i2-key":52,"related-repo-mcp-use-mcp-builder":3839,"related-org-mcp-use-mcp-builder":3889},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":22,"repoUrl":23,"updatedAt":24,"license":25,"forks":26,"topics":27,"repo":47,"sourceUrl":50,"mdContent":51},"mcp-builder","build MCP applications","**MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns.\n\n**READ THIS FIRST** before any MCP server work, including:\n- Creating new MCP servers\n- Modifying existing MCP servers (adding\u002Fupdating tools, resources, prompts, widgets)\n- Debugging MCP server issues or errors\n- Reviewing MCP server code for quality, security, or performance\n- Answering questions about MCP development or mcp-use patterns\n- Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets\n\nThis skill contains critical architecture decisions, security patterns, and common pitfalls.\nAlways consult the relevant reference files BEFORE implementing MCP features.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"mcp-use","MCP-use","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmcp-use.png",[12,16,19],{"name":13,"slug":14,"type":15},"Architecture","architecture","tag",{"name":17,"slug":18,"type":15},"MCP","mcp",{"name":20,"slug":21,"type":15},"Agents","agents",10336,"https:\u002F\u002Fgithub.com\u002Fmcp-use\u002Fmcp-use","2026-07-24T05:38:00.013504",null,1374,[28,29,30,31,32,33,34,18,35,36,37,38,39,40,41,42,43,44,45,46],"agentic-framework","ai","apps-sdk","chatgpt","claude-code","claude-connectors","llms","mcp-apps","mcp-client","mcp-gateway","mcp-inspector","mcp-server","mcp-servers","mcp-tools","mcp-ui","model-context-protocol","modelcontextprotocol","openclaw","skills",{"repoUrl":23,"stars":22,"forks":26,"topics":48,"description":49},[28,29,30,31,32,33,34,18,35,36,37,38,39,40,41,42,43,44,45,46],"The fullstack MCP framework to develop MCP Apps for ChatGPT \u002F Claude & MCP Servers for AI Agents.","https:\u002F\u002Fgithub.com\u002Fmcp-use\u002Fmcp-use\u002Ftree\u002FHEAD\u002Fskills\u002Fmcp-builder","---\nname: mcp-builder\ndescription: |\n  **MANDATORY for ALL MCP server work** - mcp-use framework best practices and patterns.\n\n  **READ THIS FIRST** before any MCP server work, including:\n  - Creating new MCP servers\n  - Modifying existing MCP servers (adding\u002Fupdating tools, resources, prompts, widgets)\n  - Debugging MCP server issues or errors\n  - Reviewing MCP server code for quality, security, or performance\n  - Answering questions about MCP development or mcp-use patterns\n  - Making ANY changes to server.tool(), server.resource(), server.prompt(), or widgets\n\n  This skill contains critical architecture decisions, security patterns, and common pitfalls.\n  Always consult the relevant reference files BEFORE implementing MCP features.\n---\n\n# IMPORTANT: How to Use This Skill\n\nThis file provides a NAVIGATION GUIDE ONLY. Before implementing any MCP server features, you MUST:\n\n1. Read this overview to understand which reference files are relevant\n2. **ALWAYS read the specific reference file(s)** for the features you're implementing\n3. Apply the detailed patterns from those files to your implementation\n\n**Do NOT rely solely on the quick reference examples in this file** - they are minimal examples only. The reference files contain critical best practices, security considerations, and advanced patterns.\n\n---\n\n# MCP Server Best Practices\n\nComprehensive guide for building production-ready MCP servers with tools, resources, prompts, and widgets using mcp-use.\n\n## ⚠️ FIRST: New Project or Existing Project?\n\n**Before doing anything else, determine whether you are inside an existing mcp-use project.**\n\n**Detection:** Check the workspace for a `package.json` that lists `\"mcp-use\"` as a dependency, OR any `.ts` file that imports from `\"mcp-use\u002Fserver\"`.\n\n```\n├─ mcp-use project FOUND → Do NOT scaffold. You are already in a project.\n│  └─ Skip to \"Quick Navigation\" below to add features.\n│\n├─ NO mcp-use project (empty dir, unrelated project, or greenfield)\n│  └─ Scaffold first with npx create-mcp-use-app, then add features.\n│     See \"Scaffolding a New Project\" below.\n│\n└─ Inside an UNRELATED project (e.g. Next.js app) and user wants an MCP server\n   └─ Ask the user where to create it, then scaffold in that directory.\n      Do NOT scaffold inside an existing unrelated project root.\n```\n\n**NEVER manually create `MCPServer` boilerplate, `package.json`, or project structure by hand.** The CLI sets up TypeScript config, dev scripts, inspector integration, hot reload, and widget compilation that are difficult to replicate manually.\n\n---\n\n### Scaffolding a New Project\n\n```bash\nnpx create-mcp-use-app my-server\ncd my-server\nnpm run dev\n```\n\nFor full scaffolding details and CLI flags, see **[quickstart.md](references\u002Ffoundations\u002Fquickstart.md)**.\n\n---\n\n## Quick Navigation\n\n**Choose your path based on what you're building:**\n\n### 🚀 Foundations\n**When:** ALWAYS read these first when starting MCP work in a new conversation. Reference later for architecture\u002Fconcept clarification.\n\n1. **[concepts.md](references\u002Ffoundations\u002Fconcepts.md)** - MCP primitives (Tool, Resource, Prompt, Widget) and when to use each\n2. **[architecture.md](references\u002Ffoundations\u002Farchitecture.md)** - Server structure (Hono-based), middleware system, server.use() vs server.app\n3. **[quickstart.md](references\u002Ffoundations\u002Fquickstart.md)** - Scaffolding, setup, and first tool example\n4. **[deployment.md](references\u002Ffoundations\u002Fdeployment.md)** - Deploying to Manufact Cloud, self-hosting, Docker, managing deployments\n\nLoad these before diving into tools\u002Fresources\u002Fwidgets sections.\n\n---\n\n### 🔐 Adding Authentication?\n**When:** Protecting your server with OAuth (Auth0, Better Auth, Clerk, WorkOS, Supabase, Keycloak, or any other provider)\n\n- **[overview.md](references\u002Fauthentication\u002Foverview.md)**\n  - When: First time adding auth, understanding `ctx.auth`, or choosing a provider \u002F integration mode\n  - Covers: Remote auth vs OAuth proxy, `oauth` config, `ctx.auth` shape, provider comparison, common mistakes\n\n- **[auth0.md](references\u002Fauthentication\u002Fauth0.md)**\n  - When: Using Auth0 — DCR (Early Access) or a standard Regular Web App via `oauthProxy`\n  - Covers: Setup for both modes, `extraAuthorizeParams.audience`, permissions via `rfc9068_profile_authz`\n\n- **[better-auth.md](references\u002Fauthentication\u002Fbetter-auth.md)**\n  - When: Using Better Auth with the `@better-auth\u002Foauth-provider` plugin (self-hosted OAuth 2.1)\n  - Covers: `oauthBetterAuthProvider`, auth URL \u002F metadata routes, login and consent flows\n\n- **[clerk.md](references\u002Fauthentication\u002Fclerk.md)**\n  - When: Using Clerk (DCR-based OAuth)\n  - Covers: `oauthClerkProvider`, enabling DCR, Frontend API URL, organization context\n\n- **[workos.md](references\u002Fauthentication\u002Fworkos.md)**\n  - When: Using WorkOS AuthKit (DCR only)\n  - Covers: Setup, env vars, roles\u002Fpermissions, multi-tenant org filtering, WorkOS API calls\n\n- **[supabase.md](references\u002Fauthentication\u002Fsupabase.md)**\n  - When: Using Supabase's OAuth 2.1 server\n  - Covers: Setup, publishable keys, ES256 vs HS256, hosting the consent UI, RLS-aware SDK calls\n\n- **[keycloak.md](references\u002Fauthentication\u002Fkeycloak.md)**\n  - When: Using Keycloak via native DCR\n  - Covers: DCR trusted hosts + web origins, audience enforcement, realm vs resource roles, userinfo\n\n- **[custom.md](references\u002Fauthentication\u002Fcustom.md)**\n  - When: Any other provider — DCR-capable via `oauthCustomProvider`, or pre-registered (Google, GitHub, Okta, Azure AD) via `oauthProxy`\n  - Covers: `oauthCustomProvider`, `oauthProxy` + `jwksVerifier`, provider examples, opaque-token verification\n\n---\n\n### 🔧 Building Server Backend (No UI)?\n**When:** Implementing MCP features (actions, data, templates). Read the specific file for the primitive you're building.\n\n- **[tools.md](references\u002Fserver\u002Ftools.md)**\n  - When: Creating backend actions the AI can call (send-email, fetch-data, create-user)\n  - Covers: Tool definition, schemas, annotations, context, error handling\n\n- **[resources.md](references\u002Fserver\u002Fresources.md)**\n  - When: Exposing read-only data clients can fetch (config, user profiles, documentation)\n  - Covers: Static resources, dynamic resources, parameterized resource templates, URI completion\n\n- **[prompts.md](references\u002Fserver\u002Fprompts.md)**\n  - When: Creating reusable message templates for AI interactions (code-review, summarize)\n  - Covers: Prompt definition, parameterization, argument completion, prompt best practices\n\n- **[response-helpers.md](references\u002Fserver\u002Fresponse-helpers.md)**\n  - When: Formatting responses from tools\u002Fresources (text, JSON, markdown, images, errors)\n  - Covers: `text()`, `object()`, `markdown()`, `image()`, `error()`, `mix()`\n\n- **[proxy.md](references\u002Fserver\u002Fproxy.md)**\n  - When: Composing multiple MCP servers into one unified aggregator server\n  - Covers: `server.proxy()`, config API, explicit sessions, sampling routing\n\n- **[architecture.md](references\u002Ffoundations\u002Farchitecture.md)**\n  - When: Adding cross-cutting logic (logging, auth checks, rate limiting, tool filtering) that spans multiple tools\u002Fresources\n  - Covers: `server.use('mcp:...')` middleware, `MiddlewareContext` (method, params, auth, state), pattern matching, HTTP vs MCP middleware\n\n---\n\n### 🎨 Building Visual Widgets (Interactive UI)?\n**When:** Creating React-based visual interfaces for browsing, comparing, or selecting data\n\n- **[basics.md](references\u002Fwidgets\u002Fbasics.md)**\n  - When: Creating your first widget or adding UI to an existing tool\n  - Covers: Widget setup, `useWidget()` hook, `isPending` checks, props handling\n\n- **[state.md](references\u002Fwidgets\u002Fstate.md)**\n  - When: Managing UI state (selections, filters, tabs) within widgets\n  - Covers: `useState`, `setState`, state persistence, when to use tool vs widget state\n\n- **[interactivity.md](references\u002Fwidgets\u002Finteractivity.md)**\n  - When: Adding buttons, forms, or calling tools from within widgets\n  - Covers: `useCallTool()`, form handling, action buttons, optimistic updates\n\n- **[ui-guidelines.md](references\u002Fwidgets\u002Fui-guidelines.md)**\n  - When: Styling widgets to support themes, responsive layouts, or accessibility\n  - Covers: `useWidgetTheme()`, light\u002Fdark mode, `autoSize`, layout patterns, CSS best practices\n\n- **[advanced.md](references\u002Fwidgets\u002Fadvanced.md)**\n  - When: Building complex widgets with async data, error boundaries, or performance optimizations\n  - Covers: Loading states, error handling, memoization, code splitting\n\n- **[model-context.md](references\u002Fwidgets\u002Fmodel-context.md)**\n  - When: Keeping the AI model aware of what the user is currently seeing (active tab, hovered item, selected product) without requiring tool calls\n  - Covers: `\u003CModelContext>` component, `modelContext.set\u002Fremove` imperative API, nesting, tree serialization, lifecycle rules\n- **[files.md](references\u002Fwidgets\u002Ffiles.md)**\n  - When: Uploading or downloading files from within a widget (ChatGPT Apps SDK only)\n  - Covers: `useFiles()` hook, `isSupported` guard, model visibility (`modelVisible`), storing `fileId`, temporary download URLs\n\n---\n\n### 📚 Need Complete Examples?\n**When:** You want to see full implementations of common use cases\n\n- **[common-patterns.md](references\u002Fpatterns\u002Fcommon-patterns.md)**\n  - End-to-end examples: weather app, todo list, recipe browser\n  - Shows: Server code + widget code + best practices in context\n\n---\n\n### 🔁 Testing from the Terminal (Agent Feedback Loops)\n**When:** You want to verify a tool or widget *without* the inspector UI — the canonical flow for AI agents iterating on MCP servers.\n\n- **`mcp-use client`** — drives MCP servers from the terminal. Auto-runs OAuth on 401, persists saved servers under a short name, and one-shot subcommands exit cleanly so they're safe to spawn from harnesses.\n\n  ```bash\n  npx mcp-use client connect dev http:\u002F\u002Flocalhost:3000\u002Fmcp\n  npx mcp-use client dev tools list\n  npx mcp-use client dev tools call get-weather city=Tokyo --screenshot\n  ```\n\n  Every per-server command takes the saved name as its first positional arg (`mcp-use client \u003Cname> \u003Cscope> \u003Caction>`) — there is no \"active session\". Args use `key=value` (with `key:='\u003Cjson>'` for nested values) or a single JSON object. When a tool renders a widget, pass `--screenshot` to also save a PNG (`.\u002F\u003Cview>-\u003Ctimestamp>.png` by default, or override with `--screenshot-output \u003Cpath>`).\n\n- **`mcp-use client screenshot`** — headless render of a widget tool to a PNG. Use this when you want to visually verify a widget change without opening the inspector, especially in loops where you call a tool, screenshot, eyeball the output, and edit. Two forms:\n\n  ```bash\n  # Saved-server form — reuses the auth from `mcp-use client connect`\n  npx mcp-use client dev screenshot --tool get-weather city=Tokyo \\\n    --width 800 --height 600 --theme light \\\n    --output .\u002Fweather.png\n\n  # Ad-hoc form — connect inline (use -H for headers on authenticated servers)\n  npx mcp-use client screenshot --mcp http:\u002F\u002Flocalhost:3000\u002Fmcp \\\n    --tool get-weather city=Tokyo\n  ```\n\n  Add `--device-scale-factor 2` for Retina output, or `--cdp-url \u003Cws>` plus `--inspector \u003Cpublicly-reachable-url>` to drive a remote Chromium (e.g. Notte) from a sandbox without a local Chrome install.\n\nBoth commands are documented in full at [docs\u002Ftypescript\u002Ftooling\u002Fclient-cli](https:\u002F\u002Fdocs.mcp-use.com\u002Ftypescript\u002Ftooling\u002Fclient-cli).\n\n---\n\n## Decision Tree\n\n```\nWhat do you need?\n\n├─ New project from scratch\n│  └─> quickstart.md (scaffolding + setup)\n│\n├─ OAuth \u002F user authentication\n│  └─> authentication\u002Foverview.md → provider-specific guide\n│\n├─ Simple backend action (no UI)\n│  └─> Use Tool: server\u002Ftools.md\n│\n├─ Read-only data for clients\n│  └─> Use Resource: server\u002Fresources.md\n│\n├─ Reusable prompt template\n│  └─> Use Prompt: server\u002Fprompts.md\n│\n├─ Cross-cutting logic (logging, auth checks, rate limiting, tool filtering)\n│  └─> Use Middleware: architecture.md#mcp-middleware\n│\n├─ Visual\u002Finteractive UI\n│  └─> Use Widget: widgets\u002Fbasics.md\n│\n├─ Keep model aware of what user is seeing in widget\n│  └─> widgets\u002Fmodel-context.md\n├─ Upload\u002Fdownload files in a widget\n│  └─> widgets\u002Ffiles.md (ChatGPT Apps SDK only)\n│\n├─ Verify a tool or widget from the terminal (agent feedback loop)\n│  └─> See \"Testing from the Terminal\" above — `mcp-use client` for tool runs,\n│      `mcp-use client \u003Cserver> screenshot --tool \u003Ctool>` for headless widget PNGs\n│\n└─ Deploy to production\n   └─> deployment.md (cloud deploy, self-hosting, Docker)\n```\n\n---\n\n## Core Principles\n\n1. **Tools for actions** - Backend operations with input\u002Foutput\n2. **Resources for data** - Read-only data clients can fetch\n3. **Prompts for templates** - Reusable message templates\n4. **Widgets for UI** - Visual interfaces when helpful\n5. **Mock data first** - Prototype quickly, connect APIs later\n\n---\n\n## ❌ Common Mistakes\n\nAvoid these anti-patterns found in production MCP servers:\n\n### Tool Definition\n- ❌ Returning raw objects instead of using response helpers\n  - ✅ Use `text()`, `object()`, `widget()`, `error()` helpers\n- ❌ Skipping Zod schema `.describe()` on every field\n  - ✅ Add descriptions to all schema fields for better AI understanding\n- ❌ No input validation or sanitization\n  - ✅ Validate inputs with Zod, sanitize user-provided data\n- ❌ Throwing errors instead of returning `error()` helper\n  - ✅ Use `error(\"message\")` for graceful error responses\n\n### Widget Development\n- ❌ Accessing `props` without checking `isPending`\n  - ✅ Always check `if (isPending) return \u003CLoading\u002F>`\n- ❌ Widget handles server state (filters, selections)\n  - ✅ Widgets manage their own UI state with `useState`\n- ❌ Missing `McpUseProvider` wrapper or `autoSize`\n  - ✅ Wrap root component: `\u003CMcpUseProvider autoSize>`\n- ❌ Inline styles without theme awareness\n  - ✅ Use `useWidgetTheme()` for light\u002Fdark mode support\n\n### Security & Production\n- ❌ Hardcoded API keys or secrets in code\n  - ✅ Use `process.env.API_KEY`, document in `.env.example`\n- ❌ No error handling in tool handlers\n  - ✅ Wrap in try\u002Fcatch, return `error()` on failure\n- ❌ Expensive operations without caching\n  - ✅ Cache API calls, computations with TTL\n- ❌ Missing CORS configuration\n  - ✅ Configure CORS for production deployments\n\n---\n\n## 🔒 Golden Rules\n\n**Opinionated architectural guidelines:**\n\n### 1. One Tool = One Capability\nSplit broad actions into focused tools:\n- ❌ `manage-users` (too vague)\n- ✅ `create-user`, `delete-user`, `list-users`\n\n### 2. Return Complete Data Upfront\nTool calls are expensive. Avoid lazy-loading:\n- ❌ `list-products` + `get-product-details` (2 calls)\n- ✅ `list-products` returns full data including details\n\n### 3. Widgets Own Their State\nUI state lives in the widget, not in separate tools:\n- ❌ `select-item` tool, `set-filter` tool\n- ✅ Widget manages with `useState` or `setState`\n\n### 4. `exposeAsTool` Defaults to `false`\nWidgets are registered as resources only by default. Use a custom tool (recommended) or set `exposeAsTool: true` to expose a widget to the model:\n\n```typescript\n\u002F\u002F ✅ ALL 4 STEPS REQUIRED for proper type inference:\n\n\u002F\u002F Step 1: Define schema separately\nconst propsSchema = z.object({\n  title: z.string(),\n  items: z.array(z.string())\n});\n\n\u002F\u002F Step 2: Reference schema variable in metadata\nexport const widgetMetadata: WidgetMetadata = {\n  description: \"...\",\n  props: propsSchema,  \u002F\u002F ← NOT inline z.object()\n  exposeAsTool: false\n};\n\n\u002F\u002F Step 3: Infer Props type from schema variable\ntype Props = z.infer\u003Ctypeof propsSchema>;\n\n\u002F\u002F Step 4: Use typed Props with useWidget\nexport default function MyWidget() {\n  const { props, isPending } = useWidget\u003CProps>();  \u002F\u002F ← Add \u003CProps>\n  \u002F\u002F ...\n}\n```\n\n⚠️ **Common mistake:** Only doing steps 1-2 but skipping 3-4 (loses type safety)\n\n### 5. Validate at Boundaries Only\n- Trust internal code and framework guarantees\n- Validate user input, external API responses\n- Don't add error handling for scenarios that can't happen\n\n### 6. Prefer Widgets for Browsing\u002FComparing\nWhen in doubt, add a widget. Visual UI improves:\n- Browsing multiple items\n- Comparing data side-by-side\n- Interactive selection workflows\n\n---\n\n## Quick Reference\n\n### Minimal Server\n```typescript\nimport { MCPServer, text } from \"mcp-use\u002Fserver\";\nimport { z } from \"zod\";\n\nconst server = new MCPServer({\n  name: \"my-server\",\n  title: \"My Server\",\n  version: \"1.0.0\"\n});\n\nserver.tool(\n  {\n    name: \"greet\",\n    description: \"Greet a user\",\n    schema: z.object({ name: z.string().describe(\"User's name\") })\n  },\n  async ({ name }) => text(\"Hello \" + name + \"!\"),\n);\n\nserver.listen();\n```\n\n---\n\n## Response Helpers\n\n| Helper | Use When | Example |\n|--------|----------|---------|\n| `text()` | Simple string response | `text(\"Success!\")` |\n| `object()` | Structured data | `object({ status: \"ok\" })` |\n| `markdown()` | Formatted text | `markdown(\"# Title\\nContent\")` |\n| `widget()` | Visual UI | `widget({ props: {...}, output: text(...) })` |\n| `mix()` | Multiple contents | `mix(text(\"Hi\"), image(url))` |\n| `error()` | Error responses | `error(\"Failed to fetch data\")` |\n| `resource()` | Embed resource refs | `resource(\"docs:\u002F\u002Fguide\", \"text\u002Fmarkdown\")` |\n\n**Server methods:**\n- `server.tool()` - Define executable tool\n- `server.resource()` - Define static\u002Fdynamic resource\n- `server.resourceTemplate()` - Define parameterized resource\n- `server.prompt()` - Define prompt template\n- `server.proxy()` - Compose\u002FProxy multiple MCP servers\n- `server.uiResource()` - Define widget resource\n- `server.listen()` - Start server\n- `server.use('mcp:tools\u002Fcall', fn)` - MCP middleware (tools, resources, prompts, list ops)\n- `server.use('mcp:*', fn)` - Catch-all MCP middleware\n- `server.use(fn)` - HTTP middleware (Hono)\n\n\n",{"data":53,"body":54},{"name":4,"description":6},{"type":55,"children":56},"root",[57,66,72,98,108,112,118,123,130,138,181,193,218,221,228,293,309,312,318,326,332,342,399,404,407,413,422,726,729,735,744,957,960,966,975,1250,1253,1259,1268,1296,1299,1305,1322,1729,1743,1746,1752,1761,1764,1770,1823,1826,1832,1837,1843,1946,1952,2056,2062,2137,2140,2146,2154,2160,2165,2206,2212,2217,2250,2256,2261,2301,2321,2334,2850,2862,2868,2886,2892,2897,2915,2918,2924,2930,3495,3498,3504,3713,3721,3833],{"type":58,"tag":59,"props":60,"children":62},"element","h1",{"id":61},"important-how-to-use-this-skill",[63],{"type":64,"value":65},"text","IMPORTANT: How to Use This Skill",{"type":58,"tag":67,"props":68,"children":69},"p",{},[70],{"type":64,"value":71},"This file provides a NAVIGATION GUIDE ONLY. Before implementing any MCP server features, you MUST:",{"type":58,"tag":73,"props":74,"children":75},"ol",{},[76,82,93],{"type":58,"tag":77,"props":78,"children":79},"li",{},[80],{"type":64,"value":81},"Read this overview to understand which reference files are relevant",{"type":58,"tag":77,"props":83,"children":84},{},[85,91],{"type":58,"tag":86,"props":87,"children":88},"strong",{},[89],{"type":64,"value":90},"ALWAYS read the specific reference file(s)",{"type":64,"value":92}," for the features you're implementing",{"type":58,"tag":77,"props":94,"children":95},{},[96],{"type":64,"value":97},"Apply the detailed patterns from those files to your implementation",{"type":58,"tag":67,"props":99,"children":100},{},[101,106],{"type":58,"tag":86,"props":102,"children":103},{},[104],{"type":64,"value":105},"Do NOT rely solely on the quick reference examples in this file",{"type":64,"value":107}," - they are minimal examples only. The reference files contain critical best practices, security considerations, and advanced patterns.",{"type":58,"tag":109,"props":110,"children":111},"hr",{},[],{"type":58,"tag":59,"props":113,"children":115},{"id":114},"mcp-server-best-practices",[116],{"type":64,"value":117},"MCP Server Best Practices",{"type":58,"tag":67,"props":119,"children":120},{},[121],{"type":64,"value":122},"Comprehensive guide for building production-ready MCP servers with tools, resources, prompts, and widgets using mcp-use.",{"type":58,"tag":124,"props":125,"children":127},"h2",{"id":126},"️-first-new-project-or-existing-project",[128],{"type":64,"value":129},"⚠️ FIRST: New Project or Existing Project?",{"type":58,"tag":67,"props":131,"children":132},{},[133],{"type":58,"tag":86,"props":134,"children":135},{},[136],{"type":64,"value":137},"Before doing anything else, determine whether you are inside an existing mcp-use project.",{"type":58,"tag":67,"props":139,"children":140},{},[141,146,148,155,157,163,165,171,173,179],{"type":58,"tag":86,"props":142,"children":143},{},[144],{"type":64,"value":145},"Detection:",{"type":64,"value":147}," Check the workspace for a ",{"type":58,"tag":149,"props":150,"children":152},"code",{"className":151},[],[153],{"type":64,"value":154},"package.json",{"type":64,"value":156}," that lists ",{"type":58,"tag":149,"props":158,"children":160},{"className":159},[],[161],{"type":64,"value":162},"\"mcp-use\"",{"type":64,"value":164}," as a dependency, OR any ",{"type":58,"tag":149,"props":166,"children":168},{"className":167},[],[169],{"type":64,"value":170},".ts",{"type":64,"value":172}," file that imports from ",{"type":58,"tag":149,"props":174,"children":176},{"className":175},[],[177],{"type":64,"value":178},"\"mcp-use\u002Fserver\"",{"type":64,"value":180},".",{"type":58,"tag":182,"props":183,"children":187},"pre",{"className":184,"code":186,"language":64},[185],"language-text","├─ mcp-use project FOUND → Do NOT scaffold. You are already in a project.\n│  └─ Skip to \"Quick Navigation\" below to add features.\n│\n├─ NO mcp-use project (empty dir, unrelated project, or greenfield)\n│  └─ Scaffold first with npx create-mcp-use-app, then add features.\n│     See \"Scaffolding a New Project\" below.\n│\n└─ Inside an UNRELATED project (e.g. Next.js app) and user wants an MCP server\n   └─ Ask the user where to create it, then scaffold in that directory.\n      Do NOT scaffold inside an existing unrelated project root.\n",[188],{"type":58,"tag":149,"props":189,"children":191},{"__ignoreMap":190},"",[192],{"type":64,"value":186},{"type":58,"tag":67,"props":194,"children":195},{},[196,216],{"type":58,"tag":86,"props":197,"children":198},{},[199,201,207,209,214],{"type":64,"value":200},"NEVER manually create ",{"type":58,"tag":149,"props":202,"children":204},{"className":203},[],[205],{"type":64,"value":206},"MCPServer",{"type":64,"value":208}," boilerplate, ",{"type":58,"tag":149,"props":210,"children":212},{"className":211},[],[213],{"type":64,"value":154},{"type":64,"value":215},", or project structure by hand.",{"type":64,"value":217}," The CLI sets up TypeScript config, dev scripts, inspector integration, hot reload, and widget compilation that are difficult to replicate manually.",{"type":58,"tag":109,"props":219,"children":220},{},[],{"type":58,"tag":222,"props":223,"children":225},"h3",{"id":224},"scaffolding-a-new-project",[226],{"type":64,"value":227},"Scaffolding a New Project",{"type":58,"tag":182,"props":229,"children":233},{"className":230,"code":231,"language":232,"meta":190,"style":190},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx create-mcp-use-app my-server\ncd my-server\nnpm run dev\n","bash",[234],{"type":58,"tag":149,"props":235,"children":236},{"__ignoreMap":190},[237,260,274],{"type":58,"tag":238,"props":239,"children":242},"span",{"class":240,"line":241},"line",1,[243,249,255],{"type":58,"tag":238,"props":244,"children":246},{"style":245},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[247],{"type":64,"value":248},"npx",{"type":58,"tag":238,"props":250,"children":252},{"style":251},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[253],{"type":64,"value":254}," create-mcp-use-app",{"type":58,"tag":238,"props":256,"children":257},{"style":251},[258],{"type":64,"value":259}," my-server\n",{"type":58,"tag":238,"props":261,"children":263},{"class":240,"line":262},2,[264,270],{"type":58,"tag":238,"props":265,"children":267},{"style":266},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[268],{"type":64,"value":269},"cd",{"type":58,"tag":238,"props":271,"children":272},{"style":251},[273],{"type":64,"value":259},{"type":58,"tag":238,"props":275,"children":277},{"class":240,"line":276},3,[278,283,288],{"type":58,"tag":238,"props":279,"children":280},{"style":245},[281],{"type":64,"value":282},"npm",{"type":58,"tag":238,"props":284,"children":285},{"style":251},[286],{"type":64,"value":287}," run",{"type":58,"tag":238,"props":289,"children":290},{"style":251},[291],{"type":64,"value":292}," dev\n",{"type":58,"tag":67,"props":294,"children":295},{},[296,298,308],{"type":64,"value":297},"For full scaffolding details and CLI flags, see ",{"type":58,"tag":86,"props":299,"children":300},{},[301],{"type":58,"tag":302,"props":303,"children":305},"a",{"href":304},"references\u002Ffoundations\u002Fquickstart.md",[306],{"type":64,"value":307},"quickstart.md",{"type":64,"value":180},{"type":58,"tag":109,"props":310,"children":311},{},[],{"type":58,"tag":124,"props":313,"children":315},{"id":314},"quick-navigation",[316],{"type":64,"value":317},"Quick Navigation",{"type":58,"tag":67,"props":319,"children":320},{},[321],{"type":58,"tag":86,"props":322,"children":323},{},[324],{"type":64,"value":325},"Choose your path based on what you're building:",{"type":58,"tag":222,"props":327,"children":329},{"id":328},"foundations",[330],{"type":64,"value":331},"🚀 Foundations",{"type":58,"tag":67,"props":333,"children":334},{},[335,340],{"type":58,"tag":86,"props":336,"children":337},{},[338],{"type":64,"value":339},"When:",{"type":64,"value":341}," ALWAYS read these first when starting MCP work in a new conversation. Reference later for architecture\u002Fconcept clarification.",{"type":58,"tag":73,"props":343,"children":344},{},[345,359,373,385],{"type":58,"tag":77,"props":346,"children":347},{},[348,357],{"type":58,"tag":86,"props":349,"children":350},{},[351],{"type":58,"tag":302,"props":352,"children":354},{"href":353},"references\u002Ffoundations\u002Fconcepts.md",[355],{"type":64,"value":356},"concepts.md",{"type":64,"value":358}," - MCP primitives (Tool, Resource, Prompt, Widget) and when to use each",{"type":58,"tag":77,"props":360,"children":361},{},[362,371],{"type":58,"tag":86,"props":363,"children":364},{},[365],{"type":58,"tag":302,"props":366,"children":368},{"href":367},"references\u002Ffoundations\u002Farchitecture.md",[369],{"type":64,"value":370},"architecture.md",{"type":64,"value":372}," - Server structure (Hono-based), middleware system, server.use() vs server.app",{"type":58,"tag":77,"props":374,"children":375},{},[376,383],{"type":58,"tag":86,"props":377,"children":378},{},[379],{"type":58,"tag":302,"props":380,"children":381},{"href":304},[382],{"type":64,"value":307},{"type":64,"value":384}," - Scaffolding, setup, and first tool example",{"type":58,"tag":77,"props":386,"children":387},{},[388,397],{"type":58,"tag":86,"props":389,"children":390},{},[391],{"type":58,"tag":302,"props":392,"children":394},{"href":393},"references\u002Ffoundations\u002Fdeployment.md",[395],{"type":64,"value":396},"deployment.md",{"type":64,"value":398}," - Deploying to Manufact Cloud, self-hosting, Docker, managing deployments",{"type":58,"tag":67,"props":400,"children":401},{},[402],{"type":64,"value":403},"Load these before diving into tools\u002Fresources\u002Fwidgets sections.",{"type":58,"tag":109,"props":405,"children":406},{},[],{"type":58,"tag":222,"props":408,"children":410},{"id":409},"adding-authentication",[411],{"type":64,"value":412},"🔐 Adding Authentication?",{"type":58,"tag":67,"props":414,"children":415},{},[416,420],{"type":58,"tag":86,"props":417,"children":418},{},[419],{"type":64,"value":339},{"type":64,"value":421}," Protecting your server with OAuth (Auth0, Better Auth, Clerk, WorkOS, Supabase, Keycloak, or any other provider)",{"type":58,"tag":423,"props":424,"children":425},"ul",{},[426,474,519,560,592,617,642,667],{"type":58,"tag":77,"props":427,"children":428},{},[429,438],{"type":58,"tag":86,"props":430,"children":431},{},[432],{"type":58,"tag":302,"props":433,"children":435},{"href":434},"references\u002Fauthentication\u002Foverview.md",[436],{"type":64,"value":437},"overview.md",{"type":58,"tag":423,"props":439,"children":440},{},[441,454],{"type":58,"tag":77,"props":442,"children":443},{},[444,446,452],{"type":64,"value":445},"When: First time adding auth, understanding ",{"type":58,"tag":149,"props":447,"children":449},{"className":448},[],[450],{"type":64,"value":451},"ctx.auth",{"type":64,"value":453},", or choosing a provider \u002F integration mode",{"type":58,"tag":77,"props":455,"children":456},{},[457,459,465,467,472],{"type":64,"value":458},"Covers: Remote auth vs OAuth proxy, ",{"type":58,"tag":149,"props":460,"children":462},{"className":461},[],[463],{"type":64,"value":464},"oauth",{"type":64,"value":466}," config, ",{"type":58,"tag":149,"props":468,"children":470},{"className":469},[],[471],{"type":64,"value":451},{"type":64,"value":473}," shape, provider comparison, common mistakes",{"type":58,"tag":77,"props":475,"children":476},{},[477,486],{"type":58,"tag":86,"props":478,"children":479},{},[480],{"type":58,"tag":302,"props":481,"children":483},{"href":482},"references\u002Fauthentication\u002Fauth0.md",[484],{"type":64,"value":485},"auth0.md",{"type":58,"tag":423,"props":487,"children":488},{},[489,500],{"type":58,"tag":77,"props":490,"children":491},{},[492,494],{"type":64,"value":493},"When: Using Auth0 — DCR (Early Access) or a standard Regular Web App via ",{"type":58,"tag":149,"props":495,"children":497},{"className":496},[],[498],{"type":64,"value":499},"oauthProxy",{"type":58,"tag":77,"props":501,"children":502},{},[503,505,511,513],{"type":64,"value":504},"Covers: Setup for both modes, ",{"type":58,"tag":149,"props":506,"children":508},{"className":507},[],[509],{"type":64,"value":510},"extraAuthorizeParams.audience",{"type":64,"value":512},", permissions via ",{"type":58,"tag":149,"props":514,"children":516},{"className":515},[],[517],{"type":64,"value":518},"rfc9068_profile_authz",{"type":58,"tag":77,"props":520,"children":521},{},[522,531],{"type":58,"tag":86,"props":523,"children":524},{},[525],{"type":58,"tag":302,"props":526,"children":528},{"href":527},"references\u002Fauthentication\u002Fbetter-auth.md",[529],{"type":64,"value":530},"better-auth.md",{"type":58,"tag":423,"props":532,"children":533},{},[534,547],{"type":58,"tag":77,"props":535,"children":536},{},[537,539,545],{"type":64,"value":538},"When: Using Better Auth with the ",{"type":58,"tag":149,"props":540,"children":542},{"className":541},[],[543],{"type":64,"value":544},"@better-auth\u002Foauth-provider",{"type":64,"value":546}," plugin (self-hosted OAuth 2.1)",{"type":58,"tag":77,"props":548,"children":549},{},[550,552,558],{"type":64,"value":551},"Covers: ",{"type":58,"tag":149,"props":553,"children":555},{"className":554},[],[556],{"type":64,"value":557},"oauthBetterAuthProvider",{"type":64,"value":559},", auth URL \u002F metadata routes, login and consent flows",{"type":58,"tag":77,"props":561,"children":562},{},[563,572],{"type":58,"tag":86,"props":564,"children":565},{},[566],{"type":58,"tag":302,"props":567,"children":569},{"href":568},"references\u002Fauthentication\u002Fclerk.md",[570],{"type":64,"value":571},"clerk.md",{"type":58,"tag":423,"props":573,"children":574},{},[575,580],{"type":58,"tag":77,"props":576,"children":577},{},[578],{"type":64,"value":579},"When: Using Clerk (DCR-based OAuth)",{"type":58,"tag":77,"props":581,"children":582},{},[583,584,590],{"type":64,"value":551},{"type":58,"tag":149,"props":585,"children":587},{"className":586},[],[588],{"type":64,"value":589},"oauthClerkProvider",{"type":64,"value":591},", enabling DCR, Frontend API URL, organization context",{"type":58,"tag":77,"props":593,"children":594},{},[595,604],{"type":58,"tag":86,"props":596,"children":597},{},[598],{"type":58,"tag":302,"props":599,"children":601},{"href":600},"references\u002Fauthentication\u002Fworkos.md",[602],{"type":64,"value":603},"workos.md",{"type":58,"tag":423,"props":605,"children":606},{},[607,612],{"type":58,"tag":77,"props":608,"children":609},{},[610],{"type":64,"value":611},"When: Using WorkOS AuthKit (DCR only)",{"type":58,"tag":77,"props":613,"children":614},{},[615],{"type":64,"value":616},"Covers: Setup, env vars, roles\u002Fpermissions, multi-tenant org filtering, WorkOS API calls",{"type":58,"tag":77,"props":618,"children":619},{},[620,629],{"type":58,"tag":86,"props":621,"children":622},{},[623],{"type":58,"tag":302,"props":624,"children":626},{"href":625},"references\u002Fauthentication\u002Fsupabase.md",[627],{"type":64,"value":628},"supabase.md",{"type":58,"tag":423,"props":630,"children":631},{},[632,637],{"type":58,"tag":77,"props":633,"children":634},{},[635],{"type":64,"value":636},"When: Using Supabase's OAuth 2.1 server",{"type":58,"tag":77,"props":638,"children":639},{},[640],{"type":64,"value":641},"Covers: Setup, publishable keys, ES256 vs HS256, hosting the consent UI, RLS-aware SDK calls",{"type":58,"tag":77,"props":643,"children":644},{},[645,654],{"type":58,"tag":86,"props":646,"children":647},{},[648],{"type":58,"tag":302,"props":649,"children":651},{"href":650},"references\u002Fauthentication\u002Fkeycloak.md",[652],{"type":64,"value":653},"keycloak.md",{"type":58,"tag":423,"props":655,"children":656},{},[657,662],{"type":58,"tag":77,"props":658,"children":659},{},[660],{"type":64,"value":661},"When: Using Keycloak via native DCR",{"type":58,"tag":77,"props":663,"children":664},{},[665],{"type":64,"value":666},"Covers: DCR trusted hosts + web origins, audience enforcement, realm vs resource roles, userinfo",{"type":58,"tag":77,"props":668,"children":669},{},[670,679],{"type":58,"tag":86,"props":671,"children":672},{},[673],{"type":58,"tag":302,"props":674,"children":676},{"href":675},"references\u002Fauthentication\u002Fcustom.md",[677],{"type":64,"value":678},"custom.md",{"type":58,"tag":423,"props":680,"children":681},{},[682,700],{"type":58,"tag":77,"props":683,"children":684},{},[685,687,693,695],{"type":64,"value":686},"When: Any other provider — DCR-capable via ",{"type":58,"tag":149,"props":688,"children":690},{"className":689},[],[691],{"type":64,"value":692},"oauthCustomProvider",{"type":64,"value":694},", or pre-registered (Google, GitHub, Okta, Azure AD) via ",{"type":58,"tag":149,"props":696,"children":698},{"className":697},[],[699],{"type":64,"value":499},{"type":58,"tag":77,"props":701,"children":702},{},[703,704,709,711,716,718,724],{"type":64,"value":551},{"type":58,"tag":149,"props":705,"children":707},{"className":706},[],[708],{"type":64,"value":692},{"type":64,"value":710},", ",{"type":58,"tag":149,"props":712,"children":714},{"className":713},[],[715],{"type":64,"value":499},{"type":64,"value":717}," + ",{"type":58,"tag":149,"props":719,"children":721},{"className":720},[],[722],{"type":64,"value":723},"jwksVerifier",{"type":64,"value":725},", provider examples, opaque-token verification",{"type":58,"tag":109,"props":727,"children":728},{},[],{"type":58,"tag":222,"props":730,"children":732},{"id":731},"building-server-backend-no-ui",[733],{"type":64,"value":734},"🔧 Building Server Backend (No UI)?",{"type":58,"tag":67,"props":736,"children":737},{},[738,742],{"type":58,"tag":86,"props":739,"children":740},{},[741],{"type":64,"value":339},{"type":64,"value":743}," Implementing MCP features (actions, data, templates). Read the specific file for the primitive you're building.",{"type":58,"tag":423,"props":745,"children":746},{},[747,772,797,822,887,919],{"type":58,"tag":77,"props":748,"children":749},{},[750,759],{"type":58,"tag":86,"props":751,"children":752},{},[753],{"type":58,"tag":302,"props":754,"children":756},{"href":755},"references\u002Fserver\u002Ftools.md",[757],{"type":64,"value":758},"tools.md",{"type":58,"tag":423,"props":760,"children":761},{},[762,767],{"type":58,"tag":77,"props":763,"children":764},{},[765],{"type":64,"value":766},"When: Creating backend actions the AI can call (send-email, fetch-data, create-user)",{"type":58,"tag":77,"props":768,"children":769},{},[770],{"type":64,"value":771},"Covers: Tool definition, schemas, annotations, context, error handling",{"type":58,"tag":77,"props":773,"children":774},{},[775,784],{"type":58,"tag":86,"props":776,"children":777},{},[778],{"type":58,"tag":302,"props":779,"children":781},{"href":780},"references\u002Fserver\u002Fresources.md",[782],{"type":64,"value":783},"resources.md",{"type":58,"tag":423,"props":785,"children":786},{},[787,792],{"type":58,"tag":77,"props":788,"children":789},{},[790],{"type":64,"value":791},"When: Exposing read-only data clients can fetch (config, user profiles, documentation)",{"type":58,"tag":77,"props":793,"children":794},{},[795],{"type":64,"value":796},"Covers: Static resources, dynamic resources, parameterized resource templates, URI completion",{"type":58,"tag":77,"props":798,"children":799},{},[800,809],{"type":58,"tag":86,"props":801,"children":802},{},[803],{"type":58,"tag":302,"props":804,"children":806},{"href":805},"references\u002Fserver\u002Fprompts.md",[807],{"type":64,"value":808},"prompts.md",{"type":58,"tag":423,"props":810,"children":811},{},[812,817],{"type":58,"tag":77,"props":813,"children":814},{},[815],{"type":64,"value":816},"When: Creating reusable message templates for AI interactions (code-review, summarize)",{"type":58,"tag":77,"props":818,"children":819},{},[820],{"type":64,"value":821},"Covers: Prompt definition, parameterization, argument completion, prompt best practices",{"type":58,"tag":77,"props":823,"children":824},{},[825,834],{"type":58,"tag":86,"props":826,"children":827},{},[828],{"type":58,"tag":302,"props":829,"children":831},{"href":830},"references\u002Fserver\u002Fresponse-helpers.md",[832],{"type":64,"value":833},"response-helpers.md",{"type":58,"tag":423,"props":835,"children":836},{},[837,842],{"type":58,"tag":77,"props":838,"children":839},{},[840],{"type":64,"value":841},"When: Formatting responses from tools\u002Fresources (text, JSON, markdown, images, errors)",{"type":58,"tag":77,"props":843,"children":844},{},[845,846,852,853,859,860,866,867,873,874,880,881],{"type":64,"value":551},{"type":58,"tag":149,"props":847,"children":849},{"className":848},[],[850],{"type":64,"value":851},"text()",{"type":64,"value":710},{"type":58,"tag":149,"props":854,"children":856},{"className":855},[],[857],{"type":64,"value":858},"object()",{"type":64,"value":710},{"type":58,"tag":149,"props":861,"children":863},{"className":862},[],[864],{"type":64,"value":865},"markdown()",{"type":64,"value":710},{"type":58,"tag":149,"props":868,"children":870},{"className":869},[],[871],{"type":64,"value":872},"image()",{"type":64,"value":710},{"type":58,"tag":149,"props":875,"children":877},{"className":876},[],[878],{"type":64,"value":879},"error()",{"type":64,"value":710},{"type":58,"tag":149,"props":882,"children":884},{"className":883},[],[885],{"type":64,"value":886},"mix()",{"type":58,"tag":77,"props":888,"children":889},{},[890,899],{"type":58,"tag":86,"props":891,"children":892},{},[893],{"type":58,"tag":302,"props":894,"children":896},{"href":895},"references\u002Fserver\u002Fproxy.md",[897],{"type":64,"value":898},"proxy.md",{"type":58,"tag":423,"props":900,"children":901},{},[902,907],{"type":58,"tag":77,"props":903,"children":904},{},[905],{"type":64,"value":906},"When: Composing multiple MCP servers into one unified aggregator server",{"type":58,"tag":77,"props":908,"children":909},{},[910,911,917],{"type":64,"value":551},{"type":58,"tag":149,"props":912,"children":914},{"className":913},[],[915],{"type":64,"value":916},"server.proxy()",{"type":64,"value":918},", config API, explicit sessions, sampling routing",{"type":58,"tag":77,"props":920,"children":921},{},[922,929],{"type":58,"tag":86,"props":923,"children":924},{},[925],{"type":58,"tag":302,"props":926,"children":927},{"href":367},[928],{"type":64,"value":370},{"type":58,"tag":423,"props":930,"children":931},{},[932,937],{"type":58,"tag":77,"props":933,"children":934},{},[935],{"type":64,"value":936},"When: Adding cross-cutting logic (logging, auth checks, rate limiting, tool filtering) that spans multiple tools\u002Fresources",{"type":58,"tag":77,"props":938,"children":939},{},[940,941,947,949,955],{"type":64,"value":551},{"type":58,"tag":149,"props":942,"children":944},{"className":943},[],[945],{"type":64,"value":946},"server.use('mcp:...')",{"type":64,"value":948}," middleware, ",{"type":58,"tag":149,"props":950,"children":952},{"className":951},[],[953],{"type":64,"value":954},"MiddlewareContext",{"type":64,"value":956}," (method, params, auth, state), pattern matching, HTTP vs MCP middleware",{"type":58,"tag":109,"props":958,"children":959},{},[],{"type":58,"tag":222,"props":961,"children":963},{"id":962},"building-visual-widgets-interactive-ui",[964],{"type":64,"value":965},"🎨 Building Visual Widgets (Interactive UI)?",{"type":58,"tag":67,"props":967,"children":968},{},[969,973],{"type":58,"tag":86,"props":970,"children":971},{},[972],{"type":64,"value":339},{"type":64,"value":974}," Creating React-based visual interfaces for browsing, comparing, or selecting data",{"type":58,"tag":423,"props":976,"children":977},{},[978,1019,1058,1090,1130,1155,1195],{"type":58,"tag":77,"props":979,"children":980},{},[981,990],{"type":58,"tag":86,"props":982,"children":983},{},[984],{"type":58,"tag":302,"props":985,"children":987},{"href":986},"references\u002Fwidgets\u002Fbasics.md",[988],{"type":64,"value":989},"basics.md",{"type":58,"tag":423,"props":991,"children":992},{},[993,998],{"type":58,"tag":77,"props":994,"children":995},{},[996],{"type":64,"value":997},"When: Creating your first widget or adding UI to an existing tool",{"type":58,"tag":77,"props":999,"children":1000},{},[1001,1003,1009,1011,1017],{"type":64,"value":1002},"Covers: Widget setup, ",{"type":58,"tag":149,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":64,"value":1008},"useWidget()",{"type":64,"value":1010}," hook, ",{"type":58,"tag":149,"props":1012,"children":1014},{"className":1013},[],[1015],{"type":64,"value":1016},"isPending",{"type":64,"value":1018}," checks, props handling",{"type":58,"tag":77,"props":1020,"children":1021},{},[1022,1031],{"type":58,"tag":86,"props":1023,"children":1024},{},[1025],{"type":58,"tag":302,"props":1026,"children":1028},{"href":1027},"references\u002Fwidgets\u002Fstate.md",[1029],{"type":64,"value":1030},"state.md",{"type":58,"tag":423,"props":1032,"children":1033},{},[1034,1039],{"type":58,"tag":77,"props":1035,"children":1036},{},[1037],{"type":64,"value":1038},"When: Managing UI state (selections, filters, tabs) within widgets",{"type":58,"tag":77,"props":1040,"children":1041},{},[1042,1043,1049,1050,1056],{"type":64,"value":551},{"type":58,"tag":149,"props":1044,"children":1046},{"className":1045},[],[1047],{"type":64,"value":1048},"useState",{"type":64,"value":710},{"type":58,"tag":149,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":64,"value":1055},"setState",{"type":64,"value":1057},", state persistence, when to use tool vs widget state",{"type":58,"tag":77,"props":1059,"children":1060},{},[1061,1070],{"type":58,"tag":86,"props":1062,"children":1063},{},[1064],{"type":58,"tag":302,"props":1065,"children":1067},{"href":1066},"references\u002Fwidgets\u002Finteractivity.md",[1068],{"type":64,"value":1069},"interactivity.md",{"type":58,"tag":423,"props":1071,"children":1072},{},[1073,1078],{"type":58,"tag":77,"props":1074,"children":1075},{},[1076],{"type":64,"value":1077},"When: Adding buttons, forms, or calling tools from within widgets",{"type":58,"tag":77,"props":1079,"children":1080},{},[1081,1082,1088],{"type":64,"value":551},{"type":58,"tag":149,"props":1083,"children":1085},{"className":1084},[],[1086],{"type":64,"value":1087},"useCallTool()",{"type":64,"value":1089},", form handling, action buttons, optimistic updates",{"type":58,"tag":77,"props":1091,"children":1092},{},[1093,1102],{"type":58,"tag":86,"props":1094,"children":1095},{},[1096],{"type":58,"tag":302,"props":1097,"children":1099},{"href":1098},"references\u002Fwidgets\u002Fui-guidelines.md",[1100],{"type":64,"value":1101},"ui-guidelines.md",{"type":58,"tag":423,"props":1103,"children":1104},{},[1105,1110],{"type":58,"tag":77,"props":1106,"children":1107},{},[1108],{"type":64,"value":1109},"When: Styling widgets to support themes, responsive layouts, or accessibility",{"type":58,"tag":77,"props":1111,"children":1112},{},[1113,1114,1120,1122,1128],{"type":64,"value":551},{"type":58,"tag":149,"props":1115,"children":1117},{"className":1116},[],[1118],{"type":64,"value":1119},"useWidgetTheme()",{"type":64,"value":1121},", light\u002Fdark mode, ",{"type":58,"tag":149,"props":1123,"children":1125},{"className":1124},[],[1126],{"type":64,"value":1127},"autoSize",{"type":64,"value":1129},", layout patterns, CSS best practices",{"type":58,"tag":77,"props":1131,"children":1132},{},[1133,1142],{"type":58,"tag":86,"props":1134,"children":1135},{},[1136],{"type":58,"tag":302,"props":1137,"children":1139},{"href":1138},"references\u002Fwidgets\u002Fadvanced.md",[1140],{"type":64,"value":1141},"advanced.md",{"type":58,"tag":423,"props":1143,"children":1144},{},[1145,1150],{"type":58,"tag":77,"props":1146,"children":1147},{},[1148],{"type":64,"value":1149},"When: Building complex widgets with async data, error boundaries, or performance optimizations",{"type":58,"tag":77,"props":1151,"children":1152},{},[1153],{"type":64,"value":1154},"Covers: Loading states, error handling, memoization, code splitting",{"type":58,"tag":77,"props":1156,"children":1157},{},[1158,1167],{"type":58,"tag":86,"props":1159,"children":1160},{},[1161],{"type":58,"tag":302,"props":1162,"children":1164},{"href":1163},"references\u002Fwidgets\u002Fmodel-context.md",[1165],{"type":64,"value":1166},"model-context.md",{"type":58,"tag":423,"props":1168,"children":1169},{},[1170,1175],{"type":58,"tag":77,"props":1171,"children":1172},{},[1173],{"type":64,"value":1174},"When: Keeping the AI model aware of what the user is currently seeing (active tab, hovered item, selected product) without requiring tool calls",{"type":58,"tag":77,"props":1176,"children":1177},{},[1178,1179,1185,1187,1193],{"type":64,"value":551},{"type":58,"tag":149,"props":1180,"children":1182},{"className":1181},[],[1183],{"type":64,"value":1184},"\u003CModelContext>",{"type":64,"value":1186}," component, ",{"type":58,"tag":149,"props":1188,"children":1190},{"className":1189},[],[1191],{"type":64,"value":1192},"modelContext.set\u002Fremove",{"type":64,"value":1194}," imperative API, nesting, tree serialization, lifecycle rules",{"type":58,"tag":77,"props":1196,"children":1197},{},[1198,1207],{"type":58,"tag":86,"props":1199,"children":1200},{},[1201],{"type":58,"tag":302,"props":1202,"children":1204},{"href":1203},"references\u002Fwidgets\u002Ffiles.md",[1205],{"type":64,"value":1206},"files.md",{"type":58,"tag":423,"props":1208,"children":1209},{},[1210,1215],{"type":58,"tag":77,"props":1211,"children":1212},{},[1213],{"type":64,"value":1214},"When: Uploading or downloading files from within a widget (ChatGPT Apps SDK only)",{"type":58,"tag":77,"props":1216,"children":1217},{},[1218,1219,1225,1226,1232,1234,1240,1242,1248],{"type":64,"value":551},{"type":58,"tag":149,"props":1220,"children":1222},{"className":1221},[],[1223],{"type":64,"value":1224},"useFiles()",{"type":64,"value":1010},{"type":58,"tag":149,"props":1227,"children":1229},{"className":1228},[],[1230],{"type":64,"value":1231},"isSupported",{"type":64,"value":1233}," guard, model visibility (",{"type":58,"tag":149,"props":1235,"children":1237},{"className":1236},[],[1238],{"type":64,"value":1239},"modelVisible",{"type":64,"value":1241},"), storing ",{"type":58,"tag":149,"props":1243,"children":1245},{"className":1244},[],[1246],{"type":64,"value":1247},"fileId",{"type":64,"value":1249},", temporary download URLs",{"type":58,"tag":109,"props":1251,"children":1252},{},[],{"type":58,"tag":222,"props":1254,"children":1256},{"id":1255},"need-complete-examples",[1257],{"type":64,"value":1258},"📚 Need Complete Examples?",{"type":58,"tag":67,"props":1260,"children":1261},{},[1262,1266],{"type":58,"tag":86,"props":1263,"children":1264},{},[1265],{"type":64,"value":339},{"type":64,"value":1267}," You want to see full implementations of common use cases",{"type":58,"tag":423,"props":1269,"children":1270},{},[1271],{"type":58,"tag":77,"props":1272,"children":1273},{},[1274,1283],{"type":58,"tag":86,"props":1275,"children":1276},{},[1277],{"type":58,"tag":302,"props":1278,"children":1280},{"href":1279},"references\u002Fpatterns\u002Fcommon-patterns.md",[1281],{"type":64,"value":1282},"common-patterns.md",{"type":58,"tag":423,"props":1284,"children":1285},{},[1286,1291],{"type":58,"tag":77,"props":1287,"children":1288},{},[1289],{"type":64,"value":1290},"End-to-end examples: weather app, todo list, recipe browser",{"type":58,"tag":77,"props":1292,"children":1293},{},[1294],{"type":64,"value":1295},"Shows: Server code + widget code + best practices in context",{"type":58,"tag":109,"props":1297,"children":1298},{},[],{"type":58,"tag":222,"props":1300,"children":1302},{"id":1301},"testing-from-the-terminal-agent-feedback-loops",[1303],{"type":64,"value":1304},"🔁 Testing from the Terminal (Agent Feedback Loops)",{"type":58,"tag":67,"props":1306,"children":1307},{},[1308,1312,1314,1320],{"type":58,"tag":86,"props":1309,"children":1310},{},[1311],{"type":64,"value":339},{"type":64,"value":1313}," You want to verify a tool or widget ",{"type":58,"tag":1315,"props":1316,"children":1317},"em",{},[1318],{"type":64,"value":1319},"without",{"type":64,"value":1321}," the inspector UI — the canonical flow for AI agents iterating on MCP servers.",{"type":58,"tag":423,"props":1323,"children":1324},{},[1325,1504],{"type":58,"tag":77,"props":1326,"children":1327},{},[1328,1337,1339,1450,1454,1456,1462,1464,1470,1472,1478,1480,1486,1488,1494,1496,1502],{"type":58,"tag":86,"props":1329,"children":1330},{},[1331],{"type":58,"tag":149,"props":1332,"children":1334},{"className":1333},[],[1335],{"type":64,"value":1336},"mcp-use client",{"type":64,"value":1338}," — drives MCP servers from the terminal. Auto-runs OAuth on 401, persists saved servers under a short name, and one-shot subcommands exit cleanly so they're safe to spawn from harnesses.",{"type":58,"tag":182,"props":1340,"children":1342},{"className":230,"code":1341,"language":232,"meta":190,"style":190},"npx mcp-use client connect dev http:\u002F\u002Flocalhost:3000\u002Fmcp\nnpx mcp-use client dev tools list\nnpx mcp-use client dev tools call get-weather city=Tokyo --screenshot\n",[1343],{"type":58,"tag":149,"props":1344,"children":1345},{"__ignoreMap":190},[1346,1378,1407],{"type":58,"tag":238,"props":1347,"children":1348},{"class":240,"line":241},[1349,1353,1358,1363,1368,1373],{"type":58,"tag":238,"props":1350,"children":1351},{"style":245},[1352],{"type":64,"value":248},{"type":58,"tag":238,"props":1354,"children":1355},{"style":251},[1356],{"type":64,"value":1357}," mcp-use",{"type":58,"tag":238,"props":1359,"children":1360},{"style":251},[1361],{"type":64,"value":1362}," client",{"type":58,"tag":238,"props":1364,"children":1365},{"style":251},[1366],{"type":64,"value":1367}," connect",{"type":58,"tag":238,"props":1369,"children":1370},{"style":251},[1371],{"type":64,"value":1372}," dev",{"type":58,"tag":238,"props":1374,"children":1375},{"style":251},[1376],{"type":64,"value":1377}," http:\u002F\u002Flocalhost:3000\u002Fmcp\n",{"type":58,"tag":238,"props":1379,"children":1380},{"class":240,"line":262},[1381,1385,1389,1393,1397,1402],{"type":58,"tag":238,"props":1382,"children":1383},{"style":245},[1384],{"type":64,"value":248},{"type":58,"tag":238,"props":1386,"children":1387},{"style":251},[1388],{"type":64,"value":1357},{"type":58,"tag":238,"props":1390,"children":1391},{"style":251},[1392],{"type":64,"value":1362},{"type":58,"tag":238,"props":1394,"children":1395},{"style":251},[1396],{"type":64,"value":1372},{"type":58,"tag":238,"props":1398,"children":1399},{"style":251},[1400],{"type":64,"value":1401}," tools",{"type":58,"tag":238,"props":1403,"children":1404},{"style":251},[1405],{"type":64,"value":1406}," list\n",{"type":58,"tag":238,"props":1408,"children":1409},{"class":240,"line":276},[1410,1414,1418,1422,1426,1430,1435,1440,1445],{"type":58,"tag":238,"props":1411,"children":1412},{"style":245},[1413],{"type":64,"value":248},{"type":58,"tag":238,"props":1415,"children":1416},{"style":251},[1417],{"type":64,"value":1357},{"type":58,"tag":238,"props":1419,"children":1420},{"style":251},[1421],{"type":64,"value":1362},{"type":58,"tag":238,"props":1423,"children":1424},{"style":251},[1425],{"type":64,"value":1372},{"type":58,"tag":238,"props":1427,"children":1428},{"style":251},[1429],{"type":64,"value":1401},{"type":58,"tag":238,"props":1431,"children":1432},{"style":251},[1433],{"type":64,"value":1434}," call",{"type":58,"tag":238,"props":1436,"children":1437},{"style":251},[1438],{"type":64,"value":1439}," get-weather",{"type":58,"tag":238,"props":1441,"children":1442},{"style":251},[1443],{"type":64,"value":1444}," city=Tokyo",{"type":58,"tag":238,"props":1446,"children":1447},{"style":251},[1448],{"type":64,"value":1449}," --screenshot\n",{"type":58,"tag":1451,"props":1452,"children":1453},"br",{},[],{"type":64,"value":1455},"Every per-server command takes the saved name as its first positional arg (",{"type":58,"tag":149,"props":1457,"children":1459},{"className":1458},[],[1460],{"type":64,"value":1461},"mcp-use client \u003Cname> \u003Cscope> \u003Caction>",{"type":64,"value":1463},") — there is no \"active session\". Args use ",{"type":58,"tag":149,"props":1465,"children":1467},{"className":1466},[],[1468],{"type":64,"value":1469},"key=value",{"type":64,"value":1471}," (with ",{"type":58,"tag":149,"props":1473,"children":1475},{"className":1474},[],[1476],{"type":64,"value":1477},"key:='\u003Cjson>'",{"type":64,"value":1479}," for nested values) or a single JSON object. When a tool renders a widget, pass ",{"type":58,"tag":149,"props":1481,"children":1483},{"className":1482},[],[1484],{"type":64,"value":1485},"--screenshot",{"type":64,"value":1487}," to also save a PNG (",{"type":58,"tag":149,"props":1489,"children":1491},{"className":1490},[],[1492],{"type":64,"value":1493},".\u002F\u003Cview>-\u003Ctimestamp>.png",{"type":64,"value":1495}," by default, or override with ",{"type":58,"tag":149,"props":1497,"children":1499},{"className":1498},[],[1500],{"type":64,"value":1501},"--screenshot-output \u003Cpath>",{"type":64,"value":1503},").",{"type":58,"tag":77,"props":1505,"children":1506},{},[1507,1516,1518,1700,1703,1705,1711,1713,1719,1721,1727],{"type":58,"tag":86,"props":1508,"children":1509},{},[1510],{"type":58,"tag":149,"props":1511,"children":1513},{"className":1512},[],[1514],{"type":64,"value":1515},"mcp-use client screenshot",{"type":64,"value":1517}," — headless render of a widget tool to a PNG. Use this when you want to visually verify a widget change without opening the inspector, especially in loops where you call a tool, screenshot, eyeball the output, and edit. Two forms:",{"type":58,"tag":182,"props":1519,"children":1521},{"className":230,"code":1520,"language":232,"meta":190,"style":190},"# Saved-server form — reuses the auth from `mcp-use client connect`\nnpx mcp-use client dev screenshot --tool get-weather city=Tokyo \\\n  --width 800 --height 600 --theme light \\\n  --output .\u002Fweather.png\n\n# Ad-hoc form — connect inline (use -H for headers on authenticated servers)\nnpx mcp-use client screenshot --mcp http:\u002F\u002Flocalhost:3000\u002Fmcp \\\n  --tool get-weather city=Tokyo\n",[1522],{"type":58,"tag":149,"props":1523,"children":1524},{"__ignoreMap":190},[1525,1534,1577,1615,1629,1639,1648,1682],{"type":58,"tag":238,"props":1526,"children":1527},{"class":240,"line":241},[1528],{"type":58,"tag":238,"props":1529,"children":1531},{"style":1530},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1532],{"type":64,"value":1533},"# Saved-server form — reuses the auth from `mcp-use client connect`\n",{"type":58,"tag":238,"props":1535,"children":1536},{"class":240,"line":262},[1537,1541,1545,1549,1553,1558,1563,1567,1571],{"type":58,"tag":238,"props":1538,"children":1539},{"style":245},[1540],{"type":64,"value":248},{"type":58,"tag":238,"props":1542,"children":1543},{"style":251},[1544],{"type":64,"value":1357},{"type":58,"tag":238,"props":1546,"children":1547},{"style":251},[1548],{"type":64,"value":1362},{"type":58,"tag":238,"props":1550,"children":1551},{"style":251},[1552],{"type":64,"value":1372},{"type":58,"tag":238,"props":1554,"children":1555},{"style":251},[1556],{"type":64,"value":1557}," screenshot",{"type":58,"tag":238,"props":1559,"children":1560},{"style":251},[1561],{"type":64,"value":1562}," --tool",{"type":58,"tag":238,"props":1564,"children":1565},{"style":251},[1566],{"type":64,"value":1439},{"type":58,"tag":238,"props":1568,"children":1569},{"style":251},[1570],{"type":64,"value":1444},{"type":58,"tag":238,"props":1572,"children":1574},{"style":1573},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1575],{"type":64,"value":1576}," \\\n",{"type":58,"tag":238,"props":1578,"children":1579},{"class":240,"line":276},[1580,1585,1591,1596,1601,1606,1611],{"type":58,"tag":238,"props":1581,"children":1582},{"style":251},[1583],{"type":64,"value":1584},"  --width",{"type":58,"tag":238,"props":1586,"children":1588},{"style":1587},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1589],{"type":64,"value":1590}," 800",{"type":58,"tag":238,"props":1592,"children":1593},{"style":251},[1594],{"type":64,"value":1595}," --height",{"type":58,"tag":238,"props":1597,"children":1598},{"style":1587},[1599],{"type":64,"value":1600}," 600",{"type":58,"tag":238,"props":1602,"children":1603},{"style":251},[1604],{"type":64,"value":1605}," --theme",{"type":58,"tag":238,"props":1607,"children":1608},{"style":251},[1609],{"type":64,"value":1610}," light",{"type":58,"tag":238,"props":1612,"children":1613},{"style":1573},[1614],{"type":64,"value":1576},{"type":58,"tag":238,"props":1616,"children":1618},{"class":240,"line":1617},4,[1619,1624],{"type":58,"tag":238,"props":1620,"children":1621},{"style":251},[1622],{"type":64,"value":1623},"  --output",{"type":58,"tag":238,"props":1625,"children":1626},{"style":251},[1627],{"type":64,"value":1628}," .\u002Fweather.png\n",{"type":58,"tag":238,"props":1630,"children":1632},{"class":240,"line":1631},5,[1633],{"type":58,"tag":238,"props":1634,"children":1636},{"emptyLinePlaceholder":1635},true,[1637],{"type":64,"value":1638},"\n",{"type":58,"tag":238,"props":1640,"children":1642},{"class":240,"line":1641},6,[1643],{"type":58,"tag":238,"props":1644,"children":1645},{"style":1530},[1646],{"type":64,"value":1647},"# Ad-hoc form — connect inline (use -H for headers on authenticated servers)\n",{"type":58,"tag":238,"props":1649,"children":1651},{"class":240,"line":1650},7,[1652,1656,1660,1664,1668,1673,1678],{"type":58,"tag":238,"props":1653,"children":1654},{"style":245},[1655],{"type":64,"value":248},{"type":58,"tag":238,"props":1657,"children":1658},{"style":251},[1659],{"type":64,"value":1357},{"type":58,"tag":238,"props":1661,"children":1662},{"style":251},[1663],{"type":64,"value":1362},{"type":58,"tag":238,"props":1665,"children":1666},{"style":251},[1667],{"type":64,"value":1557},{"type":58,"tag":238,"props":1669,"children":1670},{"style":251},[1671],{"type":64,"value":1672}," --mcp",{"type":58,"tag":238,"props":1674,"children":1675},{"style":251},[1676],{"type":64,"value":1677}," http:\u002F\u002Flocalhost:3000\u002Fmcp",{"type":58,"tag":238,"props":1679,"children":1680},{"style":1573},[1681],{"type":64,"value":1576},{"type":58,"tag":238,"props":1683,"children":1685},{"class":240,"line":1684},8,[1686,1691,1695],{"type":58,"tag":238,"props":1687,"children":1688},{"style":251},[1689],{"type":64,"value":1690},"  --tool",{"type":58,"tag":238,"props":1692,"children":1693},{"style":251},[1694],{"type":64,"value":1439},{"type":58,"tag":238,"props":1696,"children":1697},{"style":251},[1698],{"type":64,"value":1699}," city=Tokyo\n",{"type":58,"tag":1451,"props":1701,"children":1702},{},[],{"type":64,"value":1704},"Add ",{"type":58,"tag":149,"props":1706,"children":1708},{"className":1707},[],[1709],{"type":64,"value":1710},"--device-scale-factor 2",{"type":64,"value":1712}," for Retina output, or ",{"type":58,"tag":149,"props":1714,"children":1716},{"className":1715},[],[1717],{"type":64,"value":1718},"--cdp-url \u003Cws>",{"type":64,"value":1720}," plus ",{"type":58,"tag":149,"props":1722,"children":1724},{"className":1723},[],[1725],{"type":64,"value":1726},"--inspector \u003Cpublicly-reachable-url>",{"type":64,"value":1728}," to drive a remote Chromium (e.g. Notte) from a sandbox without a local Chrome install.",{"type":58,"tag":67,"props":1730,"children":1731},{},[1732,1734,1742],{"type":64,"value":1733},"Both commands are documented in full at ",{"type":58,"tag":302,"props":1735,"children":1739},{"href":1736,"rel":1737},"https:\u002F\u002Fdocs.mcp-use.com\u002Ftypescript\u002Ftooling\u002Fclient-cli",[1738],"nofollow",[1740],{"type":64,"value":1741},"docs\u002Ftypescript\u002Ftooling\u002Fclient-cli",{"type":64,"value":180},{"type":58,"tag":109,"props":1744,"children":1745},{},[],{"type":58,"tag":124,"props":1747,"children":1749},{"id":1748},"decision-tree",[1750],{"type":64,"value":1751},"Decision Tree",{"type":58,"tag":182,"props":1753,"children":1756},{"className":1754,"code":1755,"language":64},[185],"What do you need?\n\n├─ New project from scratch\n│  └─> quickstart.md (scaffolding + setup)\n│\n├─ OAuth \u002F user authentication\n│  └─> authentication\u002Foverview.md → provider-specific guide\n│\n├─ Simple backend action (no UI)\n│  └─> Use Tool: server\u002Ftools.md\n│\n├─ Read-only data for clients\n│  └─> Use Resource: server\u002Fresources.md\n│\n├─ Reusable prompt template\n│  └─> Use Prompt: server\u002Fprompts.md\n│\n├─ Cross-cutting logic (logging, auth checks, rate limiting, tool filtering)\n│  └─> Use Middleware: architecture.md#mcp-middleware\n│\n├─ Visual\u002Finteractive UI\n│  └─> Use Widget: widgets\u002Fbasics.md\n│\n├─ Keep model aware of what user is seeing in widget\n│  └─> widgets\u002Fmodel-context.md\n├─ Upload\u002Fdownload files in a widget\n│  └─> widgets\u002Ffiles.md (ChatGPT Apps SDK only)\n│\n├─ Verify a tool or widget from the terminal (agent feedback loop)\n│  └─> See \"Testing from the Terminal\" above — `mcp-use client` for tool runs,\n│      `mcp-use client \u003Cserver> screenshot --tool \u003Ctool>` for headless widget PNGs\n│\n└─ Deploy to production\n   └─> deployment.md (cloud deploy, self-hosting, Docker)\n",[1757],{"type":58,"tag":149,"props":1758,"children":1759},{"__ignoreMap":190},[1760],{"type":64,"value":1755},{"type":58,"tag":109,"props":1762,"children":1763},{},[],{"type":58,"tag":124,"props":1765,"children":1767},{"id":1766},"core-principles",[1768],{"type":64,"value":1769},"Core Principles",{"type":58,"tag":73,"props":1771,"children":1772},{},[1773,1783,1793,1803,1813],{"type":58,"tag":77,"props":1774,"children":1775},{},[1776,1781],{"type":58,"tag":86,"props":1777,"children":1778},{},[1779],{"type":64,"value":1780},"Tools for actions",{"type":64,"value":1782}," - Backend operations with input\u002Foutput",{"type":58,"tag":77,"props":1784,"children":1785},{},[1786,1791],{"type":58,"tag":86,"props":1787,"children":1788},{},[1789],{"type":64,"value":1790},"Resources for data",{"type":64,"value":1792}," - Read-only data clients can fetch",{"type":58,"tag":77,"props":1794,"children":1795},{},[1796,1801],{"type":58,"tag":86,"props":1797,"children":1798},{},[1799],{"type":64,"value":1800},"Prompts for templates",{"type":64,"value":1802}," - Reusable message templates",{"type":58,"tag":77,"props":1804,"children":1805},{},[1806,1811],{"type":58,"tag":86,"props":1807,"children":1808},{},[1809],{"type":64,"value":1810},"Widgets for UI",{"type":64,"value":1812}," - Visual interfaces when helpful",{"type":58,"tag":77,"props":1814,"children":1815},{},[1816,1821],{"type":58,"tag":86,"props":1817,"children":1818},{},[1819],{"type":64,"value":1820},"Mock data first",{"type":64,"value":1822}," - Prototype quickly, connect APIs later",{"type":58,"tag":109,"props":1824,"children":1825},{},[],{"type":58,"tag":124,"props":1827,"children":1829},{"id":1828},"common-mistakes",[1830],{"type":64,"value":1831},"❌ Common Mistakes",{"type":58,"tag":67,"props":1833,"children":1834},{},[1835],{"type":64,"value":1836},"Avoid these anti-patterns found in production MCP servers:",{"type":58,"tag":222,"props":1838,"children":1840},{"id":1839},"tool-definition",[1841],{"type":64,"value":1842},"Tool Definition",{"type":58,"tag":423,"props":1844,"children":1845},{},[1846,1885,1906,1919],{"type":58,"tag":77,"props":1847,"children":1848},{},[1849,1851],{"type":64,"value":1850},"❌ Returning raw objects instead of using response helpers\n",{"type":58,"tag":423,"props":1852,"children":1853},{},[1854],{"type":58,"tag":77,"props":1855,"children":1856},{},[1857,1859,1864,1865,1870,1871,1877,1878,1883],{"type":64,"value":1858},"✅ Use ",{"type":58,"tag":149,"props":1860,"children":1862},{"className":1861},[],[1863],{"type":64,"value":851},{"type":64,"value":710},{"type":58,"tag":149,"props":1866,"children":1868},{"className":1867},[],[1869],{"type":64,"value":858},{"type":64,"value":710},{"type":58,"tag":149,"props":1872,"children":1874},{"className":1873},[],[1875],{"type":64,"value":1876},"widget()",{"type":64,"value":710},{"type":58,"tag":149,"props":1879,"children":1881},{"className":1880},[],[1882],{"type":64,"value":879},{"type":64,"value":1884}," helpers",{"type":58,"tag":77,"props":1886,"children":1887},{},[1888,1890,1896,1898],{"type":64,"value":1889},"❌ Skipping Zod schema ",{"type":58,"tag":149,"props":1891,"children":1893},{"className":1892},[],[1894],{"type":64,"value":1895},".describe()",{"type":64,"value":1897}," on every field\n",{"type":58,"tag":423,"props":1899,"children":1900},{},[1901],{"type":58,"tag":77,"props":1902,"children":1903},{},[1904],{"type":64,"value":1905},"✅ Add descriptions to all schema fields for better AI understanding",{"type":58,"tag":77,"props":1907,"children":1908},{},[1909,1911],{"type":64,"value":1910},"❌ No input validation or sanitization\n",{"type":58,"tag":423,"props":1912,"children":1913},{},[1914],{"type":58,"tag":77,"props":1915,"children":1916},{},[1917],{"type":64,"value":1918},"✅ Validate inputs with Zod, sanitize user-provided data",{"type":58,"tag":77,"props":1920,"children":1921},{},[1922,1924,1929,1931],{"type":64,"value":1923},"❌ Throwing errors instead of returning ",{"type":58,"tag":149,"props":1925,"children":1927},{"className":1926},[],[1928],{"type":64,"value":879},{"type":64,"value":1930}," helper\n",{"type":58,"tag":423,"props":1932,"children":1933},{},[1934],{"type":58,"tag":77,"props":1935,"children":1936},{},[1937,1938,1944],{"type":64,"value":1858},{"type":58,"tag":149,"props":1939,"children":1941},{"className":1940},[],[1942],{"type":64,"value":1943},"error(\"message\")",{"type":64,"value":1945}," for graceful error responses",{"type":58,"tag":222,"props":1947,"children":1949},{"id":1948},"widget-development",[1950],{"type":64,"value":1951},"Widget Development",{"type":58,"tag":423,"props":1953,"children":1954},{},[1955,1987,2005,2037],{"type":58,"tag":77,"props":1956,"children":1957},{},[1958,1960,1966,1968,1973],{"type":64,"value":1959},"❌ Accessing ",{"type":58,"tag":149,"props":1961,"children":1963},{"className":1962},[],[1964],{"type":64,"value":1965},"props",{"type":64,"value":1967}," without checking ",{"type":58,"tag":149,"props":1969,"children":1971},{"className":1970},[],[1972],{"type":64,"value":1016},{"type":58,"tag":423,"props":1974,"children":1975},{},[1976],{"type":58,"tag":77,"props":1977,"children":1978},{},[1979,1981],{"type":64,"value":1980},"✅ Always check ",{"type":58,"tag":149,"props":1982,"children":1984},{"className":1983},[],[1985],{"type":64,"value":1986},"if (isPending) return \u003CLoading\u002F>",{"type":58,"tag":77,"props":1988,"children":1989},{},[1990,1992],{"type":64,"value":1991},"❌ Widget handles server state (filters, selections)\n",{"type":58,"tag":423,"props":1993,"children":1994},{},[1995],{"type":58,"tag":77,"props":1996,"children":1997},{},[1998,2000],{"type":64,"value":1999},"✅ Widgets manage their own UI state with ",{"type":58,"tag":149,"props":2001,"children":2003},{"className":2002},[],[2004],{"type":64,"value":1048},{"type":58,"tag":77,"props":2006,"children":2007},{},[2008,2010,2016,2018,2023],{"type":64,"value":2009},"❌ Missing ",{"type":58,"tag":149,"props":2011,"children":2013},{"className":2012},[],[2014],{"type":64,"value":2015},"McpUseProvider",{"type":64,"value":2017}," wrapper or ",{"type":58,"tag":149,"props":2019,"children":2021},{"className":2020},[],[2022],{"type":64,"value":1127},{"type":58,"tag":423,"props":2024,"children":2025},{},[2026],{"type":58,"tag":77,"props":2027,"children":2028},{},[2029,2031],{"type":64,"value":2030},"✅ Wrap root component: ",{"type":58,"tag":149,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":64,"value":2036},"\u003CMcpUseProvider autoSize>",{"type":58,"tag":77,"props":2038,"children":2039},{},[2040,2042],{"type":64,"value":2041},"❌ Inline styles without theme awareness\n",{"type":58,"tag":423,"props":2043,"children":2044},{},[2045],{"type":58,"tag":77,"props":2046,"children":2047},{},[2048,2049,2054],{"type":64,"value":1858},{"type":58,"tag":149,"props":2050,"children":2052},{"className":2051},[],[2053],{"type":64,"value":1119},{"type":64,"value":2055}," for light\u002Fdark mode support",{"type":58,"tag":222,"props":2057,"children":2059},{"id":2058},"security-production",[2060],{"type":64,"value":2061},"Security & Production",{"type":58,"tag":423,"props":2063,"children":2064},{},[2065,2091,2111,2124],{"type":58,"tag":77,"props":2066,"children":2067},{},[2068,2070],{"type":64,"value":2069},"❌ Hardcoded API keys or secrets in code\n",{"type":58,"tag":423,"props":2071,"children":2072},{},[2073],{"type":58,"tag":77,"props":2074,"children":2075},{},[2076,2077,2083,2085],{"type":64,"value":1858},{"type":58,"tag":149,"props":2078,"children":2080},{"className":2079},[],[2081],{"type":64,"value":2082},"process.env.API_KEY",{"type":64,"value":2084},", document in ",{"type":58,"tag":149,"props":2086,"children":2088},{"className":2087},[],[2089],{"type":64,"value":2090},".env.example",{"type":58,"tag":77,"props":2092,"children":2093},{},[2094,2096],{"type":64,"value":2095},"❌ No error handling in tool handlers\n",{"type":58,"tag":423,"props":2097,"children":2098},{},[2099],{"type":58,"tag":77,"props":2100,"children":2101},{},[2102,2104,2109],{"type":64,"value":2103},"✅ Wrap in try\u002Fcatch, return ",{"type":58,"tag":149,"props":2105,"children":2107},{"className":2106},[],[2108],{"type":64,"value":879},{"type":64,"value":2110}," on failure",{"type":58,"tag":77,"props":2112,"children":2113},{},[2114,2116],{"type":64,"value":2115},"❌ Expensive operations without caching\n",{"type":58,"tag":423,"props":2117,"children":2118},{},[2119],{"type":58,"tag":77,"props":2120,"children":2121},{},[2122],{"type":64,"value":2123},"✅ Cache API calls, computations with TTL",{"type":58,"tag":77,"props":2125,"children":2126},{},[2127,2129],{"type":64,"value":2128},"❌ Missing CORS configuration\n",{"type":58,"tag":423,"props":2130,"children":2131},{},[2132],{"type":58,"tag":77,"props":2133,"children":2134},{},[2135],{"type":64,"value":2136},"✅ Configure CORS for production deployments",{"type":58,"tag":109,"props":2138,"children":2139},{},[],{"type":58,"tag":124,"props":2141,"children":2143},{"id":2142},"golden-rules",[2144],{"type":64,"value":2145},"🔒 Golden Rules",{"type":58,"tag":67,"props":2147,"children":2148},{},[2149],{"type":58,"tag":86,"props":2150,"children":2151},{},[2152],{"type":64,"value":2153},"Opinionated architectural guidelines:",{"type":58,"tag":222,"props":2155,"children":2157},{"id":2156},"_1-one-tool-one-capability",[2158],{"type":64,"value":2159},"1. One Tool = One Capability",{"type":58,"tag":67,"props":2161,"children":2162},{},[2163],{"type":64,"value":2164},"Split broad actions into focused tools:",{"type":58,"tag":423,"props":2166,"children":2167},{},[2168,2181],{"type":58,"tag":77,"props":2169,"children":2170},{},[2171,2173,2179],{"type":64,"value":2172},"❌ ",{"type":58,"tag":149,"props":2174,"children":2176},{"className":2175},[],[2177],{"type":64,"value":2178},"manage-users",{"type":64,"value":2180}," (too vague)",{"type":58,"tag":77,"props":2182,"children":2183},{},[2184,2186,2192,2193,2199,2200],{"type":64,"value":2185},"✅ ",{"type":58,"tag":149,"props":2187,"children":2189},{"className":2188},[],[2190],{"type":64,"value":2191},"create-user",{"type":64,"value":710},{"type":58,"tag":149,"props":2194,"children":2196},{"className":2195},[],[2197],{"type":64,"value":2198},"delete-user",{"type":64,"value":710},{"type":58,"tag":149,"props":2201,"children":2203},{"className":2202},[],[2204],{"type":64,"value":2205},"list-users",{"type":58,"tag":222,"props":2207,"children":2209},{"id":2208},"_2-return-complete-data-upfront",[2210],{"type":64,"value":2211},"2. Return Complete Data Upfront",{"type":58,"tag":67,"props":2213,"children":2214},{},[2215],{"type":64,"value":2216},"Tool calls are expensive. Avoid lazy-loading:",{"type":58,"tag":423,"props":2218,"children":2219},{},[2220,2239],{"type":58,"tag":77,"props":2221,"children":2222},{},[2223,2224,2230,2231,2237],{"type":64,"value":2172},{"type":58,"tag":149,"props":2225,"children":2227},{"className":2226},[],[2228],{"type":64,"value":2229},"list-products",{"type":64,"value":717},{"type":58,"tag":149,"props":2232,"children":2234},{"className":2233},[],[2235],{"type":64,"value":2236},"get-product-details",{"type":64,"value":2238}," (2 calls)",{"type":58,"tag":77,"props":2240,"children":2241},{},[2242,2243,2248],{"type":64,"value":2185},{"type":58,"tag":149,"props":2244,"children":2246},{"className":2245},[],[2247],{"type":64,"value":2229},{"type":64,"value":2249}," returns full data including details",{"type":58,"tag":222,"props":2251,"children":2253},{"id":2252},"_3-widgets-own-their-state",[2254],{"type":64,"value":2255},"3. Widgets Own Their State",{"type":58,"tag":67,"props":2257,"children":2258},{},[2259],{"type":64,"value":2260},"UI state lives in the widget, not in separate tools:",{"type":58,"tag":423,"props":2262,"children":2263},{},[2264,2284],{"type":58,"tag":77,"props":2265,"children":2266},{},[2267,2268,2274,2276,2282],{"type":64,"value":2172},{"type":58,"tag":149,"props":2269,"children":2271},{"className":2270},[],[2272],{"type":64,"value":2273},"select-item",{"type":64,"value":2275}," tool, ",{"type":58,"tag":149,"props":2277,"children":2279},{"className":2278},[],[2280],{"type":64,"value":2281},"set-filter",{"type":64,"value":2283}," tool",{"type":58,"tag":77,"props":2285,"children":2286},{},[2287,2289,2294,2296],{"type":64,"value":2288},"✅ Widget manages with ",{"type":58,"tag":149,"props":2290,"children":2292},{"className":2291},[],[2293],{"type":64,"value":1048},{"type":64,"value":2295}," or ",{"type":58,"tag":149,"props":2297,"children":2299},{"className":2298},[],[2300],{"type":64,"value":1055},{"type":58,"tag":222,"props":2302,"children":2304},{"id":2303},"_4-exposeastool-defaults-to-false",[2305,2307,2313,2315],{"type":64,"value":2306},"4. ",{"type":58,"tag":149,"props":2308,"children":2310},{"className":2309},[],[2311],{"type":64,"value":2312},"exposeAsTool",{"type":64,"value":2314}," Defaults to ",{"type":58,"tag":149,"props":2316,"children":2318},{"className":2317},[],[2319],{"type":64,"value":2320},"false",{"type":58,"tag":67,"props":2322,"children":2323},{},[2324,2326,2332],{"type":64,"value":2325},"Widgets are registered as resources only by default. Use a custom tool (recommended) or set ",{"type":58,"tag":149,"props":2327,"children":2329},{"className":2328},[],[2330],{"type":64,"value":2331},"exposeAsTool: true",{"type":64,"value":2333}," to expose a widget to the model:",{"type":58,"tag":182,"props":2335,"children":2339},{"className":2336,"code":2337,"language":2338,"meta":190,"style":190},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F ✅ ALL 4 STEPS REQUIRED for proper type inference:\n\n\u002F\u002F Step 1: Define schema separately\nconst propsSchema = z.object({\n  title: z.string(),\n  items: z.array(z.string())\n});\n\n\u002F\u002F Step 2: Reference schema variable in metadata\nexport const widgetMetadata: WidgetMetadata = {\n  description: \"...\",\n  props: propsSchema,  \u002F\u002F ← NOT inline z.object()\n  exposeAsTool: false\n};\n\n\u002F\u002F Step 3: Infer Props type from schema variable\ntype Props = z.infer\u003Ctypeof propsSchema>;\n\n\u002F\u002F Step 4: Use typed Props with useWidget\nexport default function MyWidget() {\n  const { props, isPending } = useWidget\u003CProps>();  \u002F\u002F ← Add \u003CProps>\n  \u002F\u002F ...\n}\n","typescript",[2340],{"type":58,"tag":149,"props":2341,"children":2342},{"__ignoreMap":190},[2343,2351,2358,2366,2410,2447,2490,2508,2515,2524,2563,2595,2623,2642,2651,2659,2668,2713,2721,2730,2761,2832,2841],{"type":58,"tag":238,"props":2344,"children":2345},{"class":240,"line":241},[2346],{"type":58,"tag":238,"props":2347,"children":2348},{"style":1530},[2349],{"type":64,"value":2350},"\u002F\u002F ✅ ALL 4 STEPS REQUIRED for proper type inference:\n",{"type":58,"tag":238,"props":2352,"children":2353},{"class":240,"line":262},[2354],{"type":58,"tag":238,"props":2355,"children":2356},{"emptyLinePlaceholder":1635},[2357],{"type":64,"value":1638},{"type":58,"tag":238,"props":2359,"children":2360},{"class":240,"line":276},[2361],{"type":58,"tag":238,"props":2362,"children":2363},{"style":1530},[2364],{"type":64,"value":2365},"\u002F\u002F Step 1: Define schema separately\n",{"type":58,"tag":238,"props":2367,"children":2368},{"class":240,"line":1617},[2369,2375,2380,2386,2391,2395,2400,2405],{"type":58,"tag":238,"props":2370,"children":2372},{"style":2371},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[2373],{"type":64,"value":2374},"const",{"type":58,"tag":238,"props":2376,"children":2377},{"style":1573},[2378],{"type":64,"value":2379}," propsSchema ",{"type":58,"tag":238,"props":2381,"children":2383},{"style":2382},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[2384],{"type":64,"value":2385},"=",{"type":58,"tag":238,"props":2387,"children":2388},{"style":1573},[2389],{"type":64,"value":2390}," z",{"type":58,"tag":238,"props":2392,"children":2393},{"style":2382},[2394],{"type":64,"value":180},{"type":58,"tag":238,"props":2396,"children":2397},{"style":266},[2398],{"type":64,"value":2399},"object",{"type":58,"tag":238,"props":2401,"children":2402},{"style":1573},[2403],{"type":64,"value":2404},"(",{"type":58,"tag":238,"props":2406,"children":2407},{"style":2382},[2408],{"type":64,"value":2409},"{\n",{"type":58,"tag":238,"props":2411,"children":2412},{"class":240,"line":1631},[2413,2419,2424,2428,2432,2437,2442],{"type":58,"tag":238,"props":2414,"children":2416},{"style":2415},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[2417],{"type":64,"value":2418},"  title",{"type":58,"tag":238,"props":2420,"children":2421},{"style":2382},[2422],{"type":64,"value":2423},":",{"type":58,"tag":238,"props":2425,"children":2426},{"style":1573},[2427],{"type":64,"value":2390},{"type":58,"tag":238,"props":2429,"children":2430},{"style":2382},[2431],{"type":64,"value":180},{"type":58,"tag":238,"props":2433,"children":2434},{"style":266},[2435],{"type":64,"value":2436},"string",{"type":58,"tag":238,"props":2438,"children":2439},{"style":1573},[2440],{"type":64,"value":2441},"()",{"type":58,"tag":238,"props":2443,"children":2444},{"style":2382},[2445],{"type":64,"value":2446},",\n",{"type":58,"tag":238,"props":2448,"children":2449},{"class":240,"line":1641},[2450,2455,2459,2463,2467,2472,2477,2481,2485],{"type":58,"tag":238,"props":2451,"children":2452},{"style":2415},[2453],{"type":64,"value":2454},"  items",{"type":58,"tag":238,"props":2456,"children":2457},{"style":2382},[2458],{"type":64,"value":2423},{"type":58,"tag":238,"props":2460,"children":2461},{"style":1573},[2462],{"type":64,"value":2390},{"type":58,"tag":238,"props":2464,"children":2465},{"style":2382},[2466],{"type":64,"value":180},{"type":58,"tag":238,"props":2468,"children":2469},{"style":266},[2470],{"type":64,"value":2471},"array",{"type":58,"tag":238,"props":2473,"children":2474},{"style":1573},[2475],{"type":64,"value":2476},"(z",{"type":58,"tag":238,"props":2478,"children":2479},{"style":2382},[2480],{"type":64,"value":180},{"type":58,"tag":238,"props":2482,"children":2483},{"style":266},[2484],{"type":64,"value":2436},{"type":58,"tag":238,"props":2486,"children":2487},{"style":1573},[2488],{"type":64,"value":2489},"())\n",{"type":58,"tag":238,"props":2491,"children":2492},{"class":240,"line":1650},[2493,2498,2503],{"type":58,"tag":238,"props":2494,"children":2495},{"style":2382},[2496],{"type":64,"value":2497},"}",{"type":58,"tag":238,"props":2499,"children":2500},{"style":1573},[2501],{"type":64,"value":2502},")",{"type":58,"tag":238,"props":2504,"children":2505},{"style":2382},[2506],{"type":64,"value":2507},";\n",{"type":58,"tag":238,"props":2509,"children":2510},{"class":240,"line":1684},[2511],{"type":58,"tag":238,"props":2512,"children":2513},{"emptyLinePlaceholder":1635},[2514],{"type":64,"value":1638},{"type":58,"tag":238,"props":2516,"children":2518},{"class":240,"line":2517},9,[2519],{"type":58,"tag":238,"props":2520,"children":2521},{"style":1530},[2522],{"type":64,"value":2523},"\u002F\u002F Step 2: Reference schema variable in metadata\n",{"type":58,"tag":238,"props":2525,"children":2527},{"class":240,"line":2526},10,[2528,2534,2539,2544,2548,2553,2558],{"type":58,"tag":238,"props":2529,"children":2531},{"style":2530},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[2532],{"type":64,"value":2533},"export",{"type":58,"tag":238,"props":2535,"children":2536},{"style":2371},[2537],{"type":64,"value":2538}," const",{"type":58,"tag":238,"props":2540,"children":2541},{"style":1573},[2542],{"type":64,"value":2543}," widgetMetadata",{"type":58,"tag":238,"props":2545,"children":2546},{"style":2382},[2547],{"type":64,"value":2423},{"type":58,"tag":238,"props":2549,"children":2550},{"style":245},[2551],{"type":64,"value":2552}," WidgetMetadata",{"type":58,"tag":238,"props":2554,"children":2555},{"style":2382},[2556],{"type":64,"value":2557}," =",{"type":58,"tag":238,"props":2559,"children":2560},{"style":2382},[2561],{"type":64,"value":2562}," {\n",{"type":58,"tag":238,"props":2564,"children":2566},{"class":240,"line":2565},11,[2567,2572,2576,2581,2586,2591],{"type":58,"tag":238,"props":2568,"children":2569},{"style":2415},[2570],{"type":64,"value":2571},"  description",{"type":58,"tag":238,"props":2573,"children":2574},{"style":2382},[2575],{"type":64,"value":2423},{"type":58,"tag":238,"props":2577,"children":2578},{"style":2382},[2579],{"type":64,"value":2580}," \"",{"type":58,"tag":238,"props":2582,"children":2583},{"style":251},[2584],{"type":64,"value":2585},"...",{"type":58,"tag":238,"props":2587,"children":2588},{"style":2382},[2589],{"type":64,"value":2590},"\"",{"type":58,"tag":238,"props":2592,"children":2593},{"style":2382},[2594],{"type":64,"value":2446},{"type":58,"tag":238,"props":2596,"children":2598},{"class":240,"line":2597},12,[2599,2604,2608,2613,2618],{"type":58,"tag":238,"props":2600,"children":2601},{"style":2415},[2602],{"type":64,"value":2603},"  props",{"type":58,"tag":238,"props":2605,"children":2606},{"style":2382},[2607],{"type":64,"value":2423},{"type":58,"tag":238,"props":2609,"children":2610},{"style":1573},[2611],{"type":64,"value":2612}," propsSchema",{"type":58,"tag":238,"props":2614,"children":2615},{"style":2382},[2616],{"type":64,"value":2617},",",{"type":58,"tag":238,"props":2619,"children":2620},{"style":1530},[2621],{"type":64,"value":2622},"  \u002F\u002F ← NOT inline z.object()\n",{"type":58,"tag":238,"props":2624,"children":2626},{"class":240,"line":2625},13,[2627,2632,2636],{"type":58,"tag":238,"props":2628,"children":2629},{"style":2415},[2630],{"type":64,"value":2631},"  exposeAsTool",{"type":58,"tag":238,"props":2633,"children":2634},{"style":2382},[2635],{"type":64,"value":2423},{"type":58,"tag":238,"props":2637,"children":2639},{"style":2638},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[2640],{"type":64,"value":2641}," false\n",{"type":58,"tag":238,"props":2643,"children":2645},{"class":240,"line":2644},14,[2646],{"type":58,"tag":238,"props":2647,"children":2648},{"style":2382},[2649],{"type":64,"value":2650},"};\n",{"type":58,"tag":238,"props":2652,"children":2654},{"class":240,"line":2653},15,[2655],{"type":58,"tag":238,"props":2656,"children":2657},{"emptyLinePlaceholder":1635},[2658],{"type":64,"value":1638},{"type":58,"tag":238,"props":2660,"children":2662},{"class":240,"line":2661},16,[2663],{"type":58,"tag":238,"props":2664,"children":2665},{"style":1530},[2666],{"type":64,"value":2667},"\u002F\u002F Step 3: Infer Props type from schema variable\n",{"type":58,"tag":238,"props":2669,"children":2671},{"class":240,"line":2670},17,[2672,2677,2682,2686,2690,2694,2699,2704,2708],{"type":58,"tag":238,"props":2673,"children":2674},{"style":2371},[2675],{"type":64,"value":2676},"type",{"type":58,"tag":238,"props":2678,"children":2679},{"style":245},[2680],{"type":64,"value":2681}," Props",{"type":58,"tag":238,"props":2683,"children":2684},{"style":2382},[2685],{"type":64,"value":2557},{"type":58,"tag":238,"props":2687,"children":2688},{"style":245},[2689],{"type":64,"value":2390},{"type":58,"tag":238,"props":2691,"children":2692},{"style":2382},[2693],{"type":64,"value":180},{"type":58,"tag":238,"props":2695,"children":2696},{"style":245},[2697],{"type":64,"value":2698},"infer",{"type":58,"tag":238,"props":2700,"children":2701},{"style":2382},[2702],{"type":64,"value":2703},"\u003Ctypeof",{"type":58,"tag":238,"props":2705,"children":2706},{"style":1573},[2707],{"type":64,"value":2612},{"type":58,"tag":238,"props":2709,"children":2710},{"style":2382},[2711],{"type":64,"value":2712},">;\n",{"type":58,"tag":238,"props":2714,"children":2716},{"class":240,"line":2715},18,[2717],{"type":58,"tag":238,"props":2718,"children":2719},{"emptyLinePlaceholder":1635},[2720],{"type":64,"value":1638},{"type":58,"tag":238,"props":2722,"children":2724},{"class":240,"line":2723},19,[2725],{"type":58,"tag":238,"props":2726,"children":2727},{"style":1530},[2728],{"type":64,"value":2729},"\u002F\u002F Step 4: Use typed Props with useWidget\n",{"type":58,"tag":238,"props":2731,"children":2733},{"class":240,"line":2732},20,[2734,2738,2743,2748,2753,2757],{"type":58,"tag":238,"props":2735,"children":2736},{"style":2530},[2737],{"type":64,"value":2533},{"type":58,"tag":238,"props":2739,"children":2740},{"style":2530},[2741],{"type":64,"value":2742}," default",{"type":58,"tag":238,"props":2744,"children":2745},{"style":2371},[2746],{"type":64,"value":2747}," function",{"type":58,"tag":238,"props":2749,"children":2750},{"style":266},[2751],{"type":64,"value":2752}," MyWidget",{"type":58,"tag":238,"props":2754,"children":2755},{"style":2382},[2756],{"type":64,"value":2441},{"type":58,"tag":238,"props":2758,"children":2759},{"style":2382},[2760],{"type":64,"value":2562},{"type":58,"tag":238,"props":2762,"children":2764},{"class":240,"line":2763},21,[2765,2770,2775,2780,2784,2789,2794,2798,2803,2808,2813,2818,2822,2827],{"type":58,"tag":238,"props":2766,"children":2767},{"style":2371},[2768],{"type":64,"value":2769},"  const",{"type":58,"tag":238,"props":2771,"children":2772},{"style":2382},[2773],{"type":64,"value":2774}," {",{"type":58,"tag":238,"props":2776,"children":2777},{"style":1573},[2778],{"type":64,"value":2779}," props",{"type":58,"tag":238,"props":2781,"children":2782},{"style":2382},[2783],{"type":64,"value":2617},{"type":58,"tag":238,"props":2785,"children":2786},{"style":1573},[2787],{"type":64,"value":2788}," isPending",{"type":58,"tag":238,"props":2790,"children":2791},{"style":2382},[2792],{"type":64,"value":2793}," }",{"type":58,"tag":238,"props":2795,"children":2796},{"style":2382},[2797],{"type":64,"value":2557},{"type":58,"tag":238,"props":2799,"children":2800},{"style":266},[2801],{"type":64,"value":2802}," useWidget",{"type":58,"tag":238,"props":2804,"children":2805},{"style":2382},[2806],{"type":64,"value":2807},"\u003C",{"type":58,"tag":238,"props":2809,"children":2810},{"style":245},[2811],{"type":64,"value":2812},"Props",{"type":58,"tag":238,"props":2814,"children":2815},{"style":2382},[2816],{"type":64,"value":2817},">",{"type":58,"tag":238,"props":2819,"children":2820},{"style":2415},[2821],{"type":64,"value":2441},{"type":58,"tag":238,"props":2823,"children":2824},{"style":2382},[2825],{"type":64,"value":2826},";",{"type":58,"tag":238,"props":2828,"children":2829},{"style":1530},[2830],{"type":64,"value":2831},"  \u002F\u002F ← Add \u003CProps>\n",{"type":58,"tag":238,"props":2833,"children":2835},{"class":240,"line":2834},22,[2836],{"type":58,"tag":238,"props":2837,"children":2838},{"style":1530},[2839],{"type":64,"value":2840},"  \u002F\u002F ...\n",{"type":58,"tag":238,"props":2842,"children":2844},{"class":240,"line":2843},23,[2845],{"type":58,"tag":238,"props":2846,"children":2847},{"style":2382},[2848],{"type":64,"value":2849},"}\n",{"type":58,"tag":67,"props":2851,"children":2852},{},[2853,2855,2860],{"type":64,"value":2854},"⚠️ ",{"type":58,"tag":86,"props":2856,"children":2857},{},[2858],{"type":64,"value":2859},"Common mistake:",{"type":64,"value":2861}," Only doing steps 1-2 but skipping 3-4 (loses type safety)",{"type":58,"tag":222,"props":2863,"children":2865},{"id":2864},"_5-validate-at-boundaries-only",[2866],{"type":64,"value":2867},"5. Validate at Boundaries Only",{"type":58,"tag":423,"props":2869,"children":2870},{},[2871,2876,2881],{"type":58,"tag":77,"props":2872,"children":2873},{},[2874],{"type":64,"value":2875},"Trust internal code and framework guarantees",{"type":58,"tag":77,"props":2877,"children":2878},{},[2879],{"type":64,"value":2880},"Validate user input, external API responses",{"type":58,"tag":77,"props":2882,"children":2883},{},[2884],{"type":64,"value":2885},"Don't add error handling for scenarios that can't happen",{"type":58,"tag":222,"props":2887,"children":2889},{"id":2888},"_6-prefer-widgets-for-browsingcomparing",[2890],{"type":64,"value":2891},"6. Prefer Widgets for Browsing\u002FComparing",{"type":58,"tag":67,"props":2893,"children":2894},{},[2895],{"type":64,"value":2896},"When in doubt, add a widget. Visual UI improves:",{"type":58,"tag":423,"props":2898,"children":2899},{},[2900,2905,2910],{"type":58,"tag":77,"props":2901,"children":2902},{},[2903],{"type":64,"value":2904},"Browsing multiple items",{"type":58,"tag":77,"props":2906,"children":2907},{},[2908],{"type":64,"value":2909},"Comparing data side-by-side",{"type":58,"tag":77,"props":2911,"children":2912},{},[2913],{"type":64,"value":2914},"Interactive selection workflows",{"type":58,"tag":109,"props":2916,"children":2917},{},[],{"type":58,"tag":124,"props":2919,"children":2921},{"id":2920},"quick-reference",[2922],{"type":64,"value":2923},"Quick Reference",{"type":58,"tag":222,"props":2925,"children":2927},{"id":2926},"minimal-server",[2928],{"type":64,"value":2929},"Minimal Server",{"type":58,"tag":182,"props":2931,"children":2933},{"className":2336,"code":2932,"language":2338,"meta":190,"style":190},"import { MCPServer, text } from \"mcp-use\u002Fserver\";\nimport { z } from \"zod\";\n\nconst server = new MCPServer({\n  name: \"my-server\",\n  title: \"My Server\",\n  version: \"1.0.0\"\n});\n\nserver.tool(\n  {\n    name: \"greet\",\n    description: \"Greet a user\",\n    schema: z.object({ name: z.string().describe(\"User's name\") })\n  },\n  async ({ name }) => text(\"Hello \" + name + \"!\"),\n);\n\nserver.listen();\n",[2934],{"type":58,"tag":149,"props":2935,"children":2936},{"__ignoreMap":190},[2937,2989,3029,3036,3069,3098,3126,3152,3167,3174,3196,3204,3233,3262,3360,3368,3453,3464,3471],{"type":58,"tag":238,"props":2938,"children":2939},{"class":240,"line":241},[2940,2945,2949,2954,2958,2963,2967,2972,2976,2981,2985],{"type":58,"tag":238,"props":2941,"children":2942},{"style":2530},[2943],{"type":64,"value":2944},"import",{"type":58,"tag":238,"props":2946,"children":2947},{"style":2382},[2948],{"type":64,"value":2774},{"type":58,"tag":238,"props":2950,"children":2951},{"style":1573},[2952],{"type":64,"value":2953}," MCPServer",{"type":58,"tag":238,"props":2955,"children":2956},{"style":2382},[2957],{"type":64,"value":2617},{"type":58,"tag":238,"props":2959,"children":2960},{"style":1573},[2961],{"type":64,"value":2962}," text",{"type":58,"tag":238,"props":2964,"children":2965},{"style":2382},[2966],{"type":64,"value":2793},{"type":58,"tag":238,"props":2968,"children":2969},{"style":2530},[2970],{"type":64,"value":2971}," from",{"type":58,"tag":238,"props":2973,"children":2974},{"style":2382},[2975],{"type":64,"value":2580},{"type":58,"tag":238,"props":2977,"children":2978},{"style":251},[2979],{"type":64,"value":2980},"mcp-use\u002Fserver",{"type":58,"tag":238,"props":2982,"children":2983},{"style":2382},[2984],{"type":64,"value":2590},{"type":58,"tag":238,"props":2986,"children":2987},{"style":2382},[2988],{"type":64,"value":2507},{"type":58,"tag":238,"props":2990,"children":2991},{"class":240,"line":262},[2992,2996,3000,3004,3008,3012,3016,3021,3025],{"type":58,"tag":238,"props":2993,"children":2994},{"style":2530},[2995],{"type":64,"value":2944},{"type":58,"tag":238,"props":2997,"children":2998},{"style":2382},[2999],{"type":64,"value":2774},{"type":58,"tag":238,"props":3001,"children":3002},{"style":1573},[3003],{"type":64,"value":2390},{"type":58,"tag":238,"props":3005,"children":3006},{"style":2382},[3007],{"type":64,"value":2793},{"type":58,"tag":238,"props":3009,"children":3010},{"style":2530},[3011],{"type":64,"value":2971},{"type":58,"tag":238,"props":3013,"children":3014},{"style":2382},[3015],{"type":64,"value":2580},{"type":58,"tag":238,"props":3017,"children":3018},{"style":251},[3019],{"type":64,"value":3020},"zod",{"type":58,"tag":238,"props":3022,"children":3023},{"style":2382},[3024],{"type":64,"value":2590},{"type":58,"tag":238,"props":3026,"children":3027},{"style":2382},[3028],{"type":64,"value":2507},{"type":58,"tag":238,"props":3030,"children":3031},{"class":240,"line":276},[3032],{"type":58,"tag":238,"props":3033,"children":3034},{"emptyLinePlaceholder":1635},[3035],{"type":64,"value":1638},{"type":58,"tag":238,"props":3037,"children":3038},{"class":240,"line":1617},[3039,3043,3048,3052,3057,3061,3065],{"type":58,"tag":238,"props":3040,"children":3041},{"style":2371},[3042],{"type":64,"value":2374},{"type":58,"tag":238,"props":3044,"children":3045},{"style":1573},[3046],{"type":64,"value":3047}," server ",{"type":58,"tag":238,"props":3049,"children":3050},{"style":2382},[3051],{"type":64,"value":2385},{"type":58,"tag":238,"props":3053,"children":3054},{"style":2382},[3055],{"type":64,"value":3056}," new",{"type":58,"tag":238,"props":3058,"children":3059},{"style":266},[3060],{"type":64,"value":2953},{"type":58,"tag":238,"props":3062,"children":3063},{"style":1573},[3064],{"type":64,"value":2404},{"type":58,"tag":238,"props":3066,"children":3067},{"style":2382},[3068],{"type":64,"value":2409},{"type":58,"tag":238,"props":3070,"children":3071},{"class":240,"line":1631},[3072,3077,3081,3085,3090,3094],{"type":58,"tag":238,"props":3073,"children":3074},{"style":2415},[3075],{"type":64,"value":3076},"  name",{"type":58,"tag":238,"props":3078,"children":3079},{"style":2382},[3080],{"type":64,"value":2423},{"type":58,"tag":238,"props":3082,"children":3083},{"style":2382},[3084],{"type":64,"value":2580},{"type":58,"tag":238,"props":3086,"children":3087},{"style":251},[3088],{"type":64,"value":3089},"my-server",{"type":58,"tag":238,"props":3091,"children":3092},{"style":2382},[3093],{"type":64,"value":2590},{"type":58,"tag":238,"props":3095,"children":3096},{"style":2382},[3097],{"type":64,"value":2446},{"type":58,"tag":238,"props":3099,"children":3100},{"class":240,"line":1641},[3101,3105,3109,3113,3118,3122],{"type":58,"tag":238,"props":3102,"children":3103},{"style":2415},[3104],{"type":64,"value":2418},{"type":58,"tag":238,"props":3106,"children":3107},{"style":2382},[3108],{"type":64,"value":2423},{"type":58,"tag":238,"props":3110,"children":3111},{"style":2382},[3112],{"type":64,"value":2580},{"type":58,"tag":238,"props":3114,"children":3115},{"style":251},[3116],{"type":64,"value":3117},"My Server",{"type":58,"tag":238,"props":3119,"children":3120},{"style":2382},[3121],{"type":64,"value":2590},{"type":58,"tag":238,"props":3123,"children":3124},{"style":2382},[3125],{"type":64,"value":2446},{"type":58,"tag":238,"props":3127,"children":3128},{"class":240,"line":1650},[3129,3134,3138,3142,3147],{"type":58,"tag":238,"props":3130,"children":3131},{"style":2415},[3132],{"type":64,"value":3133},"  version",{"type":58,"tag":238,"props":3135,"children":3136},{"style":2382},[3137],{"type":64,"value":2423},{"type":58,"tag":238,"props":3139,"children":3140},{"style":2382},[3141],{"type":64,"value":2580},{"type":58,"tag":238,"props":3143,"children":3144},{"style":251},[3145],{"type":64,"value":3146},"1.0.0",{"type":58,"tag":238,"props":3148,"children":3149},{"style":2382},[3150],{"type":64,"value":3151},"\"\n",{"type":58,"tag":238,"props":3153,"children":3154},{"class":240,"line":1684},[3155,3159,3163],{"type":58,"tag":238,"props":3156,"children":3157},{"style":2382},[3158],{"type":64,"value":2497},{"type":58,"tag":238,"props":3160,"children":3161},{"style":1573},[3162],{"type":64,"value":2502},{"type":58,"tag":238,"props":3164,"children":3165},{"style":2382},[3166],{"type":64,"value":2507},{"type":58,"tag":238,"props":3168,"children":3169},{"class":240,"line":2517},[3170],{"type":58,"tag":238,"props":3171,"children":3172},{"emptyLinePlaceholder":1635},[3173],{"type":64,"value":1638},{"type":58,"tag":238,"props":3175,"children":3176},{"class":240,"line":2526},[3177,3182,3186,3191],{"type":58,"tag":238,"props":3178,"children":3179},{"style":1573},[3180],{"type":64,"value":3181},"server",{"type":58,"tag":238,"props":3183,"children":3184},{"style":2382},[3185],{"type":64,"value":180},{"type":58,"tag":238,"props":3187,"children":3188},{"style":266},[3189],{"type":64,"value":3190},"tool",{"type":58,"tag":238,"props":3192,"children":3193},{"style":1573},[3194],{"type":64,"value":3195},"(\n",{"type":58,"tag":238,"props":3197,"children":3198},{"class":240,"line":2565},[3199],{"type":58,"tag":238,"props":3200,"children":3201},{"style":2382},[3202],{"type":64,"value":3203},"  {\n",{"type":58,"tag":238,"props":3205,"children":3206},{"class":240,"line":2597},[3207,3212,3216,3220,3225,3229],{"type":58,"tag":238,"props":3208,"children":3209},{"style":2415},[3210],{"type":64,"value":3211},"    name",{"type":58,"tag":238,"props":3213,"children":3214},{"style":2382},[3215],{"type":64,"value":2423},{"type":58,"tag":238,"props":3217,"children":3218},{"style":2382},[3219],{"type":64,"value":2580},{"type":58,"tag":238,"props":3221,"children":3222},{"style":251},[3223],{"type":64,"value":3224},"greet",{"type":58,"tag":238,"props":3226,"children":3227},{"style":2382},[3228],{"type":64,"value":2590},{"type":58,"tag":238,"props":3230,"children":3231},{"style":2382},[3232],{"type":64,"value":2446},{"type":58,"tag":238,"props":3234,"children":3235},{"class":240,"line":2625},[3236,3241,3245,3249,3254,3258],{"type":58,"tag":238,"props":3237,"children":3238},{"style":2415},[3239],{"type":64,"value":3240},"    description",{"type":58,"tag":238,"props":3242,"children":3243},{"style":2382},[3244],{"type":64,"value":2423},{"type":58,"tag":238,"props":3246,"children":3247},{"style":2382},[3248],{"type":64,"value":2580},{"type":58,"tag":238,"props":3250,"children":3251},{"style":251},[3252],{"type":64,"value":3253},"Greet a user",{"type":58,"tag":238,"props":3255,"children":3256},{"style":2382},[3257],{"type":64,"value":2590},{"type":58,"tag":238,"props":3259,"children":3260},{"style":2382},[3261],{"type":64,"value":2446},{"type":58,"tag":238,"props":3263,"children":3264},{"class":240,"line":2644},[3265,3270,3274,3278,3282,3286,3290,3295,3300,3304,3308,3312,3316,3320,3324,3329,3333,3337,3342,3346,3351,3355],{"type":58,"tag":238,"props":3266,"children":3267},{"style":2415},[3268],{"type":64,"value":3269},"    schema",{"type":58,"tag":238,"props":3271,"children":3272},{"style":2382},[3273],{"type":64,"value":2423},{"type":58,"tag":238,"props":3275,"children":3276},{"style":1573},[3277],{"type":64,"value":2390},{"type":58,"tag":238,"props":3279,"children":3280},{"style":2382},[3281],{"type":64,"value":180},{"type":58,"tag":238,"props":3283,"children":3284},{"style":266},[3285],{"type":64,"value":2399},{"type":58,"tag":238,"props":3287,"children":3288},{"style":1573},[3289],{"type":64,"value":2404},{"type":58,"tag":238,"props":3291,"children":3292},{"style":2382},[3293],{"type":64,"value":3294},"{",{"type":58,"tag":238,"props":3296,"children":3297},{"style":2415},[3298],{"type":64,"value":3299}," name",{"type":58,"tag":238,"props":3301,"children":3302},{"style":2382},[3303],{"type":64,"value":2423},{"type":58,"tag":238,"props":3305,"children":3306},{"style":1573},[3307],{"type":64,"value":2390},{"type":58,"tag":238,"props":3309,"children":3310},{"style":2382},[3311],{"type":64,"value":180},{"type":58,"tag":238,"props":3313,"children":3314},{"style":266},[3315],{"type":64,"value":2436},{"type":58,"tag":238,"props":3317,"children":3318},{"style":1573},[3319],{"type":64,"value":2441},{"type":58,"tag":238,"props":3321,"children":3322},{"style":2382},[3323],{"type":64,"value":180},{"type":58,"tag":238,"props":3325,"children":3326},{"style":266},[3327],{"type":64,"value":3328},"describe",{"type":58,"tag":238,"props":3330,"children":3331},{"style":1573},[3332],{"type":64,"value":2404},{"type":58,"tag":238,"props":3334,"children":3335},{"style":2382},[3336],{"type":64,"value":2590},{"type":58,"tag":238,"props":3338,"children":3339},{"style":251},[3340],{"type":64,"value":3341},"User's name",{"type":58,"tag":238,"props":3343,"children":3344},{"style":2382},[3345],{"type":64,"value":2590},{"type":58,"tag":238,"props":3347,"children":3348},{"style":1573},[3349],{"type":64,"value":3350},") ",{"type":58,"tag":238,"props":3352,"children":3353},{"style":2382},[3354],{"type":64,"value":2497},{"type":58,"tag":238,"props":3356,"children":3357},{"style":1573},[3358],{"type":64,"value":3359},")\n",{"type":58,"tag":238,"props":3361,"children":3362},{"class":240,"line":2653},[3363],{"type":58,"tag":238,"props":3364,"children":3365},{"style":2382},[3366],{"type":64,"value":3367},"  },\n",{"type":58,"tag":238,"props":3369,"children":3370},{"class":240,"line":2661},[3371,3376,3381,3386,3391,3396,3400,3404,3408,3413,3417,3422,3427,3432,3436,3441,3445,3449],{"type":58,"tag":238,"props":3372,"children":3373},{"style":2371},[3374],{"type":64,"value":3375},"  async",{"type":58,"tag":238,"props":3377,"children":3378},{"style":2382},[3379],{"type":64,"value":3380}," ({",{"type":58,"tag":238,"props":3382,"children":3384},{"style":3383},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3385],{"type":64,"value":3299},{"type":58,"tag":238,"props":3387,"children":3388},{"style":2382},[3389],{"type":64,"value":3390}," })",{"type":58,"tag":238,"props":3392,"children":3393},{"style":2371},[3394],{"type":64,"value":3395}," =>",{"type":58,"tag":238,"props":3397,"children":3398},{"style":266},[3399],{"type":64,"value":2962},{"type":58,"tag":238,"props":3401,"children":3402},{"style":1573},[3403],{"type":64,"value":2404},{"type":58,"tag":238,"props":3405,"children":3406},{"style":2382},[3407],{"type":64,"value":2590},{"type":58,"tag":238,"props":3409,"children":3410},{"style":251},[3411],{"type":64,"value":3412},"Hello ",{"type":58,"tag":238,"props":3414,"children":3415},{"style":2382},[3416],{"type":64,"value":2590},{"type":58,"tag":238,"props":3418,"children":3419},{"style":2382},[3420],{"type":64,"value":3421}," +",{"type":58,"tag":238,"props":3423,"children":3424},{"style":1573},[3425],{"type":64,"value":3426}," name ",{"type":58,"tag":238,"props":3428,"children":3429},{"style":2382},[3430],{"type":64,"value":3431},"+",{"type":58,"tag":238,"props":3433,"children":3434},{"style":2382},[3435],{"type":64,"value":2580},{"type":58,"tag":238,"props":3437,"children":3438},{"style":251},[3439],{"type":64,"value":3440},"!",{"type":58,"tag":238,"props":3442,"children":3443},{"style":2382},[3444],{"type":64,"value":2590},{"type":58,"tag":238,"props":3446,"children":3447},{"style":1573},[3448],{"type":64,"value":2502},{"type":58,"tag":238,"props":3450,"children":3451},{"style":2382},[3452],{"type":64,"value":2446},{"type":58,"tag":238,"props":3454,"children":3455},{"class":240,"line":2670},[3456,3460],{"type":58,"tag":238,"props":3457,"children":3458},{"style":1573},[3459],{"type":64,"value":2502},{"type":58,"tag":238,"props":3461,"children":3462},{"style":2382},[3463],{"type":64,"value":2507},{"type":58,"tag":238,"props":3465,"children":3466},{"class":240,"line":2715},[3467],{"type":58,"tag":238,"props":3468,"children":3469},{"emptyLinePlaceholder":1635},[3470],{"type":64,"value":1638},{"type":58,"tag":238,"props":3472,"children":3473},{"class":240,"line":2723},[3474,3478,3482,3487,3491],{"type":58,"tag":238,"props":3475,"children":3476},{"style":1573},[3477],{"type":64,"value":3181},{"type":58,"tag":238,"props":3479,"children":3480},{"style":2382},[3481],{"type":64,"value":180},{"type":58,"tag":238,"props":3483,"children":3484},{"style":266},[3485],{"type":64,"value":3486},"listen",{"type":58,"tag":238,"props":3488,"children":3489},{"style":1573},[3490],{"type":64,"value":2441},{"type":58,"tag":238,"props":3492,"children":3493},{"style":2382},[3494],{"type":64,"value":2507},{"type":58,"tag":109,"props":3496,"children":3497},{},[],{"type":58,"tag":124,"props":3499,"children":3501},{"id":3500},"response-helpers",[3502],{"type":64,"value":3503},"Response Helpers",{"type":58,"tag":3505,"props":3506,"children":3507},"table",{},[3508,3532],{"type":58,"tag":3509,"props":3510,"children":3511},"thead",{},[3512],{"type":58,"tag":3513,"props":3514,"children":3515},"tr",{},[3516,3522,3527],{"type":58,"tag":3517,"props":3518,"children":3519},"th",{},[3520],{"type":64,"value":3521},"Helper",{"type":58,"tag":3517,"props":3523,"children":3524},{},[3525],{"type":64,"value":3526},"Use When",{"type":58,"tag":3517,"props":3528,"children":3529},{},[3530],{"type":64,"value":3531},"Example",{"type":58,"tag":3533,"props":3534,"children":3535},"tbody",{},[3536,3562,3587,3612,3637,3662,3687],{"type":58,"tag":3513,"props":3537,"children":3538},{},[3539,3548,3553],{"type":58,"tag":3540,"props":3541,"children":3542},"td",{},[3543],{"type":58,"tag":149,"props":3544,"children":3546},{"className":3545},[],[3547],{"type":64,"value":851},{"type":58,"tag":3540,"props":3549,"children":3550},{},[3551],{"type":64,"value":3552},"Simple string response",{"type":58,"tag":3540,"props":3554,"children":3555},{},[3556],{"type":58,"tag":149,"props":3557,"children":3559},{"className":3558},[],[3560],{"type":64,"value":3561},"text(\"Success!\")",{"type":58,"tag":3513,"props":3563,"children":3564},{},[3565,3573,3578],{"type":58,"tag":3540,"props":3566,"children":3567},{},[3568],{"type":58,"tag":149,"props":3569,"children":3571},{"className":3570},[],[3572],{"type":64,"value":858},{"type":58,"tag":3540,"props":3574,"children":3575},{},[3576],{"type":64,"value":3577},"Structured data",{"type":58,"tag":3540,"props":3579,"children":3580},{},[3581],{"type":58,"tag":149,"props":3582,"children":3584},{"className":3583},[],[3585],{"type":64,"value":3586},"object({ status: \"ok\" })",{"type":58,"tag":3513,"props":3588,"children":3589},{},[3590,3598,3603],{"type":58,"tag":3540,"props":3591,"children":3592},{},[3593],{"type":58,"tag":149,"props":3594,"children":3596},{"className":3595},[],[3597],{"type":64,"value":865},{"type":58,"tag":3540,"props":3599,"children":3600},{},[3601],{"type":64,"value":3602},"Formatted text",{"type":58,"tag":3540,"props":3604,"children":3605},{},[3606],{"type":58,"tag":149,"props":3607,"children":3609},{"className":3608},[],[3610],{"type":64,"value":3611},"markdown(\"# Title\\nContent\")",{"type":58,"tag":3513,"props":3613,"children":3614},{},[3615,3623,3628],{"type":58,"tag":3540,"props":3616,"children":3617},{},[3618],{"type":58,"tag":149,"props":3619,"children":3621},{"className":3620},[],[3622],{"type":64,"value":1876},{"type":58,"tag":3540,"props":3624,"children":3625},{},[3626],{"type":64,"value":3627},"Visual UI",{"type":58,"tag":3540,"props":3629,"children":3630},{},[3631],{"type":58,"tag":149,"props":3632,"children":3634},{"className":3633},[],[3635],{"type":64,"value":3636},"widget({ props: {...}, output: text(...) })",{"type":58,"tag":3513,"props":3638,"children":3639},{},[3640,3648,3653],{"type":58,"tag":3540,"props":3641,"children":3642},{},[3643],{"type":58,"tag":149,"props":3644,"children":3646},{"className":3645},[],[3647],{"type":64,"value":886},{"type":58,"tag":3540,"props":3649,"children":3650},{},[3651],{"type":64,"value":3652},"Multiple contents",{"type":58,"tag":3540,"props":3654,"children":3655},{},[3656],{"type":58,"tag":149,"props":3657,"children":3659},{"className":3658},[],[3660],{"type":64,"value":3661},"mix(text(\"Hi\"), image(url))",{"type":58,"tag":3513,"props":3663,"children":3664},{},[3665,3673,3678],{"type":58,"tag":3540,"props":3666,"children":3667},{},[3668],{"type":58,"tag":149,"props":3669,"children":3671},{"className":3670},[],[3672],{"type":64,"value":879},{"type":58,"tag":3540,"props":3674,"children":3675},{},[3676],{"type":64,"value":3677},"Error responses",{"type":58,"tag":3540,"props":3679,"children":3680},{},[3681],{"type":58,"tag":149,"props":3682,"children":3684},{"className":3683},[],[3685],{"type":64,"value":3686},"error(\"Failed to fetch data\")",{"type":58,"tag":3513,"props":3688,"children":3689},{},[3690,3699,3704],{"type":58,"tag":3540,"props":3691,"children":3692},{},[3693],{"type":58,"tag":149,"props":3694,"children":3696},{"className":3695},[],[3697],{"type":64,"value":3698},"resource()",{"type":58,"tag":3540,"props":3700,"children":3701},{},[3702],{"type":64,"value":3703},"Embed resource refs",{"type":58,"tag":3540,"props":3705,"children":3706},{},[3707],{"type":58,"tag":149,"props":3708,"children":3710},{"className":3709},[],[3711],{"type":64,"value":3712},"resource(\"docs:\u002F\u002Fguide\", \"text\u002Fmarkdown\")",{"type":58,"tag":67,"props":3714,"children":3715},{},[3716],{"type":58,"tag":86,"props":3717,"children":3718},{},[3719],{"type":64,"value":3720},"Server methods:",{"type":58,"tag":423,"props":3722,"children":3723},{},[3724,3735,3746,3757,3768,3778,3789,3800,3811,3822],{"type":58,"tag":77,"props":3725,"children":3726},{},[3727,3733],{"type":58,"tag":149,"props":3728,"children":3730},{"className":3729},[],[3731],{"type":64,"value":3732},"server.tool()",{"type":64,"value":3734}," - Define executable tool",{"type":58,"tag":77,"props":3736,"children":3737},{},[3738,3744],{"type":58,"tag":149,"props":3739,"children":3741},{"className":3740},[],[3742],{"type":64,"value":3743},"server.resource()",{"type":64,"value":3745}," - Define static\u002Fdynamic resource",{"type":58,"tag":77,"props":3747,"children":3748},{},[3749,3755],{"type":58,"tag":149,"props":3750,"children":3752},{"className":3751},[],[3753],{"type":64,"value":3754},"server.resourceTemplate()",{"type":64,"value":3756}," - Define parameterized resource",{"type":58,"tag":77,"props":3758,"children":3759},{},[3760,3766],{"type":58,"tag":149,"props":3761,"children":3763},{"className":3762},[],[3764],{"type":64,"value":3765},"server.prompt()",{"type":64,"value":3767}," - Define prompt template",{"type":58,"tag":77,"props":3769,"children":3770},{},[3771,3776],{"type":58,"tag":149,"props":3772,"children":3774},{"className":3773},[],[3775],{"type":64,"value":916},{"type":64,"value":3777}," - Compose\u002FProxy multiple MCP servers",{"type":58,"tag":77,"props":3779,"children":3780},{},[3781,3787],{"type":58,"tag":149,"props":3782,"children":3784},{"className":3783},[],[3785],{"type":64,"value":3786},"server.uiResource()",{"type":64,"value":3788}," - Define widget resource",{"type":58,"tag":77,"props":3790,"children":3791},{},[3792,3798],{"type":58,"tag":149,"props":3793,"children":3795},{"className":3794},[],[3796],{"type":64,"value":3797},"server.listen()",{"type":64,"value":3799}," - Start server",{"type":58,"tag":77,"props":3801,"children":3802},{},[3803,3809],{"type":58,"tag":149,"props":3804,"children":3806},{"className":3805},[],[3807],{"type":64,"value":3808},"server.use('mcp:tools\u002Fcall', fn)",{"type":64,"value":3810}," - MCP middleware (tools, resources, prompts, list ops)",{"type":58,"tag":77,"props":3812,"children":3813},{},[3814,3820],{"type":58,"tag":149,"props":3815,"children":3817},{"className":3816},[],[3818],{"type":64,"value":3819},"server.use('mcp:*', fn)",{"type":64,"value":3821}," - Catch-all MCP middleware",{"type":58,"tag":77,"props":3823,"children":3824},{},[3825,3831],{"type":58,"tag":149,"props":3826,"children":3828},{"className":3827},[],[3829],{"type":64,"value":3830},"server.use(fn)",{"type":64,"value":3832}," - HTTP middleware (Hono)",{"type":58,"tag":3834,"props":3835,"children":3836},"style",{},[3837],{"type":64,"value":3838},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3840,"total":1617},[3841,3852,3863,3869],{"slug":3842,"name":3842,"fn":5,"description":6,"org":3843,"tags":3844,"stars":22,"repoUrl":23,"updatedAt":3851},"chatgpt-app-builder",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3845,3846,3847,3850],{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":3848,"slug":3849,"type":15},"Engineering","engineering",{"name":17,"slug":18,"type":15},"2026-07-24T05:37:59.007289",{"slug":3853,"name":3853,"fn":3854,"description":6,"org":3855,"tags":3856,"stars":22,"repoUrl":23,"updatedAt":3862},"mcp-apps-builder","build MCP servers with mcp-use framework",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3857,3860,3861],{"name":3858,"slug":3859,"type":15},"API Development","api-development",{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},"2026-07-24T05:38:01.015361",{"slug":4,"name":4,"fn":5,"description":6,"org":3864,"tags":3865,"stars":22,"repoUrl":23,"updatedAt":24},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3866,3867,3868],{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":3870,"name":3870,"fn":3871,"description":3872,"org":3873,"tags":3874,"stars":22,"repoUrl":23,"updatedAt":3888},"openapi-to-mcp","build MCP servers from OpenAPI specifications","Build and deploy an MCP server from an OpenAPI \u002F Swagger spec using the mcp-use TypeScript SDK. Use this skill whenever the user wants to \"turn this OpenAPI spec into an MCP server\", \"make this API usable from Claude\u002FChatGPT\", \"wrap this Swagger doc as MCP tools\", \"expose this REST API to an LLM\", \"generate MCP tools from a spec\", or pastes\u002Fattaches an `openapi.yaml`, `openapi.json`, or `swagger.json` and asks for a Claude-compatible version. Trigger even if the user doesn't say \"MCP\" — if they describe an existing HTTP API (REST endpoints, an internal service, a third-party API they have a key for) and want an LLM to call it, this is the right skill. Covers spec ingestion (file path, URL, or pasted), operation-to-tool mapping, auth wiring (apiKey, bearer, basic, OAuth bearer), scaffolding with `create-mcp-use-app`, tool generation with proper zod schemas, live testing in the mcp-use inspector, and deploying to Manufact \u002F mcp-use cloud.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3875,3876,3879,3880,3883,3886],{"name":3858,"slug":3859,"type":15},{"name":3877,"slug":3878,"type":15},"Deployment","deployment",{"name":17,"slug":18,"type":15},{"name":3881,"slug":3882,"type":15},"OpenAPI","openapi",{"name":3884,"slug":3885,"type":15},"SDK","sdk",{"name":3887,"slug":2338,"type":15},"TypeScript","2026-05-20T06:55:35.071861",{"items":3890,"total":1617},[3891,3898,3904,3910],{"slug":3842,"name":3842,"fn":5,"description":6,"org":3892,"tags":3893,"stars":22,"repoUrl":23,"updatedAt":3851},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3894,3895,3896,3897],{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":3848,"slug":3849,"type":15},{"name":17,"slug":18,"type":15},{"slug":3853,"name":3853,"fn":3854,"description":6,"org":3899,"tags":3900,"stars":22,"repoUrl":23,"updatedAt":3862},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3901,3902,3903],{"name":3858,"slug":3859,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":3905,"tags":3906,"stars":22,"repoUrl":23,"updatedAt":24},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3907,3908,3909],{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":17,"slug":18,"type":15},{"slug":3870,"name":3870,"fn":3871,"description":3872,"org":3911,"tags":3912,"stars":22,"repoUrl":23,"updatedAt":3888},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3913,3914,3915,3916,3917,3918],{"name":3858,"slug":3859,"type":15},{"name":3877,"slug":3878,"type":15},{"name":17,"slug":18,"type":15},{"name":3881,"slug":3882,"type":15},{"name":3884,"slug":3885,"type":15},{"name":3887,"slug":2338,"type":15}]