A Quick Tour of the Agentic Builder Interface

This article explains the user interface of the AI Website Builder.

Main admin

You can access the AI Website Builder from your Subbly dashboard's left sidebar, clicking on the AI Website Builder option as in the image below.

Builder will always open in a new tab. Explanation of the sidebar items on the builder's dashboard are below:

• Projects - this is a home page of your builder admin and is presenting a list of all active and past projects.
• Feedback - this will open up the prompt where you can write your feedback related to the builder. Please don't use this for general support-queries, they should be directed to the support team.
• Your usage - redirects to the My Plans page where you can check the token usage and remaining balance (updates in real time).
• Back to admin - will redirect you back to the Subbly dashboard and away from the builder admin.
• Dark/light mode - widget changes the mode of your builder dashboard

Project and Chat view

On the right hand side of the builder admin you will see the list of active (present and past) projects. Writing the prompt in the chat field when on the Projects page will start the new Project with that prompt.

Clicking on the Project from the main navigation will open up the list of chats associated with the project. You can prompt an agent by typing the prompt in the chat field to create the new chat and continue working on the project, or you can revisit one of the earlier chats by simply clicking on one of the chats which will take you to the Chat view.

No matter which path you choose, the builder will take you to the Chat view, and this is what we're going to be using to prompt the AI agent to make modifications to the site.

Chat view is presented in the image below. Chat view consists of 3-columns: general settings, chat tree and preview/code view (from left to right).

• You can collapse the general settings to make the other 2 columns more visible.
• You will use the chat tree to write prompts and communicate with the AI agent.
• You will lose the 3rd column (preview/code view) to review latest changes made on the site.

Explanation of all visible toggles and widgets on the chat tree can be found below:

• Breadcrumb navigation - shows the location of the chat within the bigger body of work (project). Clickable, you can navigate to the project by clicking on earlier breadcrumb
• Warning icon - shows misconfiguration associated with the current project, needs attention. Clicking on it will open up additional context.
• View history - opens up the history of project's versions (see versioning for more info).
• Project settings - opens the drop down containing project settings.
• Chat body - shows all earlier prompts and AI agent's reasoning and thinking in a vertical scrollable block
• Chat widget - used for writing prompts and instructing the agent
• Element selector - used for selecting elements you'd want to make modifications to. You can select elements by simply clicking on them on site's preview.
• Prompt enhancer - tooling that will automatically enhance written prompt.
• Attach files - used to attach files such as fonts, images...
• Feedback - share your feedback with the team
• Go - runs the prompt

Explanation of all the widgets and tools visible in the 3rd column (Preview) is included below:

• Code/Preview - switches between the code view or the visual preview mode when reviewing the current state of the build
• Help - opens up the help resources
• Deploy - deploys the current version of the prompt (will run the /deploy prompt)
• Refresh preview - refreshes preview
• URL/slug selector - used for selecting/viewing a different page of the site
• Open in new tab - opens the preview in new tab (doesn't deploy the project)

• Console - collapsed by default. Shows console of possible errors associated with the project (see troubleshooting section for more details).

Renaming chats or projects

In order to keep the project and builder dashboard tidy, it's useful to rename chats and projects on a regular basis. At the same time, in order to properly troubleshoot through some builder errors or to simply backtrack to previous version of the site, it's useful to know how chats/projects and prompts can be deleted.

To rename the project you need to click on the Project Settings icon located at the navigation bar and select Rename Project option.

In order to rename the chat, you need to click on the Project Settings icon and opt to Rename chat.