# Explore the interface

## Workspace dashboard

The left side panel of the workspace dashboard is divided into two sections: **Apps** and **Library**. The Apps section shows all your applications, whereas the Library section displays all your created [modules](/concepts/modules.md) and custom components.\
From the menu, you can quickly navigate between apps, application pages, modules, and custom components. You can hide the menu bar or expand it.

To create a new app, module or custom component, click the **+ button** next to the Apps or Library section and select the necessary item. You can also import items from Git or from an archive.

To open application settings, click on the three dots next to the app's name. From this menu, you can also **edit** (open in the Builder), **duplicate**, [**export**](/concepts/export-import-an-app.md) or **delete** an app. The *Edit* option here allows you to quickly open a new project in the **Edit** mode - not just the one selected right now - as well as open it in a new tab. This way you can easily switch between contexts without disrupting your current workflow.\
In the same way, you can also access modules/custom components' settings as well as edit, duplicate, export, or delete them.

In the upper right corner of the dashboard, you can switch between [environments](/concepts/workspace-management/app-environments.md) - **dev**, **staging** or **prod**. The [**Share** button](/build-from-scratch/getting-started/deploy-your-application-and-invite-users.md#inviting-users-via-share) here allows you to invite users to your app and manage their access. And the **Edit** button will take you to the Builder where you can edit the currently selected application. 

{% @arcade/embed flowId="Dey3vpb412bR3VnzxMjN" url="<https://app.arcade.software/share/Dey3vpb412bR3VnzxMjN>" %}

## Builder interface

Depending on whether you selected a specific template or started from scratch, your working area can be either blank or already include some UI elements.

{% hint style="info" %}
UI Bakery app is **live** in Edit mode. That means that you can edit your app and test it right away.
{% endhint %}

Let's have a look at the **Builder interface**:point\_down:

<figure><img src="/files/1uV3iIzwzGycrhmfLGX1" alt=""><figcaption></figcaption></figure>

<details>

<summary>1. Header</summary>

The header contains:

* **UI Bakery icon** - access App settings, Release history, or go back to the workspace menu
* **Connect Git** (available in the *Enterprise* plan)
* **Undo/Redo** buttons
* **Screen adaptive controls**
* Time stamp of the **last saved changes**
* **Preview** app link - click to see how your app looks without leaving the Builder&#x20;
* **Release** button
* **Share** button - invite users to your app, manage their access, and make the app public

</details>

<details>

<summary>2. Left side panel</summary>

**a. Components** - displays a list of all UI components that you can drag and drop to the working area. The *Library* subtab here, displays all your created modules and custom components.

**b. App structure** - shows the current page elements structure.

**c. App state** - shows existing state variables (with the option to manage them), components, actions, and other state variables.

**d. Pages** - contains a list of your app pages, and allows you to create or update any page.

**e. Theme** - custom theme builder.

**f.** [**Database Editor**](/extras/ui-bakery-postgres/database-editor.md) - here you can manage all your hosted databases.

**g. Data sources** - here you can connect your databases and APIs.

</details>

{% hint style="success" %}
The left side panel is *resizable* - you can adjust its size to suit your workflow and build more comfortably.
{% endhint %}

<figure><img src="/files/1ykW9dfwgfJ7US0UlfwC" alt=""><figcaption></figcaption></figure>

<details>

<summary>3. Working area</summary>

It's the part of the interface where you can assemble your application page from UI components.

</details>

<details>

<summary>4. Right side panel</summary>

It shows various settings and triggers of a UI component, if selected, or page settings.

</details>

<details>

<summary>5. Footer</summary>

**g. Additional info** - links to our docs, community, booking a demo, and more.

**h. Actions** - all app actions.

**i. Logs -** the current app logs.

**j. Git -** to activate Git.

**k. Custom code** - to connect custom scripts, libraries, and styles.

**l. Settings** - to set up some additional app interface settings.

**m. Search** - to search for components, actions, data sources, settings.

**n. AI Assistant** - to access our AI-based chatbot that can quickly help you with technical questions and code generation.

</details>

{% hint style="info" %}
Changes made in the UI Bakery app are saved automatically.
{% endhint %}


---

# 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.uibakery.io/concepts/workspace-management/interface.md?ask=<question>
```

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.