MCP Server Boilerplate

Instructions

Implementation Reference

• src/index.ts:27-59 (handler)

  The main handler function that uses OpenAI's GPT-5 to generate HTML content based on the provided description, ensures the directory exists, writes the HTML to the specified file path, and returns a success message.

    async ({ description, filePath }) => {
      if (!process.env.OPENAI_API_KEY) {
        throw new Error("OPENAI_API_KEY environment variable is required");
      }
  
      const openai = createOpenAI({
        apiKey: process.env.OPENAI_API_KEY,
      });
  
      const { text } = await generateText({
        model: openai("gpt-5"),
        prompt: `
  Generate complete, valid HTML code for a 1080x720pxwebpage based on this description: 
  
  ${description}
  
  Return ONLY the HTML code, no explanations or markdown formatting. The HTML should be complete and ready to save as a .html file.`,
      });
  
      const dir = dirname(filePath);
      mkdirSync(dir, { recursive: true });
  
      writeFileSync(filePath, text, "utf8");
  
      return {
        content: [
          {
            type: "text",
            text: `Success: HTML page generated and saved to ${filePath}`,
          },
        ],
      };
    }

• src/index.ts:19-26 (schema)

  Zod schema defining the input parameters: 'description' (string) for the HTML page details and 'filePath' (string) for the output location.

  {
    description: z
      .string()
      .describe("A detailed description of the HTML page to generate"),
    filePath: z
      .string()
      .describe("Absolute file path where the HTML should be saved"),
  },

• src/index.ts:16-60 (registration)

  Registration of the 'make-html-page' tool using McpServer.tool(), including name, description, input schema, and inline handler function.

  server.tool(
    "make-html-page",
    "Generate an HTML page using GPT-5 and save it to a file path",
    {
      description: z
        .string()
        .describe("A detailed description of the HTML page to generate"),
      filePath: z
        .string()
        .describe("Absolute file path where the HTML should be saved"),
    },
    async ({ description, filePath }) => {
      if (!process.env.OPENAI_API_KEY) {
        throw new Error("OPENAI_API_KEY environment variable is required");
      }
  
      const openai = createOpenAI({
        apiKey: process.env.OPENAI_API_KEY,
      });
  
      const { text } = await generateText({
        model: openai("gpt-5"),
        prompt: `
  Generate complete, valid HTML code for a 1080x720pxwebpage based on this description: 
  
  ${description}
  
  Return ONLY the HTML code, no explanations or markdown formatting. The HTML should be complete and ready to save as a .html file.`,
      });
  
      const dir = dirname(filePath);
      mkdirSync(dir, { recursive: true });
  
      writeFileSync(filePath, text, "utf8");
  
      return {
        content: [
          {
            type: "text",
            text: `Success: HTML page generated and saved to ${filePath}`,
          },
        ],
      };
    }
  );