Ask Webflow AI

Instructions

Implementation Reference

• src/tools/aiChat.ts:8-29 (handler)

  The registerAiChatTools function registers the 'ask_webflow_ai' tool with the MCP server. The handler (line 22-27) receives the 'message' input, calls postChat(), and returns the result as text content.

  export function registerAiChatTools(server: McpServer) {
    server.registerTool(
      "ask_webflow_ai",
      {
        description: "Ask Webflow AI about anything related to Webflow API.",
        title: "Ask Webflow AI",
        annotations: {
          openWorldHint: true,
          readOnlyHint: true,
        },
        inputSchema: {
          message: z.string().describe("The message to ask Webflow AI about."),
        },
      },
      async ({ message }) => {
        const result = await postChat(message);
        return {
          content: [{ type: "text", text: result }],
        };
      }
    );
  }

• src/tools/aiChat.ts:11-20 (schema)

  Input schema definition for the 'ask_webflow_ai' tool. It defines a single string 'message' parameter described as 'The message to ask Webflow AI about.' Also includes title, description, and annotations (openWorldHint, readOnlyHint).

  {
    description: "Ask Webflow AI about anything related to Webflow API.",
    title: "Ask Webflow AI",
    annotations: {
      openWorldHint: true,
      readOnlyHint: true,
    },
    inputSchema: {
      message: z.string().describe("The message to ask Webflow AI about."),
    },

• src/mcp.ts:48-53 (registration)

  The registerTools function in src/mcp.ts calls registerAiChatTools(server) at line 53, which registers the 'ask_webflow_ai' tool on the MCP server.

  export function registerTools(
    server: McpServer,
    getClient: () => WebflowClient,
    getAccessToken: () => string,
  ) {
    registerAiChatTools(server);

• src/tools/aiChat.ts:31-48 (helper)

  The postChat helper function sends a POST request to the Webflow SDK chat endpoint with the user's message, returning the streamed response as a string.

  async function postChat(message: string) {
    const response = await fetch(`${BASE_URL}/api/fern-docs/search/v2/chat`, {
      method: "POST",
      headers: {
        "content-type": "application/json",
        "x-fern-host": X_FERN_HOST,
      },
      body: JSON.stringify({
        messages: [{ role: "user", parts: [{ type: "text", text: message }] }],
        conversationId: randomUUID(),
        url: BASE_URL,
        source: "mcp",
      }),
    });
  
    const result = await streamToString(response);
    return result;
  }

• src/tools/aiChat.ts:50-66 (helper)

  The streamToString helper function reads a Response body stream and concatenates chunks into a single string using TextDecoder.

  async function streamToString(response: Response) {
    const reader = response.body?.getReader();
    if (!reader) {
      throw new Error("!reader");
    }
  
    let result = "";
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
  
      // Convert the Uint8Array to a string and append
      result += new TextDecoder().decode(value);
    }
  
    return result;
  }