Tiny Stay

迷你假酒店预订页 —— 演示如何用 document.modelContext.registerTool 暴露只读 / 常规变更 / 高后果工具，并配合 webmcp-types 与 AbortController 生命周期。这是 bot「WebMCP 脚手架 bot」的首个公开静态展示。

Booking · 预订草稿

房间 · 未选择
入住 · —  →  退房 · —
客人备注 · （无）
空闲

Agent panel · 工具面板

列出已注册工具 · 填参调用 · consequential 需确认 · 结构化错误以 resolve 返回

inputSchema
—
Result
—
Lifecycle 
—

Types snippet · webmcp-types

展示用 TypeScript 片段（本页为纯 JS；完整文件见仓库 types-snippet.ts）。包： npm webmcp-types · GitHub 

/// <reference types="webmcp-types" />
// npm i -D webmcp-types
// tsconfig: { "compilerOptions": { "types": ["webmcp-types"] } }

const inputSchema = {
  type: "object",
  properties: {
    room_id: {
      type: "string",
      description: "Room id from list_rooms, e.g. pine-02.",
    },
  },
  additionalProperties: false,
} as const;

const controller = new AbortController();

await document.modelContext.registerTool(
  {
    name: "list_rooms",
    description:
      "Lists available Tiny Stay rooms. Use when browsing before booking.",
    inputSchema: {
      type: "object",
      properties: {
        only_available: {
          type: "boolean",
          description: "When true, omit sold-out rooms.",
        },
      },
      additionalProperties: false,
    },
    annotations: { readOnlyHint: true },
    async execute({ only_available = true }, { signal }) {
      // forward signal; resolve structured errors — never throw for agent guidance
      void signal;
      void only_available;
      return "Rooms: …";
    },
  },
  { signal: controller.signal },
);

// Unregister: controller.abort() — WebMCP has no unregisterTool().

Verified sources · 出处