# Page Designer The AI-powered MechCloud Page Designer introduces a seamless way to craft web pages using plain English instructions. This innovative feature allows users to add native HTML tags and custom components (MechCloud UI components, demo components and third party components) effortlessly. To launch the page designer, go to the **Site Builder -> Site Nodes** UI and click on **Launch Designer** in the context menu for a site node. You can also launch the page designer by simply appending **mcPageMode=design** query string to a page url. * You can activate AI tool on the page designer by clicking on the icon. * Use the **edit** mode toggle button to switch between **edit** and **read-only** modes on the page designer. In the **edit** mode, visible properties of an element (e.g. button label) can be edited from the page designer canvas (middle column) itself while **read-only** mode can be used to test things (e.g. click event on a button), which will not work in the **edit** mode, without rendering the complete page in the **read-only** mode. * Page designer has been designed in such a away that in the **read-only** mode everything on a frame and the page rendered inside it will behave in the same way as rendering the full page in the normal / non design mode. This way you can test things like page navigation, click events and most of the things using read-only mode on the page designer itself instead of rendering the page in normal / non design mode for same purpose. * **Once you have edited a page and you want to edit a different page, make sure you click on save button before navigating to a different page.** * When you add a component using a prompt, it will be automatically selected as the parent for the next component which will be created through the prompt. Make sure you unselect currently selected component in the components hierarchy section (first column on the page designer) to add a component under the page directly. In order to add a new component under a target component, select the target component in the components hierarchy section before executing a prompt. * Order of siblings tags / components can be adjusted using drag and drop in the outline view of the page designer (first column). * Use context menu on a tag / component in the outline view to duplicate / delete a tag / component. ### Guidelines * If you want to add multiple tags / components of same type, then use duplicate functionality to clone as existing tag/component of same type instead of using a prompt every time to add a new component of same type. This will help you to create a page faster and at the same time will help reduce AI API provider bill. ### Demos * ### Blog Posts * --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mechcloud.io/dashboard-builder/page-designer.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.