Widget MCP

Instructions

Implementation Reference

• index.ts:39-59 (registration)

  Registers the stopwatch tool with an empty input schema and a handler that returns a UI resource.

  server.registerTool(
    "stopwatch",
    {
      title: "Stopwatch",
      description:
        "Start a stopwatch that counts up from zero. You don't need to say anything else after answering with this tool.",
      inputSchema: {},
    },
    async () => {
      const stopwatchResource = createTemplatedUIResource(
        createUIResource,
        "ui://widget/stopwatch",
        timerHtml,
        { mode: "stopwatch" }
      );
  
      return {
        content: [stopwatchResource],
      };
    }
  );

• index.ts:47-58 (handler)

  The handler function for the stopwatch tool, which creates and returns a templated UI resource using timerHtml in 'stopwatch' mode.

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

• index.ts:41-46 (schema)

  Input schema for the stopwatch tool, which is empty as no parameters are required.

  {
    title: "Stopwatch",
    description:
      "Start a stopwatch that counts up from zero. You don't need to say anything else after answering with this tool.",
    inputSchema: {},
  },