Data source
A connection set up from a server to a database on top of which you build your internal tool. It can be a database, an API, or a third-party service (for example, MySQL, Google Sheets, Airtable). You need to connect a data source and configure authentication to it to ensure a secure connection between the UI Bakery back end and your data. ✅ *UI Bakery doesn’t store your data. We only keep the encrypted credentials to access a data source.*Action
A piece of business logic implemented in your application. You can use it to load the data from a data source, send the data back, make API calls, navigate to app pages, generate PDF documents, and process any type of data with SQL or JavaScript. Action results are available as variables `{{actions.actionName.data}}` that can be assigned to specific properties of components or referenced in other actions.Action steps
Small tasks of various types, such as executing an SQL query, running custom code, making an HTTP request, evaluating a condition or navigating to a different page. By combining multiple action steps developers can construct functional workflows, consolidate requests to various data sources, validate input data, or reload data based on specified conditions. Action steps that have been given a name can also be referenced as `{{steps.name.data}}` within the parent action.Component
A UI element that can display your data and accept input from your users. You can work with various components: Table, Form, Detail, Chart, PDF Viewer, and others. Drag and drop any component you need to the working area to add it to an application page. You can use most of the components as variables, such as `{{ui.componentName.value}}` or `{{ui.componentName.selectedRow.data}}`. They can be referenced within the application in actions or the properties of other components.Triggers
Events that enable handling user interactions within the application. Examples of triggers include **On Form Submit** and **On Table Row Select**. Actions can be linked to triggers and utilised to process data, send it to a database, and perform other operations.Variables
Act as a connecting element allowing you to use data from actions in components and vice versa. Actions, action steps, and components all provide various variables that can be accessed using curly braces `{{ }}`. Additionally, developers can create their own custom global or local variables, assign values using the **Save to State** action step, and use these variables in other actions and components. :information\_source: *Bring out a list of variables in any code or text field in UI Bakery by typing two curly braces* `{{`.Mocking data
In our flow here, as you've probably noticed, we haven't connected our data source yet. We first started building UI, and the components we added are not displaying the data from our data source. And we want you to know that it's totally okay :slight\_smile: \ Sometimes, you may not want to immediately connect your data source to UI Bakery. There could be various reasons for this, such as the data source not being publicly accessible, having certain security restrictions, or simply feeling a bit lazy. We completely understand these situations as we've experienced them ourselves! If that is the case for you, have a look at a couple of [common methods](/build-from-scratch/getting-started/build-ui/mocking-data) demonstrating how you can mock your data in UI Bakery.{{ui.formName.value.fieldName}}
1.Top bar
* **UI Bakery icon** - access App settings, Release history, go back to the workspace menu, or access additional links (our docs, community, booking a demo, and more) * [**Connect Git**](/concepts/source-control) - connect your Git repository * **Preview** - see the real-time preview of the app you're building * [**Code**](/build-with-ai/features#code-view) - see your app code and make changes to it * [**Database**](/build-with-ai#database-connection) - create and manage your primary hosted database * [**Connect**](/build-with-ai#step-2-connect-a-data-source) - connect a hosted database or your own data source right from the Builder * **Settings** - manage your app settings * **Reload** - refresh the iframe preview of the app without reloading the page * [**Switch breakpoint**](/concepts/mobile-layout) - switch between a desktop & mobile layout * **Full screen preview** - see the app in full screen * [**Release**](/build-from-scratch/getting-started/deploy-your-application-and-invite-users#deploying-an-app) - deploy your app or create a draft release * [**Share**](/build-from-scratch/getting-started/deploy-your-application-and-invite-users#sharing-an-app) - invite users to your app, manage their access, and make the app public2.Agent sidebar
Displays the [**chat**](#chat) component to interact with the UI Bakery Agent. {% hint style="success" %} The left side panel is *resizable* - you can adjust its size to suit your workflow and build more comfortably. {% endhint %}3.Workspace
Shows the contents of the tab selected in the header, for example, *Preview*, *Code*, *Database*, etc.4.Bottom panel
* **Logs** - shows the current app logs * **Git** - used to activate Git when you've connected your Git repo * **Command palette** - to navigate the org and search for necessary components, projects, etc. {% hint style="info" %} You can [disable the command palette](/concepts/workspace-management/account-and-organization#disabling-command-palette-for-end-users) for end users, if necessary. {% endhint %}| Field | Description |
|---|---|
organizationId | Workspace view ID. |
organizationSlug | Workspace slug from the request. |
availableCredits | Remaining UI Bakery usage credits. |
lastTopUpTotalCredits | Total usage credits from the latest top-up/current balance period. |
percentageRemaining | Remaining percentage, calculated as availableCredits / lastTopUpTotalCredits * 100, rounded to 2 decimals. May be null if the total is missing or zero. |
billingDisabled | true when credits billing is disabled for the chat service/runtime. |
| Variable | Default | Description |
UI_BAKERY_CREDITS_ALERT_ENABLED | false | Enables or disables the scheduled low-credit alert job. |
UI_BAKERY_CREDITS_ALERT_THRESHOLD_CREDITS | -1 | Absolute usage credits threshold. -1 disables this threshold. |
UI_BAKERY_CREDITS_ALERT_THRESHOLD_PERCENT | -1 | Percentage remaining threshold. -1 disables this threshold. |
UI_BAKERY_CREDITS_ALERT_EMAIL_ENABLED | true | Enables email delivery to organization admins. |
UI_BAKERY_CREDITS_ALERT_WEBHOOK_URL | empty | Optional webhook URL for alert delivery. |
UI_BAKERY_CREDITS_ALERT_COOLDOWN_HOURS | 24 | Per-organization cooldown after a successful alert. Prevents repeated alerts while credits remain low. |
UI_BAKERY_CREDITS_ALERT_CRON | 0 0 * * * * | Spring cron expression for scheduled checks. Spring cron includes seconds. |
Low credits for organizationName
Hello userName, organizationSlug has availableCredits usage credits left from lastTopUpTotalCredits. Remaining: percentageRemaining%.
``` Available template variables:| Variable | Description |
userName | Admin display name or email. |
userEmail | Admin email address. |
organizationName | Workspace display name. |
organizationSlug | Workspace slug. |
availableCredits | Remaining usage credits. |
lastTopUpTotalCredits | Latest top-up/current balance total in usage credits. |
percentageRemaining | Remaining percentage. |
Low credits for Acme
Hello Jane Admin, acme has 9.5 usage credits left from 250.0. Remaining: 3.8%.
``` ### Sending both email and webhook Email and webhook can be enabled together: ``` UI_BAKERY_CREDITS_ALERT_ENABLED=true UI_BAKERY_CREDITS_ALERT_EMAIL_ENABLED=true UI_BAKERY_CREDITS_ALERT_WEBHOOK_URL=https://example.com/credits-alert-webhook UI_BAKERY_CREDITS_ALERT_THRESHOLD_CREDITS=10 UI_BAKERY_CREDITS_ALERT_THRESHOLD_PERCENT=20 ``` When the threshold is reached, UI Bakery sends an email to Workspace admins and also posts the webhook payload. # 🖥️ MCP server (beta) Connect external AI agents to build apps and manage your UI Bakery workspace. Connect the UI Bakery MCP server to Codex, Claude, or another MCP-compatible agent to build apps and manage your UI Bakery workspace directly from the agent. {% hint style="warning" %} MCP is in beta. The MCP API, available tools, scopes, permissions, and tool parameters may change. {% endhint %} ### Connect an MCP client {% hint style="info" %} UI Bakery on-premise administrators must [enable the MCP server](/on-premise/additional-configurations/mcp-server) before clients can connect. In the examples below, replace `https://cloud.uibakery.io` with the public URL of your UI Bakery instance. {% endhint %} 1. Add the endpoint to the client. 2. Complete browser-based OAuth and sign in to UI Bakery. {% tabs %} {% tab title="AI agent" %} **Ask your AI agent to connect** Copy and send this prompt to an AI coding agent that can configure MCP servers: ``` Connect the UI Bakery MCP server using https://cloud.uibakery.io/api/mcp ``` {% endtab %} {% tab title="Claude Code" %} ```shell claude mcp add --transport http uibakery https://cloud.uibakery.io/api/mcp ``` Run `/mcp` inside Claude Code. Select `uibakery`, then complete browser authentication. For on-premise, replace the URL. {% endtab %} {% tab title="Codex" %} ```shell codex mcp add uibakery --url https://cloud.uibakery.io/api/mcp codex mcp login uibakery ``` {% endtab %} {% tab title="Cursor" %} ```json { "mcpServers": { "uibakery": { "url": "https://cloud.uibakery.io/api/mcp" } } } ``` Save this as `.cursor/mcp.json` for one project. Save it as `~/.cursor/mcp.json` globally. Open **Cursor Settings** → **MCP**. Connect `uibakery`, then complete browser authentication. For on-premise, replace the URL. {% endtab %} {% endtabs %} ### Agent Capabilities | Access request | Scope | What it enables | | -------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Project management | `projects:manage` | View and create apps and modules; inspect and update supported project files and metadata; manage releases and restores; perform Git operations; delete projects. | | Datasource discovery | `datasources:read` | View available data sources and inspect their resources and structure. This access is read-only. | | Workspace management | `organization:manage` | View users and invitations; manage invitations, custom roles, and permissions; reset MFA for users. | An agent receives only capabilities covered by approved scopes and the authorizing user's UI Bakery permissions. Scopes never bypass UI Bakery project or workspace permissions. ### Example agent tasks #### **Build and update apps** You can update your UI Bakery apps directly from your AI agent. Describe the change, wait for the agent to finish, then reload the app in UI Bakery. ``` Add a users table to the "Products Dashboard" app and populate it with data from the "My DB" data source. ``` #### **Manage Git integration** You can connect projects to Git repositories, create branches, commit changes, and synchronize them. ``` Create a new GitHub repository named "ui-bakery-a" in my account and connect the "A" app to it. Show me the proposed repository and branch settings before applying them. ``` #### **Manage workspace users and roles** You can create custom roles, configure permissions, and assign roles to workspace users. ``` Create a custom role named "App Viewer" with view-only access to apps "Users", "Products", and "Orders". Assign it to the users listed in the attached "list.xlsx" file. ``` ### Permissions and security * MCP acts on behalf of the authorizing user. * Existing application and workspace permissions continue to apply. * Grant clients only the required access groups. * MCP tool calls are written to UI Bakery audit logs. {% hint style="danger" %} Releases, deletes, Git operations, and user or role changes can alter or remove data or access. Review them explicitly before approval. {% endhint %} ### Troubleshooting #### The endpoint returns 404 or reports that MCP is disabled For Cloud, verify the endpoint is exactly `https://cloud.uibakery.io/api/mcp`. For on-premise, follow [Enable MCP server on-premise](https://docs.uibakery.io/on-premise/on-premise-features/mcp-server) and restart the instance after configuration. #### The OAuth window does not open Confirm the client supports OAuth for remote MCP servers and uses the public HTTPS endpoint. On-premise administrators should verify `UI_BAKERY_APP_SERVER_NAME` matches the externally reachable host. #### The connection succeeds, but tools are missing Check approved scopes and the user's UI Bakery role. Reconnect and authorize only the required additional scope, if necessary. #### The agent receives a permission denied error Confirm the authorizing user has the required project or organization permissions. MCP does not elevate access. ### Related documentation * [Enable MCP server on-premise](/on-premise/additional-configurations/mcp-server) * [Git source control](https://docs.uibakery.io/on-premise/git-source-control) * [Release management](https://docs.uibakery.io/concepts/workspace-management/app-environments/release-management) * [Roles in UI Bakery](https://docs.uibakery.io/concepts/workspace-management/roles-in-ui-bakery) * [Role permissions](https://docs.uibakery.io/concepts/workspace-management/role-permissions) * [Audit logs](https://docs.uibakery.io/concepts/workspace-management/audit-logs) # Tutorial # Components **Components** are the building blocks of the application interface. There are a number of prebuilt components available in UI Bakery. You can also build custom components using React, jQuery, ViewJS, or JavaScript. Check out the articles in this section to learn more :point\_down:| /pages/RVRHNwVcK9JNoLZz4a9r |
| /pages/btrsSRnQIrJKyyD0LD4f |
| /pages/lq4oK0sHQIkcdCf3Gc2S |
| /pages/3c7cQRXFV8TTeM1nTGoY |
{{ui.myCustomModal.open()}} - open a modal
UB.triggerEvent('Data from custom component');
Data from UI Bakery:
<!-- 3rd party scripts and styles -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- root element where the component will be rendered -->
<div class="root"></div>
<!-- custom styles -->
<style>
.custom-component-container p { margin-top: 0 }
.custom-component-container button { margin-bottom: 1rem }
.custom-component-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
</style>
<!-- custom logic -->
<script type="text/babel">
function CustomComponent() {
// receive data from UI Bakery
const data = UB.useData();
return (
<div className="custom-component-container">
<p>Data from UI Bakery: {data.title}</p>
<button onClick={() => UB.triggerEvent("Data from custom component")}>Trigger Event</button>
<input onChange={(event) => UB.updateValue(event.target.value)} placeholder="Set state"></input>
</div>
);
}
const Component = UB.connectReactComponent(CustomComponent);
ReactDOM.render(<Component />, UB.container.querySelector('.root'));
// it's a good practice to destroy all resources you consumed in your custom component.
UB.onDestroy(() => ReactDOM.unmountComponentAtNode( UB.container.querySelector('.root')));
</script>
```bash # Use this command if you use Amazon Linux sudo adduser uibakery --password NP # Use this command if you use any other Linux/Mac sudo adduser uibakery --disabled-password ``` 2. Next, create the required `authorized_keys` file and configure its permissions:
# Login as root user
sudo su
# Create the authorized_keys file if it does not exist
mkdir -p /home/uibakery/.ssh
touch /home/uibakery/.ssh/authorized_keys
# Set required permissions and make uibakery user an owner of this file
chmod 644 /home/uibakery/.ssh/authorized_keys
chown uibakery:uibakery /home/uibakery/.ssh/authorized_keys
```bash # Use any text editor and insert previously copied ssh public key in authorized_keys file vim /home/uibakery/.ssh/authorized_keys ```
| /pages/bLlzr4TAl1V0I10IgAev |
| /pages/lZH7OiWELyYmYRigHM0N |
| /pages/QHw0L7pcV3EaYolzFtzW |
| /pages/vZCfLat4umYd8zPk3mlA |
| /pages/l2ble9hHgrqZKSavDdbk |
| /pages/RxWPOnY1C9UToM31yVvp |
| /pages/EJ7VwuYeDQJ4gIfkOAzm |
const orderId = {{data}};
const [orderData, orderDetails] = await Promise.all([{{ actions.loadOrder.trigger(orderId) }}, {{ actions.loadOrderDetails.trigger(orderId) }}]);
return {
...orderData,
details: orderDetails,
detailsNames: orderDetails.map(item => item.productCode),
detailsAmount: orderDetails ? orderDetails.length : 0,
};
- Load and send data between UI components and client-side logic
- The secure operation code must remain inaccessible to users at all times
- Actions with navigations and redirects
- Extensive data transfer between steps
- Calling component methods or accessing document/window objects
| Method | Description |
|---|---|
getItem(key) | Retrieves the value associated with the specified key. |
async setItem(key, value) | Adds key's value or updates key's value if it already exists. Method throws an error when size quota is exceeded. |
async removeItem(key) | Removes the key-value pair with the specified key. |
async clear() | Clears all key-value pairs stored in localStorage. |
| /pages/pzV7zlEXH7FyV5irnBsA |
| /pages/jaY9PNQamxaZAwBDTEbc |
Users & Permissions
Invite users to your workspace, manage their roles and permissions, create custom roles and shared permission groups. [Seats & Shared permission groups in UI Bakery](/concepts/workspace-management/seats-and-shared-permission-groups-in-ui-bakery) [Roles in UI Bakery](/concepts/workspace-management/roles-in-ui-bakery) [Role permissions](/concepts/workspace-management/role-permissions)Profile settings
Access your [account settings](#account-settings).Workspace settings
Access your [workspace settings](#workspace-settings).Audit logs
Keep track of changes and efficiently manage the organization. [Audit logs](/concepts/workspace-management/audit-logs)External analytics
Track, measure, and analyze user behavior, performance, and other key metrics from your organization. You can connect *Datadog*, *Google Analytics 4*, or *Google Tag Manager*.Plans
Access the billing portal or contact our support to upgrade or cancel your subscription.Watch intro
Check out our overview video for a quick introduction to building apps in UI Bakery. [Video intro](/build-from-scratch/video-intro)What's new?
Subscribe to our [changelog](https://changelog.uibakery.io/en) to view the latest UI Bakery updates and stay informed about new features and improvements.Get a demo
Book a demo with our tech experts to learn more about what UI Bakery can offer to match your needs.A role with this permission and Use Dev can view the Dev environment and edit applications.
Additionally, a role with this permission or a role with Can create app permission can view Data sources, Database, AI Playground and Actions library.
| | **Deploy Stage** | A role with this permission and **Use Dev** & **Develop** can *view the Dev environment, edit applications, and deploy them to Staging*. | | **Deploy Prod** | A role with this permission and **Use Dev** & **Develop** can *view the Dev environment, edit applications, and deploy them to Prod*. | | **Can create app** |A role with this permission can create applications. The apps created will be added with the same permissions as the role that created them.
Additionally, a role with this permission or a role that has at least one Develop permission can view Data sources, Database, AI Playground and Actions library.
1. Header
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 * **Release** button * **Share** button - invite users to your app, manage their access, and make the app public2. Left side panel
**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) - here you can manage all your hosted databases. **g. Data sources** - here you can connect your databases and APIs.3. Working area
It's the part of the interface where you can assemble your application page from UI components.4. Right side panel
It shows various settings and triggers of a UI component, if selected, or page settings.5. Footer
**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.| /pages/pExESguAANLPHBxsJ1Vl |
| /pages/sL25xHL2ZzJJROOhFgfS |
| /pages/T1CXVqhtGxDPDd0huM6N |
| /pages/E5dCtVaizk9HHRCMC1KS |
| /pages/GzPMWwdQbQ1O6PQlqs1s |
```javascript const content = 'Hello, world!'; const mimeType = 'text/plain'; return new Blob([content], { type: mimeType }); ``` 2. For the second step, add the **HTTP Request** action step (*POST, Body - Binary*) to reference the result of the previous step: ```javascript { date: {{data}}, filename: 'hello_world.txt' } ```
```javascript const jsonData = await {{actions.requestData.trigger()}}; return jstoxml.toXML(jsonData); //where requestData is an action that returns data to be sent as XML (for example, HTTP Request or Load Table action) ``` 2. For the **second** step, add an **HTTP Request** action that will send the request:\ \ — Select *POST* method and specify the *URL*\ — For **Headers** - specify `Content-Type` `application/xml` \ — For **Body** - `{{data}}`, as the result of the first step 3. Click **Execute action**. {% @arcade/embed flowId="lfYWhJMpsOns5iOZX3Zx" url="
| /pages/Pq4MQXwpVa3fzL7wNBub |
| /pages/DgbF4Zw6IggkO5Ft0kEm |
| /pages/KpbIwoGjDTSvlFySlZrS |
| /pages/dsgyjJUsm9FfxEIfuw5l |
| /pages/8T3zYU8czVER3y9Oy6uP |
| /pages/iUdhCvKr8ZxJqGb1SDKJ |
| /pages/OjHF7n0IY2H1ecygyXp5 |
| /pages/SLO2VIrVtGTrvYVYejk9 |
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment-timezone@0.5.40/moment-timezone.min.js"></script>
IMPORTANT: Expand and read the information below before proceeding to the next step.
**It is essential to ensure that you are loading the appropriate build for browser usage.** The recommended approach is to load the minified UMD build from a CDN as opposed to the `index.js` file. This is because the index.js file may contain `imports` and `require` calls that require preprocessing before they can be utilized in the browser. The naming conventions for builds that are suitable for loading in the browser vary among libraries, but are typically named following the "*umd/\| id | category_id | product_name | price |
|---|---|---|---|
| 1 | 101 | Laptop | $999 |
| 2 | 102 | Smartphone | $599 |
| 3 | 103 | Smartwatch | $199 |
| 4 | 102 | Camera | $449 |
| user_email | category_id | name |
|---|---|---|
| alice@example.com | 101 | Alice |
| bob@example.com | 102 | Bob |
| jane@example.com | 103 | Jane |