Add component management and canvas navigation schemas

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.",
               },
             ),
         ),

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.",
               }
             )
         ),

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` +