Widget MCP

Instructions

Implementation Reference

• index.ts:72-83 (handler)

  Handler function for the "display-fact" tool that creates and returns a UI resource displaying the provided fact and description using a templated HTML file.

  async ({ description, fact }) => {
    const factResource = createTemplatedUIResource(
      createUIResource,
      "ui://widget/display-fact",
      display_factHtml,
      { description, fact }
    );
  
    return {
      content: [factResource],
    };
  }

• index.ts:67-70 (schema)

  Input schema using Zod for the "display-fact" tool, defining required string parameters: description and fact.

  inputSchema: {
    description: z.string().describe("A description of the fact"),
    fact: z.string().describe("The fact to display. Should be short and concise."),
  },

• index.ts:62-84 (registration)

  Registration of the "display-fact" MCP tool with title, description, input schema, and handler function.

    "display-fact",
    {
      title: "Display Fact",
      description:
        "Display a simple fact. Should be used when answering a users question that has a short factual answer. You don't need to say anything else after answering with this tool. Example: { description: 'The capital of France', fact: 'Paris' }",
      inputSchema: {
        description: z.string().describe("A description of the fact"),
        fact: z.string().describe("The fact to display. Should be short and concise."),
      },
    },
    async ({ description, fact }) => {
      const factResource = createTemplatedUIResource(
        createUIResource,
        "ui://widget/display-fact",
        display_factHtml,
        { description, fact }
      );
  
      return {
        content: [factResource],
      };
    }
  );