Webflow

Instructions

Implementation Reference

• src/tools/deElement.ts:22-88 (registration)

  Registration of the MCP tool 'element_builder' with detailed input schema supporting creation of elements up to 3 levels deep, and a handler that proxies the request to an RPC call using elementBuilderRPCCall.

  server.registerTool(
    "element_builder",
    {
      title: "Designer Element Builder",
      description:
        "Designer Tool - Element builder to create element on current active page. only create elements upto max 3 levels deep. divide your elements into smaller elements to create complex structures. recall this tool to create more elements. but max level is upto 3 levels. you can have as many children as you want. but max level is 3 levels.",
      inputSchema: z.object({
        ...SiteIdSchema,
        actions: z.array(
          z.object({
            parent_element_id: z
              .object({
                component: z
                  .string()
                  .describe(
                    "The component id of the element to perform action on."
                  ),
                element: z
                  .string()
                  .describe(
                    "The element id of the element to perform action on."
                  ),
              })
              .describe(
                "The id of the parent element to create element on, you can find it from id field on element. e.g id:{component:123,element:456}."
              ),
            creation_position: z
              .enum(["append", "prepend"])
              .describe(
                "The position to create element on. append to the end of the parent element or prepend to the beginning of the parent element. as child of the parent element."
              ),
            element_schema: DEElementSchema.extend({
              children: z
                .array(
                  DEElementSchema.extend({
                    children: z
                      .array(
                        DEElementSchema.extend({
                          children: z
                            .array(
                              DEElementSchema.extend({
                                children: z.array(DEElementSchema).optional(),
                              })
                            )
                            .optional(),
                        })
                      )
                      .optional(),
                  })
                )
                .optional()
                .describe(
                  "The children of the element. only valid for container, section, div block, valid DOM elements."
                ),
            }).describe("element schema of element to create."),
          })
        ),
      }),
    },
    async ({ actions, siteId }) => {
      try {
        return formatResponse(await elementBuilderRPCCall(siteId, actions));
      } catch (error) {
        return formatErrorResponse(error);
      }
    }
  );

• src/tools/deElement.ts:81-87 (handler)

  Handler function for the 'element_builder' tool, which formats and forwards the actions to the RPC proxy function, handling errors.

  async ({ actions, siteId }) => {
    try {
      return formatResponse(await elementBuilderRPCCall(siteId, actions));
    } catch (error) {
      return formatErrorResponse(error);
    }
  }

• src/tools/deElement.ts:8-13 (helper)

  Helper RPC proxy function that calls the underlying 'element_builder' tool via rpc.callTool.

  const elementBuilderRPCCall = async (siteId: string, actions: any) => {
    return rpc.callTool("element_builder", {
      siteId,
      actions: actions || [],
    });
  };

• src/schemas/DEElementSchema.ts:1-97 (schema)

  Base schema DEElementSchema defining structure for elements created by element_builder, including type, styles, text, links, etc., extended in the tool inputSchema for up to 3 levels of nesting.

  import { z } from "zod/v3";
  
  export const DEElementSchema = z.object({
    type: z
      .enum([
        "Container",
        "Section",
        "DivBlock",
        "Heading",
        "TextBlock",
        "Paragraph",
        "Button",
        "TextLink",
        "LinkBlock",
        "Image",
        "DOM",
      ])
      .describe(
        "The type of element to create. with DOM type you can create any element. make sure you pass dom_config if you are creating a DOM element."
      ),
    set_style: z
      .object({
        style_names: z
          .array(z.string())
          .describe("The style names to set on the element."),
      })
      .optional()
      .describe(
        "Set style on the element. it will remove all other styles on the element. and set only the styles passed in style_names."
      ),
    set_text: z
      .object({
        text: z.string().describe("The text to set on the element."),
      })
      .optional()
      .describe(
        "Set text on the element. only valid for text block, paragraph, heading, button, text link, link block."
      ),
    set_link: z
      .object({
        link_type: z
          .enum(["url", "file", "page", "element", "email", "phone"])
          .describe("The type of link to set on the element."),
        link: z.string().describe("The link to set on the element."),
      })
      .optional()
      .describe(
        "Set link on the element. only valid for button, text link, link block."
      ),
    set_heading_level: z
      .object({
        heading_level: z
          .number()
          .min(1)
          .max(6)
          .describe("The heading level to set on the element."),
      })
      .optional()
      .describe("Set heading level on the element. only valid for heading."),
    set_image_asset: z
      .object({
        image_asset_id: z
          .string()
          .describe("The image asset id to set on the element."),
        alt_text: z
          .string()
          .optional()
          .describe(
            "The alt text to set on the image. if not provided it will inherit from the image asset."
          ),
      })
      .optional()
      .describe("Set image asset on the element. only valid for image."),
    set_dom_config: z
      .object({
        dom_tag: z
          .string()
          .describe(
            "The tag of the DOM element to create. for example span, code, etc."
          ),
      })
      .optional()
      .describe("Set DOM config on the element. only valid for DOM element."),
    set_attributes: z
      .object({
        attributes: z
          .array(
            z.object({
              name: z.string().describe("The name of the attribute to set."),
              value: z.string().describe("The value of the attribute to set."),
            })
          )
          .describe("The attributes to set on the element."),
      })
      .optional()
      .describe("Set attributes on the element."),
  });