Widget MCP

Instructions

Implementation Reference

• index.ts:15-37 (registration)

  Registration of the 'timer' MCP tool, including schema and handler function.

  server.registerTool(
    "timer",
    {
      title: "Timer",
      description:
        "Start a timer. You don't need to say anything else after answering with this tool.",
      inputSchema: {
        duration: z.number().describe("The duration of the timer in seconds"),
      },
    },
    async ({ duration }) => {
      const timerResource = createTemplatedUIResource(
        createUIResource,
        "ui://widget/timer",
        timerHtml,
        { duration, mode: "timer" }
      );
  
      return {
        content: [timerResource],
      };
    }
  );

• index.ts:25-37 (handler)

  Handler function that creates a templated UI resource for the timer widget based on the input duration.

    async ({ duration }) => {
      const timerResource = createTemplatedUIResource(
        createUIResource,
        "ui://widget/timer",
        timerHtml,
        { duration, mode: "timer" }
      );
  
      return {
        content: [timerResource],
      };
    }
  );

• index.ts:17-24 (schema)

  Input schema definition for the 'timer' tool using Zod, specifying the duration parameter.

  {
    title: "Timer",
    description:
      "Start a timer. You don't need to say anything else after answering with this tool.",
    inputSchema: {
      duration: z.number().describe("The duration of the timer in seconds"),
    },
  },