Designer Element Tool
element_toolManage and modify elements on Webflow pages by selecting, updating attributes, setting text, styles, links, and images.
Instructions
Designer Tool - Element tool to perform actions like get all elements, get selected element, select element on current active page. and more
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| siteId | Yes | The ID of the site. DO NOT ASSUME site id. ALWAYS ask user for site id if not already provided or known. use sites_list tool to fetch all sites and then ask user to select one of them. | |
| actions | Yes |
Implementation Reference
- src/tools/deElement.ts:222-228 (handler)The handler function that executes the 'element_tool' logic by proxying to the RPC call.
async ({ actions, siteId }) => { try { return formatResponse(await elementToolRPCCall(siteId, actions)); } catch (error) { return formatErrorResponse(error); } } - src/tools/deElement.ts:96-220 (schema)Zod input schema defining the structure for element_tool actions including get_all_elements, select_element, add_or_update_attribute, etc.
inputSchema: z.object({ ...SiteIdSchema, actions: z.array( z.object({ get_all_elements: z .object({ query: z.enum(["all"]).describe("Query to get all elements"), include_style_properties: z .boolean() .optional() .describe("Include style properties"), include_all_breakpoint_styles: z .boolean() .optional() .describe("Include all breakpoints styles"), }) .optional() .describe("Get all elements on the current active page"), get_selected_element: z .boolean() .optional() .describe("Get selected element on the current active page"), select_element: z .object({ ...DEElementIDSchema, }) .optional() .describe("Select an element on the current active page"), add_or_update_attribute: z .object({ ...DEElementIDSchema, attributes: z .array( z.object({ name: z .string() .describe( "The name of the attribute to add or update." ), value: z .string() .describe( "The value of the attribute to add or update." ), }) ) .describe("The attributes to add or update."), }) .optional() .describe("Add or update an attribute on the element"), remove_attribute: z .object({ ...DEElementIDSchema, attribute_names: z .array(z.string()) .describe("The names of the attributes to remove."), }) .optional() .describe("Remove an attribute from the element"), update_id_attribute: z .object({ ...DEElementIDSchema, new_id: z .string() .describe( "The new #id of the element to update the id attribute to." ), }) .optional() .describe("Update the #id attribute of the element"), set_text: z .object({ ...DEElementIDSchema, text: z.string().describe("The text to set on the element."), }) .optional() .describe("Set text on the element"), set_style: z .object({ ...DEElementIDSchema, 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_link: z .object({ ...DEElementIDSchema, linkType: z .enum(["url", "file", "page", "element", "email", "phone"]) .describe("The type of the link to update."), link: z .string() .describe( "The link to set on the element. for page pass page id, for element pass json string of id object. e.g id:{component:123,element:456}. for email pass email address. for phone pass phone number. for file pass asset id. for url pass url." ), }) .optional() .describe("Set link on the element"), set_heading_level: z .object({ ...DEElementIDSchema, heading_level: z .number() .min(1) .max(6) .describe("The heading level to set on the element. 1 to 6."), }) .optional() .describe("Set heading level on the heading element."), set_image_asset: z .object({ ...DEElementIDSchema, image_asset_id: z .string() .describe("The image asset id to set on the element."), }) .optional() .describe("Set image asset on the image element"), }) ), }), - src/tools/deElement.ts:90-229 (registration)Registration of the 'element_tool' on the MCP server with title, description, input schema, and handler.
server.registerTool( "element_tool", { title: "Designer Element Tool", description: "Designer Tool - Element tool to perform actions like get all elements, get selected element, select element on current active page. and more", inputSchema: z.object({ ...SiteIdSchema, actions: z.array( z.object({ get_all_elements: z .object({ query: z.enum(["all"]).describe("Query to get all elements"), include_style_properties: z .boolean() .optional() .describe("Include style properties"), include_all_breakpoint_styles: z .boolean() .optional() .describe("Include all breakpoints styles"), }) .optional() .describe("Get all elements on the current active page"), get_selected_element: z .boolean() .optional() .describe("Get selected element on the current active page"), select_element: z .object({ ...DEElementIDSchema, }) .optional() .describe("Select an element on the current active page"), add_or_update_attribute: z .object({ ...DEElementIDSchema, attributes: z .array( z.object({ name: z .string() .describe( "The name of the attribute to add or update." ), value: z .string() .describe( "The value of the attribute to add or update." ), }) ) .describe("The attributes to add or update."), }) .optional() .describe("Add or update an attribute on the element"), remove_attribute: z .object({ ...DEElementIDSchema, attribute_names: z .array(z.string()) .describe("The names of the attributes to remove."), }) .optional() .describe("Remove an attribute from the element"), update_id_attribute: z .object({ ...DEElementIDSchema, new_id: z .string() .describe( "The new #id of the element to update the id attribute to." ), }) .optional() .describe("Update the #id attribute of the element"), set_text: z .object({ ...DEElementIDSchema, text: z.string().describe("The text to set on the element."), }) .optional() .describe("Set text on the element"), set_style: z .object({ ...DEElementIDSchema, 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_link: z .object({ ...DEElementIDSchema, linkType: z .enum(["url", "file", "page", "element", "email", "phone"]) .describe("The type of the link to update."), link: z .string() .describe( "The link to set on the element. for page pass page id, for element pass json string of id object. e.g id:{component:123,element:456}. for email pass email address. for phone pass phone number. for file pass asset id. for url pass url." ), }) .optional() .describe("Set link on the element"), set_heading_level: z .object({ ...DEElementIDSchema, heading_level: z .number() .min(1) .max(6) .describe("The heading level to set on the element. 1 to 6."), }) .optional() .describe("Set heading level on the heading element."), set_image_asset: z .object({ ...DEElementIDSchema, image_asset_id: z .string() .describe("The image asset id to set on the element."), }) .optional() .describe("Set image asset on the image element"), }) ), }), }, async ({ actions, siteId }) => { try { return formatResponse(await elementToolRPCCall(siteId, actions)); } catch (error) { return formatErrorResponse(error); } } ); - src/mcp.ts:62-62 (registration)Top-level call to register DEElementTools, which includes element_tool, in the designer tools group.
registerDEElementTools(server, rpc); - src/tools/deElement.ts:15-20 (helper)Helper function to make RPC call to the underlying 'element_tool' implementation.
const elementToolRPCCall = async (siteId: string, actions: any) => { return rpc.callTool("element_tool", { siteId, actions: actions || [], }); };