diff --git a/src/tools/deComponents.ts b/src/tools/deComponents.ts index 16fd61e..dc93fb0 100644 --- a/src/tools/deComponents.ts +++ b/src/tools/deComponents.ts @@ -241,6 +241,86 @@ export function registerDEComponentsTools( .describe( "Unregister a component. DANGEROUS ACTION. USE WITH CAUTION.", ), + create_blank_component: z + .object({ + name: z + .string() + .describe("The name of the blank component to create"), + group: z + .string() + .optional() + .describe("Optional group/folder to place the component in"), + description: z + .string() + .optional() + .describe("Optional description for the component"), + }) + .optional() + .describe( + "Create a blank component with no root element. Equivalent to 'Create blank' in the Designer's New Component menu.", + ), + open_canvas: z + .object({ + component_id: z + .string() + .optional() + .describe("The id of the component to open in the canvas. Use this or page_id."), + page_id: z + .string() + .optional() + .describe("The id of the page to navigate to. Use this to exit the component canvas and return to a page."), + }) + .optional() + .describe( + "Navigate the Designer canvas to a component or page. Use component_id to open a component canvas, or page_id to navigate to a page (e.g. to exit component canvas). Provide exactly one of component_id or page_id.", + ), + search_components: z + .object({ + q: z + .string() + .optional() + .describe("Optional fuzzy search query matching Component panel search behavior. Searches both name and description fields."), + }) + .optional() + .describe( + "Search all components in the project. Returns component metadata including name, group, description, instance count, editability, and library info. When called without a query, returns all components.", + ), + get_instance_count: z + .object({ + component_id: z + .string() + .describe("The id of the component to get the instance count for"), + }) + .optional() + .describe( + "Get the number of instances of a component across the site. Returns the same count shown in the Components panel.", + ), + get_current_component: z + .boolean() + .optional() + .describe( + "Get the component currently being edited on the canvas (in-context editing or component canvas). Returns null if on a regular page.", + ), + get_parent_component: z + .object({ + ...DEElementIDSchema, + }) + .optional() + .describe( + "Get the component that contains the specified element. Returns null if the element is at page level (not inside a component).", + ), + insert_slot: z + .object({ + parent_element_id: DEElementIDSchema.id, + position: z + .enum(["append", "prepend", "before", "after"]) + .optional() + .describe("Insertion position relative to the parent element. Defaults to 'append'."), + }) + .optional() + .describe( + "Insert a Slot element into the currently-editing component. Must be inside component editing context (use open_canvas or open_component_view first). A SlotContent prop is automatically created.", + ), }) .strict() .refine( @@ -257,10 +337,17 @@ export function registerDEComponentsTools( d.set_component_metadata, d.rename_component, d.unregister_component, + d.create_blank_component, + d.open_canvas, + d.search_components, + d.get_instance_count, + d.get_current_component, + d.get_parent_component, + d.insert_slot, ].filter(Boolean).length >= 1, { message: - "Provide at least one of check_if_inside_component_view, transform_element_to_component, insert_component_instance, open_component_view, close_component_view, get_all_components, get_component, get_component_metadata, set_component_metadata, rename_component, unregister_component.", + "Provide at least one of check_if_inside_component_view, transform_element_to_component, insert_component_instance, open_component_view, close_component_view, get_all_components, get_component, get_component_metadata, set_component_metadata, rename_component, unregister_component, create_blank_component, open_canvas, search_components, get_instance_count, get_current_component, get_parent_component, insert_slot.", }, ), ), diff --git a/src/tools/dePages.ts b/src/tools/dePages.ts index b90e94e..f4ebfaf 100644 --- a/src/tools/dePages.ts +++ b/src/tools/dePages.ts @@ -75,6 +75,16 @@ export function registerDEPagesTools(server: McpServer, rpc: RPCType) { }) .optional() .describe("Switch to a page on webflow designer"), + open_page_canvas: z + .object({ + page_id: z + .string() + .describe("The id of the page to open in the canvas"), + }) + .optional() + .describe( + "Navigate the Designer canvas to a specific page by page ID.", + ), }) .strict() .refine( @@ -84,10 +94,11 @@ export function registerDEPagesTools(server: McpServer, rpc: RPCType) { d.create_page_folder, d.get_current_page, d.switch_page, + d.open_page_canvas, ].filter(Boolean).length >= 1, { message: - "Provide at least one of create_page, create_page_folder, get_current_page, switch_page.", + "Provide at least one of create_page, create_page_folder, get_current_page, switch_page, open_page_canvas.", } ) ), diff --git a/src/tools/rules.ts b/src/tools/rules.ts index de367e7..afcbc95 100644 --- a/src/tools/rules.ts +++ b/src/tools/rules.ts @@ -54,13 +54,25 @@ export function registerRulesTools(server: McpServer) { `\n` + `Component Tool (Designer):\n` + `-- To get all components in the site, use de_component_tool > get_all_components.\n` + + `-- To search components by name or description, use de_component_tool > search_components. Pass an optional query string. Returns rich metadata including name, group, description, instance count, editability, and library info.\n` + `-- To insert a component instance by component ID, use de_component_tool > insert_component_instance. Pass parent_element_id, component_id, and creation_position.\n` + `-- To transform an existing element into a component, use de_component_tool > transform_element_to_component. Pass the element ID and component name.\n` + - `-- To open a component view for editing, use de_component_tool > open_component_view. Pass the component_instance_id.\n` + - `-- To close a component view and return to page view, use de_component_tool > close_component_view.\n` + + `-- To create a new blank component, use de_component_tool > create_blank_component. Pass name, and optionally group and description.\n` + + `-- To get the number of instances of a component, use de_component_tool > get_instance_count. Pass the component_id.\n` + + `-- To get the component currently being edited, use de_component_tool > get_current_component. Returns null if on a regular page.\n` + + `-- To get the component that contains a specific element, use de_component_tool > get_parent_component. Pass the element ID. Returns null if the element is at page level.\n` + + `-- To insert a Slot element into a component, use de_component_tool > insert_slot. Pass parent_element_id. You must be in component editing context first (use open_canvas with a component_id).\n` + `-- To rename a component, use de_component_tool > rename_component. Pass component_id and new_name.\n` + `-- To check if you are currently inside a component view, use de_component_tool > check_if_inside_component_view.\n` + `\n` + + `Canvas Navigation (Designer):\n` + + `-- To navigate the Designer canvas, use de_component_tool > open_canvas. This is the primary way to switch between component canvas and page canvas.\n` + + `---- To open a component canvas: pass component_id.\n` + + `---- To exit component canvas and return to a page: pass page_id.\n` + + `-- open_canvas is different from open_component_view/close_component_view. open_canvas switches the entire canvas context (like clicking a component in the Components panel). open_component_view/close_component_view enters/exits in-context editing of a component instance on the current page.\n` + + `-- To enter in-context editing of a component instance, use de_component_tool > open_component_view. Pass the component_instance_id.\n` + + `-- To exit in-context editing and return to page view, use de_component_tool > close_component_view.\n` + + `\n` + `Element Snapshot Tool Usage:\n` + `-- To get a visual snapshot of an element, section, or component, use element_snapshot_tool. Pass the element ID to capture its current visual state as an image.\n` + `-- Use this tool to verify visual changes after creating or updating elements. It provides immediate visual feedback without requiring manual inspection.\n` +