Articles in this category

GOOD STUFF!

A Quick Tour of the Agentic Builder Interface

Andrija Krstic Updated by Andrija Krstic

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 consists of prompts. A prompt is an instruction given to the AI agent to make changes on the current site or project.

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)
Preview links from the tab can be shared but have short expiration times (they are valid for 24 hours). If you want to share the link for someone so they can preview the work on the site, make sure to deploy and shared the deployed version of the site.
  • Console - collapsed by default. Shows console of possible errors associated with the project (see troubleshooting section for more details).

Renaming chats or projects

For best performance, it's advised to start a new chat every 10-15 prompts. Learn more on when to start the new chat in this article.

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.

Let's say you're working on two different sites in parallel on your Subbly account and you have 2 different projects for both of these sites. When creating the project, AI agent will generate random name for the project. In order to keep things tidy, it's a good idea to rename each one of the projects with the name of the actual site. For example, one project could be named as "Revamp of the old site" and the name of another project can be "New development for MySubBox"
Similar to the above, renaming chats inside the same projects is even more important. To make it easier for one to backtrack to different sections of the build, it's advised to open the new chat for every section of work done on the site and to properly rename chats. If we follow this logic, names of individual chats can be "Optimization of the main page's header" or "Checkout funnel for the Product A".

Did you find this resource helpful?
Return to top
Ready to get started
with Subbly?
Try for free