> ## Agent Instructions
> Internal links on these pages omit the .md extension. Append .md to a docs page URL, or send an Accept: text/markdown header, to get that page as markdown.
# Setting up an AI agent for your app
Source: https://docs.base44.com/Building-your-app/AI-agents-for-apps
Set up an AI agent for your app, write its guidelines, choose its tools and data access, add skills and memory, and connect it to WhatsApp, Telegram, or LINE.
[AI agents](https://base44.com/ai-agent-builder) turn simple chats into actions in your Base44 app. Instead of only replying with text, they update records, trigger workflows, and connect to tools so you can run more of your process through one conversation.
Each agent understands your app's data and can search the web, call backend functions, and follow detailed guidelines you define. You can shape its tone and persona, decide which tools it can use, and choose the AI model that powers its reasoning. By default, agents use an **Automatic** model that is optimized for fast, cost-effective responses, so everything keeps working the same as before unless you decide to change it.
Memory is on by default for new agents, so every interaction feels more personal and consistent from the start. Your agent can remember important details across conversations, such as preferences, past choices, or shared knowledge, and bring that context back the next time someone reaches out.
Agents automatically figure out which tool to use based on your app and request.
Examples:
* "Mark my summer vacation booking as done" → uses the **update\_task** tool.
* "What was the most visited location in Europe in 2024?" → uses the **google\_search** tool.
* "Add 15 new tasks" → uses the **insert\_task\_records** tool.
***
## Setting up an AI agent
AI agents are available in every app, so you can start creating them right away using the AI chat.
When you chat with an AI agent, Base44 uses **integration credits**. Pricing starts at around **3 integration credits per message** with the default model and then varies based on the model you select and the length of the response.
**To set up an AI agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Choose a suggested agent template or click **Create from scratch** to define your own.
**Tips:**
* Use a suggested template to get started quickly with a pre-built agent role and instructions you can customize.
* If you choose **Create from scratch**, describe what you want in the AI chat and the agent is built based on your input.
* After the AI creates or edits an agent, a card for it appears in the chat. Click the card to open that agent in the editor.
***
## Customizing your AI agent
Each agent has its own configuration panel with the following sections:
* **Guidelines:** Define the agent's behavior, persona, AI model, and context files.
* **Tools:** Control what data and tools the agent can use.
* **Connectors:** Let app users connect their own external accounts to the agent via OAuth.
* **Skills:** Add reusable instruction sets that give the agent specific behaviors or expertise.
* **Memory:** Decide how the agent remembers information across conversations.
* **WhatsApp:** Connect the agent to WhatsApp so people can chat from their phone.
* **Telegram:** Connect the agent to Telegram so people can chat from anywhere.
* **LINE:** Connect the agent to LINE so people can chat from the LINE app.
### Configuring guidelines
Use the **Guidelines** tab to set how your agent behaves and which AI model it uses.
**To customize your agent's guidelines:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **Guidelines**.
5. Update the **Description** to define the agent's role and high-level behavior.
6. Update **Instructions** with detailed rules your agent should follow.
7. Under **Context files**, click **Upload files** or **Choose from library** to add reference material the agent can use to answer questions. For example, product manuals, pricing documents, policies, or FAQs. You can add up to 10 files.
8. Under **AI Model**, select the model that powers your agent. Keep **Automatic** selected for fast, cost-effective responses, or choose one of the Google Gemini, OpenAI GPT, Anthropic Claude, or GLM models for more advanced reasoning.
9. Click **Save**.
For most agents you can use the **Automatic** option. It is optimized for general-purpose tasks and interactive workflows, and starts at about **3 integration credits a message**, rising with the length of the answer.
If you need more control, you can pick a different model. What a message costs depends on the model you choose and on how long the answer is, so here is how the other models compare with **Automatic**:
| Cost compared with Automatic | Models |
| - | - |
| About the same | GPT-6 Luna |
| Several times more | Gemini 3.8 Flash, GLM 5.2, Claude Sonnet 5 |
| Many times more | Claude Opus 5.5, GPT-6.1 Sol |
| The most | GPT-6 Astra, Claude Fable 5.1 |
A long answer on a cheaper model can cost more than a short answer on a pricier one, so treat this as a guide and check **Credits Used** on a message for what it actually cost. You can switch models at any time if your needs change.
If you are not sure which model to use, leave **Automatic** selected. You can always move to a more powerful model later for advanced reasoning or analysis-heavy workflows.
### Allowing anonymous access
By default, people need to log in to your app before they can use an agent. You can let visitors chat with an agent without signing in by turning on anonymous access for that agent, so anyone can start a conversation straight away.
You can view anonymous conversations in the **Users** tab in your **Agents** dashboard, just like logged-in user conversations. [See how to view agent conversations.](#viewing-who-uses-your-agents)
When anonymous access is on, visitors can chat with the agent without signing in, on the web and on connected channels (WhatsApp and Telegram). Anonymous users can't access per-user private data, so keep this off for agents that manage personal data. Anonymous conversations also draw integration credits from your workspace pool, the same as logged-in users, so only turn this on for agents you want open to everyone. The setting is off by default and you control it per agent.
**To allow anonymous access for an agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **Guidelines**.
5. Turn on the **Allow anonymous access** toggle.
6. Click **Save**.
### Managing tools and data access
Use the **Tools** tab to decide what your agent can do and which data it can access.
You can ask the AI chat to add or update tools for your agent. Describe what you want the agent to do and the AI configures the right tools automatically, without you having to set them up in the **Tools** tab.
**To manage an agent's tools:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **Tools**.
5. Choose which tools the agent can use. For example:
* Entity tools to create, read, update, or delete records.
* Backend functions to send notifications, start workflows, or call external APIs.
6. Adjust any tool-specific permissions so the agent only accesses the data it needs.
7. Click **Save**.
You can add or remove tools at any time as your app evolves. For example, you might start with read-only entity tools and later allow updates once you have tested the agent.
### Adding user connectors
Use the **Connectors** tab to let your app users connect their own external accounts to the agent. When a connector is enabled, the agent can create OAuth connect links so each person can authorize access to their own account in that service directly from a conversation.
For example, in a travel advisor app, each user could connect their own Google Calendar so the agent can plan and schedule itineraries on their behalf.
[Learn more about setting up connectors for app users.](/Integrations/Connectors#using-your-own-oauth-client)
**To add a user connector for your agent:**
1. In the AI chat, ask the agent to add a user connector, for example: `I want my app users to connect their own LinkedIn account to this agent.`
2. When the form appears, fill in the required details. These vary by provider but typically include a connector name, Client ID, Client Secret, and the scopes your app needs.
3. Follow the on-screen instructions to authorize the connector and choose the permissions your app users are asked to grant.
4. Click **Approve**.
**Tips:**
* Before filling in the form when adding a connector, make sure you have already created an OAuth app in the provider's developer console and have your Client ID, Client Secret, and required scopes ready.
* If a user connector is already set up in your workspace, it appears in the **Connectors** tab automatically. Go to **Edit Agent**, click **Connectors**, toggle it on, and click **Save**.
* The **Connectors** tab also shows which backend functions are using each connector, so you can see exactly what the agent can do with it.
### Adding agent skills
Skills are reusable instruction sets you attach to an agent to give it specific behaviors, expertise, or policies. You can attach up to 10 skills per agent.
There are 2 types of skills:
* **App Skills:** Skills you create for a specific app. Once created, they can be reused across all agents in that app.
* **Workspace Skills:** Skills shared across your workspace. [Learn more about managing workspace skills.](/documentation/using-your-workspaces/adding-workspace-skills)
**To add an app skill to your agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **Skills**.
5. Click **Add Skill** under **App Skills**.
6. Choose how to create the skill:
* Select **Start from scratch** to write your own instructions.
* Select a template such as **refund-policy**, **support-escalation**, **pricing-and-plans**, or **brand-voice** to start from a ready-made structure.
7. Enter a **Skill name**, an optional **Description**, and your **Instructions**.
8. Turn on the **Enable for current agent** toggle if you want the skill to be active right away.
9. Click **Create Skill**.
10. Click **Save**.
To use a workspace skill, scroll to **Workspace Skills** and toggle on any skill you want to enable for this agent.
### Configuring memory
Agent memory lets your agent remember important information across conversations, such as preferences, key facts, or shared knowledge. You control whether memories are shared across everyone or kept specific to each person. Your agent also manages its own memory size: when its memory reaches around 50,000 characters, it automatically condenses older entries to stay within the limit, keeping the most relevant information.
Memory is turned on by default for new agents.
**To turn on memory for your agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **Memory**.
5. Click the **Enable Memory** toggle to turn memory on.
6. Under **Memory Scope**, choose how this agent saves memories:
* **Global & Per User:** The agent can create shared memories for everyone and personal memories for each person.
* **Global Only:** The agent creates memories that are shared across everyone who chats with it.
* **Per User Only:** The agent creates memories that are specific to each person.
7. In **Memory Instructions**, enter guidance that explains when to save memories and what to include.
8. After your agent has a few conversations, review **Saved Memories** to see what the agent has stored. Click **Refresh** to load new memories.
9. Click **Save**.
Use memory instructions to keep your agent focused. For example:
* Save global memories for product updates, company announcements, and shared knowledge.
* Save user memories for personal preferences such as communication style, tone, and specific interests.
***
## Connecting to messaging channels
Connect your agent to outside messaging apps so people can chat with it without opening your app. Each connected channel has the same capabilities as your in-app agent, and you set up and connect each one separately.
### WhatsApp
Connect your agent to WhatsApp so people can message your app's agent directly from their phone, without even opening the app.
A WhatsApp-connected agent can do everything your in-app agent does. This includes creating, reading, updating, or deleting entities in your app, triggering backend functions such as sending notifications or starting workflows, and managing your app's data, like updating tasks and adding records. If your agent can do it inside your app, it can do it in WhatsApp too.
* This feature is available for free on all plans.
* A total of 3 in-app agents can be connected to WhatsApp across all your apps. This limit is separate from [Superagent WhatsApp connections](/superagents/customizing-your-superagent#whatsapp), which have their own pool. If you try to connect more than 3, you're prompted to disconnect one before continuing.
* Each agent is assigned its own WhatsApp number.
* WhatsApp agents use **integration credits only**. No message credits are charged. Each message sent or received uses **1 integration credit** for the WhatsApp relay, plus additional integration credits for agent actions such as LLM calls, image generation, or sending emails.
* Your app visitors don't need to install anything to use WhatsApp agents. They simply tap the WhatsApp button in your app to start a chat. People must send the first message, to help prevent spam and keep them safe. Once the conversation begins, the agent can reply just like it does inside your app.
* WhatsApp conversations support images and voice messages.
* Your agent also reads shared locations and contacts. A location comes through with its coordinates, place name and address, and a contact as a name and phone number, with nothing else from the contact card.
* Your agent can tell that someone sent a sticker, but not what the sticker shows.
* When your agent needs approval to install a skill, it asks right in your WhatsApp chat with it. Reply **Yes** to install or **No** to cancel. Other actions that need your approval are handled from the Base44 agent dashboard instead.
* If your app is public, people need to log in to your app before they can use the WhatsApp agent. This makes sure the agent can identify who it is chatting with and respond based on their data. To let people chat without logging in, turn on **Allow anonymous access** in the agent's **Guidelines** tab. Anonymous users can't access per-user private data.
**To enable WhatsApp for your agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **WhatsApp**.
5. Click **Send to Chat** under **Add WhatsApp to Your App** to add a WhatsApp button to your app.
6. Customize the WhatsApp welcome message.
7. Click **Save**.
### Telegram
Connect your agent to Telegram so people can message it directly from Telegram, without opening your app.
A Telegram-connected agent has the same capabilities as your in-app agent. It can create, read, update, or delete records, trigger backend functions, and manage your app's data.
* All web chat features work seamlessly in Telegram, including tools and data access.
* People can send voice notes and images for natural interaction.
* Your agent also reads shared locations, stickers and contacts. A pin or named place comes through with its coordinates and address, a sticker as the emoji it stands for, and a contact as a name and phone number, with nothing else from the contact card.
* A live location gives your agent one snapshot from the moment it was shared, not continuous updates.
* Your Telegram bot is created and connected instantly with no manual configuration needed.
* To start a conversation, people open your bot in Telegram and send `/start`.
* You can add a Telegram button to your app so people can open the bot directly from your app.
**To enable Telegram for your agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **Telegram**.
5. Click **Connect Telegram Bot**.
6. Follow the prompts in Telegram to create and connect your bot.
7. Click **Send to Chat** under **Add Telegram to Your App** to add a Telegram button to your app.
8. Customize the Telegram welcome message.
9. Click **Save**.
### LINE
Connect your agent to LINE so people can message it directly from the LINE app, without opening your app.
A LINE-connected agent has the same capabilities as your in-app agent. It can create, read, update, or delete records, trigger backend functions, and manage your app's data.
**Notes:**
* LINE is only available in Japan.
* LINE replies are plain text only. Avoid using markdown or HTML in your welcome message or guidelines.
**To enable LINE for your agent:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click **Edit Agent** on the relevant agent.
4. Click **LINE**.
5. Scan the QR code or copy the activation code, open LINE on your phone, add the Base44 bot, and send the activation code to connect.
6. Click **Send to Chat** under **Add LINE to Your App** to add a LINE button to your app.
7. Customize the LINE welcome message.
8. Click **Save**.
Activation codes expire after 30 minutes. If yours has expired, click **Regenerate Code** to get a new one.
***
## Viewing who uses your agents
The **Users** tab in your **Agents** dashboard shows every app user who has chatted with one of your agents. For each user you can see their role, how many agents they have used, their total conversations, and credits used. You can sort the list by agents, conversations, or credits.
You can drill down from a user into their conversations with a specific agent, and open any conversation to read the full transcript.
**To view agent users:**
1. Go to **Dashboard** in your app editor.
2. Click **Agents**.
3. Click the **Users** tab.
4. Click a user row to see which agents they have chatted with and how many conversations and credits each agent used.
5. Click **View** next to an agent to see that user's full conversation list for it.
6. Click a conversation to read the full transcript, including messages, tool calls, and credits used.
**Tips:**
* Use the search bar to find someone by name or email.
* Use **Filter by** to filter by agent or role (User, Editor, or Admin).
* Use the date picker to filter by today, the last 7 days, the last 30 days, or all time.
* Click a column header to sort by agents, conversations, or credits.
***
## FAQs
Click a question below to learn more about AI agents.
This can happen if there's an empty entity in the agent's **Tools and Capabilities** settings.
**To resolve this:**
1. Open your agent's settings.
2. Click the **Tools and Capabilities** tab.
3. Either update or remove the empty entity.
4. Click **Save**.
After updating, you should be able to send messages without errors.
Yes. Agents are available on all plans, including the Free plan.
Agents are flexible powerful tools that help you:
* Automate repetitive tasks.
* Get informed, real-time answers.
* Keep your workflow inside one app.
* Pick the right tools automatically.
Go to **Dashboard**, click **Agents**, and click the **Users** tab. Click a user to see their conversations per agent, then click **View** to open the conversation list. Click any conversation to read the full transcript.
The AI model you choose affects both how your agent behaves and how many integration credits it uses.
* **Automatic** picks a fast, general-purpose model for each message and starts at about **3 credits**, rising with the length of the answer.
* **GPT-6 Luna** costs about the same as Automatic.
* **Gemini 3.8 Flash**, **GLM 5.2**, and **Claude Sonnet 5** cost several times Automatic.
* **Claude Opus 5.5** and **GPT-6.1 Sol** cost many times Automatic.
* **GPT-6 Astra** and **Claude Fable 5.1** are built for the hardest reasoning and cost the most of any option.
If you are not sure which model to use, keep **Automatic** selected so you get a good balance of speed, quality, and cost.
You can attach up to 10 skills per agent. Skills can be a mix of app skills you create yourself and workspace skills shared across your workspace.
From **Agents** in your app's dashboard, you can see the total credits used by an agent directly below its name.
App skills are created inside a specific app and can be reused across all agents in that app. Workspace skills are shared across your entire workspace and are managed in your workspace settings. You can toggle workspace skills on or off for individual agents without editing the skill itself.
Yes. A workflow with an **In-app agent** trigger runs the moment someone starts a new conversation with your agent. Use it to get notified when a customer reaches out, add them to your contacts automatically, or send yourself a summary at the end of the day.
Ask the AI chat to set it up, for example `When someone starts a conversation with my agent, email me their name and first message`. Learn more about [creating workflows](/Building-your-app/Creating-workflows#in-app-agent).
# Using the AI Chat in Base44
Source: https://docs.base44.com/Building-your-app/AI-chat-modes
Describe your idea and the AI builds it for you. Switch between chat modes, choose the model that powers your app, and set the controls that shape each build.
## About the AI chat
The Base44 AI chat is more than just a code generator. It works as your intelligent assistant, understands your goal, and uses the right tools to get you there. Your apps become more accurate, context-aware, and flexible, so you can focus on building complex features quickly, with smart automation working in the background.
Unlike traditional AI that only responds with text, the agentic AI knows when to search the web, check your files, or pull in data from other sources. It also uses automatic model selection to choose state-of-the-art models based on what your prompt needs, so you get real solutions without needing to manage models or technical details yourself.
The AI chat is how you build your app. To give the people using your app an assistant of their own to talk to, see the [AI agent builder](https://base44.com/ai-agent-builder).
* Share a public website link with the chat to instantly copy the design, layout, and visible content into your app. For example: "Copy the layout from `https://example.com`."
* Ask the agent to help you follow best practices by searching for ready-made code or common solutions. For example: "Show me the standard pattern for user authentication."
* Pull lists or content from other websites and use it in your app, such as importing product catalogs or gathering site text and images. For example: "Import the product list from `https://example.com`."
* Directly update your app's database with simple, clear instructions. For example: "Give Emily a point for doing her homework."
After the AI applies your changes, it automatically checks the output in the background and fixes any errors it finds, without interrupting your workflow or requiring any input from you.
The AI chat also suggests useful next steps as you build. These suggestions appear below the chat and are tailored to your current workflow, helping you discover new features and make the most of your app.
***
## Using the AI chat modes
Base44's [AI app builder](https://base44.com/ai-app-builder) includes 3 chat modes for building your app:
* **Build:** Acts instantly on your prompts.
* **Discuss:** Lets you ask questions or plan your next change, with no code changes until you approve them.
* **Edit:** Lets you click elements in your preview to adjust visuals directly.
Press **Cmd + .** on macOS or **Ctrl + .** on Windows and Linux to switch modes, even while you're typing a prompt.
### Using Build mode
Type what you need, and the AI acts right away. This mode is perfect for quick edits and feature requests. To get the best results, be as specific as possible. The more detail you give, the more precisely the AI builds your app. Build mode is selected by default, so you only need the steps below when you are coming back from another mode.
**To switch to Build mode:**
1. Go to the AI chat in your app editor.
2. Click the mode drop-down at the bottom of the chat.
3. Select **Build**.
**Example prompt**
```text theme={null}
Add a new page that shows a map of the world where I can mark off the places I have visited.
```
For more examples and prompt frameworks, check out the [Prompt Guide](/Getting-Started/Prompt-guide).
### Using Discuss mode
Brainstorm, clarify, or explore ideas before changing your app. It is a safe space to ask questions, get suggestions, or talk through options. Depending on what you ask, the AI answers you directly or proposes a change for you to review, and nothing is built until you approve it. Each message in Discuss mode uses 0.3 credits. When you are ready for the AI to implement your changes, switch back to Build mode and ask it to make them.
When the AI proposes a plan, it appears just above the chat box. Click **View** to read the full plan, **Approve** to build it, or **Reject** to keep talking it through. After you decide, the plan stays in the chat as a card, and you can click it to open the plan again.
**Good to know about Discuss mode:**
* It saves credits by avoiding unnecessary trial and error before you finalize changes.
* It uses its own AI model regardless of the model selected in your app, which is what keeps its cost low.
**To switch to Discuss mode:**
1. Go to the AI chat in your app editor.
2. Click the mode drop-down at the bottom of the chat.
3. Select **Discuss**.
**Example prompt**
```text theme={null}
What is the best way for users to invite their friends to my app?
```
### Using Edit mode
Make changes to the design of your app, either manually or by asking the AI to do it for you. Edit mode has its own button at the top of the editor rather than sitting in the chat mode drop-down.
Your edits save automatically as you work. You can undo and redo up to 50 steps within the same visual edit session using the undo/redo buttons at the top of the editor, and your edits remain through preview reloads.
If you try to leave with unsaved changes, your browser warns you before you go. Your edits also appear in [**Version History**](#restoring-or-publishing-a-previous-version), so you can restore a previous set of manual edits at any time.
**To make changes to the design of your app:**
1. Go to your app editor.
2. Click **Edit** at the top of the editor.
3. In your app preview, select what you want to change:
* **One element:** Click it.
* **A group of elements:** Click an element that repeats elsewhere on the page. Every repeat highlights, and your change applies to all of them at once.
4. Make your change:
* **Manually:** Edit the element directly. For example, you can change background colors, text colors, or spacing. You can also open the element's code, adjust its tailwind classes to fine-tune spacing, typography, layout, and responsiveness, or remove it with the **Delete** icon in the Edit toolbar. This does not use credits.
* **Using the AI chat:** Click **Edit Element**, then write what you want changed and the AI takes care of it. This uses message credits, and how many depends on the size and complexity of the change.
***
## Customizing your AI chat
How the AI chat behaves on your app is up to you. Pick the model that powers it, decide how often it stops to ask your permission, lock the files it must not touch, and give it rules to follow on every prompt.
You pick the model from the model icon at the bottom of the AI chat in your app editor. The other settings are under the **More options** icon next to **Build**. **Freeze Files** and **Custom Instructions** apply to your main app, so they do not appear while you are working on a branch.
### Choosing your model
Choose a model manually when you want more control. Each model brings unique strengths, so you can pick the best fit for your prompt. You can pick one when you write your first prompt, or change it at any time while you are working in your app editor.
**Before you choose a model:**
* You need a [**Builder plan**](https://base44.com/pricing) or higher to choose an AI model.
* When you choose a model manually, credit usage varies by model and may use more credits than **Auto mode**. Check the exact cost under **Credits Used** for each message.
* Some models are rolling out gradually and may not be available to all accounts yet.
* **Auto mode:** Matched with the best AI model for each request.
* **Base 1:** Base44's first in-house model, trained on real building patterns from across the platform. A well-rounded, general-purpose choice for both everyday building and conversation.
* **Sonnet 5.5:** A well-balanced choice for day-to-day building, writing, refactoring, and troubleshooting, with a strong mix of quality and speed.
* **Opus 5.5:** The most advanced reasoning model, built for the hardest problems. Use it for complex multi-step logic, intricate architecture decisions, and edge cases where you need the highest level of accuracy.
* **Gemini 3.8 Flash:** A fast option for everyday tasks and quick changes, when you want a response back straight away.
* **GPT-5.6 Terra:** A cost-efficient GPT-5.6 option for complex reasoning and multi-step planning, at a lower credit cost.
* **GPT-6.1 Sol:** A strong GPT-6.1 option for hard reasoning and large, evolving projects.
* **GPT 6 Astra:** The newest and most capable GPT model, for the hardest reasoning and the most demanding builds. Uses more credits for each request.
* **Fable 5.1:** Great for complex, multi-step builds and detailed debugging, when you want thorough, high-quality results. Uses more credits for each request.
Expand an option below to see how.
Set your model before you send your first prompt, so your first build uses the one you want.
1. On the Base44 homepage, below the prompt box, click the model button. It shows **Auto** until you choose a model.
2. Select the model you want, or keep **Auto mode**.
Switch models at any time while building your app from the app editor.
1. Go to your app editor.
2. In the AI chat, click the model icon at the bottom of the panel.
3. Select the model you want to use, or keep **Auto mode** to let Base44 pick the best model for each request.
Not sure which model to choose? Keep **Auto mode** and Base44 selects the best model for each request.
### Using Auto approve
Auto approve reduces interruptions while you build. With it on, most steps that would pause for your approval run on their own, and the steps that need something from you still ask. Changes that widen access to your data always ask first, even if you requested them in the chat, such as giving someone write access or loosening who can see or change a table. It covers your whole app rather than individual steps, so everyone building in it gets the same behavior, and your choice stays as you set it even if the default changes later.
Anything that ran without asking is labeled **auto-approved** in the chat, so you can still see what happened. Click the label to manage the setting, or turn **Auto approve** off to review steps before they run.
**To turn Auto approve on or off:**
1. Click the **More options** icon next to **Build** at the bottom of the AI chat in your app editor.
2. Turn **Auto approve** on or off. Your choice applies immediately, so there is nothing to save.
### Freezing files
Lock files so the AI does not modify them, to protect work you want left alone. Files are grouped by type, such as pages, components, functions, entities, agents, and workflows.
**To freeze files:**
1. Click the **More options** icon next to **Build** at the bottom of the AI chat in your app editor.
2. Click **Freeze Files**.
3. Select the checkbox next to each file you want to protect.
4. (Optional) Next to a group, select **Freeze folder** to lock everything in that folder, or select **Select all files** to lock every file in your app.
5. Click **Save changes**.
Everything you lock appears under **Frozen folders & patterns**, where you can click **Remove** to unlock it again.
### Adding custom instructions
Add guidance the AI follows on every prompt, such as tone, design standards, or preferred behavior. You write it once, and it applies to every interaction in this app.
**To add custom instructions:**
1. Click the **More options** icon next to **Build** at the bottom of the AI chat in your app editor.
2. Click **Custom Instructions**.
3. Enter your instructions in the text box, one per line.
4. Click **Save changes**.
***
## Adding a skill or connector to your prompt
Type `/` in the AI chat to pull a workspace skill or a connector into what you are asking for, instead of describing it in words. Keep typing to filter the list, and press Enter or click to add it to your prompt.
The menu has 2 groups:
* **Skills:** The [workspace skills](/documentation/using-your-workspaces/adding-workspace-skills) available to you, so the AI chat follows those instructions for this prompt. You can add one skill to a prompt.
* **Connectors:** The connectors your app can use. Ones your app is already connected to show a **Connected** badge, and you can add more than one.
If you pick a connector your app is not connected to yet, the AI chat sets up the connection as part of building your request.
Use **Manage skills** or **Manage connectors** at the bottom of the menu to add something that isn't in the list yet.
***
## Queuing messages in the chat
When the AI chat is already working on a prompt, you do not need to wait before asking something else. You can keep typing, add more prompts, and attach files. The AI chat adds them to a message queue and sends them one by one as each response finishes.
**Notes:**
* The queue appears above the chat input and shows all pending prompts in the order they run.
* You can queue up to 7 messages at once.
* Queued messages do not send if you close the app editor. When you reopen the editor, any queued messages resume.
You can edit your queue at any time. Drag and drop messages to change their order, edit a queued message inline before it is sent, remove individual messages or clear the entire queue if you change your mind. You can also pause or resume the queue whenever you need.
To change course without waiting, click **Send now** on a queued message. The AI chat picks it up straight away and adjusts the work in progress, including your app's first build. Send now works for plain text messages in Build mode that you queued yourself. To run a queued prompt alongside the current work instead, you can [move it to a parallel branch](/Building-your-app/working-with-branches#branching-a-queued-prompt).
***
## Comparing models
Every AI model has its own strengths and weaknesses: one might be better at design and visual polish, while another is stronger at logic and working with data. Instead of guessing which model fits your request, Compare models runs your next message on 2 models at once, so you can preview both results and keep the one you prefer. Your main app is not touched until you choose.
### Starting a comparison
Choose which 2 models you want to compare from the model picker, then send the message you want built both ways.
**Before you send:**
* Comparing requires a [**Builder plan**](https://base44.com/pricing) or higher, the same as choosing a model manually.
* Comparing builds your message twice, so it uses 2× credits.
* Messages with attachments are not supported yet. If your message includes one, the comparison is removed and the message is sent normally.
* To cancel before sending, click the **X** on the model chip in the chat input.
**To compare 2 models:**
1. Open your app in the app editor.
2. Click the model picker in the chat input.
3. Click **Compare**.
4. Choose **Model A** and **Model B**. They must be 2 different models.
5. Click **Select**.
6. Send your message. Base44 builds it twice, once with each model.
### Choosing a version
While the 2 versions are being built, the chat shows a **Comparing two versions** card with each version's status. When both are ready, the card asks **Which option do you prefer?** and lists the versions as **Option A** and **Option B**.
Behind the scenes, each compared version is a [branch](/Building-your-app/working-with-branches) of your app, so you can also find both versions in your branches list while you decide.
**To finish a comparison:**
1. Click **Open** on an option to preview it. Use the model tabs at the top of the preview to switch between the 2 versions, and keep chatting in a version if you want to refine it before deciding.
2. Do one of the following:
* **Select the version you prefer:** On the card, choose **Option A** or **Option B** and click **Select**. The version you keep is merged into your main app, and the version you did not keep stays in your version list until you delete it.
* **Reject both:** Click **Reject**, then click **Delete both** to confirm. This removes both versions and their chats for good. Your main app is untouched.
***
## Reverting changes
Experiment freely and try new ideas, knowing you can always undo your changes at any time. You can roll your app back to a specific prompt, restore a previous version into the editor, or publish a previous version directly from Version History without changing what you are currently working on.
### Reverting a specific prompt
Hover over the relevant message in your chat history and click the **Revert** icon under it to roll your app back to the state it was in just before that change. Any changes made after that point are also undone, so you can quickly return to an earlier version of your app.
If you want to change what you asked instead of just undoing it, click the **Edit** icon on that earlier message. The chat opens an **Edit this message and resend** panel. When you resend, Base44 reverts any changes made after that message and then applies your updated request.
### Restoring or publishing a previous version
Click the **Version History** icon at the top of the chat to open your version list. From there you can preview versions, publish a previous version without changing your current draft, revert your editor to an older version, view or compare the code, or jump back to the chat message that created that version.
Click a version in the list to load it in the preview. For each version, click the **More actions** icon and choose:
* **Publish this version:** Publish this version to your live app while keeping your current draft open in the editor so you can keep working.
* **Revert to this version:** Replace your current draft in the app editor with this version.
* **Code changes:** See which files this version changed compared with the version before it, and what changed in each one.
* **Compare code vs main:** On a [branch](/Building-your-app/working-with-branches), see how this version's code differs from main.
* **View code:** Open the code for this version.
* **Go to message in chat:** Jump to the chat message that created this version. This appears on versions created from the chat.
### Checking unpublished changes
Before you publish, you can check exactly what has changed since your last publish. Base44 opens an **Unpublished changes** window that lists every file that differs from your live app and what changed in each one. This option appears when your app is published and you are working on main.
**To compare your draft with your live app:**
1. Click the **More actions** icon at the top right of your app editor.
2. Click **Compare with live code**.
***
## FAQs
Click a question below to learn more about AI chat modes and controls.
A few conditions have to be true first:
* Your app needs at least one build. Build something first, then compare.
* Comparisons start from your main version. If you are on a branch, switch back to main.
* Model A and Model B must be 2 different models, and both must be available for comparison.
* Imported apps are not supported yet.
When Base44 detects a JavaScript error in your app preview, an **Issues Found** notification appears in the editor with a description of the error and where it occurred.
Click **Resolve with AI** to send the error details to the AI chat. The AI reviews the error and applies a fix. This does not count toward your message credits.
To dismiss the notification without fixing it, click **X** to close it.
If your app freezes, the chat is unresponsive, or a change does not undo as expected, try these steps to get back on track:
* **Refresh the page** to reload your latest working version.
* **Clear your browser cache** and reload your app to remove any stored conflicts.
* **Try a private window** or another browser to rule out extension conflicts.
* **Disable browser extensions** temporarily if the issue persists.
* **Check your credits and plan limits**, since running out of credits can interrupt AI actions.
* **Revert the last AI action** in the chat by clicking the **Revert** icon under that message, or use **Version History** to roll back to a stable version.
For step-by-step solutions, including how to unstick a frozen prompt or stop button, see the [Troubleshooting guide](/Community-and-support/Troubleshooting).
Base44 does not offer refunds or credit reversals for AI actions. You can use [**Version History**](#reverting-changes) to undo changes and restore your app.
The agentic AI uses a wide range of tools to help you build and manage your app, including:
**Database tools:**
* Read, create, update, and delete records in your app's database. It can filter, sort, paginate, or update or delete in bulk. For example, add test people, mark old messages as read, or remove expired records.
**Web tools:**
* Perform web searches to find relevant documentation or features. This works like a search engine with relevant pages, titles, and descriptions.
* Fetch website data from any URL. Retrieve markdown or HTML, for example to scrape documentation or get live page content.
**Code and file tools:**
* Smart file search. Quickly find files or code snippets needed for your workflow.
* Read the contents of any project file before editing. This is useful for reviewing your app's code structure.
* Modify files in your project. Edit pages, components, entities, functions, or layouts, and support targeted partial edits. For example, fix bugs, add features, or update styling.
* Inspect logs and console output to help with debugging or understanding errors.
**Configuration tools:**
* Set or update environment variables and secrets as needed. For example, add or update API keys like `OPENAI_API_KEY` or `STRIPE_SECRET_KEY`.
The agent automatically chooses and combines these tools based on what you need, so you can focus on describing your goals instead of the technical steps.
The agentic AI can fetch and interpret content from public website pages and other static data, but it cannot automatically access or migrate complex backend logic, databases, or private integrations. If your project requires backend features, connections to other services, or secure data, you still need to set these up manually.
For example, if you ask the agent to copy content or features from another app, it can match layouts, text, and the overall look based on what is visible on the public site, but it does not copy any backend logic, migrate private integrations, or access protected database content.
For any work that goes beyond the public front end, manual setup is required to complete your app.
All times in the Base44 app editor are managed and displayed using Coordinated Universal Time (UTC). This keeps everything consistent across different regions and makes it easier to coordinate actions or schedules, no matter where you or the people using your app are located. There is no option to change the time zone in the app editor at this time.
Yes, you can use your voice to interact with the AI chat in Base44. Click the microphone icon in the chat box to turn on speech-to-text, then speak your question or request. The AI transcribes your speech and responds as usual, so you can get help hands-free.
Base44 uses automatic model selection to match each request with the engine best suited for the job. Design tweaks, layout changes, and deep logic updates may all use different AI models. The chat handles this in the background, so you can stay focused on describing what you want to build.
* For small visual or copy tweaks, it chooses fast, efficient models that optimize for speed and responsiveness.
* For larger architectural changes or data flows, it uses deeper reasoning models that can plan across files, entities, and logic.
* When something fails or runs into an error, it can switch strategies or models to recover and try again.
# Using the canvas
Source: https://docs.base44.com/Building-your-app/Canvas
View and work on all your app pages at once. Add notes, drawings, and images, collaborate with your team in real time, and send ideas straight to the AI chat.
The canvas lets you view and work on all your app pages at once. Every page appears as a live-preview frame on an infinite board that you can arrange, annotate, and build on together with your team. Everything saves automatically as you work.
Use the canvas to plan your app layout, leave notes and feedback for yourself or your team, sketch ideas with drawings, or send instructions straight to the AI chat for implementation.
You can use **Edit** mode on the canvas just as you would in the regular editor. Click **Edit** in the top bar to select and style elements on any page frame.
***
## Accessing the canvas
To access the canvas, open your app editor and click the Canvas icon in the top bar.
When you open the canvas for the first time, it fits all your app pages into view. After that, your zoom level and position are saved per device, so the canvas reopens where you left off.
***
## Collaborating on the canvas
Multiple people can work on the canvas at the same time. Each collaborator's cursor appears as a named pointer as they move around. Colored outlines show which elements each person has selected.
You can add collaborators to your app from the top of the editor. [Learn more about collaborators](/Setting-up-your-app/Managing-access#inviting-collaborators)
***
## Managing the page frames
Every page in your app appears as a frame on the canvas, showing a live preview of that page.
You can do several actions on your page frames.
Click the frame to select it first, then click and drag the frame to move it wherever you want on the canvas.
Each frame has a viewport dropdown in the top right of its header. Click it to switch between **Desktop**, **Tablet**, and **Phone** to see how the page looks on different screen sizes.
Click the frame to select it. Resize handles appear on the edges. Drag any handle to adjust the frame's width and height.
Right-click the frame and select **Refresh** to reload the page preview.
Pages cannot be deleted from the canvas. To remove a page, ask the AI chat to delete it for you.
***
## Using the canvas toolbar
The toolbar on the right side of the canvas gives you access to the main tools.
See what you can do with the toolbar:
| | **Tool** | **Shortcut** | **What it does** |
| - | - | - | - |
| | **Select** | V | Select, move, and resize elements |
| | **Hand** | H | Pan around the canvas without selecting anything |
| | **Draw** | D | Freehand drawing |
| | **Sticky note** | N | Add sticky notes |
| | **Image** | I | Add images |
Press **Escape** at any time to return to the **Select** tool.
***
### Sticky notes
Sticky notes are the main way to leave ideas, feedback, and instructions directly on the canvas.
Learn more about sticky notes:
**To add a sticky note:**
1. Click the **Sticky note** tool in the toolbar or press **N**.
2. Click anywhere on the canvas to place the note.
3. Double-click the note to start typing.
The avatar of the person who created the note appears at the bottom left.
When a sticky note is selected, a toolbar appears below it with formatting options:
* **Color**: choose a background color for the note.
* **Aa** **Font family**: Choose from 4 styles: default, handwriting, mono, or serif.
* **S** **Font size**: Small, Medium, Large, or Extra large.
* **B** **Bold**: make the text bold.
* **Bullet list**: format the note as a bulleted list.
Each sticky note has a **Status** dropdown at the top. Click it to set the status:
* To do (orange)
* In progress (blue)
* Done (green)
Connect a sticky note to a page frame to show which page it relates to.
**To connect a sticky note to a page:**
1. Hover over the note to reveal the connection handles on its edges.
2. Drag from a handle to the page frame you want to connect.
Once you write a note, you can send its content to the AI chat for implementation. Hover over or select the note, then click **Send to chat** at the bottom right of the note.
* If the note is connected to a page frame, the AI applies the change to that specific page.
* If the note is not connected to a page, the AI decides which page to update based on the content of the note.
***
### Drawings
The draw tool lets you sketch freehand anywhere on the canvas.
Learn more about drawing on the canvas:
**To draw on the canvas:**
1. Click the **Draw** tool in the toolbar or press **D**.
2. Click and drag on the canvas to draw.
When the draw tool is active, you can customize it:
* **Stroke color** : Click the drawing to open the color picker and choose your drawing color, or enter a hex value directly.
* **Stroke weight** : Click the drawing and drag the slider to adjust the thickness of your stroke.
* **Flip**: Right-click a drawing and select **Flip horizontal** or **Flip vertical**, or use the **⇧H** and **⇧V** shortcuts.
***
### Images
You can add images to the canvas from multiple sources. Images are placed in the center of your current view.
Learn more about adding images to the canvas:
**To add an image:**
1. Click the **Image** tool in the toolbar or press **I**.
2. Choose where to get the image from:
* **Upload from computer**: Select a file from your device.
* **Import from Drive**: Pick a file from your connected Google Drive.
* **Add from file library**: Choose from your app's existing assets.
Select the image to access the toolbar below it:
* **Replace image:** Swap the image for a different one.
* **Crop:** Trim the image.
* **Border:** Add or adjust a border around the image.
* **Flip:** Right-click to flip the image horizontally or vertically.
***
### Right-click actions
Right-click any sticky note, drawing, or image to open its context menu. The following actions are available:
| Action | Keyboard shortcut |
| - | - |
| Cut | ⌘X |
| Copy | ⌘C |
| Paste | ⌘V |
| Paste to replace | ⇧⌘R |
| Duplicate | ⌘D |
| Delete | Delete or Backspace |
| Bring to front | ] |
| Send to back | \[ |
| Flip horizontal (drawings and images) | ⇧H |
| Flip vertical (drawings and images) | ⇧V |
| Lock / Unlock | ⇧⌘L |
***
## Adding arrows
You can connect any 2 elements on the canvas with an arrow to show relationships, for example linking a sticky note to the page it refers to.
**To create an arrow:**
1. Hover over an element to reveal the connection handles on its edges.
2. Drag from a handle to another element.
To remove an arrow, select it and press **Delete** on your keyboard.
***
## Locking elements
Locking an element prevents anyone from moving, resizing, or editing it until it is unlocked. This helps avoid conflicts when multiple people are working on the same canvas. You can lock sticky notes, drawings, and images.
**To lock or unlock an element:**
* Right-click the element and select **Lock** or **Unlock**.
* Or select the element and press **⇧⌘L**.
***
## Undoing and redoing changes
You can undo and redo your recent canvas edits using keyboard shortcuts or the undo/redo buttons that appear in the toolbar when there is history to step through.
Undo and redo cover most canvas actions: creating, moving, resizing, editing, deleting, locking, and connecting elements.
| Action | Mac | Windows |
| - | - | - |
| Undo | ⌘Z | Ctrl+Z |
| Redo | ⇧⌘Z | Ctrl+Shift+Z or Ctrl+Y |
Undo and redo are personal. Your history is separate from your collaborators', so undoing a change only reverses your own edits, not theirs. The canvas keeps up to 50 steps of history.
***
## Zoom and navigation
The zoom bar sits at the bottom right of the canvas.
| Control | Shortcut | Action |
| - | - | - |
| **Zoom to fit** | ⌘1 | Fit the whole canvas into view |
| **−** | ⌘- | Zoom out one step |
| Percentage | | Click to open a dropdown with preset zoom levels |
| **+** | ⌘+ or ⌘= | Zoom in one step |
| | ⌘0 | Reset to 100% |
# Commenting on your app
Source: https://docs.base44.com/Building-your-app/Commenting-on-your-app
Pin comments to any element on your app preview, discuss feedback in threads with your collaborators, and send comments to the AI chat for Base44 to handle.
Comments give you and your collaborators a way to discuss your app while you build and edit it, right on the preview. Pin a comment to any element, work through feedback in threads, and send comments straight to the chat for Base44 to handle.
***
## How comments work
Comments live in your app editor's preview. Each comment is pinned to the element you click and starts a thread where your collaborators can reply, react, and resolve.
Everyone who can edit the app sees the same comments, and new activity appears for all of you in real time. Comments stay anchored to their element as your app changes, so a thread you start today still points at the right spot after your next build.
Comments belong to the branch you add them on. On a [branch](/Building-your-app/working-with-branches), you see only that branch's comments, and on main, only main's. When you merge or delete a branch, its comments are deleted, so act on anything you still need first.
Comments are only visible inside the app editor. People using your published app never see them.
To turn on comments, click the **Comments** icon at the top right of your app editor, next to your avatar.
***
## Adding a comment
Add a comment by pointing at the exact element you want to talk about.
### Writing your comment
Base44 captures a screenshot of the spot you click, and you can mention collaborators or add emoji as you write.
**To add a comment:**
1. Click the **Comments** icon to turn on comments.
2. Click the element you want to comment on. Base44 drops a pin and captures a screenshot of that part of the page.
3. Type your comment.
* To mention a collaborator, type **@** or click the **Mention someone** icon , then choose them from the list.
* To include an emoji, click the **Add emoji** icon .
4. Click the send icon or press **Enter** to post it.
### Editing a comment
You can rewrite comments you posted yourself.
**To edit a comment:**
1. Open the thread and hover over your comment.
2. Click the **More actions** icon and select **Edit**.
3. Change your text, then confirm.
### Editing the screenshot
If the captured screenshot doesn't frame the right area, you can re-crop it on comments you created. Moving the frame also moves the comment's pin to the element under it.
**To edit a comment's screenshot:**
1. Open the thread, hover over the screenshot, and click **Edit**.
2. Drag the frame over the area you want to capture.
3. Click **Save screenshot area**.
***
## Working with comment threads
A pin shows the avatars of everyone in the conversation. Click it to open the thread, or hover over it for a quick preview. In a thread you can:
* **Reply**: Continue the conversation under the original comment.
* **React**: Hover over a comment and click the **Add reaction** icon .
* **Resolve**: Click the **More actions** icon and select **Resolve** to mark the thread as handled. Resolved threads leave the preview and the default list, and you can unresolve a thread to bring it back.
* **Delete**: Remove a reply you wrote, or select **Delete thread** under the **More actions** icon to remove the entire thread. Deleting a thread removes it for everyone and can't be undone.
***
## Sending comments to the AI chat
Instead of handling feedback yourself, hand it to Base44. Sending a thread to the chat asks Base44 to read the comment, look at its screenshot, and act on it.
**What happens when you send a comment:**
* The thread appears in your chat as a comment card that tracks its status live, and you can click **View thread** on the card to jump back to the comment.
* Base44 adds a 👀 reaction to the comment while it works. If the comment asks a question, Base44 answers inside the thread without changing your app. If it asks for a change, Base44 builds it and replies in the thread when it's done.
* Sending a comment doesn't resolve it, so you decide when the thread is closed.
### Sending a comment
You can hand a single thread to Base44 right from the comment.
**To send a comment to the chat, do one of the following:**
* Mention **@Base44** in a comment or reply.
* Open the thread and click the **Send to chat** icon .
### Sending several comments
You can send up to 20 threads to the chat as a single request, and Base44 works through them one by one.
**To send a batch of threads:**
1. In the [comments panel](#browsing-all-comments), click the **More actions** icon and select **Send to chat**.
2. Select the threads you want to include, or check **Select all threads**.
3. Click **Send threads**. The button shows how many threads you selected.
***
## Browsing all comments
The comments panel collects every thread across your app, so nothing gets lost between pages.
When comments are turned on, a sidebar sits along the right edge of the preview, showing the people who commented. Hover over the sidebar to open the panel, where you can:
* **Search**: Find comments by their text or author.
* **Filter**: Click the filter icon to show only comments on the **Current page**, or only **Unread** ones.
* **Resolve**: Hover over a comment and click the **Resolve** icon to close its thread without opening it.
* **Show resolved**: Click the **More actions** icon and turn on **Show resolved** to see handled threads, or select **Mark all as read** to clear your unread indicators.
* **Jump to a comment**: Click any comment to open its pin, even when it lives on another page.
A dot on the **Comments** icon means there's activity you haven't read yet.
***
## FAQs
Here are answers to common questions about comments.
No. Mentions only list people who have access to the app. To mention someone else, [invite them to your app](/Setting-up-your-app/Managing-access#inviting-collaborators) first, and they appear in the mention list.
Click the **Comments** icon again to turn comments off. This hides the sidebar and the pinned comments until you turn comments back on.
The pin no longer appears on the preview, but the thread stays in the comments panel with its screenshot, so the conversation and its context aren't lost.
Each comment or reply can be up to 5,000 characters.
# Adding components to your app
Source: https://docs.base44.com/Building-your-app/Components-library
Browse the component library in your app editor to add polished, ready-made UI components that Base44 rebuilds to match your app's theme, fonts, and content.
The component library is a collection of polished, ready-made UI components that you can add to your app straight from the AI chat in your app editor. Instead of describing a layout from scratch, you browse curated components, pick the one you want, and Base44 rebuilds it inside your app.
When you add a component, Base44 themes it to match your site, adapting its colors, fonts, and content to fit your app rather than dropping in a generic block. You can always customize the design further by asking the AI chat.
***
## Opening the component library
You open the component library from the plus menu in your AI chat, next to where you type your prompts.
When you select a component, the AI chat switches to **Build mode** automatically. For more on chat modes, see [AI chat modes](/Building-your-app/AI-chat-modes).
**To open the component library:**
1. Go to your app editor.
2. In the AI chat, click the plus icon next to the prompt box.
3. Click **Explore component library**.
***
## Browsing and previewing components
The component library opens in a large window, with a search box at the top and a list of categories on the left. **All components** shows everything in the library, and each category groups components by purpose, such as **Commerce**, **Navigation**, and **Booking & Scheduling**.
You have 3 ways to find a component:
* **Search:** Type a keyword in the search box. It searches the category you have open, so choose **All components** first to search the whole library.
* **Categories:** Click a category on the left to see only its components. On a phone, the categories appear as a row above the search box.
* **Filters:** Click **Filters** to narrow the list by tag.
Hover over a component to see it in action, then click it to open its details. You see a live preview that you can switch between **Desktop** and **Mobile**, a short description, and for some components, **Try different states** to see each state before you add it. Use the arrows next to the component's name to move to the previous or next one.
***
## Adding a component
From a component's details, you tell the AI how to use it, then add it to your prompt or build it right away. You add one component per message. When you send the message, Base44 rebuilds the component as React code inside your app and adapts its styling, fonts, and copy to match your design.
**To add a component to your app:**
1. Click the plus icon next to the prompt box in the AI chat in your app editor.
2. Click **Explore component library**.
3. Click the component you want.
4. Under **How should the AI use it?**, describe where it goes, such as a page or section. This step is optional.
5. Click **Add to chat** to place it in your prompt so you can edit the message first, or click **Build now** to send it right away.
**More about adding components:**
* **Quick add:** To add a component without opening its details, click the **+** on its card.
* **Looking again:** To see a component again later, click its chip in the prompt box or above the message you sent.
* **New code libraries:** If a component relies on a code library your app doesn't have yet, Base44 asks you to approve installing it as part of building the component. Learn more about [adding and using npm packages](/Building-your-app/NPM-packages).
***
## FAQs
Click a question below to learn more.
You add one component per message. To add another, open the component library again and repeat the steps.
No. Adding a component is a standard build message, so it uses credits the same way any other prompt does. There is no separate charge for browsing or adding a component.
Yes. A component becomes part of your app once it is built, so you can ask the AI chat to restyle it, change its content, or adjust its layout like any other part of your app.
# Creating workflows for your app
Source: https://docs.base44.com/Building-your-app/Creating-workflows
Create workflows that run multi-step backend work on a schedule, when data changes, or when your app is published or takes a payment, then monitor every run.
Use [workflows](https://base44.com/features/workflows) when you want to take work off your plate, such as welcoming new customers, sending summary emails, syncing data between tools, or running multi-step processes that wait, check conditions, and react automatically.
When [building an app](https://base44.com/ai-app-builder) in Base44, workflows run backend work for you automatically. A workflow can start on a schedule, when your data changes, when an app user talks to an in-app agent, when a connected integration sends an event, when you publish your app, or when your app takes a payment. You create and manage workflows using the AI chat in your app's dashboard.
Workflows is available on the Builder plan and above. If you are on the Free plan, upgrade to a [Builder plan or higher](/Account-and-billing/Billing-and-plans) to create and run workflows.
**Important:** Workflows replaces automations. Apps created from July 6, 2026 use workflows, while apps created before then may still use [automations](/Building-your-app/Creating-automations). Your app has one or the other, not both. Everything you could do with automations, you can do with workflows, plus more:
* **Multiple steps:** Chain several actions together in one flow, instead of a single action.
* **Conditions:** Take different paths depending on your data, so the right steps run in each situation.
* **Delays:** Pause for minutes, hours, or even days between steps, then continue automatically.
* **Step-by-step visibility:** Watch each run in real time and see exactly which step succeeded or failed.
Workflows handle almost any backend work you want to happen automatically, especially when a task takes more than one step. For example:
* **Nurture leads:** When a new lead signs up, send a welcome email, wait 2 days, then follow up only if they have not replied or booked a call.
* **Alert on conditions:** Check inventory on a schedule and message your admins only when an item drops below its threshold.
* **React to data changes:** When a new product is added, notify your team and create a task to review it before it goes live.
* **Keep tools in sync:** When a Google Calendar event is cancelled, update the matching booking and email the customer.
* **Send scheduled summaries:** Every morning, email yourself a recap of the previous day's orders and post the total to a Slack channel.
***
## How workflows work
A workflow is made of a trigger and one or more steps. The trigger decides when the workflow starts. The steps decide what happens, in order, each time it runs: a step can run a backend function (code the AI writes for you), [send one of your app's designed emails](/Building-your-app/Designing-emails#sending-from-workflows), wait for a set amount of time, or take a different path based on a condition.
When you describe what you want in the AI chat, Base44 builds the workflow for you. It appears in 2 places: your app's file tree and the **Workflows** dashboard. Opening it shows a visual diagram that flows from the trigger through each step. Each run is recorded, so you can review what happened and fix any issues quickly.
> **Example: welcoming a new lead.** When a lead is created, the workflow sends a welcome email matched to their fitness goal, waits 2 days, then checks whether they booked a call. If they did, it adds the call to your calendar; if not, it sends a follow-up nudge.
***
## Choosing a trigger
A workflow can start in several ways. When describing what you want to the AI chat, it helps to know which trigger fits your use case. Read more about each one below.
| Trigger | Best for | Keep in mind |
| - | - | - |
| [**Scheduled**](#scheduled) | Recurring jobs, or a one-time job at a set time | Recurring runs happen at most once every 5 minutes |
| [**Entity**](#entity) | Reacting to changes in your app's data | Add a condition so it does not run on every change |
| [**In-app agent**](#in-app-agent) | Reacting when someone starts an agent conversation | Runs once per new conversation, not per message |
| [**Connector**](#connector) | Reacting to events from a connected tool | The tool must support workflow triggers |
| [**App publish**](#app-publish) | Reacting when you publish your app | Fires on every publish, including restoring a version |
| [**App payment**](#app-payment) | Reacting to payments taken in your app | Needs a connected payment provider |
| [**App user auth**](#app-user-auth) | Reacting when someone signs up for or logs in to your app | Only on apps that require login |
### Scheduled
Scheduled workflows run at a time you define in your timezone. You can run one time, on a recurring schedule, or on an interval, for example every 30 minutes. A monthly schedule can also run on the last day of the month, or on a particular weekday of the month, such as the second Tuesday. Use these for recurring tasks like daily digests and weekly reports, or for a one-time job at a specific date and time.
Example prompts:
* `Send me a daily summary of all new orders to my email every morning at 8:00.`
* `Archive trip records that have been completed for more than 30 days, every Sunday at midnight.`
* `On the last day of every month, email me a summary of the month's sales.`
Keep these in mind for scheduled workflows:
* Recurring schedules run at most once every 5 minutes, and you can set them to end on a date or after a number of runs.
* A schedule that reaches its end, including a one-time schedule after it runs, is archived automatically.
* A recurring schedule with no end keeps running until you deactivate or archive it.
### Entity
Entity workflows run in response to changes in your app's data, such as a record being created, updated, or deleted. Use these to react to activity in real time.
Example prompts:
* `Send a push notification whenever I add a new WishlistPlace and write any needed backend function for me.`
* `Send the admin an email whenever a new booking is created.`
Keep an entity workflow focused:
* Add a condition so it only runs when it should, for example only when an order's status changes to shipped, rather than on every update.
* Avoid having a workflow update the same record that triggers it, which can make it run in a loop.
### In-app agent
In-app agent workflows run once when an app user starts a new conversation with an in-app agent, not on every message they send. Use these to stay on top of who is reaching out, for example to get notified when a customer starts a chat, add them to your contacts, or send yourself a summary at the end of the day.
Example prompts:
* `Email me whenever someone starts a new conversation with my agent.`
* `Add the person to my Contacts list when they start a chat with my agent.`
### Connector
Connector workflows run when a connected tool sends an event, such as a new email arriving in Gmail or a calendar event being updated in Google Calendar. The tool must be connected first, and it must support workflow triggers, such as Gmail, Google Calendar, Google Drive, Microsoft Outlook, Microsoft OneDrive, and Slack.
You can add a condition so a workflow only runs for the events you care about. This matters most for busy tools like Slack, where you might want to run only for messages in a certain channel or from a certain person.
Example prompts:
* `When a new email arrives in Gmail with the subject "Book appointment", parse it and add a new booking to my app.`
* `When a Google Calendar event is cancelled, update the booking in my app and post a message in the #salon-general Slack channel.`
If a tool does not support workflow triggers, you can still bring its events in. For example, to act on new Stripe payments, use a webhook or backend function to save each payment as a record in your app, then use an [Entity](#entity) workflow that runs when a new payment record is created. Or, instead of waiting for the tool to notify you, run a scheduled workflow that checks the tool on a regular basis, for example every hour, and handles anything new since the last check.
### App publish
App publish workflows run when you publish your app from the app editor. Use these to announce a release, tell your team an update is live, or run setup work the first time your app goes out.
Example prompts:
* `When I publish my app, post a message in my team's Slack channel.`
* `The first time my app is published, send me a summary email.`
App publish runs on every successful publish, including when you restore a previous version. It does not run when you unpublish. You can add a condition so a workflow only runs on your app's first ever publish.
### App payment
App payment workflows run when a payment succeeds or is refunded in your app's payment provider. Use these to fulfil an order, send a receipt, or update a record once someone has paid.
Example prompts:
* `When a payment succeeds, mark the order as paid and email the customer a receipt.`
* `When a payment is refunded, update the order status and let my team know.`
**Keep these in mind for app payment workflows:**
* You need a connected payment provider. Turning on a workflow with this trigger fails if your app does not have one.
* Failed payment attempts do not start a workflow, and neither do payments with no amount, such as a free checkout or a 100% discount.
* Test payments do start a workflow, so add a condition if you only want real ones.
* Subscription renewals may not start a workflow yet, so avoid building one that only reacts to renewals.
* The payment details passed to your workflow do not include the customer's email or other personal details. A backend function can fetch the full details from your provider when you need them.
### App user auth
App user auth workflows run when someone signs up for your app or logs in to it. Use these to welcome new app users, set up their account, or let your team know who joined. Choose **Signup** or **Login** under **App user auth** when you pick the trigger.
This trigger appears only for apps that require login. If your app is public without login, people never sign up or log in, so there is nothing for it to react to.
Example prompts:
* `When someone signs up, send them a welcome email and add them to my newsletter list.`
* `When a user logs in, update their last active date.`
When each one runs depends on who can access your app:
* **Public apps:** **Signup** runs the first time a person signs in successfully, after they verify their email or sign in with a provider such as Google. **Login** runs every time they sign in after that.
* **Private and workspace apps:** **Signup** runs when an admin approves someone's access request, not when they first log in. **Login** runs every time an approved user signs in.
***
## Creating a workflow
To create a workflow, click **Create workflow** in your app dashboard. Base44 opens a **Create a new workflow** canvas, where you start from a trigger, start from an action, or pick one of the suggestions based on your app. From there, you describe what you want in the AI chat and it creates the workflow, asking any questions it needs. You keep refining it in the chat until it works the way you need. Each time the AI creates or updates a workflow, a card for it appears in the chat. Click the card to open the workflow in the editor.
### Starting from a trigger
Start from a trigger when you already know how the workflow should begin.
**To create a workflow from a trigger:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click **Create workflow**.
4. On the canvas, click **Add trigger**, then choose how the workflow starts. You can pick a scheduled trigger set to **One time**, **Recurring**, or **On an interval**, or start from a connector, an in-app agent, or an entity.
5. In the AI chat, describe what the workflow should do, and answer any follow-up questions the AI asks.
6. The AI creates the workflow and adds it to your **Workflows** list.
### Starting from an action
Start from an action when you know what the workflow should do but haven't decided what should set it off. The AI asks you about the trigger as it builds.
**To create a workflow from an action:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click **Create workflow**.
4. On the canvas, click **Add action**, then choose what the workflow does:
* **Backend function:** Run custom code, like updating data or calling an API.
* **Condition:** Take a different path depending on a rule.
* **Wait:** Pause for a set time before the next step.
* **Describe your own:** Tell the chat what this step should do.
5. In the AI chat, finish the prompt that your choice fills in, and answer any follow-up questions the AI asks.
6. The AI creates the workflow and adds it to your **Workflows** list.
### Starting from a suggestion
Start from a suggestion when you want a ready-made idea tailored to your app.
**To create a workflow from a suggestion:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click **Create workflow**.
4. Under **Or start from these workflows**, choose a suggestion.
5. Review the pre-filled prompt in the AI chat, adjust it if needed, and send it.
6. The AI creates the workflow and adds it to your **Workflows** list.
Get the best results from the AI:
* Describe each step and outcome clearly so they show up in the diagram.
* For a condition, give each path a distinct action, otherwise the AI might put the logic inside a single backend function instead of showing a separate path.
* If a step needs a new backend function, just mention it and the AI writes it for you.
***
## Switching automations to workflows
If your app still uses automations, you can move all of them to workflows in one step. Base44 recreates each automation as a workflow, so you do not have to rebuild anything.
**What happens when you switch:**
* **Your automations become workflows:** Each automation is recreated as a workflow, keeping its original trigger and schedule.
* **Your history carries over:** Run counts and stats move with each workflow. Past run logs stay with your original automations, which are kept as archived.
* **Archived automations come across too:** Any automations you already archived move over as well and stay archived.
* **Nothing stops running:** Your automations keep running until the switch finishes.
**To switch from automations to workflows:**
1. Click **Dashboard** in your app editor.
2. Click **Automations**.
3. Click **Switch to Workflows**.
4. Review what happens when you switch, then click **Start now**.
***
## Managing workflows
After you start using workflows, you can control when they run, change what they do, rename them, trigger them on demand, or clean up workflows you no longer need. Each workflow shows an **Active** or **Inactive** status, and you can deactivate one to pause it and reactivate it whenever you need it.
### Turning a workflow on or off
Deactivate a workflow when you want to stop it running, and activate it again when you need it. Deactivating stops new runs from starting, but the run history stays available.
**To turn a workflow on or off:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the **More actions** icon on the workflow.
4. Click **Deactivate** or **Activate**.
You can also open a workflow and use the **Active** toggle in the details panel.
### Editing a workflow
To change what a workflow does, edit it from its diagram or just describe the change in the AI chat. Every edit option opens the AI chat with a pre-filled prompt and the AI makes the change for you, so there is nothing to edit by hand.
Click a step's **Edit** icon to change what the step does or replace it with a different step.
* Click the trigger's **Edit** icon to change which events trigger the workflow.
* Click the **Replace trigger** icon to switch to a different trigger, such as a scheduled, connector, in-app agent, or entity trigger.
Click the add button below a step, then choose **Action** or **Condition**.
Changing a workflow's steps creates a new version. Runs already in progress finish on the version they started with, and new runs use the latest version.
### Renaming a workflow
Give a workflow a clearer name at any time. Renaming does not create a new version.
**To rename a workflow:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the **More actions** icon on the workflow.
4. Click **Rename** and enter the new name.
### Running a workflow immediately
Run a workflow right away when you want to start it on demand. This helps you test changes, confirm that your configuration works, or handle something urgent between scheduled runs.
**Important:** Run now executes real actions using your current configuration, such as sending real emails or updating real records. It is a one-time manual run that does not affect your schedule or trigger, and it appears in the run history labeled as a test. When earlier runs exist, you can also replay the workflow using the data from a previous run.
**To run a workflow:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the workflow to open it.
4. Click **Run now** in the details panel.
5. In the confirmation dialog, click **Run now** again.
### Cancelling a run
If a workflow is running and you need to stop it, you can cancel the run while it is still in progress. The cancelled run shows as **Cancelled** in the run history.
**To cancel a run:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the workflow to open it.
4. Click the run that is in progress, then click **Cancel run**.
### Archiving a workflow
If you do not need a workflow anymore, you can archive it to keep your active list clean.
**To archive a workflow:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the **More actions** icon on the workflow.
4. Click **Archive**.
To see or restore archived workflows, click the **More actions** icon next to **Create workflow**, then click **View archive**.
***
## Monitoring runs
Every workflow records each run so you can watch it happen in real time and review it afterward. Review a single workflow's runs from its details panel, or see runs across all your workflows on the **Activity** tab.
As a workflow runs, each step in the diagram shows a green checkmark when it completes successfully, so you can confirm at a glance that it works and see exactly where it stops if a step fails.
### Viewing a workflow's runs
When you open a workflow, the details panel shows its **Success rate**, **Avg. runtime**, and a **Run history** of every run. When something goes wrong, the run shows the exact step that failed and the error, so you know where to look without guessing.
**To view a workflow's runs:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the workflow you want to inspect.
4. In the details panel, review **Run history**, where each run shows its time and status, such as **Completed**.
5. Click a run to open its **Run log**, including the start time, end time, and runtime.
### Using the Activity tab
The **Activity** tab under **Workflows** in your app dashboard brings together runs from all your workflows in one place.
Runs you start with **Run now** are labeled **TEST**, so you can tell them apart from runs that fired automatically.
**To view activity across workflows:**
1. Click **Dashboard** in your app editor.
2. Click **Workflows**.
3. Click the **Activity** tab.
4. Review the list of runs, where each one shows its workflow, status, start time, and run time. Filter by status (**Running**, **Completed**, **Failed**, or **Cancelled**) or by time range.
5. Click **View** on a run to open it in the workflow's diagram alongside its run log.
***
## Workflows and integration credits
Workflows are billed by the steps that run. Each step that runs a backend function uses a fraction of an integration credit, and the charges add up across all the steps in a single run. Built-in integrations that a step uses, such as sending an email or calling an AI model, can use credits too, as they do elsewhere in your app.
A workflow with several steps therefore costs more per run than a single-step one, so keep an eye on how often your workflows run and what each step does. If you run out of integration credits while a run is in progress, that run is cancelled. [Learn more about credits.](/Account-and-billing/Credits)
Workflows that run frequently or chain several actions can drain your credit balance quickly. Here are some ways to keep usage under control:
* **Add specific trigger conditions:** Narrow the criteria that start a workflow so it does not run unnecessarily.
* **Use conditions to skip unneeded steps:** Branch the workflow so expensive steps only run when they are actually needed.
* **Consolidate redundant workflows:** If several workflows perform overlapping tasks, combine them into fewer, smarter ones.
* **Resolve failing workflows promptly:** Workflows that error can still consume credits on each retry. Check your run history regularly and fix or disable problem workflows as soon as you spot them.
* **Review the frequency of scheduled workflows:** Consider whether recurring workflows, such as daily reports or reminders, need to run as often as configured.
* **Be sparing with AI calls:** If a step calls an AI model, that uses credits too, so only call it when you actually need the result.
* **Test on a small dataset first:** Run a workflow manually and check its run history to estimate the per-run credit cost before enabling it at scale.
***
## FAQs
Click a question below to learn more.
Yes. Ask the AI chat to add conditions to any workflow or step. For example:
```text theme={null}
After the wait, only send the reminder when the task is still incomplete.
```
The workflow then takes different paths based on the conditions you describe, so different steps run depending on your data. A condition can have several paths, plus a catch-all for anything that does not match, and the diagram shows each path separately.
Open the workflow and check its **Run history** to find the step that failed. Ask the AI in your dashboard to explain the error and suggest a fix, then use **Run now** to confirm the workflow succeeds.
If a workflow keeps failing, Base44 deactivates it automatically and emails you, so you can fix it before turning it back on. A scheduled workflow is deactivated after 5 consecutive failures, because it runs the same way every time, so repeated failures usually mean something is wrong. Workflows with any other trigger are deactivated after 50 consecutive failures, because their incoming data varies and the occasional failure is more expected. Fixing the workflow and reactivating it resets the count.
It depends on how the workflow starts. A scheduled workflow can run on demand at any time, because it does not need any input. A workflow that starts from an entity, connector, or in-app agent trigger needs the trigger's data to run, such as the specific task that was created, so **Run now** replays the data from a previous run. This means the workflow has to run at least once before you can run it on demand.
If you see **No previous runs**, trigger the workflow for real once, for example by creating a task for the task follow-up workflow, and then use **Run now** to replay that run.
Yes. Ask the AI to activate, deactivate, archive, or restore a workflow, and it makes the change for you without opening the dashboard menus.
The Workflows page lists all of your workflows, paging through up to 1,000.
# Customizing the design of your app
Source: https://docs.base44.com/Building-your-app/Design
Customize your app's look with the Theme panel for global colors and fonts, Edit mode for per-element styling, and AI chat for themes, dark mode, and motion.
Base44 gives you several ways to design your app: the **Theme** panel for global colors and fonts, **Edit** mode for per-element styling, and AI chat for broader changes. This page covers the Theme panel and global styling; for AI-driven design workflows with prompts you can use directly, see [Designing with AI](/Building-your-app/Designing-with-AI).
For building a consistent design system, working with images, responsive layout, and accessibility, see [Design foundations and layout](/Building-your-app/Design-foundations-and-layout).
To define a reusable brand at the workspace level, such as colors, fonts, logo, and components shared across all your apps, see [Design system](/Building-your-app/Design-system). This page covers design changes within a single app.
***
## Working with AI on design
AI is at the center of how you design in Base44. Describe what you want in natural language, and AI updates code, styles, and components for you.
To learn how to brief the AI like a designer, tweak elements in **Edit** mode, set boundaries with AI Controls, and choose between the design options it offers, see [Designing with AI](/Building-your-app/Designing-with-AI).
***
## Global changes
The **Theme** panel lets you set colors and fonts for your entire app from one place. Any change you make applies everywhere instantly, so you do not have to update elements one by one.
The panel shows a preview of your current palette at the top, followed by a list of color roles you can customize, such as background, foreground, primary, secondary, card, and popover. Click **Fonts** at the top of the panel to set your app's font instead.
### Theme colors
Click any color role to update it across your entire app.
**To change a color in your theme:**
1. Click the **Theme** icon at the top of your app editor.
2. Click any color role in the list to open the color picker. The bar at the top of the panel is a preview of your current palette and is not clickable.
3. Choose your color by dragging the picker, entering a hex value, using the eyedropper to sample any color on screen, or picking from a palette using the dropdown at the bottom of the picker.
4. Click **Apply** to preview the change in your app.
5. Click **Save & Apply** in the **Theme** panel to apply it everywhere.
Start with your primary color and background, then let those guide your other choices. Keeping foreground and background colors high contrast makes text readable across all components.
If your theme colors do not match your app's current colors, you can ask the AI chat to sync them. For example: `Update my theme to match the colors used in my app`.
### Fonts
Set your app's fonts from the **Fonts** tab in the **Theme** panel. A dropdown appears for each font your app uses.
**To change your app fonts:**
1. Click the **Theme** icon at the top of your app editor.
2. Click the **Fonts** tab.
3. Click a dropdown and select a font. You can search by name, browse **Brand Fonts** and **All fonts**, or click **Upload Fonts** to add your own.
4. Click **Save & Apply** to apply the changes across your app.
If you don't see a **Fonts** tab, your app may not have theme font variables set up yet. Ask the AI chat to add them: `Add theme font variables to my app so I can change fonts from the Theme panel`.
***
## Element changes
When you are in **Edit** mode, you can style any individual element directly. Select an element and use the icons in the Edit toolbar to change its colors, typography, spacing, corner radius, opacity, or add custom Tailwind classes. The options available in the toolbar change depending on the type of element you select.
Edit mode works on most elements that carry text, including list items, table cells, buttons, and blockquotes. Your changes save and update the live preview right away, and if a change cannot be applied to an element, a message tells you why.
### Colors
You can set the background and text color of any element using the colors defined in your theme or a custom color.
**To change the color of an element:**
1. Click **Edit** at the top of the editor.
2. Select the element you want to change.
3. Click the **Colors** icon in the Edit toolbar.
4. Select the part you want to change, such as background or text.
5. Choose your color:
* **Theme:** pick from the color roles defined in your theme, such as background, foreground, card, and primary.
* **Custom:** drag the picker, enter a hex value, use the eyedropper to sample any color on screen, or pick from a palette using the dropdown at the bottom of the picker.
6. Click **Apply** to confirm the change.
For image elements, the toolbar shows a **Replace** button instead of the Colors option. Click **Replace** to swap the image.
### Typography
When you select a text element, the Edit toolbar shows controls for font family and size. A separate **Text style** panel gives access to alignment, case, and decoration.
**To edit text content:**
1. Click **Edit** at the top of the editor.
2. Select the text element.
3. Click the **T** icon in the Edit toolbar.
4. Type your changes in the **Text content** field.
If the text content is dynamically generated, the Text Content panel shows a message that it cannot be edited directly. Use the AI chat to change dynamic text.
**To change the font:**
1. Click **Edit** at the top of the editor.
2. Select the text element.
3. Click the font family dropdown in the Edit toolbar.
4. Search or browse fonts and click one to apply it. Hover over a font with a **>** arrow to see available weights, then click a weight to apply it.
To use a custom font, click **Upload Fonts** at the bottom of the dropdown. You can upload TTF, OTF, WOFF, or WOFF2 files up to 5 MB. Uploaded fonts appear under **Custom Fonts** in the filter.
**To change the font size:**
1. Click **Edit** at the top of the editor.
2. Select the text element.
3. Click the size dropdown in the Edit toolbar.
4. Choose a size. Available sizes range from 12 to 128.
**To change text style:**
1. Click **Edit** at the top of the editor.
2. Select the text element.
3. Click the **Text style** icon in the Edit toolbar.
4. Adjust the settings you want to change:
* **Alignment:** left, center, right, or justify.
* **Case:** none, uppercase, lowercase, or capitalize.
* **Decoration:** none, underline, strikethrough, or italic.
### Spacing
You can set the margin and padding for any element in px, controlling each side independently.
**To change the spacing of an element:**
1. Click **Edit** at the top of the editor.
2. Select the element you want to change.
3. Click the **Spacing** icon in the Edit toolbar.
4. Enter values in px for margin and padding. Use the horizontal and vertical shorthand controls to set both sides at once.
### Corner radius
You can round the corners of any element by entering a value in px.
**To change the corner radius of an element:**
1. Click **Edit** at the top of the editor.
2. Select the element you want to change.
3. Click the **Corners** icon in the Edit toolbar.
4. Enter a value in px or use the arrows to adjust it.
### Opacity
You can make any element fully opaque, semi-transparent, or anywhere in between.
**To change the opacity of an element:**
1. Click **Edit** at the top of the editor.
2. Select the element you want to change.
3. Click the **Opacity** icon in the Edit toolbar.
4. Drag the slider or enter a value from 0 (fully transparent) to 100 (fully opaque).
### Tailwind classes
For styling not covered by the other options, you can enter any Tailwind CSS class directly.
**To add Tailwind classes to an element:**
1. Click **Edit** at the top of the editor.
2. Select the element you want to change.
3. Click the **Tailwind classes** icon in the Edit toolbar.
4. Type any Tailwind CSS class. For example, `shadow-lg` adds a large shadow and `border border-gray-200` adds a subtle border.
***
## Themes and modes
Visual direction is the overall tone of your app. Themes are ways to express that tone using depth, color, and effects. In Base44, you can lean into a theme and still keep your brand intact.
### Design themes
Soft, extruded elements that look pressed into or raised from the background.
Best for calm tools with simple content.
Key features:
* Subtle inner and outer shadows
* Soft, monochromatic palettes
* Minimal depth and clean shapes
Prompt idea:
```text theme={null}
Give this app a soft neumorphic touch:
- Keep the current color palette
- Add subtle shadows to cards and primary buttons
- Avoid heavy contrast backgrounds
- Keep text contrast high for readability
```
Frosted glass surfaces with transparency and blur effects.
Best for overlays, side panels, and selected cards.
Key features:
* Backdrop blur
* Transparent panels with subtle borders
* Light glow and reflection effects
Prompt idea:
```text theme={null}
Apply a subtle glass effect to overlays and side panels only:
- Use translucent surfaces with blur and a thin border
- Keep backgrounds simple so text remains readable
- Maintain strong text contrast on glass surfaces
Do not apply glass effects to all cards or main content.
```
Structured, grid based layout with clear elevation and bold color.
Best for dashboards, admin tools, and data heavy apps.
Key features:
* Clear elevation layers
* Clean grids and alignment
* Purposeful motion
Prompt idea:
```text theme={null}
Move this app toward a soft material style:
- Use clear card elevation for key sections
- Clean up alignment and grids so content lines up
- Use bold, flat colors rather than strong gradients
- Keep transitions subtle and purposeful
```
Soft, puffy elements with rounded shapes and gentle shadows.
Best for playful apps, onboarding, or lighter experiences.
Key features:
* Rounded corners
* Pastel or soft color palettes
* Soft, even shadows
Prompt idea:
```text theme={null}
Add a light clay feel to key components:
- Round the corners of cards and primary buttons more
- Use softer shadows under those components
- Keep backgrounds neutral so the app remains readable
Apply this style only to interactive elements, not long text sections.
```
Deliberately bold, with strong color blocks and thick borders.
Best for landing pages and internal tools where personality matters more than subtlety.
Key features:
* High contrast color combinations
* Thick borders and strong shapes
* Raw typography and simple grids
Prompt idea:
```text theme={null}
Apply a controlled neo brutalist feel to the marketing pages:
- Use one bold accent color, one dark, and one light neutral
- Add thick borders and clear sections
- Make headings large and confident
- Keep body text highly readable
Do not apply this style to data tables or dense forms.
```
### Light and dark themes
Light and dark themes let people choose what feels best and can help in different environments.
You can ask the AI chat to add theme support and a toggle.
Switching modes restyles the whole app, not just the background.
Prompt:
```text theme={null}
Add light and dark mode support:
- Light mode: soft gray backgrounds and dark text
- Dark mode: near black backgrounds, light text, and subtle borders
- Primary and accent colors should remain readable and consistent in both modes
Add a theme toggle in the header and remember the choice per visitor.
```
Theme support touches many components, so it can take AI some time to wire everything up. You can also specify changes that should apply only in light mode or only in dark mode.
***
## Motion and feedback
Motion and feedback help people understand what is happening on screen. You can use them to make clicks feel responsive, show that something is loading, and explain what to do next. In Base44, AI can add these patterns for you, so you do not have to hand code every animation.
Use this section when your app already works, but feels a bit flat or static, and you want it to feel more alive and reassuring.
Micro interactions are small visual reactions to what someone does, for example:
* A button that slightly grows and brightens on hover.
* A card that lifts when you move the mouse over it.
* An icon that gives a small checkmark animation when something is saved.
These effects make the app feel responsive without turning it into a cartoon.
You can ask AI to introduce a consistent set of interactions:
```text theme={null}
Add subtle interactions:
- Fade in each page on load with a short duration
- Make primary buttons gently grow and brighten on hover and focus
- Add a small lift effect to cards on hover
Respect reduced motion preferences and avoid any rapid flashing.
```
For marketing or promo pages, you can use a stronger tone:
```text theme={null}
On marketing pages only:
- Slide hero sections in from the side on first load
- Animate icons when a feature card becomes focused or hovered
- Keep animations short so the page still feels fast
```
Add motion after you are happy with colors, layout, and typography. Motion should support clarity, not hide weak structure.
Loading, empty, and error states are the places where people often feel stuck. Good feedback here can make your app feel much more polished and forgiving.
Examples:
* Loading: skeleton shapes that match the final layout instead of a generic spinner.
* Empty: a friendly message that explains what will appear here and a button to create or connect something.
* Error: a short, human explanation and a clear way to retry or get help.
You can ask AI to create these patterns across the app:
```text theme={null}
Improve feedback states:
- For each main list and dashboard, add a skeleton loader that matches the layout
- Design an empty state with an icon, one line explanation, and a primary action
- Add a clear error state with a short message and a retry button where relevant
Use the existing color and typography system.
```
These changes do not affect your data or logic, they only change how your app communicates to people when something is loading, missing, or has gone wrong.
***
## Quick tricks
If you want fast improvements, these short recipes can help you get a lot of value with a few prompts.
* Introduce a simple color system and apply it globally.
* Define clear text roles and increase line height.
* Add basic card and button components and reuse them.
Prompt:
```text theme={null}
Polish this prototype:
- Create a simple color system and apply it across the app
- Define typography roles for titles, headings, and body text
- Standardize buttons and cards and use them consistently
Keep content and logic the same.
```
* Increase row height slightly and add subtle separators.
* Move actions into a consistent column or menu.
* Add filters in a clear top bar.
* Add loading, empty, and error states.
Prompt:
```text theme={null}
Clean up this table page:
- Increase row height and add subtle row separators
- Move row actions into a consistent column at the end
- Add a simple filter bar above the table
- Add clear loading, empty, and error states
```
* Adjust spacing and hierarchy.
* Update card and button shapes.
* Introduce subtle micro interactions.
Prompt:
```text theme={null}
Give this app a soft visual refresh:
- Keep brand colors the same
- Improve spacing and hierarchy on each page
- Round card and button corners slightly and soften shadows
- Add subtle hover and focus states to primary actions
```
***
## FAQs
Click a question below to learn more about designing your app.
Tailwind CSS is a utility first CSS framework. Instead of writing custom CSS rules, you add small class names directly to your elements to control color, spacing, typography, and layout. Each class name usually maps to a single visual rule, so you can "read" the design from the classes themselves.
Common examples you might see:
* Colors: `bg-blue-500` sets a blue background, `text-white` sets white text.
* Spacing: `p-4` adds padding on all sides, `m-2` adds margin on all sides.
* Typography: `font-bold` makes text bold, `text-lg` sets a larger text size.
* Layout: `flex` creates a flex container, `grid` creates a grid container, `items-center` vertically centers items in a flex or grid row.
When you see Tailwind classes in Base44, you can combine them to describe the full style of an element. For example, `bg-blue-500 text-white p-4 flex items-center` gives you a blue bar with white text, padding, and centered content.
For deeper reference and the full list of utilities, you can check the official Tailwind CSS documentation.
You can use design version control in the AI chat to roll back changes.
* Each AI prompt has a **Revert** option that instantly undoes everything that specific prompt changed in your app.
* The clock icon in the AI chat opens version history. You can choose an earlier saved version of your app and roll back to it in one step.
Learn more about [AI chat modes and version history](/Building-your-app/AI-chat-modes).
You can ask the AI chat to remove the specific element, or click **Edit** in the AI chat and select the element, then click the **Delete** icon .
# Design foundations and layout
Source: https://docs.base44.com/Building-your-app/Design-foundations-and-layout
Keep your app's design consistent with color, type, and spacing systems, then work with images, responsive layout, page types, custom styles, and accessibility.
Once you know how to [customize your app's design](/Building-your-app/Design), these foundations help you keep it consistent, well-structured, and accessible as it grows. This page covers building a consistent design, working with images and visual assets, responsive layout and page types, advanced customization, and accessibility.
***
## Keeping your design consistent
These sections cover how to establish consistent, app-wide design patterns using the AI chat, so your colors, type, spacing, and components feel cohesive across your app.
### Color system
Color is one of your strongest tools to set mood and guide attention. Start by defining roles rather than random hex codes. Aim for:
* 1 primary brand color
* 1 secondary color
* 1 accent color for highlights
* 3 to 5 neutral grays for backgrounds, surfaces, and borders
* Clear colors for success, warning, and error states
You can ask AI to propose and apply a full system from scratch:
```text theme={null}
Create a color system for this app:
- 1 primary brand color
- 1 secondary color
- 1 accent color for highlights
- 4 neutral grays for backgrounds, surfaces, and borders
Map colors to roles such as primary, surface, border, success, warning, error.
Ensure text on backgrounds meets accessibility contrast levels.
Apply this system across the app and replace one off colors.
```
Keep color meaning consistent. For example, only use your success color for positive states and your error color for problems, not for decoration.
If you already have hex codes from a brand guide or an external tool, paste them in and let AI map them to roles:
```text theme={null}
Use this palette and assign each hex to a role:
- #1D4ED8
- #6366F1
- #10B981
- #F3F4F6
- #111827
Define which are primary, secondary, accent, and neutral roles.
Replace hard coded colors with tokens or Tailwind classes that follow these roles.
```
You can upload a screenshot or image of your color palette directly to the AI chat and ask it to apply the colors to your app:
```text theme={null}
Apply the colors from this image to my app.
Map each color to a role such as primary, background, foreground, and accent.
Replace existing colors across the app to match.
```
***
### Typography system
Typography controls how readable and scannable your app feels. It is better to have a few clear text styles than many similar ones.
Define roles such as:
* Page title
* Section heading
* Body text
* Small metadata such as labels and timestamps
You can ask the AI to set this up and apply it everywhere:
```text theme={null}
Set up a typography system:
- Page titles: largest size, bold, modern sans serif
- Section headings: medium size, semibold
- Body text: standard size, regular weight
- Metadata: small uppercase with extra letter spacing
Apply these roles consistently across all pages and remove ad hoc font sizes.
```
You can also target sizes more directly:
```text theme={null}
Make typography more readable:
- Increase base body text size slightly
- Increase line height for paragraphs
- Ensure headings are at least 1.4x the size of body text
Keep font families the same.
```
You can use custom fonts and apply them through your layout.
1. Get the embed snippet (for example from Google Fonts at [https://fonts.google.com](https://fonts.google.com)).
2. Ask AI to add it to `Layout.js` and wire it into your type system.
Example prompt:
```text theme={null}
Import the "Raleway" font from Google Fonts.
Use it for page titles and section headings.
Keep the current body font for paragraphs.
Update styles across the app to follow this rule.
```
Try to limit yourself to one or two font families. Too many fonts make the interface feel unstructured and harder to maintain.
***
### Spacing and density
Spacing and density control how comfortable your app feels to use. A simple spacing scale prevents random gaps and cramped sections.
You can define a scale such as 4, 8, 12, 16, 24 and ask AI to apply it:
```text theme={null}
Normalize spacing using this scale: 4, 8, 12, 16, 24.
- Use larger values between major sections
- Use medium values inside cards and panels
- Use small values between labels and inputs
Reduce areas that feel cramped and avoid random spacing values.
```
If a page feels crowded or too empty, you can let the AI chat diagnose and fix it:
```text theme={null}
Look at this page and adjust spacing:
- Add more top and bottom padding around each section
- Increase the gap between rows of cards
- Ensure long paragraphs have a comfortable line length
Keep the existing colors and content.
```
***
### Core elements and states
Once color, type, and spacing are in place, standardize the building blocks you use everywhere.
Focus on:
* Buttons (primary, secondary, and text only)
* Cards and panels
* Navigation bars and sidebars
* Form fields (default, focus, error, disabled)
* Chips, tags, and badges if you use them
You can ask AI to detect and unify patterns:
```text theme={null}
Standardize core elements:
- Buttons: define primary, secondary, and text only styles
- Cards: define corner radius, padding, shadow, and header/body layout
- Navigation: define active, hover, and disabled states
- Form fields: define default, focus, error, and disabled states
Apply these patterns across the app and replace mismatched styles.
```
This gives you a reusable language so new pages look like they belong to the same product.
***
## Images and visual assets
Visual assets such as images, icons, and videos shape how your app feels. AI can help you create, place, style, and connect them to your data and code.
Upload images or videos to the AI chat to give it visual context for your app's style, layout, or content.
You can ask the AI chat to add hero images directly to your pages:
```text theme={null}
Add a full width hero image to the homepage that matches the current color palette.
Use a placeholder image that suggests a modern analytics dashboard.
```
To replace a placeholder image:
1. Open the relevant page file such as `Store.js` in code view.
2. Find the `` tag.
3. Update the `src` attribute with your own image URL.
You can also upload images for entities in the **Data** section and bind them to components so cards and lists display the right images automatically.
Ask the AI chat to generate short videos for visual sections such as heroes, product previews, tutorials, or onboarding screens.
Example prompt:
```text theme={null}
Create a short onboarding video for my fitness app showing a simple morning workout routine. Add it to the welcome screen above the Get Started button.
```
Generating videos from the AI chat requires a [Starter plan](/Account-and-billing/Billing-and-plans) or higher. Each generated video uses the prompt's message credits plus 1 additional message credit.
You can also let people generate videos in your live app. Learn more about [generating videos](/Integrations/built-in-integrations#generating-videos).
Reference images help you steer design visually by showing the AI chat a style, layout, color palette, or visual direction you want to use.
1. Click the **Upload icon (+)** on the AI chat.
2. Upload an inspiration image or screenshot.
3. Tell AI exactly what you want to borrow and what to ignore.
Prompt ideas:
```text theme={null}
Use this reference as inspiration.
Keep my layout and content, but:
- Match the button shapes and shadows
- Match the card corner radius and border style
- Apply a similar soft gradient only to the top header
Do not copy the exact colors, just the structure and feel.
```
```text theme={null}
From this screenshot, extract design rules for:
- Color roles
- Font sizes and weights
- Corner radius and shadows
- Spacing between sections and cards
Explain the rules, then apply a similar style using my current brand colors.
```
You can copy visual styles directly from a design tool such as Figma and ask Base44 to apply them, instead of trying to describe every detail in words.
**To copy from Figma:**
1. In Figma, select the element whose style you want to copy.
2. Switch to **Dev mode** and view the **Code** panel.
3. Copy the relevant CSS line, for example a gradient background: `background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);`
4. In Base44, click the matching element in your preview to open **Edit mode**.
5. Paste the style into an AI prompt and tell Base44 exactly what to change, for example:
```text theme={null}
Change the background style of this element to:
background: linear-gradient(180deg, #C2C9B5 -1.25%, #EBEBEB 68.58%, #E6FC88 104.25%);
Keep all other styles the same.
```
This lets you match gradients, shadows, borders, and other styles from your design file very precisely.
Icons should support meaning, not just decoration. Consistency is key.
Common tasks:
* Replace generic icons with more meaningful ones.
* Align icon sizes and stroke widths.
* Pair icons with text labels where clarity matters.
You can use icon libraries such as Lucide and ask the AI chat to wire them in:
```text theme={null}
Replace generic icons with more meaningful ones:
- Use icons that clearly match each navigation item and main action
- Keep icon size and stroke width consistent
- Align icons neatly with labels in navigation, lists, and buttons
```
```text theme={null}
Update all primary call to action buttons:
- Use the "sparkles" icon to the left of the label
- Keep icon size small and padding even
- Do not add icons to secondary or destructive buttons
```
***
## Layout and responsiveness
Layout controls how information is grouped and scanned. Responsiveness ensures that layout works on every device.
Think in page types rather than one off screens:
* Landing and marketing pages
* Dashboards
* Lists and tables
* Detail pages
* Forms and wizards
* Settings and profile pages
You can ask the AI chat to detect and standardize patterns:
```text theme={null}
Identify the main page types in this app (landing, dashboard, list, detail, form, settings).
For each type:
- Propose a consistent layout structure
- Suggest which existing components to reuse
Apply those layouts to all pages of the same type, without changing content.
```
Hierarchy and white space help people see what matters at a glance.
Ideas you can ask AI to apply:
```text theme={null}
Improve visual hierarchy and white space on this page:
- Make the page title clearly stand out above other text
- Use consistent section headings to group content
- Add more top and bottom padding around each section
- Increase the gap between rows of cards
Avoid adding new colors or fonts.
```
Whitespace is especially important for dense content such as dashboards and tables, so give key elements room to breathe.
Your app needs to feel natural on phones, tablets, and desktops.
You can encode responsive rules in a single prompt:
```text theme={null}
Make this layout responsive:
- On phones, use a single vertical column and stack sections
- On tablets, use two columns for cards where space allows
- On desktops, use three or four columns for cards
Keep images in a 4:3 aspect ratio.
Collapse the sidebar into a top menu on smaller screens.
Avoid horizontal scrolling at all breakpoints.
```
Use the device preview in the Base44 editor to check how these rules behave on different screen sizes, then refine them with follow up prompts.
### Customizing your app for mobile
Your Base44 app automatically adjusts its layout for any device, but you can use the editor's mobile preview and customization tools to fine-tune how your app looks and works on mobiles. This lets you create a comfortable, seamless experience for people on mobile.
**To customize your app for mobile:**
1. Go to your app editor.
2. Click the **Screen** icon at the top and select **Mobile**.
3. Review your layout, navigation, and content.
4. Make changes as needed either by:
* Asking the AI chat to make changes to mobile.
* Using **Edit** mode in the AI chat to change the design or layout of specific elements.
**Tips to make your app look good on mobile:**
* Make sure the text is readable
* Resize elements to fit the mobile screen
* Hide or show elements as needed
* Ensure buttons and icon buttons are easy to tap
* Check that images look good
***
## Page types
Different page types need different design choices. You can use these patterns as starting points and adapt them with AI.
Focus on a clear promise, one main call to action, and strong visual hierarchy.
Design tips:
* Use a simple header with minimal navigation.
* Make the hero section clear and focused, with a short headline and one primary button.
* Use supporting sections for benefits, features, and social proof.
* Keep forms short and above the fold when possible.
Prompt example:
```text theme={null}
Design the homepage as a focused landing page:
- Clean hero section with a short headline, one supporting sentence, and one primary call to action
- Follow with three key benefits in cards
- Add a simple social proof section with logos
- Keep navigation minimal
Use my existing color and typography system.
```
Dashboards should answer "How am I doing?" at a glance.
Design tips:
* Put the most important metric or status near the top left.
* Group related metrics in cards with clear titles and short descriptions.
* Avoid too many chart types on one screen, reuse a few standard ones.
* Keep filters and time ranges clearly visible and consistent.
Prompt example:
```text theme={null}
Restructure this dashboard:
- Place the main KPI at the top left in a prominent card
- Group related metrics into a 2x2 grid of cards
- Move filters and date range controls into a clean top bar
- Reduce visual noise in charts by using consistent colors and styles
```
Lists and tables let people scan and act on many items.
Design tips:
* Use clear column headings with enough spacing.
* Keep row height comfortable, not too tight.
* Use zebra striping or subtle row separators for large tables.
* Keep actions either at the end of the row or in a consistent menu.
* Add empty, loading, and error states.
Prompt example:
```text theme={null}
Clean up this table view:
- Increase row height slightly
- Use subtle row separators or zebra striping
- Align actions in a consistent column at the end
- Add a clear empty state with a short message and primary action
```
Detail pages should make the main object and its key actions obvious.
Design tips:
* Put the object title and primary actions near the top.
* Use a clear layout with one main content column and optional side panel.
* Group related information with headings or tabs.
* Keep destructive actions visually distinct and placed carefully.
Prompt example:
```text theme={null}
Improve this detail page:
- Move the main title and primary actions to the top of the page
- Use a two column layout with main content on the left and secondary info on the right
- Group related fields under small headings
- Make destructive actions clearly labeled and visually distinct
```
Forms are where many key flows happen. They should feel simple and forgiving.
Design tips:
* Group related fields under headings.
* Use a single column layout for most forms.
* Show progress for long, multi step flows.
* Place error messages near the fields and make them clear.
* Use clear labels and helper text.
Prompt example:
```text theme={null}
Redesign this form for clarity:
- Use a single column layout
- Group related fields under short headings
- Add clear labels and helper text where needed
- Show inline error messages under each field when validation fails
Use my existing typography and spacing system.
```
***
## Advanced customization
When you want to go beyond what AI and **Edit** mode give you out of the box, you can bring in your own code and npm packages. AI can still help you wire and align everything.
You can use [npm packages](/Building-your-app/NPM-packages) to bring richer motion, visual effects, and interactive components into your Base44 app without building everything from scratch. Packages come from the public npm registry and are installed through the AI chat in your app editor, so you stay inside the same workflow.
**Design-focused examples include:**
* Animation libraries (for example, anime.js) to add transitions, hover effects, and micro interactions.
* UI component or motion libraries to handle modals, tooltips, carousels, or step flows with built in interaction patterns.
* Chart and graph utilities to visualize data with custom colors, typography, and spacing that match your app.
* Drag and drop or gesture libraries to make layouts feel more tactile and interactive.
* Date and time helpers to format timestamps and schedules in a way that fits your UI.
**After a package is installed, you can use AI chat to:**
* Import the right functions or components from the package.
* Wire them into your existing layout and design tokens (colors, typography, spacing, radius).
* Adjust props, variants, and motion so they feel consistent with the rest of the app.
* Check accessibility details like focus states, keyboard navigation, and reduced motion preferences.
**Prompt example**
```text theme={null}
I added the framer-motion npm package. Refactor the existing card grid so each card animates on hover using framer-motion:
- Keep the current layout and copy
- Use the existing color tokens, border radius, and typography
- Respect prefers-reduced-motion and keep keyboard focus outlines clear
```
All npm packages are third party code. Base44 cannot guarantee their quality or security, so make sure you review the package README, test it in your app, and confirm it meets your project's design and performance requirements.
Base44 apps often use Tailwind CSS utilities. AI can help you refactor messy styles into something more systematic.
Tasks you can ask AI to do:
* Replace inline styles with Tailwind utilities.
* Extract repeated patterns into reusable components.
* Map color values to design tokens and Tailwind config.
Example:
```text theme={null}
Refactor these components to use consistent Tailwind classes:
- Replace inline style attributes with Tailwind utilities
- Use the design tokens for colors, spacing, and typography
- Document the main class combinations for navigation, cards, and buttons
```
Sometimes you want precise control over layout, animation, or component structure. You can [open code files](/documentation/building-your-app/editing-code) directly and either edit them yourself or ask AI to do it.
Common design related edits:
* Updating `Layout.js` to change global wrappers, headers, or footers.
* Adjusting theme providers or context.
* Changing how components are composed and which props they accept.
To edit the code:
1. Open the relevant file.
2. Paste a code snippet into AI chat.
3. Ask for a change, then review the diff or preview.
Example:
```text theme={null}
Here is my Layout.js component.
Adjust it so:
- The header is sticky on scroll
- The main content has a max width and is centered on large screens
- The background color uses the surface token from my design system
Explain what you changed in comments.
```
Design choices affect [performance](/Performance-and-SEO/App-performance), especially when you introduce packages and heavy visuals.
Keep in mind:
* Use optimized image sizes rather than huge background assets.
* Avoid loading many heavy animations or large libraries on initial load.
* Lazy load rarely used sections such as deep reports or advanced filters.
* Reuse shared components instead of many near copies.
You can ask AI for a performance focused review:
```text theme={null}
Review this app's design from a performance perspective:
- Identify heavy visual or code related elements that might slow loading
- Suggest lighter alternatives that keep the same overall look
- Propose specific places where lazy loading or code splitting would help
```
***
## Accessibility
Accessibility is part of good design. It helps more people use your app comfortably and can improve clarity for everyone.
Color choices have a direct impact on readability.
Good practices:
* Use strong contrast between text and background.
* Avoid using color alone to convey meaning.
* Keep interactive elements such as buttons and links clearly visible in all states.
* Check both light and dark modes if you support themes.
Prompt example:
```text theme={null}
Audit this app for color contrast:
- Identify text or icons with low contrast against their backgrounds
- Strengthen contrast while keeping the same general palette
- Ensure primary buttons and links are clearly distinguishable
Describe the main fixes you applied.
```
Readable text is about more than font choice.
Good practices:
* Use comfortable font sizes on all devices.
* Use enough line height for paragraphs.
* Avoid very light weight fonts on light backgrounds.
* Keep line length reasonable, especially on wide screens.
Prompt example:
```text theme={null}
Improve text readability:
- Increase base body font size slightly
- Increase line height for paragraphs
- Ensure headings are clearly larger than body text
- Reduce very long line lengths on wide screens
```
People should be able to use your app with a keyboard and see where they are.
Good practices:
* Make sure Tab moves through interactive elements in a logical order.
* Ensure focus styles are visible and distinct.
* Avoid keyboard traps where focus cannot move away.
Prompt example:
```text theme={null}
Improve keyboard and focus accessibility:
- Ensure all interactive elements can be reached with Tab
- Add visible focus styles to buttons, links, and form fields
- Fix any focus order issues on this page
Describe any major changes you made.
```
Motion can help or hurt. Some people prefer less of it.
Good practices:
* Respect reduced motion preferences.
* Avoid rapid flashing or strong flicker.
* Use subtle, purposeful animations rather than constant motion.
Prompt example:
```text theme={null}
Adjust animations for accessibility:
- Respect the user's reduced motion preference
- Remove or simplify large continuous animations
- Keep only short, subtle motion that helps understanding
```
Clear language and descriptions help everyone, including people using assistive tech.
Good practices:
* Use clear, descriptive labels for buttons and links.
* Provide meaningful alt text for important images.
* Use headings to structure content.
* Avoid vague link text such as "click here".
Prompt example:
```text theme={null}
Improve accessibility of labels and alt text:
- Make button and link labels more descriptive where needed
- Add or improve alt text for important images
- Ensure headings follow a clear structure
Keep the tone and brand voice the same.
```
***
## FAQs
Click a question below to learn more about design foundations and layout.
Design for mobile, tablet, and desktop separately, then check how your layouts adapt.
Use these guidelines when you design in Base44:
* Mobile: Use a single vertical column, keep one clear primary action per screen, and make tap targets large with enough spacing. Keep text short so people do not need to zoom.
* Tablet: Treat tablet as a hybrid. You can use side menus or split layouts, but keep buttons touch friendly and avoid very small tables or dense controls.
* Desktop: Use the extra width for multi column layouts and sidebars. You can add hover effects, but any important action must also work with a click or tap.
* All devices: Use readable font sizes, avoid horizontal scrolling, and let elements stack instead of overlap when space is tight. Avoid fixed heights that cut off content.
You can also ask AI to apply responsive rules, for example:
```text theme={null}
Make this layout responsive for mobile, tablet, and desktop.
Avoid horizontal scrolling and keep primary actions visible without excessive scrolling.
```
Design choices have a direct impact on how fast your app loads and feels. When you design in Base44, keep these guidelines in mind:
* Use optimized image sizes so large assets do not slow down initial load. Prefer compressed formats and avoid uploading images much larger than they appear on screen.
* Limit heavy animations and complex effects, especially in mobile heavy apps. Short, simple transitions are fine, but avoid constant motion or large animated backgrounds.
* Keep layouts clean and focused. Fewer layers, overlays, and nested components usually mean faster rendering, especially on lower end devices.
* Reuse components instead of creating many slightly different versions. Shared components are easier to cache and maintain.
* Avoid loading everything at once. Where possible, load non critical content later, for example secondary sections, long lists, or rarely used panels.
* Be careful with third party embeds such as maps, video players, and widgets. Only include them where they add real value, and avoid stacking many embeds on a single screen.
# Design system
Source: https://docs.base44.com/Building-your-app/Design-system
Create a workspace design system in Base44 to define your brand's colors, fonts, logo, and components once, then apply one consistent look across your apps.
A design system saves your brand's look and feel at the workspace level: its colors, fonts, logo, and a set of matching components. Create it once, set it as your default, and every new app you build starts on-brand, so you do not have to redefine your style each time.
You do not need to be a designer. With just a few details, such as your logo, a short description of your brand, the feel you want, and any design files you have, Base44 creates an entire design system for you, so all your apps look professional and on brand.
**Availability:**
* Design systems are available on the [**Builder plan**](https://base44.com/pricing) and above. Each workspace can have 1 design system, and as many as you need on the Enterprise plan.
* Design systems apply to web apps, not to mobile apps. An app imported from Figma, started from a URL, or migrated from another platform can take a design system once it has finished building.
* Creating and using a design system does not cost credits.
***
## What's included
When you create a design system, Base44 fills in everything that keeps your apps looking consistent and on brand, and shows it all in a live preview. Change a color or a font, and every example updates right away, so you always see how it looks.
A design system covers 3 things:
* **Your brand basics:** Your logo, brand name, tagline, and a short description, plus your brand's core values, tone of voice, and design guidelines for how it should look.
* **Your look and feel:** Your colors, your fonts, how rounded your corners are, how much shadow sits under things, and how much space goes between them.
* **Ready-made pieces:** A complete set of components that already match your brand and are ready to drop into any app, including buttons, icons, cards, navigation, forms, and page sections, each styled for its interactive states.
***
## Creating a design system
Workspace owners and admins create design systems from the workspace settings. In one form you can combine a short description, your logo, an import from Figma, a website, or an npm package, and your own design files, and Base44 generates a complete design system from whatever you provide.
**To create a design system:**
1. Click your workspace name at the bottom left, then click **Settings**.
2. Click **Design system**.
3. Click **Create**. If your workspace already has a design system, click **Create new design system** instead.
4. In **Create your design system**, add any of the following:
* **Describe your brand:** Write a short description of your brand, and add your logo in the square beside it.
* **Import an existing source:** You can use one source per design system. Switch between the tabs:
* **Figma file:** Drop or browse a `.fig` file, up to 1.9 GB, and attach all of its pages and frames or choose specific ones. Base44 downscales oversized images and prepares large files in the background, and does not store the original file.
* **Website URL:** Paste a website address. Only use URLs where you have the rights to the content.
* **NPM package:** Enter a published package by name, name\@version, or an npmjs.com link. It resolves from the public npm registry by default, or click **Private registry** to add a registry URL, an access token, and any scopes that should resolve there. Your access token is used once to fetch the package and is not stored.
* **Upload your design resources:** Add images, fonts, a `design.md` file, or other design files, up to 10 files.
5. Click **Create**. Generating your design system can take a few minutes, and you can leave and come back while it runs.
6. Review the generated design system in the preview, then adjust anything you want.
***
## Editing your design system
When you open a design system, you edit it in a two-panel editor. On the left are all of your brand and design settings. On the right, a live **Preview** shows those styles applied to real buttons, icons, and cards, the way they look in your app or website. As you change a setting on the left, the preview updates instantly.
Your design system's name and tagline sit at the top of the page. Click either one to edit it in place.
On the left, you can edit each part of your design system:
A short description of your brand. Base44 uses it to keep everything it generates on brand.
Add your brand logos, or generate one with AI. Click **Add logo** to upload a logo, or **Generate logo** to describe one and let Base44 create it. One logo is marked as **Primary**, and you can set a different one as primary from its **More actions** menu.
Choose your heading and body fonts, or upload your own. You can also fine-tune the weight of each font style. Workspace owners and admins can upload a font.
Click a color to edit it, or click **Generate palette** and describe the colors you want.
Defines how your brand communicates. Click **Add tone** to add a trait, or click the generate icon to let Base44 suggest a new set.
The principles your brand stands for. Click **Add value** to add one, or click the generate icon to let Base44 suggest a new set.
Set how rounded your components look.
Fine-tune how much space goes between elements.
Set how elevated your components look. Click a shadow to adjust its position, blur, spread, and color.
Rules that keep your app's visual language consistent. Click **Add guideline** to add one, or open the **More actions** menu on a guideline to edit or delete it.
Your edits are not applied until you save them. Click **Save changes** to keep them, or **Reset changes** to undo edits you have not saved yet. A design system needs a name and an overview before you can save it.
***
## Managing your design systems
Manage a design system from its card in the **Design system** section. Open the **More actions** icon on a design system to edit it, set it as your default, or delete it.
**Who can manage design systems:**
* **Workspace owners and admins:** Can create, edit, set the default, and delete any design system.
* **Other workspace members:** Can view design systems and attach one in the AI chat, but can't create, edit, or delete them.
### Setting a default design system
Set a design system as your workspace default so new apps start with it automatically.
**To set your default design system:**
1. Click your workspace name at the bottom left, then click **Settings**.
2. Click **Design system**.
3. On the design system you want, click the **More actions** icon and click **Set as default**.
To stop using a design system as your default, open the same menu and click **Remove default**.
### Deleting a design system
Delete a design system you no longer need.
Deleting a design system from its card takes effect immediately, and it cannot be undone.
**To delete a design system:**
1. Click your workspace name at the bottom left, then click **Settings**.
2. Click **Design system**.
3. On the design system you want, click the **More actions** icon and click **Delete**.
***
## Using your design system when building
When you start a new app, your default design system is preselected, so the app is built to match your brand from the first prompt. To choose a different design system, click the **Add** icon in the AI chat, select **Use a design system**, then pick the one you want.
You can also apply a design system to an app you are already working on, from the same **Add** icon in the AI chat. When your workspace has one design system, the option shows its name, and clicking it attaches the design system to your next prompt.
Applying a design system takes effect on a build turn in the AI chat. If your chat is set to a non-building mode such as **Discuss**, switch to **Build** first.
Applying a design system to an app that is already built rebuilds the app to match, rather than restyling it in place. Apply it early, or expect the app to be regenerated.
***
## FAQs
Click a question below to learn more about design systems.
No. Describe your brand in a few words, or import from a website, a Figma file, an npm package, or your logo, and Base44 generates a complete design system for you. You can then adjust any part of it.
On the Builder plan and above you have 1 design system per workspace, so use a separate workspace for each client or project that needs its own brand. On the Enterprise plan, there's no limit.
# Designing your app's emails
Source: https://docs.base44.com/Building-your-app/Designing-emails
Design branded emails for your Base44 app, preview them on any screen, customize built-in emails like password resets, and send them from your app's workflows.
Design the emails your app sends so they look like your app, not a plain text message. From **Emails** in your dashboard, you can start from a ready-made template in your brand colors and fonts, ask the AI to design a new one, preview it on desktop, tablet, and mobile, and send yourself a test before your app users see it.
You can also customize the built-in emails Base44 sends your app users, such as password resets, and use any of your designed emails as a step in a [workflow](/Building-your-app/Creating-workflows).
You need the Builder plan or higher to use **Emails**, including designing emails, customizing the built-in ones, and seeing email stats. On the Free or Starter plan, Emails shows an upgrade screen instead.
***
## Starting from a template
Base44 writes a set of starter emails for each app, already styled with your app's logo, colors, and fonts. Pick one to save it as your own email. It opens in the preview, ready to change as much as you like.
**To start from a template:**
1. Click **Dashboard** in your app editor.
2. Click **Emails**.
3. Under **Start from a template**, find the template you want. If your app has more than 3 templates, use the arrows to see the rest.
4. Hover over the template and click **Use this template**.
***
## Designing with AI chat
Describe the email you want in the AI chat, and it designs the email for you in your app's style. For example, `Design a welcome email that thanks new members and links to their profile page`. You can type it straight into the AI chat, or start from the Emails tab.
**To design an email with the AI chat:**
1. Click **Dashboard** in your app editor.
2. Click **Emails**.
3. Click **Generate with AI**.
4. Describe the email in the AI chat and send your message.
***
## Previewing and testing
Open any email to see exactly what your app users receive, check how it looks on different screens, and send yourself a test copy.
**To preview and test an email:**
1. Click **Dashboard** in your app editor.
2. Click **Emails**.
3. Click the email you want to open.
4. Choose what you want to do:
* **Check other screen sizes:** Click **Desktop**, **Tablet**, or **Mobile** above the preview.
* **Send a test:** Click **Send test to me** to get a copy in your own inbox.
* **Change the email:** Click **Edit with AI** and describe what to change in the AI chat.
* **Delete the email:** For emails you designed, click **Delete**, then click **Delete template** to confirm.
Deleting an email cannot be undone. Any workflow or backend function that sends it stops working until you create the email again.
***
## Customizing built-in emails
If your app has a login, it automatically sends 4 account emails to the people who use it. You don't need to set them up or turn them on. Base44 sends them as part of your app's signup and login, already styled with your app's logo and colors.
* **Password reset:** Sent when a user asks to reset their password.
* **Email verification:** Sent when a user needs to verify their email address.
* **User invitation:** Sent when someone is invited to join the app.
* **Access approved:** Sent when an app access request is approved.
Changing them is optional. If you edit one, your version is sent instead of the Base44 one, and it shows **Edited by you** in the list. To go back to the Base44 version at any time, open the email, click **Reset to default**, then click **Reset**. This deletes your version and cannot be undone. Keep the link or button each email needs, such as the reset link, or your app users get the Base44 version. If your app uses its own login pages, you only see the emails Base44 still sends for it.
**To customize a built-in email:**
1. Click **Dashboard** in your app editor.
2. Click **Emails**.
3. Under **Application emails**, click the email you want to change.
4. Click **Edit with AI** and describe what to change in the AI chat.
The email verification email goes to people who are still signing up, so your version has a few extra checks before it sends. Your app needs its own [custom email domain](/Setting-up-your-app/Sending-emails-from-a-custom-domain), your version must show the verification code, and it is reviewed first, which can take up to an hour. Until then, your app users get the Base44 version, and the preview shows why under **Sending**.
***
## Sending from workflows
Any email you design can be a step in a workflow, so it sends automatically when something happens in your app, such as a new signup or a completed order.
To add one, ask the AI chat, for example `When a new user signs up, send them a welcome email`. The AI designs the email and adds it to the workflow as a **Send email** step, ready to run. When you open the workflow, the step shows who the email goes to, its subject, and which template it uses.
Learn more about [creating workflows](/Building-your-app/Creating-workflows), and about [who your app can email](/documentation/building-your-app/sending-emails#who-you-can-email).
***
## Tracking email performance
See how the emails your app sends are doing: how many were sent and delivered, and how often people opened them or clicked a link. You also see bounces, spam reports, and unsubscribes, a chart for each day, and a list of the emails you send most.
To see the same stats for a single email, open it from that list.
**About email stats:**
* Stats cover the emails your app sends from workflows and backend functions. Built-in emails, such as password resets, and test emails aren't counted.
* Opens are approximate, because some mail apps load images automatically. Opens and clicks count every open and click, not unique people.
* Opens and clicks aren't tracked for emails without an unsubscribe link, such as receipts and confirmations.
* Emails your app sends from its own email domain aren't counted yet, so they show no data.
**To see how your emails are doing:**
1. Click **Dashboard** in your app editor.
2. Click **Emails**.
3. Click the **Dashboard** tab.
4. Choose **7 days**, **30 days**, or **90 days** to set the time range.
# Designing with AI
Source: https://docs.base44.com/Building-your-app/Designing-with-AI
Learn to design your app with AI: brief it like a designer, tweak elements in Edit mode, set boundaries with AI Controls, and refine the options it offers.
AI is at the center of how you design in Base44. Describe what you want in natural language, and AI updates code, styles, and components for you. **Edit** mode lets you tweak what you see on screen, and AI Controls help you set boundaries. This page covers each workflow with prompts and examples you can use directly.
For the Theme panel, fonts, and global styling within one app, see [Customizing the design of your app](/Building-your-app/Design).
***
## How design works
You do not need a design tool or any design experience. Your app's design is part of its code, and the AI changes that code for you: every design change is a request in plain language, from "make the buttons rounder" to "redesign this whole page".
There are 3 ways to make a design change, and choosing the right one saves you time:
| Change you want | Use |
| - | - |
| Colors or fonts across the whole app | The **Theme** panel |
| One element or section you can point at | **Edit** mode |
| Anything bigger, such as new layouts, redesigns, or a different feel | The AI chat |
**A good order for a full redesign:**
1. Set the overall look first: colors and fonts in the [Theme panel](/Building-your-app/Design#global-changes).
2. Ask the AI for page-level changes, one page at a time.
3. Polish individual elements in **Edit** mode.
Nothing is permanent. You can click **Revert** on any prompt to undo that change, or restore an earlier version of your app from its version history, so it is always safe to experiment.
***
## Designing in the chat
The AI chat is ideal for global changes and design decisions that affect many parts of your app. You can define a persona and brief once, then build on that:
```text theme={null}
You are my product designer for this app.
Design brief:
- Purpose: Help content teams plan, write, and ship articles faster.
- People: Busy content leads and writers on laptops during the workday.
- Feel: Calm, focused, modern, trustworthy.
Use this brief as the basis for all design suggestions and decisions.
```
You also do not need design vocabulary. Describe the feeling you want, name a product whose style you like, or upload a screenshot of a design you admire and ask the AI to match its style:
```text theme={null}
Make this page feel calmer and more premium. Use the attached screenshot as a reference for the overall style.
```
Helpful patterns:
* Ask for a critique before asking for changes.
* Ask for a plan in Discuss mode, approve it, and then ask AI to implement it.
* Always clarify the scope of the design: the whole app, one page, or one element.
Example:
```text theme={null}
Critique the design of this dashboard only.
Focus on layout, hierarchy, color, typography, and spacing.
Then propose a short plan of small changes.
Wait for my approval before you apply anything.
```
After you review:
```text theme={null}
Apply the plan you proposed for this dashboard.
Make changes in small groups and describe each group briefly as you go.
```
***
## Choosing a design option
When you ask the AI to change the design or layout of a section or element, it may present visual options for you to choose from instead of applying a change right away. Each option shows a preview so you can see what it will look like before committing.
You can also click the **Expand** icon on an option to view it in full mode and refine it before choosing.
Describe a targeted change, such as a lighter background, to adjust only those details, or ask for a completely different direction to replace that option. When it looks right, click **Apply**.
***
## Exploring design directions
You can use the AI chat to explore different directions before you commit. You do not need to describe your current design: the AI takes a screenshot of your page and reviews what is actually there.
Critique loop:
```text theme={null}
Act as a senior product designer.
Review this page and describe three specific visual issues.
For each issue, write a Base44 prompt that would fix it.
Do not make any changes yet.
```
Alternative directions:
```text theme={null}
Create two visual options for this dashboard:
- Option A: very minimal, mostly neutral with a single accent color
- Option B: more expressive, with richer color and slightly larger typography
Keep content and layout the same.
Describe each option in a short summary and wait for me to choose.
```
Once you pick an option, you can ask AI to apply that direction to similar pages.
***
## Using Edit mode
**Edit** mode is ideal when you want to adjust what you see without rewriting everything.
Click **Edit** in the chat and then select the element you want to change. You can:
* Select a section and adjust colors, spacing, and layout visually.
* Ask AI to restyle just one component instance.
* Delete elements you no longer need using the **Delete** icon .
* Use it as a safe sandbox before you roll a pattern out to the rest of your app.
Click **Edit Element** on the Edit toolbar to ask the AI to make changes. For example:
```text theme={null}
In this selected section:
- Lighten the background slightly
- Increase vertical spacing between the heading and content
- Use the primary button style for the main action and secondary style for the others
```
```text theme={null}
For this card only:
- Increase padding
- Move the icon to the left of the title
- Use a softer shadow that matches other cards in the app
```
***
## Using AI Controls
Use the [AI Controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat) in the chat to guide and protect your design.
You can:
* Set design guidelines that apply to every prompt.
* Freeze specific files or pages so AI does not change them.
* Establish a tone such as minimal, bold, or playful.
Example guidelines:
```text theme={null}
Global design guidelines:
- Prefer calm, minimal visuals with plenty of white space
- Use rounded corners with radius 12 on cards and buttons
- Avoid heavy gradients and glass effects
- Keep animations subtle and respect reduced motion preferences
```
Always be explicit about scope in your prompts. The same change can apply to the whole app, one page, or a single element, and the AI follows your lead:
```text theme={null}
Update the primary button style and propagate it to all places where the primary button component is used.
Do not change secondary buttons.
```
```text theme={null}
Update only the hero section on the homepage:
- Change the background to a soft gradient
- Increase the heading size
- Use the primary button style for the main call to action
Do not change other sections or pages.
```
To protect areas you are happy with while experimenting elsewhere:
* Use AI Controls to freeze specific files or pages so AI does not change them.
* Use the **Revert** option on individual prompts to undo a single change.
* Use version history to roll back to an earlier state.
***
## FAQs
Click a question below to learn more about designing with AI.
Yes. Design prompts are AI chat messages, so they use your message credits the same way as any other request in the chat.
**Edit** mode styles one element or section at a time. The **Theme** panel changes colors and fonts across your entire app at once. To learn more about the Theme panel, see [Customizing the design of your app](/Building-your-app/Design).
# Managing your app data
Source: https://docs.base44.com/Building-your-app/Managing-your-app-data
Explore, search, filter, add, edit, import, and export the data in your app's tables. Change data permissions, fix permission risks, and connect to another app.
***
In Base44, your app’s data is the information that brings everything to life. It includes all the information that your app holds, such as people who sign in, the content you show, orders you process, and the activities that happen in your app.
***
## Understanding your data
All of your app's data is organized in tables, just like a spreadsheet. Each table groups one type of info (such as people or products) and sorts it into columns called fields, such as names, dates, or prices.
For example, if you [create an app](https://base44.com/ai-app-builder) to run your shop’s business, you can use the data tables in Base44 to keep everything organized. You might have a **Users** data table to store your customers' names and email addresses, a **Products** table listing what you sell, and an **Orders** table to track every purchase.
Each new customer, product, or order is automatically added as a new row in the right table, so you can quickly find, update, or manage your shop’s information.
***
## Data field types
When you, or the AI, add a field (column) to your table, you choose what type of information it stores. Some common field types include:
* **Text:** For words, phrases, or descriptions (such as customer names or product details)
* **Number:** For prices, quantities, or measurements
* **Yes/No (Boolean):** For fields that are true or false (such as “Is active?”)
* **Date/Time:** To save dates such as sign-up day, order date, or event time
* **File:** For images, documents, or other files
* **Reference:** To link this table to another table (for example, linking each order to the right customer)
* **Object:** For advanced cases, this lets you add structured information such as a JSON object
***
## Accessing your app's data
It is easy to see all the information your app collects. You can view your data at any time from the dashboard, where each table gives you a clear, organized look at your people, products, orders, and more. This helps you track what is happening in your app and keep everything up to date.
### Opening a table
Every table in your app appears as a card on the **Data** page. Open one to see its records.
**To open a table:**
1. Click **Dashboard** in your app editor.
2. Click **Data**.
3. Select the table you want.
### Exploring your data
Once you are in, the table itself and the **Data** page each give you a few ways to get around.
Inside a table:
* **Columns:** Sort by any column, and hide or reorder columns. Every table also has **Created**, **Last updated**, and **Created by** columns, hidden until you turn them on from **Columns**.
* **Records:** Keep scrolling to load more instead of moving through pages.
* **Rows:** Select several to move them to trash together, and use the copy button on a link cell to copy its value.
* **Images:** Images uploaded to your app show as thumbnails in the table, including files your app stores privately. Links to images hosted on other sites stay as links, and other uploaded files show as a file chip.
Back on the **Data** page:
* **Sort by:** Order the cards A-Z or Z-A.
* **More actions:** Click the icon on a card for quick options: **Test Permissions in preview**, **View Data**, **Export**, **Schema**, **Backup & Restore** (in Production only), **Recently deleted**, **Clear table records**, and **Delete this table**.
### Searching for specific data
Use the search bar above the table to quickly find relevant rows. The search looks through all text fields in your data, so you can jump straight to a specific row instead of scrolling.
**To search for data:**
1. Open the table you want from **Data** in your app's dashboard.
2. Enter a word, number, or phrase in the search bar above the table.
### Filtering your data
Use filters to turn a long table into a focused view, for example to see only shipped features, items owned by your team, or work planned for a specific quarter.
The filters you get come from the fields in that table, so each table has its own list. Fields such as dates, numbers, and choices get a filter, and plain text fields are covered by the search box next to it instead. A table made only of text fields has nothing to filter on, so it shows no **Filters** button.
**To filter your data:**
1. Open the table you want from **Data** in your app's dashboard.
2. Click **Filters** above the table and select your filters.
3. To change which columns you see, click **Columns** and show, hide, or reorder them.
***
## Adding and updating data
Base44 automatically collects and updates your app’s data as people interact with your app. The AI sets up your tables so the right information is saved and kept up to date for you. However, if you want to manually add information (for example, add a product, update a record, or input test data), you can do it easily from your app’s dashboard inside your app editor.
### Manually adding data
Add a single record yourself when you are testing something or filling a gap, rather than importing a file.
**To add a record:**
1. Open the table you want from **Data** in your app's dashboard.
2. Click **Add Item**.
3. Enter the data and click **Submit**.
### Editing data
To edit a data record, click the row of the table that you want to edit, complete the details, and click **Save changes**.
Under **Record info**, the record also shows when it was **Created**, who it was **Created by**, and when it was **Last updated**. Records added by someone who wasn't signed in show **Anonymous** as their creator, and records the AI chat created while building your app show a service account ID instead of an email.
For a field that holds a file or an image, such as `photo_url`, click the upload icon next to the field to upload a file straight from your computer, instead of pasting a link.
### Deleting data
You can delete a single record from its row, clear every record in a table from the table's card, delete a table you no longer need, or ask the AI chat to do it for you. The AI prepares the delete action and asks for your approval before anything is removed.
**Deleted records are not gone straight away:**
* Deleted records are kept for 30 days, so you have time to recover them. Click the **More actions** icon on the top of the data table and click **Recently deleted** to see and restore them. After 30 days they are permanently deleted and cannot be restored.
* On the Elite plan and on an Enterprise plan (Business or Enterprise), Base44 also [backs up your data automatically](/Enterprise/backup-and-restore), so you can review what your tables held earlier, download a copy, or restore your data if records are edited, imported, or deleted by mistake.
To delete a single record, click the **Delete** icon on the relevant row of the table. To delete every record in a table, click the **More actions** icon on that table's card and click **Clear table records**.
**To delete a table:**
1. Click **Dashboard** in your app editor.
2. Click **Data**.
3. Click **Clear table records** from the table card's **More actions** menu, first in **Production** and then in **Test**, so the table is empty in both.
4. Click the **More actions** icon on the table's card, then click **Delete this table**.
5. Click **Delete this table** to confirm.
Deleting a table removes it from your app's data model, and anything in its trash can no longer be recovered. If your app's code still defines the table, it comes back the next time that code is written or pulled.
**To delete data with the AI chat:**
1. Open the AI chat in your app editor.
2. Describe what you want to delete, for example: `Delete the data for Italy in the TripItem entity.`
3. Review the delete request that the AI suggests, including the entity name.
4. Click **Approve** to confirm the deletion, or **Reject** to cancel.
***
## Importing data
Sometimes you want to bring in lots of information to your app at once. You can import data in 2 ways, depending on whether you want to work directly in the dashboard or ask the AI chat to help.
Imports add new rows to your tables. They do not update or overwrite existing records. If you want your file to replace the data in a table, first delete the current records in that table, then run the import again with your file.
### Using the AI chat
Use the AI chat to turn existing data files into entities and records in your app. This is helpful when you already have information in a spreadsheet or JSON file and want to bring it into Base44. You can upload structured data files and ask the AI to create or update entities for you, including setting up tables and mapping fields.
Supported formats for importing data:
* CSV (.csv)
* Excel (.xlsx, .xls)
* JSON (.json)
If you upload an Excel file with multiple sheets, you can ask the AI to import a single sheet or import all sheets into their matching entities.
* `Import this data into the Customers entity.`
* `Import this JSON file into my Orders entity.`
* `Import the ‘Orders’ sheet into the Orders entity.`
* `Here is a CSV of my Products. Create a Products entity with matching fields and import these rows.`
**To import data using the AI chat:**
1. Create the entity you want to import into (for example, Products, Contacts, Orders).
2. Open the AI chat in your app editor.
3. Click the **Upload files** icon and select your data file.
4. Ask the AI to import the data.
5. Review the response and approve the import in the chat.
When you import data this way, Base44 analyzes your file structure and maps columns to your entity fields. It can create or update entities if your schema needs to change, adding new entities or fields, or adjusting field types to match your file. It does not update or overwrite existing records; it always appends new rows.
If something does not match, the AI updates the schema where it is safe to do so, then retries the import so you do not need to fix everything manually.
For file size limits and more details about uploading files to the AI chat, see [Uploading and managing files](/Building-your-app/Using-media).
**To use the AI chat to replace existing data:**
If you want the content of a file to replace all the current records in an entity, you need to clear the entity first, then import the new rows from your file.
**Tip:** Before you delete records, consider exporting the table so you have a backup copy of your original data.
1. Ask the AI chat to delete the records in the relevant entity (for example, `Delete all records from the Orders entity.`).
2. Confirm that you want to delete the records.
3. Click the **Upload files** icon and select your data file.
4. Ask the AI chat to import the file into the same entity.
### Directly in the dashboard
Use this option when you already have a CSV that matches your table and you simply want the rows to appear in your data. For example, export your customer list from another tool as a CSV, adjust the columns to match your **Customers** table, then import the file so you can manage those customers directly in Base44.
Dashboard imports support CSV (.csv) files and add new rows only, so they never update or overwrite existing records. To replace everything in a table instead, click **Clear table records** on that table to clear it, then import your CSV.
Values such as `NULL`, `None`, `N/A`, `#N/A`, and `NaN` come in as empty in any column that is not a text column, and list fields accept either a JSON array or a comma-separated string. After the import, the **Data** page shows how many records were added and reports any rows it could not import.
**To import data from the dashboard:**
1. Click **Dashboard** in your app editor.
2. Click **Data**.
3. Select the relevant data set (table).
4. Click the **More actions** icon and click **Import**.
5. Choose your CSV file and click **Open**.
***
## Exporting data
You might want to take your app's data out for backup, analysis, or to use in other tools. To do this, you can use the **Export** option. For example, you might want to export your store orders or people lists to share with your accountant, or use the data to create custom reports.
Your data downloads as a CSV file you can open in spreadsheet software such as Excel or Google Sheets.
**To export your app's data:**
1. Click **Dashboard** in your app editor.
2. Click **Data**.
3. Select the relevant data set (table).
4. Click the **More actions** icon and click **Export**.
***
## Changing data permissions
Each data table has its own security settings, controlling who can **read** and **write** its data.
**Read Access**: Who can view records\
**Write Access**: Who can create, update, or delete records
**Note:** For more detailed explanations, see the [Managing security settings guide](/Setting-up-your-app/Managing-security-settings).
Each table has its own permissions page, listing the rules that decide who can create, read, update, and delete its records. Rules are combined, so a person needs to match only one of them.
To check your rules work, click **Test Permissions in preview** from the table card's **More actions** menu, from the **More actions** menu on the table itself, or on the table's **Permissions** page after you save a change. Your app's preview opens on a page that reads this table, with the list of people to act as already open, so you can see exactly what each of them can reach. Learn more about [testing your permissions](/Setting-up-your-app/Managing-security-settings#testing-your-permissions).
**To change the permissions for your data:**
1. Click **Dashboard** in your app editor.
2. Click **Data**, then select the table you want.
3. Click **Permissions** at the top of the table.
4. Click **Edit**, change the rules, and save.
### Fixing permission risks
When a table has a row-level security risk, a warning icon appears on its card on the **Data** page, and a **Permission risks detected** banner appears above the cards. Open the table to see the same banner with the risk and the recommended rules spelled out.
* **Fix one table:** Open the table and click **Fix** to apply the recommended rules, or **More details** to review the risk and the suggested changes first.
* **Fix several at once:** On the **Data** page, click **Fix all** in the banner to fix every flagged table, or click **Select**, tick the tables you want, and then click **Fix all**.
***
## Connecting your data to another app
You can let another app read or write data from your Base44 app. This is useful if you want to sync information, automate tasks, or give access to outside tools.
**To connect your data to another app:**
1. Click **Dashboard** in your app editor.
2. Click **API**.
3. Select the table you want from the dropdown.
4. Choose the format you need: **JS SDK**, **JS Fetch**, **cURL**, or **Python**.
5. Copy the code for reading or updating data.
6. Paste it into the other app or tool, so it knows how to connect to your table.
***
## FAQs
Select a question below to learn more about your app's data.
It is not currently possible to automatically merge 2 separate apps into a single app in Base44. Each app is managed as an independent project with its own codebase, settings, permissions, and integrations.
If you want to combine the features of 2 apps, you need to manually recreate or copy code, components, and settings from one app to the other. After combining the code and functionality, thoroughly test the new app to make sure everything works as expected.
Yes, to delete your data, go to **Data** in your app's dashboard. On the relevant data tab, click **More actions** and then **Clear table records**. You can access and restore the deleted data for 30 days but after that it is permanently deleted.
You can access and restore your deleted data for 30 days. After that, deleted data is permanently removed and cannot be restored.
Yes. You can safely ask the AI chat to add mock data for testing. By default, it adds new records without changing or removing existing ones, so your important information stays protected.
For structured testing, it is better to use the built-in test data feature instead of adding ad hoc mock records to your live tables. Test data lets you quickly generate, reset, and remove sample records without affecting your real production data. Learn more in [Testing your data](/documentation/managing-app-data/testing-your-data).
If you do choose to add test records directly to a table with the AI chat, you can clear them later from the dashboard by deleting those records.
The AI chat focuses on adding and importing data. It does not remove records unless you clearly ask it to delete data from a specific entity and confirm the action.
If you want to replace all data in an entity with the content of a file, the safe pattern is:
* Export the current table if you want a backup.
* Ask the AI chat to delete the records in the relevant entity.
* Upload your file and ask the AI chat to import it into the same entity.
This makes sure the entity is cleared first, then filled with the new rows from your file.
If you want to add a new column (field) or make other changes to your data tables, ask the AI chat to do it for you. The AI chat handles updates to your data schema, you just need to describe what you want to change.
For example, if you want to add a "Notes" column to one of your data tables, prompt the chat to add it. It is best if you use Discuss mode in the chat to help the AI decide how to go about the change before implementing it.
Starting November 27, 2025, there is a limit of 5,000 items per request to help keep performance fast, stable, and reliable.
If your app currently pulls everything in one large request, you may need to update it to load data in smaller pieces. Once this change goes live, double-check your flows to make sure everything still works as expected.
**Tip:** To make sure you are within the limitation, you can paste this message into the Base44 AI chat: “Make sure all data pull requests are limited to 5,000 items.”
You have not lost your data. When a collection has more than 5,000 records, the system limits how many items can load at once to protect performance. What you see depends on where you are looking:
* **In your dashboard**: The data table only shows up to 5,000 items, even if your collection contains more. All of your records are still stored. To review everything, export the collection to CSV from the dashboard so you can see all items outside the table view.
* **In your app pages**: Pages that try to fetch the entire collection in one request also only show up to 5,000 items. The rest of the records are still there, but they are not loaded on that page. Set up pagination so your app loads data in smaller chunks, for example 50 to 200 items at a time. You can ask the AI chat to add pagination for you.
Yes. If the data is stored inside your Base44 app, you can read from your entities and display it on any plan, including the free plan. Basic data fetching and display does not require backend functions or a paid plan.
Backend functions are only needed when you want to connect to an external service or API outside of Base44, such as Strava, Stripe, or a third-party database. Connecting to external APIs requires the **Builder plan** or higher.
Yes. You can build a full role and hierarchy system in your app, including managers, teams, and even separate spaces for each customer if you are building a SaaS app.
At a high level, the pattern works like this:
* People sign up and sign in through the normal Base44 login flow. Their account details are stored in the built-in **User** entity. You do not change the security rules of this entity.
* You create your own entities to model your business, for example Company, Team, and TeamMember.
* Each record in these entities links back to a User record using a reference field, such as userId. This lets you connect login accounts with your own business roles.
* You use data permissions and row-level security on your entities so each person only sees the records they should see.
For example:
* In a SaaS app, each Company record can represent one of your customers. Data permissions make sure people from one company cannot see another company’s data.
* Within each company, TeamMember records can store fields such as role, manager, and team. You can then set rules so managers see all records for their team, while individual team members only see their own records or items assigned to them.
* Global admins in your app can have a role that allows them to see and manage all records across companies and teams.
This approach lets you support complex, multi-level apps (sometimes called “User of User” or UoU) while Base44 continues to manage login and the core User entity securely. To design the exact rules, use the data permissions and row-level security options described in the [Managing security settings](/Setting-up-your-app/Managing-security-settings) guide.
# Creating and using your app on mobile
Source: https://docs.base44.com/Building-your-app/Mobile-experience
Create, edit, and manage your Base44 app from your mobile device. Let anyone open and use your app right from their own home screen, just like a native app.
Base44 gives you full flexibility on mobile. Build and edit from a mobile browser or the Base44 app, share your app with people so they can add it to their home screen, and submit it to the App Store or Google Play when you're ready.
***
## Using Base44 from a mobile browser
You can create, edit, and manage your apps directly from a mobile browser, without needing to download anything. This lets you capture ideas, make quick changes, and keep your work moving wherever you are.
### Creating an app on mobile
Start a new app project wherever you are, using just your mobile device. This helps you capture ideas, build quickly, and manage your work even when you're away from your computer.
**To create a new app from your mobile browser:**
1. Open your browser on your mobile device.
2. Go to [**base44.com**](http://base44.com) and tap **Start Building.**
3. Sign up or log in.
4. Write your prompt and start building.
### Editing your app on mobile
Update your app directly from your mobile browser, making it easy to adjust content, add features, or make quick changes while on the go.
Some features such as connecting a domain and managing your app's security are not available on mobile. You need to go to a desktop to make changes to these.
**To edit your app from your mobile browser:**
1. Open your browser on your mobile device.
2. Go to [**base44.com**](http://base44.com) and tap **Start Building.**
3. Log in to your account.
4. Tap your app.
5. Tap **Chat to Edit** to make changes using AI.
***
## Base44 mobile apps
Download the Base44 app to build, edit, and manage your apps on the go. The app is available in English, German, Spanish, French, Japanese, and Portuguese. It follows your device language by default, and you can choose a different one in the app.
### Android
The Base44 Android app is available on Google Play. Download it to build, edit, and manage your apps directly from your Android device. [Download from Google Play](https://play.google.com/store/apps/details?id=com.base44.android\&pcampaignid=web_share)
### iOS
The Base44 iOS app is available on the Apple App Store. Download it to build, edit, and manage your apps directly from your iPhone or iPad. [Download from the App Store](https://apps.apple.com/il/app/base44-build-with-ai/id6757432427)
**Important:**
* The price shown in the iOS app may differ from the price on base44.com, as Apple applies its own fees.
* To manage, change, or cancel your subscription, go to your Apple ID subscription settings. You cannot do this from your Base44 account.
* If you have a billing issue with a subscription purchased through the iOS app, you need to contact Apple Support directly. We are not able to help with billing issues processed by Apple.
***
## Sharing and installing your app
Your app works in any mobile browser without needing to be in an app store. [Share the link](/Setting-up-your-app/Managing-access#sharing-your-app-link) to your published app and let your app users know they do not need to download anything.
For the best experience, recommend that your app users add the app to their home screen. When someone adds your app to their home screen, their device uses your app's logo as the icon. It appears alongside other apps and opens with a single tap, just like a native app.
Your app updates automatically, so everyone opening it from the home screen always sees the latest version.
**To add your app to the home screen:**
1. Open the app link in your mobile browser.
2. Tap the share option in your browser.
3. Tap **Add to Home Screen**.
4. Edit the shortcut name if you want, then tap **Add**.
***
## Submitting your app to app stores
You can prepare your app for the Apple App Store and Google Play directly from the app editor. Scan your app against store guidelines, use AI to fix issues, and generate the IPA and AAB files that you need to upload in your Apple and Google developer accounts.
You need a [Builder plan or higher](https://app.base44.com/billing) to download the files for app stores.
Learn how to [submit your app to app stores](/documentation/building-your-app/uploading-to-app-stores).
***
## Exporting your app
If you have a Builder plan or higher, you can export your app's code to GitHub or download it as a ZIP file. This lets you work with external tools and workflows outside of Base44.
You can then use third-party tools such as Capacitor, PWABuilder, or Trusted Web Activities (TWA) to wrap your app's URL or exported code, making it possible to distribute your app on mobile app stores. These wrappers are managed outside of Base44, and any native-only features like push notifications must be set up separately.
If you export your frontend and data, you can host the frontend elsewhere and connect it to your own backend system if you wish.
**Frontend (app codebase) and functions:** Your app's code by clicking the export button in the top-right corner of the app editor (GitHub or ZIP). The export includes all client-side code (HTML, CSS, JavaScript, assets) and backend functions.
**Backend (data):** Your database collections as CSV files. Go to **Data** in your app editor, select a collection, click the More actions icon and then **Export**.
Managed hosting, authentication system, or database infrastructure.
For advanced help and community support, visit the [Base44 Discord community](https://discord.com/channels/1303811506080841758/1368653043071058100) to connect with other builders and share tips.
***
## FAQs
Click a question below to learn more about using your app on mobile.
Yes. Your app automatically adjusts its layout for any device, but you can fine-tune how it looks and works on mobile. See [Customizing your app for mobile](/Building-your-app/Design-foundations-and-layout#customizing-your-app-for-mobile) in the design doc.
Yes. You can add push notifications to your mobile app when you generate your App Store or Google Play files, then send them straight from your app.
[Learn how to add push notifications.](/documentation/building-your-app/uploading-to-app-stores#adding-push-notifications)
No. Any time you make or publish changes, your visitors automatically see the latest version.
Yes, every element, form, and feature of your app works on both desktop and mobile devices. We recommend testing your entire app on mobile and making any necessary adjustments in the app editor to ensure the best experience for your app users.
You do not need to create or upload a manifest.json file for your app. Base44 automatically generates and manages the manifest.json for you.
You can view your app's manifest at:\
`https://yourdomain.com/api/apps/manifests/YOUR_APP_ID/manifest.json`
To change what appears in the manifest, update your app information instead of editing the file directly:
1. Go to your **App Dashboard** and click **Overview**.
2. Update your app name, descriptions, icons, and other branding details.
These changes are reflected automatically in your manifest.json file.
# Adding and using npm packages
Source: https://docs.base44.com/Building-your-app/NPM-packages
Add npm packages to your app to use ready-made code libraries for animations, charts, and data formatting. Browse packages, install one, and see an example.
## What are npm packages?
Use npm packages to add powerful features and tools to your Base44 applications without having to build everything yourself. Base44 is an [ai app builder](https://base44.com/ai-app-builder) that gives you access to reliable, up-to-date code libraries for things like animations, data formatting, and charts, all created by expert developers.
When you use npm packages, you can add advanced features in minutes, rely on well-tested code, and focus on creating what makes your app unique.
Think of npm packages as little boxes of ready-made code you can plug into your app. Someone else already wrote the code. You just need to install the package and can use all its abilities instantly.
Base44 makes it simple to add npm packages to your app. You can request to add npm packages, review the request, and approve installation, all from the AI chat inside your app editor.
* Animation libraries (for example, anime.js)
* Chart and graph utilities
* Date and time helpers
* UI components
* Drag and drop logic
**Important:**
All npm packages are created and maintained by third parties. Base44 can’t guarantee the quality, reliability, or security of any external package you install. Always test and validate packages carefully to make sure they work correctly in your app. You are responsible for ensuring that any third-party packages you use meet your project’s needs.
***
## Browsing npm packages
You can find npm packages in the public registry. Each package README includes detailed instructions, usage examples, and peer dependency details, so you can get started right away.
Use the Base44 [**npm Playground**](https://NPM-Playground.base44.app) to preview npm packages in action and plug them directly into your app.
**To browse Base44 npm packages:**
1. Go to [npmjs.com](https://npmjs.com) to see all available public packages.
2. Click the package you want to use to open its details page.
***
## Adding an npm package to your app
In Base44, you can add npm packages by chatting with the AI. No terminal or manual install commands required.
**To add an npm package to your app:**
1. Go to your app editor.
2. Type in the AI chat the npm package you want to install.
3. When prompted, click **Approve** in the chat.
***
## Example of using an npm package
You can use anime.js to create polished entrance animations for your app’s pages and elements. For example, you might want to animate cards, buttons, or charts when a page loads to make your site feel more engaging.
Simply add a prompt such as:
```text theme={null}
Install the npm anime.js and make my app beautiful
```
The AI chat asks you to approve the installation and the package is installed right into your app.
Once it is installed, you can use anime.js to animate page sections, icons, and more.
***
## FAQs
Click a question below to learn more.
Base44 does not currently offer a public SDK. However, you can vote for this feature on our [Product Roadmap](https://feedback.base44.com/roadmap/main?q=sdk).
For advanced developers, the `npm-base44/sdk` package is available. This package allows you to perform specific backend functions.
If your npm package does not install or gets stuck on pending, try these steps:
1. Check the chat messages for error details. Sometimes, the AI chat explains dependency or compatibility issues with the package you are requesting to install.
2. Make sure your request matches the exact package name and version.
3. If install requires approval, verify that you have approved the request in the chat panel.
4. If the install fails, try re-requesting the package using the chat.
Yes. You can ask the AI chat in your app editor to remove or update an npm package for you. To remove a package, tell the chat which package to uninstall. To update one, ask the chat to update it.
Removing a package is a good way to keep your dependencies tidy, though an unused package that stays installed has no effect on how your app runs.
To find out which npm packages you have installed on your app, you can ask the AI chat.
Choose the right npm packages by following the recommendations below. Doing a little research on each package, instead of installing it immediately, can help you find reliable options and prevent issues down the line.
* **Download statistics:** Look up how many downloads the package has on npm. Packages with a strong download history are generally seen as dependable within the development community.
* **Documentation quality:** Well-documented packages usually make setup and troubleshooting much easier. Look for clear usage instructions, examples, and API references.
* **License type:** Make sure the package’s license fits your project’s requirements, especially if you’re building something commercial or open-source.
* **Bundle size and dependencies:** Consider how the package will affect your app’s performance and whether it adds many new dependencies. Lightweight, focused packages reduce potential conflicts and bloat.
* **Update activity:** Review the project’s repository, such as on GitHub, to see if updates are recent and if maintainers are addressing questions or bug reports. Packages that are kept up to date are usually safer and more compatible with modern tools.
* **Community input:** Explore comments, ratings, and discussions from npm, GitHub, or programming forums. Other developers’ experiences can alert you to potential issues or give you a better sense of how the package performs in practice.
# Uploading and managing media
Source: https://docs.base44.com/Building-your-app/Using-media
Upload images, videos, audio, and documents from your computer, file library, or Google Drive. Check upload limits and set your app's logo and social image.
Media files such as images, videos, audio, documents, and data files help you create a rich, interactive app experience for people using your app. You can upload files while [building your app](https://base44.com/ai-app-builder) and in your live app, giving people new ways to share and engage.
You can also add a custom logo that appears when someone adds your app to their home screen. The logo is also used as the browser favicon, so your app always looks professional and on-brand from both desktop and mobile.
***
## Using your file library
Your app has its own file library where Base44 stores files that you upload or generate while you build. This gives you one place to organize and reuse media and reference files across your app. You can keep images, videos, brand guides, PRDs, and data exports in your file library, then use them in your app or add them to the AI chat as context.
Any images and videos the AI generates and any files you upload from the editor or AI chat are automatically stored in the file library, and when you add a file from the library to the AI chat, the AI uses it as context for your prompts.
The file library is per app. Files saved in one app's library are not shared with other apps in your workspace.
**To access your file library:**
1. Go to your app editor.
2. Click the **Add** icon in the AI chat.
3. Click **Choose from library**.
***
## Adding files to your app
You can add files to your app from your file library, from your computer, or from Google Drive. All files you add this way are stored in your app's file library so you can reuse them across your app and in the AI chat.
For example, you can keep product photos or demo videos in your file library and then attach them in the AI chat when you ask the AI to design a new section.
You can also ask the AI to generate and add images or videos to your app.
### From your file library
Use your file library whenever you want to reuse existing media instead of uploading a new file.
**To add a file from the library in the AI chat:**
1. Go to your app editor.
2. Click the **Add** icon in the AI chat.
3. Click **Choose from library**.
4. In the **Select files** dialog, search or browse to find the file you want.
5. Select the file and click **Add**.
6. Type your message to explain what you want the AI to do with the file, then send it.
You can replace standalone images in your app using **Edit** mode. This does not work for images that are part of components, such as a gallery. For that, use the AI chat or edit the data directly from **Data** in the dashboard.
**To replace an image using your file library:**
1. Go to your app editor.
2. Click **Edit** in the chat.
3. Click the file you want to change.
4. Click **Replace**.
5. Search or browse your file library to find the new file.
6. Select the file and click **Replace**.
### From your computer
Upload files that are saved locally on your device when you want to share images, videos, documents, or data files directly with the AI chat.
**To upload a file from your computer:**
1. Go to your app editor.
2. Click the **Add** icon in the AI chat.
3. Click **Upload from computer**.
4. Select the file you want to use and confirm.
5. Type your message to explain what you want the AI to do with the file, then send it.
You can also drag files from your computer and drop them anywhere on the AI chat panel. **Drop files here** appears while you drag.
### From Google Drive
Connect Google Drive if you want the AI chat to work directly with Docs, Sheets, and Slides stored in your Drive without downloading them first.
When you connect Google Drive, only the files you select are accessed. Base44 stores a copy of each selected file in your app's file library so the AI chat can use the content as context.
**To add a file from Google Drive:**
1. Go to your app editor.
2. Click the **Add** icon in the AI chat.
3. Click **Upload from Google Drive**.
4. Review the information in the **Connect to Google Drive** window and click **Connect Google Drive**.
5. Complete the Google sign-in flow and approve access if this is your first time connecting.
6. Choose the Docs, Sheets, or Slides files you want to use from your Google Drive and confirm.
7. Type your message to explain what you want the AI to do with the file content, then send it.
**Tip:** You can also add files from Google Drive in your very first prompt:
### File upload limits
These limits apply to files you upload into your app's file library while building your app, whether you add them from the AI chat or directly from the editor.
**Images:** PNG, JPG, JPEG, GIF, WEBP, SVG
* Max size: 40MB (SVG: 5MB)
* Max dimensions: 1024x1024 pixels (larger images are resized automatically)
* Example: Upload a screenshot of a website you like and say: "Use this header style for my homepage."
**Videos:** MP4, WEBM, MOV, AVI, MKV, M4V, WMV, OGV, 3GP, 3G2
* Max size: 100MB per video
* Example: Upload a product demo, walkthrough, or reference video and ask the AI to use it as context while building your app.
**Documents and text files:** PDF, TXT, HTML, DOCX, MD
* Max size:
* PDF: 10MB
* TXT and HTML: 5MB
* DOCX and MD: 5MB
* Example: Upload a PRD or brand guide so the AI follows your product and style rules, or share a markdown file with requirements for a new app.
**Data files:** CSV, XLS, XLSX, JSON
* Max size:
* CSV and JSON: 10MB
* XLS and XLSX: 15MB
* Example: Upload a CSV, Excel, or JSON file with your existing business data and ask the AI to analyze it, suggest entities and fields, propose a data model for your app, or prepare the data for import. To learn how to import the data into your tables, see [Managing your app data](/Building-your-app/Managing-your-app-data).
**Audio:** MP3, WAV
* Max size: 100MB
**Zip files**
* Max size: 25MB
***
## Sharing media on your live app
Let your app users upload media directly in your live app. You and your app users can share, download, or interact with content to create a more engaging experience.
Just tell the AI chat what you want your app users to be able to do, and the AI sets it up for you. This feature uses the built-in UploadFile integration.
### File upload limits for your app
These limits apply to files that people upload through your live app using the UploadFile integration.
* **Images:** PNG, JPG, JPEG, WEBP, SVG (max size: 50MB)
* **Documents:** PDF, TXT, HTML (max size: 50MB)
* **Data files:** CSV, XLS, XLSX, JSON (max size: 50MB)
* **Videos:** MP4, WEBM, MOV, AVI, MKV, M4V, WMV, OGV, 3GP, 3G2 (max size: 100MB per video)
* **Audio:** MP3, WAV (max size: 50MB)
***
## Customizing your app's logo
Personalize your app by adding a logo. Your logo is visible to people when they add your [app to their home screen](/Building-your-app/Mobile-experience#installing-your-app-to-the-home-screen) and also appears as the browser favicon.
### Changing your logo
**To change your logo:**
1. Go to your app's dashboard.
2. Click **Overview**.
3. Click the **Edit** icon on the logo and either:
* Upload your own image file
* Click **Generate Logo** to create a new one with the AI
Logos generated in Base44 can only be used within your app and cannot be exported.
### File limits for your logo
Use these limits when you choose or generate a logo image for your app.
* **Image formats:** PNG, JPG, JPEG
* **Max size:** 5MB
* **Max dimensions:** 1024x1024 pixels (larger images are resized automatically)
For best results, use a clear, square image with a transparent background.
***
## Setting your social image
Add a social image to control how your app looks when someone shares its link on social platforms like Slack, WhatsApp, or iMessage. The image appears in the preview card alongside your app name and description.
### Adding a social image
Your social image lives with the rest of your app's details, in your app settings.
**To add a social image:**
1. Click **Dashboard** in your app editor.
2. Click **Settings** in the left menu.
3. Under **App Info**, click or drag an image into the **Social Image** upload area.
Use an image that is 1200x630 pixels for the best results across platforms.
### Replacing or removing your social image
Swap your social image for a new one, or take it off, from the same place you added it.
**To replace or remove your social image:**
1. Click **Dashboard** in your app editor.
2. Click **Settings** in the left menu.
3. Under **App Info**, hover over the social image:
* Click the **Upload** icon to replace it with a new image.
* Click the **Delete** icon to remove it.
### File limits for your social image
* **Image formats:** PNG, JPG, WEBP
* **Recommended size:** 1200x630 pixels
* **Max size:** 5MB
For best results, avoid text-heavy images as they may be cropped on some platforms.
***
## FAQs
Click a question below to learn more.
If your file isn't uploading to the chat, it's most likely because the file is too large or the wrong format. Review the limits above and try again.
This error can happen if you upload a file that was renamed without converting it properly. For example, changing the file name from `.webp` to `.png` or from one video format to another does not convert the file.
**To fix this:**
* Try reverting your last message if you just uploaded the file.
* Check that your file is one of the supported formats listed in the [Media guide](/Building-your-app/Using-media) and has not simply been renamed from another file type.
* Make sure your file does not exceed the size limits set in the Media guide.
* Try uploading your file again using a supported format.
If you still have trouble after these steps, [contact support](/Community-and-support/Contacting-support) for help.
You can disconnect Google Drive at any time from your account settings.
**To disconnect Google Drive:**
1. Click your workspace name at the bottom left of your account.
2. Click **Account preferences**.
3. Click **Builder**.
4. Under **Connect your accounts**, in the **Google Drive** card, click **Disconnect**.
5. Confirm the disconnection.
Yes, you can replace your logo image at any time from your dashboard inside the app editor. The new logo appears once your changes are published.
No, a social image is optional. If you do not set one, social platforms show a generic preview when your app link is shared. Adding a social image gives you control over how your app appears and can make it more recognizable.
There is no hard storage limit per app. You can store as many files as your app needs. The only constraints are on individual file sizes, see the limits above for each file type.
# Building a presentation
Source: https://docs.base44.com/Building-your-app/building-a-presentation
Describe the deck you want and Base44 builds a presentation you run from your browser, with speaker notes, a presenter view, and a separate audience display.
Ask for a presentation and Base44 builds you one. You get a deck you can run straight from your browser, with a presenter view, a separate display for your audience, and a version built for printing.
Your presentation is still a Base44 app, so you keep the AI chat, version history, publishing, and your own domain. Building and changing it uses [credits](/Account-and-billing/Credits) in the same way as any other app.
***
## Creating your presentation
Describe the deck you want in the same place you would describe any app. Say how many slides you want and what each one should cover, and Base44 writes the content, designs the slides, and generates speaker notes for you.
**To create a presentation:**
1. Go to the Base44 home page.
2. In the prompt box, describe the presentation you want, including roughly how many slides and what each should cover.
3. Click the send icon.
4. Wait while Base44 builds your deck. It writes the copy, designs each slide, and picks images to match, which usually takes a few minutes.
***
## Working on your slides
Your presentation opens in the app editor, with a rail of slide thumbnails down the side and a **Speaker Notes** panel underneath. Select a thumbnail to jump to that slide, and drag the edge of the rail to make the thumbnails larger or smaller.
To change anything, ask in the AI chat as you would with any app. Rewriting a slide, reordering the deck, changing the colors, adding a chart, or translating the whole presentation are all chat requests.
For a quick wording change you do not need the chat at all. Click **Edit** in the toolbar, then click the text on the slide and type over it. Base44 builds each slide so its text stays editable this way.
Your notes are part of the presentation, so you can write them yourself in the **Speaker Notes** panel, or click **Generate notes** and have Base44 draft them from the slide.
***
## Presenting
[Publish your presentation](#sharing-your-presentation), then open its link. You get 4 ways to use it, shown across the top.
* **Overview:** Every slide in the deck at once, so you can see the whole thing and jump to any slide.
* **Speaker:** Your presenter view, with your notes, a timer, and next and previous controls.
* **Audience:** A clean display with no controls or notes, for a projector or a shared window.
* **Print:** A printable version of the deck. Use your browser's print dialog to send it to a printer or save it as a PDF.
**Opening your presentation:**
* These controls belong to your presentation rather than to Base44, so they do not appear in the editor preview. Publish your presentation and open its link to use them.
* To keep editing, return to your Base44 tab, or open the app again from your apps list.
### Seeing the whole deck
**Overview** shows every slide as a thumbnail with its title, so you can find the slide you want without clicking through the deck. Select a slide to go to it, or click **Close** to return.
### Presenting to a room
**Speaker** is the view you keep on your own screen. It shows the current slide, your speaker notes, how far through the deck you are, and a timer you can reset.
**To present with a second screen:**
1. Open your presentation and click **Speaker**.
2. Next to **Audience tab**, click **Open tab**.
3. Move the new tab to your projector or shared screen, and make it full screen.
4. Move through your deck with the arrow keys. The audience display follows you.
**Moving through your deck with the keyboard:**
* The right arrow, down arrow, space, or **Page Down** go to the next slide.
* The left arrow, up arrow, or **Page Up** go back.
* **Home** and **End** jump to the first and last slide.
* **O** opens and closes the overview.
***
## Sharing your presentation
Publish your presentation the same way you publish any Base44 app, and share the link. Anyone who opens it gets the presentation itself, with the same controls you have.
You can connect your own domain, and set who is allowed to open it, exactly as you would for any other app.
The 4 views are part of your presentation rather than part of Base44, so anyone who can open it sees the same controls you do. That includes **Speaker**, so treat your speaker notes as visible to anyone you send the link to. The audience display your speaker view opens is the exception, and shows the slide on its own with no controls.
A presentation cannot be built as a native mobile app. Everything else about publishing works as normal.
***
## Exporting your presentation
You can take your deck out of Base44 as an editable PowerPoint file, an editable copy in your own Google Drive, or a PDF. Every export uses your latest saved changes, so let the AI chat finish building before you export.
**To export your presentation:**
1. Open your presentation in the app editor.
2. Click **Share**.
3. Click the **Export** tab.
4. Click **Export** next to **PowerPoint**, **PDF**, or **Google Slides**.
**What to expect when you export:**
* The first Google Slides export asks you to connect Google Drive. When it finishes, you get an **Open in Google Slides** link straight to the new file.
* In PowerPoint and Google Slides, text keeps its font, size, color, bold, italic, and direction, and your speaker notes come across.
* Fonts are referenced rather than embedded, so PowerPoint substitutes any font the opening computer doesn't have.
* Charts, vector graphics, decorative shapes, and any text that is underlined, rotated, clipped, or filled with a gradient come across as part of the slide picture instead of editable text.
* A PDF has one page per slide and looks exactly like your preview. Its text can't be selected or edited, and speaker notes aren't included.
* In the mobile app, the Export tab offers to open your presentation in a browser, because the app cannot save the file for you.
***
## FAQs
Here are some common questions about building presentations.
Yes. Ask in the AI chat for the colors, fonts, layout, or artwork you want. You can also ask Base44 to match the presentation to your brand.
Yes. Ask in the AI chat to translate your presentation, and the slide content and the presenter controls are both translated. Languages that read right to left are supported.
Yes. A presentation is a Base44 app, so you can ask for a signup form, a database, or anything else you would add to an app, alongside your slides.
# Exploring app logs
Source: https://docs.base44.com/Building-your-app/exploring-app-logs
Use the Logs page to review everything that happens in your app, from user activity and function calls to schema and integration changes, and fix issues fast.
The **Logs** page gives you a searchable history of everything that happens in your app, from user actions and function calls to schema and integration changes. Use it to troubleshoot problems, confirm that automations ran, and review who did what in your app.
***
## Accessing your logs
Your logs live on the **Logs** page in your app dashboard. It opens the **Logs Explorer**, a table of events with a **Type**, **User**, and **Timestamp** column. Click any row to expand its full details.
**To access your logs:**
1. Go to your app editor.
2. Click **Dashboard**.
3. Click **Logs** in the sidebar.
***
## Understanding log categories
Logs are grouped into 2 categories.
* **Runtime:** Activity that happens while people use your app. This includes entity operations (created, updated, deleted, restored), user events (registered, login, invited, role changed, page visits), access requests, function calls, integration and automation executions, agent conversations, data imports, file uploads, and security checks.
* **Setup:** Changes to how your app is built and configured. This includes app lifecycle events (created, published, unpublished), entity schema changes, payment and OAuth integration setup, and domain changes.
To focus on one category, use the category dropdown above the table and select **All Categories**, **Runtime**, or **Setup**.
The Logs page shows events for this app only. Workspace-level events, such as member and billing changes, are available on the Enterprise plan, not the Business plan, through the [Audit Logs API](/developers/references/audit-logs-api/get-started/overview).
***
## Filtering logs
Use the controls above the table to focus on the events you care about.
* **All Events dropdown:** Filter by a specific event type, such as **Entity Updated** or **Function Call**.
* **Filter by email:** Enter an email address to see one person's activity.
* **Errors only:** Turn this on to show only failed events.
Use **Refresh** to load the latest events, and the **X** next to the filters to clear them.
Troubleshooting a report from one of your app users? Filter by their email and turn on **Errors only** to see exactly which of their actions failed.
***
## Viewing event details
Click a log row to expand it. Depending on the event, you can switch between different views.
* **Details:** The full metadata of the event, such as the entity and fields involved.
* **Outputs:** What the event produced, for example a function's response.
* **Error:** The error message, when the event failed.
To copy the full event data, click the **Copy** icon in the expanded row.
***
## FAQs
Click a question below to learn more about your app logs.
Logs appear once there is activity in your app. If the table stays empty, open your app, perform an action such as creating a record, then click **Refresh**.
No. Analytics summarizes traffic and usage trends, while logs record individual events with full details. Use analytics to understand how your app performs and logs to investigate specific actions.
Yes. Filter the event type to **Function Call** to see each invocation. For live debugging while you build, you can also use the activity monitor in the code editor.
# Managing your app pages
Source: https://docs.base44.com/Building-your-app/managing-your-pages
Add, duplicate, and search your app pages, build a header or sidebar menu, hide pages from your menu or from search results, and set up an admin-only area.
Pages are the core screens of your Base44 app. Each page has its own URL path (such as `/`, `/Home`, or `/Products`) and appears in the page drop-down at the top of the [app editor](https://base44.com/ai-app-builder). You can add new pages, access pages, and decide which pages are visible in your menus or used for login and landing experiences.
***
## Adding pages
You can add pages at any time. The fastest way is to describe the page you want in AI chat.
### Adding a new page
1. Go to your app editor.
2. In AI chat, describe the page you want. For example:\
`Create a new About page with a hero section, text about our company, and a contact button.`
### Duplicating a page
1. Open the page you want to reuse in the editor.
2. In AI chat, describe what you want to duplicate. For example:\
`Duplicate this page and keep the same layout, but change the title to "Pricing".`
3. After the AI chat has finished, open the new page from the page drop-down to customize the content.
***
## Switching between pages
You can move between pages from the page drop-down above the preview.
**To switch pages in the app editor:**
1. Go to your app editor.
2. Click the page drop-down.
3. Click the page you want to open.
If you are not sure what a page is called, ask the AI: `Show me a list of all pages in this app and what each one does.`
***
## Searching for pages
When your app has many pages, it can be hard to remember every page name. Start typing the page name in the pages drop-down to search for the one you need.
**Tip:** You can also ask AI chat to help you find the right page by name, URL path, or purpose. For example:
* `Which page is used as the checkout page?`
* `Which page handles the /Success route?`
* `Find the page that shows the list of projects.`
***
## Managing your page navigation
A clear navigation menu helps people move between pages, discover key areas of your app, and understand how your content is organized. It also improves internal linking, which can help search engines understand your app structure.
Some apps start with a single page and do not have a visible navigation menu at first. As you add more pages, you can ask the AI to create a header, sidebar, or footer menu and wire it up to your main routes.
Use the AI chat to create a navigation menu when your app does not yet have a header, sidebar, or footer with links.
If you want the same navigation on every page, ask AI to make the menu global. For example: `Add the header navigation to all pages in the app.`
### Adding a header menu
1. Go to your app editor.
2. In the AI chat, describe the menu you want. For example:
* `Add a header navigation bar with links to /Home and /Products.`
* `Create a top navigation menu that includes Home and Contact.`
3. Once the AI has finished, check the preview to make sure the new navigation appears where you expect and test the links.
### Adding a sidebar menu
1. Go to your app editor.
2. In AI chat, explain what you need. For example:
* `Add a vertical sidebar navigation on the left with links to /Dashboard, /Reports, and /Settings.`
* `Add a footer navigation with links to Privacy Policy and Terms of Service.`
3. Once the AI has finished, check the preview to make sure the new navigation appears where you expect and test the links.
### Changing the menu style
You can use different navigation styles to match your app’s layout and audience, such as a horizontal bar, tabs, or a hamburger menu that collapses on smaller screens.
**To change your navigation style with AI chat:**
1. Go to your app editor.
2. In AI chat, describe the style you want. For example:
* Tabs: `Change the main navigation into a tab-style menu at the top of the page.`
* Sidebar: `Move the navigation into a vertical sidebar on the left.`
* Hamburger menu: `Turn the main navigation into a hamburger menu that opens a panel on the right.`
3. Once the AI has finished, check the preview to make sure the navigation appears where you expect and test the links.
You can combine styles. For example, keep a horizontal menu with tabs on desktop and use a hamburger menu on smaller screens. Describe both behaviors clearly in your AI prompt.
### Changing the menu items
Once a navigation menu exists, you can add, remove, or rename links so people can reach the right pages. Make sure the page you want to link to already exists if you are adding a new item.
**To manage your menu items with AI chat:**
1. Go to your app editor.
2. In AI chat, describe how the menu should change. For example:
* `Add a "Shop" link to the main navigation that points to the /Products page.`
* `Add an "About" item to the top menu that links to /About and place it after Home.`
* `Remove the "Blog" link from the header navigation.`
* `Rename the "Shop All" menu item to "All Products".`
* `Reorder the menu so that Home, Shop, About, and Contact appear in that order.`
3. Check the preview and click your menu items to confirm that everything looks and behaves as expected.
If your app uses multiple navigation areas (such as a top menu and a footer menu), be specific in your prompt. For example: `Update only the header navigation, not the footer links.`
***
## Working with hidden pages
Some pages are meant to be internal, such as admin dashboards, success screens, or callback pages. You may want them available in your app without showing them in navigation or search results.
### Hiding pages from your menu
You can remove any page from your visible menus while still keeping it live and functional.
**To hide a page from your navigation with AI chat:**
1. Go to your app editor.
2. In AI chat, describe what should be hidden. For example:\
`Remove the /Success page from all visible navigation, but keep it working as a redirect after checkout.`
3. Check that the link no longer appears in the header, sidebar, or footer.
A page that is hidden from your navigation can still be opened directly if someone knows its URL, or if you add a button or link to it elsewhere in your app.
### Creating an admin-only area
You can keep sensitive pages, such as dashboards or management tools, available only to admins by placing them in an admin section of your navigation and protecting access.
**To create an admin-only navigation area with AI chat:**
1. Go to your app editor.
2. In AI chat, describe the admin section you want. For example:
* `Add an Admin section in the sidebar that only admins can see, and move the /Wishlist page into it.`
* `Create an admin-only area in the header navigation with links to /AdminDashboard and /Reports.`
To test your admin-only pages with **Act as**, click **Act as** in the preview toolbar, choose an admin role and check that the admin section and its pages are visible to them, then use **Act as** again to switch to a non-admin role and confirm that the admin section is hidden from the navigation and that admin-only pages cannot be opened directly.
### Hiding pages from search results
Base44 automatically includes all public, published pages in your sitemap at `/sitemap.xml` so search engines can find them. There are no per-page SEO switches such as “noindex” or page-level robots.txt controls.
To keep a page out of search engines, make sure the page is not public, or avoid linking to that page from any public parts of your app.
For full details on how indexing works, see our [SEO guide](/Performance-and-SEO/SEO-and-search-visibility).
***
## Public landing page with private pages
Base44 does not currently support making some pages public and others private using visibility settings alone. Instead, you can use a combination of a public landing page and logic that redirects people to login for private areas.
**To set up a public landing page with login for other pages:**
1. Set your app to **Public (no login required)** in your app visibility settings.
2. Use the AI chat to create a landing page, for example:\
`Create a landing page with login and sign-up buttons and make it my main page.`
3. Ask the AI to require login on the rest of your app. For example:\
`Require login for all non-landing pages and redirect visitors who are not logged in back to the landing page.`
It is not currently possible to mark individual pages as public or private using a per-page visibility setting. All visibility is controlled at the app level, combined with your routing and data access rules.
***
## FAQs
Click a question below to learn more about pages, login, and navigation.
Ask the AI chat. In your app editor, send a message naming the page you want people to land on, such as `Change the main page to Dashboard`.
The **Main Page** setting under **General Settings** in your app settings shows which page is currently first, but it is read-only now. Chat is the only way to change it.
Yes. Base44 apps support up to 600 pages. However, page count is not the only factor that affects build stability. The total number of files in your app and your overall source size also matter.
If your app has more than 600 pages, or has a very large number of files or source code (for example, thousands of JavaScript files or tens of megabytes of source), you may see issues such as:
* The app editor becoming unavailable or very slow.
* Pages not loading correctly in the editor or live app.
* Publishing failures or out-of-memory errors when you build or deploy updates.
* The AI returning incomplete edits.
**To stay within the limits:**
1. Review your existing pages and remove any that are no longer needed.
2. Consolidate similar content into fewer pages when possible.
3. Use entities and filtered views instead of creating a separate static page for every item.
4. Keep your overall file count and source size as lean as possible, especially if your app has many components.
Keeping your app below 600 pages and managing overall file count and source size helps the editor stay responsive and keeps your app stable.
# Working with branches
Source: https://docs.base44.com/Building-your-app/working-with-branches
Create branches to try new ideas, features, or redesigns without affecting your app, work on several in parallel, then merge each one into main when ready.
Branches let you try new ideas, features, or redesigns without affecting your app. Each branch has its own chat and its own live preview, and you can **work on several branches in parallel**, then merge each one into your app when you are happy with the result.
Branches work alongside a [GitHub](/developers/app-code/local-development/github) connection. Base44 keeps each branch as a real branch in your repository, and you can also [build on a branch that is already there](#importing-from-github).
* **Test a redesign.** Try a new look for your app and compare it with the current version. If you change your mind, leave the branch behind.
* **Keep your live app ready.** When a small fix comes up mid-project, fix and publish it from main right away. Your bigger work in progress stays safely on its branch.
* **Build a feature that launches later.** Work ahead of a release and keep the feature on a branch until launch day.
* **Work in parallel.** Build on several branches at the same time, and work with your team on different ideas at once, each on their own branch.
***
## How branches work
Your app's main version is called **main**. When you create a branch, Base44 starts a separate line of work from the current state of main.
Each branch keeps its own chat, live preview, and copy of your app's design and pages, so changes you make stay on the branch until you merge them. A branch also builds on its own and keeps its own version history, so branches run in parallel and you can return to any earlier point without touching main.
Some things stay shared across main and every branch. Your app's data is the same live records everywhere, and record changes happen on main. Your connections and automation, including integrations, secrets, automations, workflows, and in-app agents, are shared too, along with your app's settings, domains, and published version.
**A branch uses your real, live data.**
* Records you add, change, or delete while previewing a branch affect the same data your app uses everywhere.
* To experiment without touching your live data, switch your preview to test data while you work. Test data is available on the [Builder plan](https://base44.com/pricing) and higher. Learn more about [testing your app with test data](/documentation/managing-app-data/testing-your-data).
***
## Creating a branch
Describe what you want to build, and Base44 creates the branch, names it from your first message, and starts building right away. Branch names are short, 3 words or fewer, and always in English, whatever language you write in. The name is set automatically, and a branch cannot be renamed.
**Before you begin:** If your app was built a while ago, you may need to make one change on main before you can create your first branch. If that applies to your app, Base44 tells you when you try.
### Starting a new branch
Start a branch from the branch menu when you have a new idea to build.
**To create a branch:**
1. Click **Main**, or the name of the branch you're on, next to your app's name at the top of the chat panel in the app editor.
2. Click **Create new branch**.
3. Pick one of the suggestions, or type what you want to build in the chat box.
4. Send the message.
A branch you create from the branch menu always starts from main. If you create a branch while you are on another branch, the new branch still starts from main.
Branches work on your phone as well, both in a mobile browser and in the Base44 app. The branch menu appears at the top of the editor as soon as your app has a branch, so create your first branch from a desktop browser, then switch between branches, build, and merge from your phone.
### Creating a private branch
If you're an approved [Base44 partner](/Community-and-support/partner-program) building an app for a client, you can make a branch private when you create it. A private branch and its chat are visible only to you, so the client and their other collaborators don't see your work in progress. It shows a lock next to its name in your branch menu. When you merge it, your changes appear on main for everyone as usual.
**About private branches:**
* **Set when you create it:** You choose whether a branch is private when you create it, and you can't change it later.
* **When you lose access:** If you're removed from the client's app, your private branches are deleted.
* **Imported apps:** Private branches aren't available on apps imported from GitHub.
**To create a private branch:**
1. Click **Main**, or the name of the branch you're on, next to your app's name at the top of the chat panel in the app editor.
2. Click **Create new branch**.
3. Select **Private branch** above the chat box.
4. Pick one of the suggestions, or type what you want to build in the chat box.
5. Send the message.
### Branching from a message
Branch from any message you sent in the main chat to try a different direction from that point. The new branch starts from your app as it was at that message, and you stay on main while it is created. This option is available on main in a desktop browser, but not while your app is building.
**To branch from a message:**
1. Hover over a message you sent in the main chat of your app editor.
2. Click the **Branch from here** icon under it.
3. When the branch is ready, open it from the branch menu at the top of the chat panel.
### Branching a queued prompt
When the AI is busy building on main, you can move a waiting prompt from the [queue](/Building-your-app/AI-chat-modes#queuing-messages-in-the-chat) to its own branch, so it runs at the same time instead of waiting its turn. The branch starts from your last saved version, without the changes that are still building, so this works best for changes that do not depend on what is building now. This option is available on main in a desktop browser, on apps you build on your own. Apps with collaborators use a shared queue, which does not offer it.
**To run a queued prompt on a branch:**
1. Click the **Run in a parallel branch** icon on the queued prompt you want to move, in the queue above the chat input in your app editor.
2. Click **Run on a branch**, or click **Keep in queue** to leave it where it is.
3. Click **Open branch** in the chat to follow the prompt on its new branch.
### Importing from GitHub
When your app is connected to GitHub, you can build on a branch that already exists in your repository. Base44 works on that branch itself, so your changes and Base44's go to the same branch in your repository.
**To import a branch from GitHub:**
1. Click **Main**, or the name of the branch you're on, next to your app's name at the top of the chat panel in the app editor.
2. Click **Import from GitHub**.
3. Search for the branch you want, then select it.
4. Click **Import**.
You import from the repository your app is connected to. A branch you create in Base44 gets a new branch in that same repository.
***
## Working on a branch
While you are on a branch, the branch's name replaces your app's name at the top of the chat panel, and a spinning icon shows when the AI is working. You build on a branch the same way you build on main: describe what you want in the chat. Selecting an element and making a visual edit saves to the branch you are on too, the same as your chat changes.
A few things work differently on a branch:
* **Merge to main** replaces the **Publish** button. You publish changes from main after merging.
* The preview shows the branch's version of your app.
* The page URL includes the branch, so you can share a link that opens the app editor on that branch.
**Branches run in parallel.** Send a request on one branch, switch to another, and keep building there while the first one finishes. Your app runs up to 5 builds at the same time, so you and your team can move on several ideas at once, each on their own branch.
The branch menu shows which branches are building, so you can check on them as you go.
### Switching branches
You can move between main and your branches at any time, and every branch keeps its changes until you merge it. On a branch, you can also click the **X** next to **Merge to main** to exit back to main.
The icon next to each branch shows its current status. Hover over the icon to see the label:
| Status | Meaning |
| - | - |
| **Active** | The branch is open and ready to build on. |
| **Working** | The AI is building on this branch right now. |
| **Merging** | The branch is being merged into main. |
| **Merged** | The branch was merged into main. Its chat stays readable, but it is read-only. |
**To switch to another branch or back to main:**
1. Click the branch name at the top of the chat panel in your app editor.
2. Select a branch from the list, or select **Main chat** to return to main.
You can switch branches while the AI is building, and it keeps working on the branch you left. Save or discard any edits on main first.
### Joining a collaborator's branch
When you work on an app with others, the avatars at the top of the app editor show which branch each person is on. You can jump straight to a collaborator's branch, and when someone joins the branch you are on, Base44 shows a short message saying they joined your branch.
**To join a collaborator's branch:**
1. Hover over a collaborator's avatar at the top of the app editor to see their name and branch.
2. Click the avatar to open the branch they are on.
### What stays on main
You do most of your building on a branch, but some actions affect your whole app, not just one branch. Those always happen on main, even while you are working on a branch:
* Publishing your app
* Creating or changing secrets, connectors, automations, workflows, and in-app agents
* Changing your app's theme settings
* Undoing a message in the chat, or editing and resending one
* Adding a page from Figma
* Asking the AI to add, change, delete, or import records
If you ask for one of these on a branch, Base44 asks you to do it on main or merge the branch first.
### Entities
You can create entities and add fields to entities you already have on a branch, and both are live in that branch's own preview right away. On an entity you create, you set everything, including its [data permissions](/Setting-up-your-app/Managing-security-settings). On an entity that already exists, additions apply, so keep a new field optional, because your existing records do not have it yet.
Removing an entity or a field, changing an existing field's type or whether it is required, and changing data permissions happen on main. Make the change there and your branch picks it up right away, with no merge or update needed.
Records are your app's live data, shared with main, so ask the AI for record changes on main rather than on a branch. Adding, changing, or deleting records yourself while previewing a branch works as it always does, and it changes the same data your app uses everywhere.
### Backend functions
You can add and change backend functions on a branch. The branch gets its own copy of each function you touch, along with the shared files those functions import, so you can update a helper and the function that uses it together. The branch preview calls the branch's version, and merging the branch deploys it to main. Your app's first backend function is created on main, and you can work on functions from a branch after that. On an app imported from GitHub, backend changes stay on main.
### Code
The **Code** tab shows your app's files as they are on the branch you are on, rather than as they are on main. You can edit them there, and what you save stays in the branch until you merge it.
The files behind your app's pages, layout, and styling save straight to the branch, so you can try a code change and leave main untouched. Backend function files save to the branch too. See [backend functions on a branch](#backend-functions) for when a change is live in the branch's preview and when it waits for the merge.
You do not need to keep track of which is which. A few files change your whole app rather than one branch, and Base44 stops the save and tells you where to go instead:
* **Entity files:** Ask for the change in the branch's chat, or switch to main. See [entities on a branch](#entities) for what a branch can change on its own.
* **Anything that would change your live app:** Make the change on main, and your branch picks it up with no merge needed.
**How redeploying a backend function works:**
* **It happens on main:** When you [edit a backend function](/documentation/building-your-app/developer-tools#editing-a-backend-function) on main, you save it with **Save & Redeploy**. On a branch, the button is **Save**, so switch to main to redeploy a function.
* **Your live app keeps its published version:** Redeploying updates the function in your preview and when you test it in the editor. Your live app keeps running the version from your last publish until you publish again.
* **Publishing sends everything on main live:** You can't publish one function on its own. When you publish, all your changes on main go live together, including the redeployed function.
* **Automations and workflows use the new version right away:** When an automation or workflow calls the function, it runs the latest version without a publish.
***
## Using version history
Every version saved on a branch is listed in that branch's own version history, so you can look back at how the branch developed, compare it with main, and return to any earlier point.
### Restoring a version
Restoring a version changes that branch only, and main stays exactly as it is. It brings the branch's pages, design, entities, and backend functions back to that version, and the branch's chat returns to the message that created it. Your records are shared with main, so they stay as they are. Your later versions stay in the list, so you can move forward again whenever you want. A merged branch keeps its version history readable, and you can restore while a branch is still active.
**To restore an earlier version of a branch:**
1. Click the **Version History** icon at the top of the chat panel while you are on the branch.
2. Click a version in the list to load it in the preview.
3. Click the **More options** icon next to that version.
4. Click **Revert to this version**.
**Restoring and publishing from a branch:**
* **Publish this version** is available on main only, because publishing always ships your main app. To release work from a branch, merge it into main and publish from there.
* Restore a version once the branch has finished building and any update from main is complete. If the branch is busy, Base44 tells you so, and you can restore as soon as it finishes.
### Comparing with main
Before you merge, you can check exactly how a version's code differs from main. Base44 opens a **Changes compared with main** window that lists every file that differs and what changed in each one.
**To compare a branch version with main:**
1. Click the **Version History** icon at the top of the chat panel while you are on the branch.
2. Click the **More options** icon next to the version you want to compare.
3. Click **Compare code vs main**.
4. Click a file in the list to see what changed in it.
***
## Updating from main
If main changes while your branch is open, a card appears above the chat box on the branch. It tells you how much changed on main and whether any of it overlaps with your branch.
When you update, the AI combines main's changes with your branch. If some changes overlap, the AI resolves them for you. If the 2 versions genuinely conflict, the AI asks you a question in the chat so you can decide what to keep.
**To bring main's latest changes into your branch:**
1. On the branch, find the update card above the chat box.
2. Click **Update branch**.
You can also start an update from the branch menu. Click the **More actions** icon next to a branch, then click **Update from main**.
If an update runs into a problem, Base44 rolls it back and your branch's work stays unchanged.
***
## Merging into main
Merging brings everything you built on the branch into main. Your changes reach your app's users only when you publish from main, so you decide exactly what goes out and when.
After the merge, a summary of the branch's changes appears in main's chat, and the branch stays in your branch list as merged, so you can still read its chat history, but it becomes read-only. When you open a merged branch, a notice explains it's read-only, its preview shows main as it is now, and **Open main chat** takes you back to main.
**To merge a branch:**
1. On the branch, click **Merge to main** at the top of the editor.
2. Review the confirmation, then click **Merge to main**.
You can also ask the AI chat to merge or update a branch. It adds a one-click card to the chat that runs the action for you.
You can also merge from the branch menu. Click the **More actions** icon next to a branch, then click **Merge to main**.
If the branch conflicts with changes made on main, Base44 asks you to update it first. [Update the branch from main](#updating-from-main) to resolve the conflicts, then merge again.
***
## Deleting a branch
Delete a branch when you are done with an idea and want to clear it from your list. Your app and your other branches stay as they are.
Deleting a branch is permanent. It removes the branch and its chat, and this cannot be undone. To keep the work, merge the branch into main first.
**To delete a branch:**
1. Click the branch name at the top of the chat panel.
2. Click the **More actions** icon next to the branch you want to delete.
3. Click **Delete**.
4. Review the confirmation, then click **Delete branch**.
You can delete a branch once the AI finishes building on it and any update from main is complete. Merged branches stay in your list as a record of the work.
***
## FAQs
Click a question below to learn more about branches.
No. Publishing always happens from main. On a branch, the **Publish** button is replaced by **Merge to main**. Merge the branch first, then publish from main.
There is no set limit. You can keep as many branches going at once as you want, and merge each one whenever it is ready.
Yes. Each collaborator can open a different branch and chat there, and each branch builds on its own. Your app runs up to 5 builds at the same time, and anything beyond that waits in the queue and runs in order.
Creating a branch needs edit access to the app, so members with the **Viewer** role can open branches and read their chats. Learn more about [roles in your workspace](/Account-and-billing/Managing-your-workspaces).
No. Building on a branch uses credits the same way as building on main, from the same credit balance.
Yes. Create a branch the way you would on any app, and Base44 adds the matching branch to your connected [GitHub](/developers/app-code/local-development/github) repository. To build on a branch that is already in your repository, use [Import from GitHub](#importing-from-github).
Yes. Base44 adds your open branches to the repository when you connect, so there is nothing to merge or delete first. If a branch is building at that moment, wait for it to finish, then connect.
Yes. An app you [migrated from another platform](/Getting-Started/migrating-an-existing-app) works with branches from the same branch menu as any other Base44 app.
# Using your app's API page
Source: https://docs.base44.com/Building-your-app/your-apps-api-page
Browse your app's ready-made API reference, copy code for your data, functions, and agents, and download the OpenAPI spec from the API page in your dashboard.
Your app's API lets other tools work with your app's data. For example, you can send new form entries to a spreadsheet, have a script update records every night, or give an AI coding assistant everything it needs to build an integration for you. The **API** page in your app dashboard explains your app's API and gives you code you can copy, so you don't need to write it from scratch.
Want to connect your app to other tools without writing code? Try [workflows](/Building-your-app/Creating-workflows) or [connectors](/Integrations/Connectors) instead.
***
## Opening the API page
The API page lives in your app dashboard, next to your app's data and logs.
**To open the API page:**
1. Click **Dashboard** in your app editor.
2. Click **API**.
3. Choose a language from the drop-down at the top of the page: **JS SDK**, **JS Fetch**, **cURL**, or **Python**.
***
## What's on the page
The page is split into sections, and each code sample updates when you change the language:
* **Authentication:** How other tools sign in to your app. Requests use a [personal access token](/Workspaces/Personal-access-tokens). If you don't have one yet, click **Create access token** in this section. If you chose **JS SDK**, this section also shows how to install the Base44 SDK and set it up with your app's ID and your token.
* **Entity Endpoints:** Each table in your app, with its **Schema** and **Endpoints** side by side. Click **Copy entity** to copy one table's reference, or **Copy all** to copy every table. To copy code for reading or updating one table, see [connecting your data to another app](/Building-your-app/Managing-your-app-data#connecting-your-data-to-another-app).
* **Backend Functions:** How to run your app's backend functions from another tool.
* **App Agent:** How to talk to your app's in-app agent, such as starting a conversation, sending messages, and getting replies.
**Good to know:**
* An entity is a table of data in your app, such as Tasks or Orders.
* An endpoint is the address another tool sends a request to.
* An access token works like a password for your app's API.
* OpenAPI is a standard file format that API tools understand.
***
## Getting help from AI
The easiest way to use your app's API is to let an AI coding assistant write the code for you. **Copy for LLM** copies your app's full API reference in a format AI tools understand, so the code it writes matches your app.
**To get an AI assistant to write code for your app's API:**
1. Click **Dashboard** in your app editor.
2. Click **API**.
3. Click **Copy for LLM**.
4. Paste it into your AI coding assistant, then describe what you want to build. For example:
```text theme={null}
Using this API reference, write a script that adds a new row to my Tasks table every time I run it.
```
5. When the code is ready, click **Create access token** on the API page and add the token where the code asks for it.
Your access token gives access to your app's data. Keep it private: don't paste it into an AI chat, a shared document, or a screenshot. If a token is exposed, delete it and create a new one.
***
## Downloading the OpenAPI spec
Download your app's API reference as an OpenAPI file to use it in an API client or documentation tool.
**To download the OpenAPI spec:**
1. Click **Dashboard** in your app editor.
2. Click **API**.
3. Click the **More actions** icon .
4. Click **Download OpenAPI Spec**.
The API page shows your app as it is when you open it. After you add or change tables, backend functions, or agents, refresh the page to see the change in the reference and in any files you export.
***
## Going further
If you're a developer, the developer docs cover your app's API and the Base44 SDK in depth.
Set up the SDK and learn how it works with your app.
Read, create, update, and delete records in your app's tables from code.
Define and secure the tables behind your app's API.
Create and manage the tokens your scripts and tools use to sign in.
# Backup & Restore
Source: https://docs.base44.com/Enterprise/backup-and-restore
Base44 backs up your app data automatically as it changes. Review what your tables held earlier, download a copy as CSV, or restore your data to that point.
Base44 automatically backs up your app's data as it changes. If records are edited, imported, or deleted by mistake, you can look back at what your tables held earlier, download a copy, or restore your data to that point in time.
Backups are available on the Elite plan and on an Enterprise plan (Business or Enterprise). Elite keeps 7 days of backups, and Business and Enterprise keep 30 days.
***
## How backups work
Backups run automatically on eligible plans, so there is nothing to switch on. As your data changes, Base44 saves the earlier state of your tables so you can review it, download it, or put it back. Backups cover the table data Base44 manages for your app.
**Good to know:**
* Backups apply to your whole workspace, and they start from the moment the feature becomes active on your plan.
* How far back you can go depends on your plan: 7 days on Elite, and 30 days on Business and Enterprise.
* Only people with editor access to an app, such as its owner or an invited editor, can view, download, and restore backups.
* Backups cover your data only. Your app's code and design have their own history, which you reach from **Version History** in your app editor.
***
## Viewing your backups
The **Backup & Restore** tab lists every backup for your app, newest first, with your current data at the top. Each entry shows when it was taken and how many tables changed at that moment, and you can expand it to see the tables themselves.
**To view your backups:**
1. Click **Dashboard** in your app editor.
2. Click **Data**, then click the **Backup & Restore** tab.
3. Click the date filter, which reads **Last 30 days** to begin with, to narrow the list to a period or a custom range.
4. Click **All tables** to limit the list to the tables you care about.
5. Click an entry to see which tables changed.
To go straight to one table's backups, click the **More actions** icon on that table's card in **Tables**, then select **Backup & Restore**. The tab opens with the table already selected in the filter.
***
## Restoring your data
Restoring rewrites your records so they match a point in time you choose. You can put back a single table or every table in your app at once, and you can undo a restore afterwards.
Editing pauses while a restore runs. Nobody can edit the tables being restored until it finishes, and apps with more records take longer.
### Restoring one table
Restore a single table when only that table's data went wrong. Every other table keeps its current data.
**To restore one table:**
1. Click **Dashboard** in your app editor.
2. Click **Data**, then click the **Backup & Restore** tab.
3. Find the point in time you want, using the date filter if you need it, then click the entry to expand it.
4. Next to the table you want, click the **Restore this table** icon .
5. Review the confirmation, then click **Restore table**.
### Restoring every table
Restore everything when a change affected your app as a whole, such as a bad import or a bulk delete that touched several tables.
**To restore every table:**
1. Click **Dashboard** in your app editor.
2. Click **Data**, then click the **Backup & Restore** tab.
3. Find the point in time you want, using the date filter if you need it.
4. Click **Restore to here** on that entry.
5. Review the confirmation, then click **Restore all data**.
If your app has a large number of tables, Base44 asks you to restore them one at a time instead. Use the **Restore this table** icon on each table you need.
### Undoing a restore
Base44 saves your current data before a restore starts, so a restore is reversible. The confirmation tells you how long you have to change your mind.
**To undo a restore:**
1. Click **Undo** in the message that appears in your app editor when the restore finishes.
2. Review the confirmation, then click **Undo restore**.
If you have closed that message, open the **Backup & Restore** tab and restore to the point in time just before the restore ran. Records added since the restore are removed when you undo it.
### What a restore changes
A restore rewrites the records in the tables you chose so they match the point in time you picked. Nothing else in your app changes.
* **Record IDs stay the same.** Records that were changed or deleted keep the ID they had before, so links from other tables still point to the right record.
* **Field values come back exactly as they were** at that point, including fields that link to records in other tables.
* **Records added after that point go to trash** rather than being deleted for good, so you can bring them back from there within 30 days.
* **Restoring one table leaves the others alone.** If related tables need to match, restore all of them to the same point in time, otherwise a link can end up pointing at a record that no longer exists.
* **Restores run on production data only.** If you are viewing test data, switch to production first.
If a table's structure changed after the point you picked, Base44 warns you in the confirmation window. Fields that no longer exist in your table are not restored.
***
## Downloading a backup
Download a table as it was at an earlier point to keep a copy outside Base44, or to check what changed before you decide whether to restore.
**To download a backup:**
1. Click **Dashboard** in your app editor.
2. Click **Data**, then click the **Backup & Restore** tab.
3. Find the point in time you want, using the date filter if you need it, then click the entry to expand it.
4. Next to the table you want, click the **Download CSV** icon .
***
## FAQs
A few things people ask about how backups behave.
No. Backups cover the records in your tables. When a record points at a file you uploaded, such as an image, the record stores the file's address rather than the file itself, so restoring puts that address back exactly as it was. The file it points to is stored separately and is not part of the backup.
No. Your app's users are kept separately from your tables and are left out of backups entirely, so a restore never adds, removes, or changes them. Restoring only rewrites the records in the tables you picked.
# Using app templates
Source: https://docs.base44.com/Getting-Started/App-templates
Explore ready-to-use app templates from the Base44 community and your workspace. Find inspiration, launch your next project in minutes, or publish your own.
## About the template marketplace
The template marketplace is your shortcut to [building great apps](https://base44.com/ai-app-builder) on Base44. Browse a wide range of ready-made apps and websites, made by the Base44 team and by creators in the community. If you are unsure where to start or want to skip hiring a partner, templates make it easy to get going right away. Just choose a template and customize it to fit your needs.
If you prefer to keep templates private to your team, you can create workspace templates instead of listing them publicly. Workspace templates reuse your app across a single workspace without appearing in the public marketplace. Learn how to [create and manage workspace templates](/documentation/using-your-workspaces/creating-and-using-workspace-templates).
You can also publish your own public templates for others to use, reaching a wider audience while showcasing your skills. For internal-only use, keep templates as workspace templates so they are available only to your team.
***
## Accessing templates
Click **Templates** in the left sidebar of your workspace to browse all available templates. Templates with reviews display an average rating to help you evaluate them before choosing one.
The tabs at the top show templates by who made them:
* **All:** Every public template.
* **Base44:** Templates made by the Base44 team. The page opens on this tab.
* **Community:** Templates shared by other Base44 users.
* **Workspace:** Templates created and saved by your team. Only members of your workspace can see them. This tab appears when your workspace has templates.
* **My Templates:** Templates you've listed. This tab appears once you've created one.
To narrow things down, search by name, pick a category, or use the **Type** filter to show **Apps** or **Websites** only. Use **Sort** to order templates by **Popular**, **Newest first**, or **Oldest first**.
When you use a template, it is copied into your own workspace where you can rename it, change the content, update the design, and modify how it works.
To use a template that relies on backend functions, you need a Builder plan or higher.
**To access app templates:**
1. Click **Templates** in the left sidebar of your workspace.
2. Choose a tab, and use search, categories, or the **Type** filter to find a template.
3. Hover over a template and click **View details** to see more information, images, usage stats, ratings, and reviews.
4. Click **Use Template**.
***
## Creating public templates
You don’t need to create something complex to share as a public template. Simple apps, reusable layouts, or creative tools can all be helpful to others. If you have made something useful or fun, you can add it to the community app templates library. You can share your template with the whole Base44 community for free.
Before you start, check that your app qualifies. You need to own the app and have published it at least once, and you need to be an admin of the workspace that owns it. An app you started from someone else’s template cannot be listed again. When someone uses your template, it is copied into their workspace and your original app stays the same.
**Before submitting your app, make sure:**
* You test it to ensure it works and includes full functionality.
* You add real-looking sample content.
* Your app is secure. [Learn more about security and using the security check](/Setting-up-your-app/running-a-security-scan).
Base44 works out what kind of app you have and suggests a category for you, so check the suggestion fits before you publish, and add any others that apply. Categories are how people find your template, so pick the ones that genuinely describe it rather than casting the net wide.
You start a template from your app’s dashboard settings.
**To create a public template:**
1. Click **Dashboard** in your app editor.
2. Click **Settings**.
3. Next to **Create App Template**, click **Create template**.
4. Select **Public template**, then click **Continue**.
5. Under **Basic info**, enter a **Template name** and a **Description** of what makes your app worth trying.
6. Under **Categories**, click **Choose categories and subcategories** and select at least one. Expand a category to see its subcategories, then click **Done**.
7. Under **Template screenshots**, click **Add screenshot** and upload at least 3 screenshots, up to 7.
8. Select the **I agree to the Base44 Terms and Marketplace Terms** checkbox.
9. Click **Create template** at the top right.
* Your first screenshot is the template’s cover and must be 16:9, such as 1920x1080. Use the crop icon if it is not.
* To take fresh captures, click **Preview app** to open your published app.
* Show your app in action with real-looking data, and use clean, full-screen views.
* Avoid blurry or empty screens.
***
## Improving your listing
If you want your template to stand out, start by focusing on solving a clear problem for others and choosing a catchy title. Add a helpful image and description that show your app in action and make its purpose easy to understand.
The most successful templates have clear and friendly language, and include strong visuals that highlight your app’s value.
**Description:**
* Say clearly what your app is for and who it helps
* Use short, friendly sentences
* Avoid overly technical or complex language
**Categories:**
* Pick the categories that genuinely describe what your app does, like productivity or e-commerce
* Only choose categories that match your app, because a mismatch is a common reason listings are declined
***
## The approval process
After you submit your listing, the Base44 team reviews it to make sure it meets community guidelines. Listings that don’t follow these guidelines may be rejected. If your app is approved, it appears in App Templates for others to discover and use.
**Base44 may decline or remove a listing if:**
* **Spam or broken:** The app listing is spam or is not functioning.
* **Private setting:** The app is set to private, which prevents others from viewing it.
* **Community rules violation:** The app includes content that breaks community rules.
* **Screenshots do not match:** The submitted screenshots do not reflect the actual appearance or features of the app.
* **Missing security settings:** Apps must complete a security check to be eligible for publishing.
* **Broken functionality:** Some features in the app are not working as intended.
* **Invalid or non-compliant app name:** The app name uses terms like "template," version numbers, or other values not allowed by store policy.
* **Duplicated app without chat:** If your app is a duplicate and does not include chat functionality, please send the original app with chat history.
* **Mismatched categories:** The categories selected do not match the app’s purpose or functionality.
* **App has never been published:** Apps must be published at least once before being submitted for review.
**Important:**
* Final approval depends on Base44’s internal guidelines. The team may remove listings that do not meet broader community quality standards, even if a specific reason is not listed above.
* The approval process may take some time. We appreciate your patience.
***
## Updating your template
Your template stays linked to the app you created it from, so what you need to do depends on what changed.
* **App functionality or design:** Publish your app as usual. Anyone who uses your template from then on gets the latest version, and you do not need to resubmit it.
* **Listing details:** Changes to the name, description, categories, or screenshots go back through review before they appear in the catalog.
Either way, people who already added your template keep their own copy, and your changes do not reach it.
**To update your listing:**
1. Click **Dashboard** in your app editor.
2. Click **Settings**.
3. Next to **App Template**, click **Submit Update**.
4. Make your changes to the listing.
5. Click **Submit Update** to confirm.
You cannot submit another update while a previous one is still in review.
***
## Managing your listings
From your app's dashboard you can manage your template listing.
**To manage a template listing:**
1. Go to your app's editor.
2. Click **Dashboard**.
3. Click **Settings**.
4. Click **App Template**.
5. Choose what you want to do:
* **See your app in the marketplace:** Click the **More actions** icon and click **See on App Templates**.
* **Remove your template from the marketplace:** Click the **More actions** icon and click **Remove from App Templates**.
***
## FAQs
Click a question below to learn more.
We are in the process of removing the option to sell templates. Paid templates stay available until September 30, 2026, and we unlist them after that date. You can still share your templates with the community for free, and anything you publish stays in App Templates for others to find and use.
Yes! When you click your template in App Templates, you can see how many times your app has been used.
Yes, you can publish any number of templates, and each listing is reviewed individually to ensure it meets Base44’s guidelines.
In App Templates, click the **My Templates** tab to see the listings you created. Templates that other people shared in your workspace are on the **Workspace** tab.
No, removing or hiding your template does not impact anyone who has already added it to their workspace.
Yes. At the template type step, select **Workspace only** instead of **Public template**. A workspace template is visible only to your workspace members and skips marketplace review, so it is ready to clone as soon as you save it. See [creating workspace templates](/documentation/using-your-workspaces/creating-and-using-workspace-templates).
For a public template, backend functions and secrets do not transfer. Each user sets up their own in their own workspace, for security and privacy.
For a workspace template you can choose otherwise. Use **Integration secrets** on the listing form to pick which API keys and secrets are copied when a member clones it. See [creating and using workspace templates](/documentation/using-your-workspaces/creating-and-using-workspace-templates).
If your template uses paid third-party services, anyone who adds your template to their workspace needs to set up their own accounts and connect those services themselves.
No. Once someone adds your template, they can create as many copies as they wish.
# Hiring a Base44 partner
Source: https://docs.base44.com/Getting-Started/Hiring-a-partner
Hire a Base44 partner to help you build features, customize your workflow, or create an integration. Choose the right expert, contact them, and work together.
[Base44 Partners](https://base44.com/hire-a-partner) helps you find experts, freelancers, and agencies who specialize in Base44 apps and workflows. Whether you need help building features, customizing your workflow, or creating an integration, you can connect with a partner who matches your needs.
Browse Base44 Partners, choose a partner, and contact them directly.
Payments and agreements are managed directly between you and the partner you choose.
***
## Choosing a Base44 partner
Choosing the right partner helps set your project up for success. Each partner lists their skills, experience, and pricing options, so you can make an informed choice. You can also filter the partners by services and languages to find the best match for you.
* **Check their profile:** Review the partner’s profile, website, and portfolio to see their past work and experience.
* **Meet with them:** Arrange an intro call to align on expectations.
* **Request a clear proposal:** Include scope, pricing, deliverables, and timeline.
* **Check availability:** Make sure the partner can meet your timeline before work begins.
* **Look for transparency:** Reliable partners explain what they can deliver, how long the work takes, and what you receive.
***
## Contacting a Base44 partner
You can search partner profiles, filter by service or language, and contact a partner directly from Base44 Partners.
**To contact a partner:**
1. Go to [Base44 Partners](https://app.base44.com/partners).
2. Search for a partner or use the **Service** and **Language** filters.
3. Review the partner’s profile card, including their services, languages, and pricing.
4. Click **Contact** on the partner you want to reach.
5. Fill out the form with your project details and contact information.
***
## Collaborating with your partner
Once you have found the right partner, set your project up for a productive and secure experience.
* **Communicate clearly:** Maintain open and professional communication with your partner at every stage of the project. Define milestones and delivery checkpoints early so expectations stay aligned.
* **Keep records:** Document all agreements in writing, even a short email is enough. Confirm the project scope, pricing, payment schedule, and timeline **before** work begins.
* **Agree on payments:** Each partner sets their own pricing model. Some charge an hourly rate, others a fixed project fee, or both. You can also use milestone-based payments, such as a deposit followed by installments as work progresses. Decide together which approach works best and use a payment method you trust.
Base44 does not charge commissions and does not mediate disputes or payments.
***
If you build apps or services for clients, you may be eligible to join the Base44 Partner Program. Learn about eligibility, partner tools, and setting up your partner profile.
***
## FAQs
Click a question below to learn more about Base44 partners.
No. Base44 does not charge a fee to use Base44 Partners. You agree on project payments directly with the partner you choose.
Yes, you can hire multiple partners for your project. Many people choose to work with different experts for areas like design, development, and integrations.
Yes, you can switch partners during a project if needed. Keep in mind that changing partners may involve additional costs, but it’s often better to make a change than continue with a partnership that isn’t working.
Some partners, such as legally registered freelancers or agencies, can provide invoices or receipts. Be sure to confirm this with your partner before starting the project.
When you click **Contact**, you fill out a short form with your project details and contact information. Base44 sends your request to the partner, and you continue the conversation directly from there.
Yes. In addition to Base44 Partners, you may see an option to connect with an expert at Fiverr directly from the [Base44 Partners page](https://app.base44.com/partners).
This experience is provided by Fiverr, not Base44. It is designed for quick help, such as reviews, targeted troubleshooting, or small changes. You can chat instantly or schedule a time soon, and get offers at a fixed hourly rate shown in Fiverr.
For larger or ongoing projects, complex integrations, or long-term strategic work, a Base44 partner may be a better fit.
The Fiverr option is not available to everyone yet.
Contact us for questions, issues, or suggestions about Base44 Partners.
# Writing effective prompts in Base44
Source: https://docs.base44.com/Getting-Started/Prompt-guide
Write prompts that get Base44 to build what you picture. Describe your app clearly, build one piece at a time, set the look and feel, and avoid common mistakes.
A prompt is simply a description of what you want, written in your own words. There is no code, no syntax, and no special commands to learn. You describe your app, and Base44 builds it.
Because your whole app is built from what you type, your words are your building material. The clearer the picture you paint, the closer the result is to what you had in mind. This guide walks you through painting that picture, from your very first prompt to the small refinements that make an app feel finished.
***
## How building with prompts works
Building in Base44 is a loop, not a single instruction you have to get right on the first try. You describe, Base44 builds, and you shape the result together over a few rounds.
Each round looks like this:
* **Describe:** You say what you want in plain language.
* **Build:** Base44 creates or updates your app in seconds.
* **Review:** You look at what changed and decide what comes next.
* **Refine:** You give feedback, and the app updates again.
Treat your first result as a rough draft you can mold, not a final answer. That mindset takes the pressure off, and it is how the best apps come together.
***
## Writing your first prompt
Your first prompt is the foundation for everything that follows, so aim to describe the heart of your app rather than every detail. You can always add more later. Focus on what the app is, who it is for, and the main things people should be able to do.
A quick way to shape this is to think through the who, what, and why of your app:
* **Who:** Who will use it, such as freelancers, students, or your whole team.
* **What:** What it helps them do, such as track expenses or book appointments.
* **Why:** Why it is useful to them, such as saving time or keeping everything in one place.
Here is that thinking turned into a prompt:
```text theme={null}
Build an expense tracker for freelancers who bill several clients at once.
People can log an expense, tag it to a client and a category, and see a
monthly total for each client. The goal is to make tax season painless.
```
Not sure where to start? Use **Plan mode** before your first build. Open the Mode dropdown and select **Plan**. Base44 talks your idea through with you, then turns the conversation into a structured plan you can adjust before anything is built. It costs only a fraction of a credit per message. [Learn more about plan mode](/Getting-Started/starting-from-your-first-prompt#using-plan-mode)
Take me to Base44 to build my app
***
## Describing your app clearly
The gap between a rough result and a great one usually comes down to how much of the picture you share. These 5 moves help Base44 build the app you actually pictured, whether it is your first prompt or your fiftieth.
### Paint the screen, not just the idea
Base44 fills in anything you leave out with its best guess, so describe what you want to see on the page. The more concrete you are, the less it has to invent.
* **Vague:** "Make a dashboard for my sales."
* **Clear:** "Make a sales dashboard with 3 cards along the top for total revenue, deals won, and deals lost, then a bar chart below showing revenue by month."
### Say why you want it
When you explain the reason behind a request, Base44 can make smarter choices about the details you did not spell out. The why is often more useful than the what.
* **Just the what:** "Put the sign-up button at the top."
* **With the why:** "Put the sign-up button at the top so it is the first thing a new visitor sees."
### Borrow from apps you already like
You do not have to describe a look from nothing. Naming an app people know is a fast shortcut to the feel you want, as long as you say which part you mean.
* "Organize it like Trello, with cards I can drag between columns."
* "Make it feel as calm and uncluttered as Notion, but keep my own brand colors."
### Build one piece at a time
Packing an entire app into a single prompt makes the result harder to get right and harder to fix when something is off. Start with the core, get it working, then layer features on one by one.
```text theme={null}
Start: Build a booking app where clients pick a service and an open time slot.
Next: Now email the client a confirmation as soon as they book.
Next: Now hide time slots that are already taken so nothing gets double-booked.
```
Focused prompts also tend to be gentler on your credits, because a small, clear change is less work behind the scenes than a broad one that touches many pages. Dragging elements or editing text yourself in Edit mode does not use credits at all. [Learn more about credits](/Account-and-billing/Credits)
### Ask for the fix, not the flaw
When something looks off, describe where you want to end up rather than only what is wrong. Base44 builds from your target, not from your frustration.
* **The flaw:** "The homepage looks cluttered and cramped."
* **The fix:** "Give the homepage more room to breathe: fewer items per row and more space between the sections."
***
## A recipe for look and feel
When the design matters to you, describe 3 things together: what the app does, how it is laid out, and the mood it should have. Combining them gives Base44 a full picture in a single prompt.
### Function
Tell Base44 the job your app is doing, because an online store and a personal portfolio should not look the same. A store needs clear product grids and a fast path to checkout, while a portfolio needs personality and a strong first impression.
### Layout
Tell Base44 how to arrange things on the screen so it does not have to guess. For example:
* **Grid of cards:** Content sits in tidy boxes, which suits dashboards and feature-heavy apps.
* **One long scroll:** The app is a single page where sections appear as you scroll, which suits stories and landing pages.
* **Split screen:** The screen is divided in 2, often with text on one side and a visual on the other.
### Visual style
Tell Base44 the mood you want, and go further than "clean" or "modern." For example:
* **Calm and professional:** Soft colors, plenty of white space, and simple type.
* **Bold and playful:** Bright colors, rounded shapes, and friendly icons.
* **Sleek and premium:** A dark background, high contrast, and elegant fonts.
***
## Refining your app as you go
Once your app exists, most of your time goes into refining it through the AI chat. The phrases below are reliable ways to ask for a change, each with a tip to sharpen the result.
| Technique | When to use it | Example | Pro tip |
| :- | :- | :- | :- |
| "Make it more..." or "Make it less..." | Adjusting tone, layout, or emphasis | "Make the header less bold." | Add the reason: "Make the call to action more prominent because it is the last step people take." |
| "Add a..." or "Remove the..." | Adding or removing a feature or section | "Add a comments section to each task." | Group related changes: "Add a comments section and place it below the task list." |
| "Change \[this] to \[that]" | Editing text, colors, or components | "Change the Submit button to say Send request." | Layer in context: "Change the button text to match the friendly tone used across the app." |
| "It should feel like..." | Borrowing a familiar app's style | "It should feel like a mix of Duolingo and Airtable." | Say which parts: "Use Duolingo's playful tone and Airtable's table layout." |
| "Add logic for..." | Adding a rule or flow without code | "Hide completed items from the default view." | Describe the outcome: "Remind people if they have not logged in for a week." |
| "Group or organize..." | Structuring content for clarity | "Group tasks by category." | Mention the reason: "Group tasks by category so people find what they need quickly." |
| "Only show\... when..." | Adding behavior that depends on a condition | "Only show the download button after payment is confirmed." | Start simple, then expand: "Add this condition first, then I will add variations per user type." |
| "Let people..." | Framing a feature from the user's point of view | "Let people bookmark resources for later." | Add the value: "Let people tag their documents so they can find them again easily." |
***
## Getting more from Base44's tools
The chat box is not your only way to communicate. These tools let you point, plan, and protect your work, and they often reach the result faster than words alone.
* **Point instead of describe:** In Edit mode, click straight on the element you mean and describe the change right there. It is the clearest way to say "this one, not that one." [Learn more about the AI chat](/Building-your-app/AI-chat-modes)
* **Plan before you build:** Use Discuss mode to talk an idea through with the AI before it changes anything, so you can agree on a plan without touching your live app or spending credits on changes. [Learn more about the chat modes](/Building-your-app/AI-chat-modes)
* **Show, do not just tell:** If you have a design in mind, [import it from Figma](/Getting-Started/import-from-figma) so Base44 can match something real instead of a description.
* **Set your rules once:** Use AI controls to add instructions the AI should remember on every prompt, and to limit changes to only the areas you want touched. [Learn more about AI controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat)
* **Experiment without fear:** Restore any earlier version of your app at any time, so you can try bold ideas knowing you can always go back. [Learn more about reverting changes](/Building-your-app/AI-chat-modes#reverting-changes)
Browse the Prompt library for ready-made prompts you can copy, remix, and build on.
***
## Common mistakes to avoid
A few habits trip people up early on. Keeping these in mind saves you time and leads to better results.
* **Being too vague:** Requests like "make it better" or "fix it" give Base44 nothing to work with. Say what you want changed and how.
* **Asking for everything at once:** Cramming payments, reviews, analytics, and inventory into one prompt invites confusion. Build the core first, then add features step by step.
* **Assuming the AI remembers other chats:** If you are picking up an idea from a different conversation or a while back, briefly remind Base44 of the context.
* **Expecting it to read your mind:** If you have a specific layout or flow in your head, describe it as clearly as you can rather than hoping Base44 lands on it.
***
## FAQs
Here are answers to common questions about writing prompts and working with the AI chat.
It can take a few attempts to land on the right result, especially when a request is open to interpretation. To get closer faster:
* Use Edit mode to click the exact element you want to change and describe the change there.
* Explain what you want to happen, rather than what looks wrong.
* If a prompt is not working after a couple of tries, rephrase it and use words like redesign or rebuild.
* Keep your language simple and natural. The clearer the request, the more accurate the result.
Use AI controls to limit the AI's changes to only the areas you want updated. This is especially helpful when other parts of your app keep getting altered unintentionally. [Learn more about AI controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat)
Use Discuss mode at the bottom of the AI chat. It lets you talk through ideas, review logic, and plan steps with the AI before any changes are made or credits are used. [Learn more about the chat modes](/Building-your-app/AI-chat-modes)
If the AI is taking too long or seems stuck, try refreshing the page or resending your prompt. This usually gets things moving again.
Some features might not be supported yet. If you are unsure whether something is possible, ask in our [Discord](https://discord.gg/ThpYPZpVts) help channel.
# Prompt library
Source: https://docs.base44.com/Getting-Started/Prompt-library
Copy, fill in, and send ready-made prompts for every stage of building on Base44, from your first idea to logins, workflows, AI agents, payments, and polish.
Every app on Base44 starts as a sentence somebody typed. This library is a collection of sentences that work, written out in full so you can copy one, change the parts in brackets, and send it.
These are not only [ideas for what to build](https://base44.com/use-cases). They cover the whole life of an app: starting it, adding logins and uploads, making it look like you meant it, putting it to work while you sleep, and fixing the parts that came out wrong. Use one as-is, or read a few and start writing your own.
**How to use this page:**
* **Fill in the brackets:** Anything in `[square brackets]` is a placeholder. Swap in your own words before you send the prompt.
* **Send one at a time:** Most prompts here are a single step. Send one, look at what changed, then send the next.
* **Change anything you like:** These are starting points, not spells. A prompt that describes your idea in your own words always beats a perfect one that describes somebody else's.
***
## Start here
If you're staring at an empty prompt box, start with whichever of these 5 sounds closest to what you have in mind. Each one is a complete first prompt that builds a working app.
**Turn a spreadsheet into an app**
```text wrap theme={null}
I keep track of [my client projects] in a spreadsheet with columns for [client name, project, status, and due date]. Build me an app that replaces it. Show everything in a sortable table, let me add and edit entries in a side panel, and put 3 summary cards at the top for [total projects, in progress, and overdue].
```
Why this works: Starting from something you already keep by hand gives Base44 real columns and real records to build around, instead of a blank guess.
**Build the app you keep wishing existed**
```text wrap theme={null}
Build an app for [people who run small book clubs]. They can [add the current book, set a meeting date, and mark how far they have read]. The goal is [everyone showing up having read the same chapters]. Keep it warm and simple: one page, soft colors, no sign-up needed to look around.
```
Why this works: Who it's for, what they do, and why it matters. Those 3 details let Base44 make sensible decisions about everything you didn't mention.
**Collect answers from other people**
```text wrap theme={null}
Build an app where [my team requests time off]. The request form asks for [name, dates, and a reason], and everything submitted lands in a dashboard only I can see. Email me whenever a new request arrives, and let me mark each one approved or declined.
```
Why this works: It describes both sides of the app, what visitors see and what you see, so Base44 sets up access and notifications correctly the first time.
**Make something private, just for you**
```text wrap theme={null}
Build a private app that only I can log in to. I want to [log every book I finish] with [the title, author, a rating out of 5, and a short note]. Show them as a grid of cover cards, and let me filter by rating and search by title.
```
Why this works: Saying it's private up front tells Base44 to lock the app down from the start, so you don't have to retrofit access rules later.
**Start from a look you like**
```text wrap theme={null}
Build a [portfolio site] for [a freelance photographer]. One long scrolling page: a full-width hero image with my name over it, then a gallery grid, then a short about section, then a contact form that emails me. Make it feel like [Squarespace]: lots of white space, big type, almost no color.
```
Why this works: Naming a site people know, plus the exact sections in order, gives Base44 a layout to follow instead of a mood to interpret.
Use plan mode before your first build. Base44 talks your idea through with you, then turns the conversation into a structured plan you can adjust before anything gets built.
***
## Starting a business or work app
These prompts build tools for running something: a business, a team, a side hustle. Each one gives you a working app you can put real data into on day one.
**Invoice tracker**
```text wrap theme={null}
Build an invoice tracker for a freelance [designer]. I create an invoice with a client, line items, and a due date, then mark it draft, sent, or paid. The home screen is a table of invoices with a colored status badge, and 3 cards above it for total outstanding, paid this month, and overdue. Let me download any invoice as a PDF.
```
**Stock tracker with reorder alerts**
```text wrap theme={null}
Build a stock tracker for [a small coffee shop]. Each item has a name, supplier, current quantity, and a minimum level. Show a table sorted so anything below its minimum sits at the top, highlighted in red. Every Monday morning, email me a list of everything that needs reordering.
```
Why this works: The sorting rule and the highlight tell Base44 what the page is for. Without them you get a table that's accurate and useless.
**Internal request tracker**
```text wrap theme={null}
Build an internal tool where my team submits [IT support requests]. Anyone can file a request with a title, urgency, and description. Admins see every request on a board with columns for new, in progress, and done, and can drag cards between them. Everyone else only sees their own requests.
```
**Time tracker**
```text wrap theme={null}
Build a time tracker where I start and stop a timer against a project, or add hours manually if I forgot. Show this week's total per project as a bar chart, and let me export any date range as a spreadsheet for invoicing.
```
***
## Starting a client-facing app
These prompts build things other people use, where the experience they get matters as much as the data you collect.
**Client portal**
```text wrap theme={null}
Build a client portal for [a marketing agency]. Each client logs in and sees only their own projects, with the current status, the files I have uploaded, and a comment thread. They can approve a file or request changes. I get an admin view of every client in one place, and an email whenever someone comments.
```
**Booking page**
```text wrap theme={null}
Build a booking app for [a massage therapist]. Visitors pick a service, see only the time slots that are still open, and book with their name and email. Once a slot is booked it disappears for everyone else. Email the client a confirmation, and show me all upcoming bookings on a calendar.
```
Why this works: Spelling out the rule, that a booked slot disappears, is what prevents double bookings. Describe the rule, not just the feature.
**Proposal generator**
```text wrap theme={null}
Build an app where I fill in a short form about a project and get back a branded proposal I can send. Let me save reusable sections like my bio and my pricing tiers, edit the wording per client, and export the finished proposal as a PDF. Use my brand colors: [deep navy and warm orange].
```
**Event RSVP page**
```text wrap theme={null}
Build an RSVP app for [small workshops]. I enter the event details once, then share a link. Guests RSVP with their name, a yes or no, and an optional note. I see every response in one dashboard with a running headcount, and I get an email each time somebody replies.
```
***
## Starting a knowledge or content app
These prompts organize information so it can be found again, which is most of what internal tools actually do.
**Team knowledge base**
```text wrap theme={null}
Build an internal help center where my team writes and searches short articles. Each article has a title, tags, a body, and a last reviewed date. The home page is a big search box with the most-read articles below it. Flag any article nobody has reviewed in 6 months so we know to update it.
```
**Content calendar**
```text wrap theme={null}
Build a content calendar for [my newsletter and social posts]. Each item has a title, a channel, an owner, a status of idea, drafting, or published, and a publish date. Show it as a month calendar by default, with a list view I can switch to, and color each item by channel.
```
**Course companion**
```text wrap theme={null}
Build an app for [an online course] where I post weekly lessons with a video link and downloadable files. Each student logs in to their own dashboard, sees only the lessons released so far, and ticks off each one as complete. I can see how far along every student is.
```
***
## Starting a personal app
These prompts are for your own life. They're small enough to finish in an evening and useful enough that you'll keep opening them.
**Meal planner**
```text wrap theme={null}
Build a meal planner where I fill in a week of dinners from recipes I have saved, then generate one combined shopping list from whatever I picked. Let me tag recipes as [vegetarian, quick, or freezer-friendly] and filter by those tags. Show the week as 7 columns across the screen.
```
**Habit tracker**
```text wrap theme={null}
Build a habit tracker for [3 to 5 daily habits]. The main screen is one row per habit with the last 7 days as circles I tap to fill in. Show my current streak beside each habit and a monthly chart underneath. Make it feel like a friendly mobile app: big tap targets, rounded corners, one soft accent color.
```
**Trip planner**
```text wrap theme={null}
Build a trip planner for [a 10-day road trip]. Each stop has a place, dates, where we're staying, and notes. Show the stops in order down the page as a timeline with a map above it. Let me share a read-only link with the people coming, so they can follow the plan without editing it.
```
**Gift list**
```text wrap theme={null}
Build a private app for tracking gift ideas. Each idea has the person's name, an occasion, a budget, a link, and whether I have bought it yet. Group the list by person, and show me how much I have spent per person this year.
```
***
## Starting something just for fun
These are the ones people build at 11pm and then send to everybody they know. They're also the fastest way to get a feel for how prompting works, because nothing is at stake.
**Absurd name generator**
```text wrap theme={null}
Build an app that invents ridiculous names for [internet-famous pets]. I pick a vibe from [dignified, chaotic, or mysterious], press one big button, and get back a name plus a 2-line backstory written by AI. Huge playful type, one button in the middle of the screen, confetti when a new name appears.
```
**Fake conspiracy generator**
```text wrap theme={null}
Build an app that generates obviously fake, lighthearted conspiracy theories about [everyday objects], each with invented evidence and a nonsense chart. Include a randomize button and a share button that copies the theory to the clipboard. Style it like a 1970s government file: typewriter font, manila folder colors, stamped edges.
```
**Beige flag analyzer**
```text wrap theme={null}
Build an app where I type in a quirky habit and it gets labelled a green flag, red flag, or beige flag, with an emoji rating and a short funny explanation written by AI. Save every verdict to a running feed at the bottom of the page so I can scroll back through them.
```
***
## Adding what every real app needs
Once your app exists, these are the features it turns out to need. Send them one at a time to an app that's already running.
**Add logins**
```text wrap theme={null}
Add logins to my app. People sign in with email or Google, and from then on each person only sees the [projects] they created themselves. Make me the admin, so I can see everything and edit anybody's records. Everything already in the app should belong to me.
```
Why this works: The last line settles what happens to the records that existed before you added logins, which is the part people forget and then have to untangle later.
**Add roles and invites**
```text wrap theme={null}
Add 3 roles to my app: admin, editor, and viewer. Admins manage everyone, editors can add and change records, and viewers can only read. Let admins invite somebody by email and pick their role.
```
Read more about [managing access to your app](/Setting-up-your-app/Managing-access).
**Add file uploads**
```text wrap theme={null}
Let people attach files to each [project]. Accept PDFs and images up to 10 MB, show them as a list of thumbnails with the file name and upload date, and let me delete one.
```
**Read an uploaded document with AI**
```text wrap theme={null}
Let me upload a photo of a [receipt] and have AI read it and fill in the fields for me: [merchant, date, total, and category]. Show me the extracted values so I can correct anything before it saves.
```
Why this works: Asking for a review step before saving keeps you in control of whatever the AI misread, which matters more the more your app leans on it.
**Add search and filters**
```text wrap theme={null}
Add a search box above my [orders] table that filters as I type, matching on [customer name and order number]. Beside it, add filter chips for [status] and a date range picker, and remember my last filter when I come back to the page.
```
**Add a dashboard**
```text wrap theme={null}
Add a dashboard as my new home page. Across the top, 4 cards for [total revenue, new customers, open tickets, and average response time]. Below that, a line chart of [revenue by month] and a list of the 5 most recent [orders]. Everything reads from the live data in my app.
```
**Add notifications**
```text wrap theme={null}
Tell people inside the app when something they care about changes. When [their request is approved, or somebody replies to it], leave them a notification they see the next time they open the app, showing what happened and linking straight to the record. Let them clear the whole list in one go.
```
Why this works: Describing the moment somebody should be told, rather than the bell icon you pictured, lets Base44 wire the notification to the right change in your data.
**Make it work on a phone**
```text wrap theme={null}
Make my app work properly on a phone. Stack the columns into a single scroll, turn the top navigation into a bottom bar with icons, make every button big enough to tap comfortably, and make sure no table runs off the side of the screen.
```
Read more about the [mobile experience](/Building-your-app/Mobile-experience).
**Fix the blank screens**
```text wrap theme={null}
Add friendly empty states everywhere my app can start out blank. When there are no [projects] yet, show one line explaining what the page is for and a button to add the first one, instead of an empty table.
```
Why this works: Blank screens are the most common reason a brand new app feels broken. Asking for them once fixes every page at the same time.
***
## Changing how your app looks
Design prompts work best when you describe the mood, the layout, and what you want left alone. These 4 cover most of what people ask for.
**Restyle the whole app**
```text wrap theme={null}
Restyle my whole app to feel [calm and premium]: an off-white background, one deep [navy] accent color, generous spacing, and a serif font for headings with a plain sans-serif everywhere else. Keep the layout exactly as it is and only change the styling.
```
Why this works: "Keep the layout exactly as it is" is the guardrail. Without it, a restyle can quietly rearrange your pages while it recolors them.
**Borrow a look you already like**
```text wrap theme={null}
Make my [task board] feel like Linear: dark background, high contrast, tight spacing, almost no color except one accent. Keep my own wording and my own data exactly as they are.
```
**Unclutter a page**
```text wrap theme={null}
The [settings] page feels cramped. Give it more room to breathe: group the options into 3 labelled sections, add more space between rows, and move the rarely used options into a collapsed advanced section at the bottom.
```
**Add dark mode**
```text wrap theme={null}
Add a light and dark mode toggle in the header that remembers what somebody picked. Make sure text stays readable in both, especially on cards and inside charts.
```
Read more about [design foundations and layout](/Building-your-app/Design-foundations-and-layout).
***
## Making your app do the work for you
This is where an app stops being a place you type things and starts being something that runs on its own. These prompts set up workflows, emails, AI agents, and connections to the tools you already use.
Workflows are available on the Builder plan and above. If you're on the Free plan, upgrade to a [Builder plan or higher](/Account-and-billing/Billing-and-plans) to create and run them.
**Welcome and follow up**
```text wrap theme={null}
When somebody signs up, email them a welcome message straight away. Wait 3 days, then check whether they have [created their first project]. If they have not, send one short nudge with a link. If they have, do nothing.
```
**Email yourself a daily summary**
```text wrap theme={null}
Every weekday at 8am, email me a summary of what happened in my app yesterday: [new signups, new orders, and anything still unassigned]. Keep it to a short list I can read on my phone.
```
**Alert only when it matters**
```text wrap theme={null}
Check my [inventory] once an hour and message me only when [an item drops below its minimum level]. Include the item name and the supplier, and send nothing at all when everything is fine.
```
Why this works: Saying what should not happen matters as much as saying what should. It's the difference between a useful alert and a daily flood you learn to ignore.
**Add an AI assistant inside your app**
```text wrap theme={null}
Add an AI assistant my [team] can chat with inside the app. It should be able to search our [projects], create a new one, and update a status, all from the chat. Give it a brief, friendly tone, and have it confirm with me before it changes anything.
```
Read more about [building AI agents](/Building-your-app/AI-agents-for-apps).
**Add a customer-facing chatbot**
```text wrap theme={null}
Add a chatbot to my [public site] that answers questions from the people visiting it. Give it our [FAQs and product pages] to answer from, have it say it does not know rather than guessing, and collect an email address when somebody wants a person to follow up.
```
Why this works: A chatbot for customers needs different rules from an assistant for your team. Telling it to admit what it does not know, and naming what it should collect, is what keeps it useful in public.
Read more about the [AI agent builder](https://base44.com/ai-agent-builder).
**Connect a tool you already use**
```text wrap theme={null}
When [somebody submits a new order], post it to my [#sales] Slack channel with the customer name, the amount, and a link to the record in my app.
```
Read more about [connectors](/Integrations/Connectors).
**Put AI inside a feature**
```text wrap theme={null}
Add a Summarize button to each [meeting note]. When I press it, use AI to produce 3 bullet points and a list of action items, then save that summary with the note so I can search it later.
```
***
## Getting your app in front of people
Building it is half of it. These prompts cover the part where other people arrive, understand what they're looking at, and pay you.
**Charge for access**
```text wrap theme={null}
Let people pay [29 dollars a month] to unlock [the pro features] in my app. After they pay, upgrade their account automatically and open up [the export and analytics pages]. Add a clear pricing page with 2 tiers and a short comparison.
```
Read more about [setting up payments](/documentation/setting-up-your-app/setting-up-payments).
**Add a landing page**
```text wrap theme={null}
Add a public landing page in front of my app for people who aren't logged in. A headline that explains what it does in one sentence, 3 benefit cards, a short FAQ, and a sign-up button in the header and again at the bottom. Match the colors the app already uses.
```
**Help people find it in search**
```text wrap theme={null}
Set my app up to be found in search. Give every public page a clear title and description, add a sitemap, and make sure [the homepage] says what the app does in plain words near the top.
```
Read more about [SEO and search visibility](/Performance-and-SEO/SEO-and-search-visibility).
**Collect feedback from real people**
```text wrap theme={null}
Add a feedback button that floats in the corner of every page. When somebody clicks it they can leave a short comment and optionally their email, and it all lands in a table only I can see.
```
***
## Fixing and refining
Most of building is not the first prompt, it's the twentieth. These are the prompts for when something came out wrong, and they're the ones worth learning by heart.
**Keep changes where you want them**
```text wrap theme={null}
Only change [the pricing page]. Don't touch any other page, the navigation, or my data. On that page, [change the middle plan to say Most popular and give it a highlighted border].
```
Why this works: Naming what's off limits is more reliable than naming only what to change. To make the rule permanent, set it once in [AI controls](/Building-your-app/AI-chat-modes#customizing-your-ai-chat).
**Report something broken**
```text wrap theme={null}
[The save button on the booking form] does nothing when I click it. It should [save the booking and show a confirmation message]. Find out why and fix it, then tell me what was wrong.
```
Why this works: Give the actual behavior, the behavior you expected, and where it happens. Asking what was wrong also teaches you a little about your own app.
**Ask for less than you got**
```text wrap theme={null}
That was more than I wanted. Go back to [the single column dashboard] and instead just [add a date filter above the chart], leaving everything else exactly as it was.
```
Why this works: It names the state you want to return to, so Base44 doesn't have to guess which parts of the last change you liked. You can also [revert to any earlier version](/Building-your-app/AI-chat-modes#reverting-changes) instead.
**Make it stop looking generic**
```text wrap theme={null}
My app looks like every other AI-built app. Give it a point of view: pick one distinctive accent color, one font pairing, and one consistent card style, then apply them everywhere. Swap the stock icons for something with more character and tighten up the spacing.
```
**Speed up a slow page**
```text wrap theme={null}
[The orders page] takes several seconds to load. Make it faster: load the first [50] rows and fetch more as I scroll, and show a loading skeleton instead of a blank screen while it works.
```
**Check it's safe for real people**
```text wrap theme={null}
Review my app for anything a stranger could see or change that they shouldn't. Check that [only admins can reach the settings page], that people can only edit their own records, and that nothing sensitive shows before somebody logs in. Give me a list of what you find before changing anything.
```
Why this works: Asking for a review instead of a fix gets you a list you can decide on, rather than a set of changes you didn't expect. For a deeper check, [run a security scan](/Setting-up-your-app/running-a-security-scan).
***
## Prompt pathways
The best apps grow one prompt at a time. A pathway is a sequence where each prompt adds one thing, so every change is small enough to check before you move on. Here are 3 you can follow end to end, swapping in your own subject.
**Send these in order, checking the result after each one:**
1. "I track \[our job applicants] in a spreadsheet with columns for \[name, role, stage, and source]. Build an app that replaces it, with a sortable table and a side panel for adding and editing."
2. "Add accounts. My team logs in with Google, and each person sees every applicant. Give me an admin role that can also delete."
3. "Turn the table into a board with columns for each stage, so I can drag an applicant from one stage to the next."
4. "Let me attach a CV to each applicant, and use AI to pull out the name, current role, and years of experience so I can check them before saving."
5. "Every Monday at 9am, email me everyone who has sat in the same stage for more than 7 days."
6. "Add a dashboard as the home page with 4 cards for applicants per stage and a chart of applications per week."
**Send these in order, checking the result after each one:**
1. "Build a \[meal plan library] where I publish \[weekly plans] with a title, description, cover image, and downloadable PDF."
2. "Add a public landing page for people who aren't logged in: a one-sentence headline, 3 benefit cards, and a sign-up button."
3. "Add accounts. Anyone can sign up free and see the 3 most recent plans. Everything older is locked."
4. "Let people pay \[9 dollars a month] to unlock the full library, and upgrade their account automatically once they've paid."
5. "When somebody subscribes, email them a welcome message with a link to the library."
6. "Set the public pages up to be found in search, with clear titles and descriptions and a sitemap."
**Send these in order, checking the result after each one:**
1. "Build a tracker for \[my freelance projects] with a client, a rate, hours logged, and a status."
2. "Add a dashboard with cards for hours this week, unbilled hours, and revenue this month."
3. "Every Friday afternoon, email me a summary of the hours I logged this week, grouped by client."
4. "Add an AI assistant I can chat with that logs hours, creates a project, and answers questions about my totals."
5. "When a project is marked complete, generate a draft invoice from the logged hours and email it to me for review."
6. "Make the whole thing work properly on my phone, since that's where I log hours."
***
## Micro-prompts for polish
Small refinements take an app from working to finished. Send these to an app that's already running, or fold a few into your first prompt for a more styled result from the start.
### Motion and feedback
These add the small reactions that make an app feel alive rather than static.
```text wrap theme={null}
Add hover effects so buttons gently lift when I point at them.
```
```text wrap theme={null}
Add smooth transitions when I switch between tabs and sections.
```
```text wrap theme={null}
Show a confetti animation when somebody completes [a task].
```
```text wrap theme={null}
Show a brief toast in the corner confirming every save, instead of nothing happening.
```
```text wrap theme={null}
Add a subtle loading skeleton where content is still arriving.
```
### Type and color
These set the visual character of the app in one line each.
```text wrap theme={null}
Use a rounded sans-serif font and a calm, muted color palette.
```
```text wrap theme={null}
Add soft drop shadows around cards for a subtle sense of depth.
```
```text wrap theme={null}
Increase the contrast between headings and body text so the hierarchy is obvious.
```
```text wrap theme={null}
Use one accent color for anything clickable, and nothing else.
```
```text wrap theme={null}
Give every page the same amount of space around the edges.
```
### Overall feel
These describe a whole personality rather than one detail.
```text wrap theme={null}
Use a clean, modern style similar to Notion.
```
```text wrap theme={null}
Make it feel like a friendly mobile app, with large touch targets and playful icons.
```
```text wrap theme={null}
Make it feel calmer: fewer items per row, more space between sections.
```
```text wrap theme={null}
Make it feel more serious and premium, suitable for showing to a client.
```
```text wrap theme={null}
Write all the button labels and empty states in a warmer, more human voice.
```
***
## FAQs
Here are answers to common questions about using the prompts on this page.
No. The brackets mark the parts most worth personalizing, but a prompt still works if you leave some as they are. Base44 treats whatever's inside them as your description, so `[my client projects]` builds an app about client projects. Change the ones that matter to your idea and leave the rest.
Long enough to describe what you want to see, short enough to be about one thing. The prompts here are roughly the right length: a few sentences covering what it does, how it's laid out, and anything that shouldn't change. If your prompt covers several unrelated features, split it and send them one at a time.
Yes, apart from the ones in the starting sections, which create a new app. Everything from [Adding what every real app needs](#adding-what-every-real-app-needs) onward is written to be sent into an app that's already running.
Many feature pages include example prompts for that specific feature. The most useful ones are on [creating workflows](/Building-your-app/Creating-workflows), [built-in integrations](/Integrations/built-in-integrations), [design foundations and layout](/Building-your-app/Design-foundations-and-layout), [managing your app data](/Building-your-app/Managing-your-app-data), and [setting up payments](/documentation/setting-up-your-app/setting-up-payments).
Yes. [App templates](/Getting-Started/App-templates) are complete apps built by the community that you copy into your workspace and change from there. A template gets you further on the first click, and you can carry on with the prompts here from that point.
***
The prompts here all follow the same few habits: describe what should be on the screen, say why you want it, and change one thing at a time. The prompt guide walks through each one.
# Building an app
Source: https://docs.base44.com/Getting-Started/Quick-start-guide
Build your first Base44 app in 5 steps. Describe your idea, customize, test, and publish your app, then tour the app editor's AI chat, preview, and dashboard.
## How to use Base44
Base44 is an AI-powered website and [app builder](https://base44.com/ai-app-builder). You do not need any coding or tech skills. Just describe what you want to build, and Base44 brings your idea to life.
You can build something simple for yourself or create a full product for your business. Base44 takes care of everything behind the scenes, including design, databases, signups, user permissions, and hosting.
* Prototype a new business idea
* Create a personal to-do list
* Set up an event signup page with reminders
* Build a survey and see answers instantly
* Track projects or sales on a dashboard
* Create a secure booking system or CRM
* Share files privately with clients
* Launch a community site with chat and analytics
Build my app now
***
## Step 1 | Describe your idea
Start by going to [Base44](https://app.base44.com/) and telling it what you want to build in your own words.
When you begin, you're asked to sign up. This makes sure your work is saved, so you can return to your app anytime.
There are a few ways to start, depending on what you already have. Pick the one that fits, then follow the full walkthrough in [Starting from your first prompt](/Getting-Started/starting-from-your-first-prompt).
Describe your app in plain language and let Base44 build it. See [Using a prompt](/Getting-Started/starting-from-your-first-prompt#using-a-prompt).
Talk your app through with the AI first, then turn the plan into a build. See [Using plan mode](/Getting-Started/starting-from-your-first-prompt#using-plan-mode).
Begin from a website you already own and refine it in the app editor. See [Starting from an existing URL](/Getting-Started/starting-from-your-first-prompt#starting-from-an-existing-url).
Turn a Figma frame into a working app. See [Starting from a Figma design](/Getting-Started/starting-from-your-first-prompt#starting-from-a-figma-design).
Bring in tools like Google Workspace, Slack, and GitHub from your first prompt. See [Connecting your tools](/Getting-Started/starting-from-your-first-prompt#connecting-your-tools).
***
## Step 2 | See your app come to life
Once you share your idea, Base44's AI handles the rest. It automatically designs your app's appearance, choosing colors, arranging buttons, and organizing menus to make everything look clean and function smoothly. If you need special pages or features like a calendar, forms, or a task list, Base44 adds those right away so your app is ready to use.
All the complex parts are also taken care of for you in the background. Base44 securely stores all your app's data, manages account and login systems if you need them, and keeps the technology that powers your app running smoothly. You do not need to set up or manage anything yourself; Base44 handles every detail so you can focus on your ideas.
Watch your app appear in the preview window as Base44 works. You can explore your app right away and try out any features by clicking the preview.
***
## Step 3 | Customize your app
Once your app is built, you can make it truly your own. The easiest way is with the AI chat. Just type what you want to change or add, and Base44 updates your app for you. For example, you can say "Change the main color to green," or "Add a signup page that collects full name and company."
If you want to brainstorm or ask questions first, use Discuss mode in the AI chat. Discuss mode lets you talk about your ideas without making changes until you are ready. This mode also uses less credits. [Learn more about the different AI chat modes.](/Building-your-app/AI-chat-modes)
There are lots of ways you can change and improve your app to fit your needs. You can:
Add new features or change how your app works. With the AI chat, you can:
* Add buttons or forms for people to interact with
* Create automated workflows, like sending a welcome email when someone signs up
* Set up notifications, reminders, or automated messages
* Ask the AI to add or update pages (for example, "Add a calendar page for events")
* Adjust the logic behind how your app responds to people or manages different tasks
Customize the colors, layout, and style of your app just by chatting with the AI. You can:
* Change the background color, text color, or font style
* Rearrange sections, move buttons, or update images and icons
* Apply changes globally or on just one page (for example, "Apply this new font to every screen," or "Change only the login page background")
You can also use Edit mode to manually make changes to specific elements of your app.
Decide what information your app uses and collects.
* Use the AI chat to build or change data flows (for example, "Add a field to the signup form for company name").
* Create or update forms to collect details from people, like signups, feedback, or orders.
* From **Data** in your app's dashboard, you can organize the data that your app collects, set rules for who can add, edit, or see information, and export your data to use elsewhere.
[Learn more about managing your app's data](/Building-your-app/Managing-your-app-data)
Control who can access your app and what they can do. From **Settings** in your app's dashboard, you can:
* Set permissions so only certain people or roles can see or edit information (like making some pages visible only to admins)
* Decide if your app is public, invite-only, or restricted to specific people or workspace members
* Set up secure login and registration, including social logins like Google
* Add custom user roles and specify exactly what each role can do (for example, "Create a role called Event Organizer who can add and edit events, but not change app settings")
* Adjust privacy and security rules to keep sensitive data safe
You can review and update settings at any time to match your needs as your app grows.
***
## Step 4 | Test your app
Before you share your app, test how everything works from different perspectives.
Interact with the preview like an end user. Click, fill out forms, and check every feature.
Click the **More actions** icon in the top bar and select **Act as a user** to view the app as a specific person or role.
Ask the AI chat to help you test key flows or edge cases, such as "Test as a guest" or "See what an admin can do."
Create test user profiles with different roles or permissions to review what each can access.
Use an incognito or private browser window to see what a first-time visitor would experience.
Check your app on both desktop and mobile to catch layout or navigation issues.
***
## Step 5 | Share and publish your app
When you are ready to share your app, click **Publish** in the top bar. The publish panel opens on the **Web** tab, with a **Mobile app** tab beside it. After you publish, a window confirms your app is live. It shows your app's address, ways to share it, and next steps such as connecting a custom domain.
From the publish panel, you can:
* Copy your app's web address, or change the part before `.base44.app`.
* Click **Get domain** to use your own address instead.
* Click **Share your app** to invite people by email or share a link on social.
* Set **App visibility** to choose who can open your app.
* Check **Security status**, and run a security scan if it is out of date. It warns you about risks but doesn't stop you from publishing.
* Click **Publish** to put your latest changes live.
***
## Touring the app editor
The app editor is where you build: the AI chat on the left, your app's preview on the right, and the controls for editing, your Dashboard, and publishing in the bar above them. Take the full tour to learn what each part does and where to find it.
A guided tour of the AI chat, preview, Edit mode, canvas, Dashboard, version history, and publishing.
***
## FAQs
Click a question below to learn more.
Your first build uses a small, fixed amount, about 1 credit, no matter how detailed your prompt is or which AI model you choose. After that, each change you ask for costs credits based on how much work it involves and the model you use.
Credits are used only when the AI builds or updates something for you, so previewing your app and clicking through it are always free. Learn more about [credits](/Account-and-billing/Credits) and [plans](/Account-and-billing/Billing-and-plans).
Yes. Base44 automatically adapts your app for mobile devices. Use the device menu in the top bar to switch to the mobile view, check how everything appears, and make sure your layout, buttons, and text are easy to use on any screen size.
If you want to make any changes to the mobile layout, simply ask the AI chat to do it for you.
Yes. You can clone your app at any time. This is useful if you want to test major changes without affecting your live app, or use an existing app as the starting point for a new project.
**To clone from your Apps page:**
1. Go to your [**Apps page**](https://app.base44.com/apps).
2. Click the **More actions** icon on the app card.
3. Click **Clone app**.
**To clone from the app dashboard:**
1. Click **Dashboard** in your app editor.
2. Click **Settings** in the left menu.
3. Next to **Clone App**, click **Create Copy**.
The cloned app opens automatically and includes the suffix (Copy).
We take care of it automatically. Base44 comes with built-in hosting, so there is no deployment process. When your app is created, it is instantly live and shareable.
Yes. On a [Builder plan](https://base44.com/pricing) or higher, you can download your app's code as a ZIP file or sync it with a GitHub repository. Both options are in the **More actions** menu in the app editor. Learn more about [developer tools](/documentation/building-your-app/developer-tools).
For self-serve guidance while you work, click your workspace name at the bottom left of your account and select **Help & support** to open our docs, or go to [docs.base44.com](/).
If you need more hands-on help, you have a few options to get expert help with your Base44 app.
You can work with a [Base44 Partner](/Getting-Started/Hiring-a-partner) for tailored, one-on-one support on larger or ongoing projects. Partners can help you plan and build full apps, handle complex integrations, and provide long-term strategic guidance. [Choose your partner](https://app.base44.com/partners) →
If you would like feedback from other people building with Base44, you can also [join our Discord community](https://discord.com/invite/ThpYPZpVts). It is a great space to connect with others who can share advice, help, and tips from their own projects.
Yes. You can unpublish your app at any time. When the app is unpublished, people cannot access it until you publish it again. All your data and settings are saved when you unpublish.
**To unpublish your app:**
1. Click **Dashboard** in your app editor.
2. Click **Settings** in the left menu.
3. Scroll to **Danger Zone**. Next to **Unpublish App**, click **Unpublish**, then click **Unpublish** again to confirm.
Base44 is built to work smoothly on all major modern browsers that support ES6+ JavaScript, CSS Grid, Flexbox, and modern DOM APIs. You can use Base44 with current and recent versions of the following browsers:
* **Google Chrome** (version 51 and above for ES6, 57+ for CSS Grid, 29+ for Flexbox)
* **Mozilla Firefox** (version 54 and above for ES6, 52+ for CSS Grid, 28+ for Flexbox)
* **Microsoft Edge (Chromium-based)** (full support since launch)
* **Safari** (version 10.1+ for CSS Grid, 9+ for Flexbox, 10+ for ES6)
* **Opera** (version 38+ for ES6, 44+ for CSS Grid, 12.1+ for Flexbox)
There is limited or no support for Internet Explorer 11 and earlier, and some older Android WebView or legacy browsers may not display content correctly.
As a general guideline, you are covered if you use a modern, auto-updating browser. Internet Explorer 11 is outdated and not recommended for Base44.
Yes, you can charge people to use your app if you are on the Builder plan or higher. You can connect a payment provider, such as Stripe or another service that supports APIs, to accept payments from your app users. Use the Secrets tab to securely store your API keys.
See how to [set up payments](/Setting-up-your-app/setting-up-wix-payments) for your app.
The platform badge is a label that appears at the bottom right of your live app with the text 'Edit with Base44'. It lets people know that you built your app with Base44, and allows anyone to create a copy of your app into their own account so that they can edit their own version.
**Notes:**
* Removing the platform badge is available on the [Starter plan and above](https://base44.com/pricing).
* If your app is set to private, the badge is not displayed.
* If your app is set to public, everyone can see the badge. If somebody clicks it, it creates a copy of your app into their own account so that they can edit their own version of the app.
**To show or hide the badge:**
1. Click **Dashboard** in your app editor.
2. Click **Settings** in the left menu.
3. Turn the **Platform Badge** toggle on or off.
**Need more help or inspiration?**
Explore [Base44's templates](https://app.base44.com/app-templates) to get ideas or start with a base for your app.
# Getting to know the app editor
Source: https://docs.base44.com/Getting-Started/app-editor-overview
Take a tour of the Base44 app editor: the AI chat, preview, Edit mode, canvas, Dashboard, version history, branches, and publishing, and where to find each.
The app editor is where you build your Base44 app. You describe what you want in the AI chat on the left, and your app updates in the preview on the right, so you see every change as it happens. Use this tour to learn what each part of the app editor does and where to find it, then follow the links when you want to go deeper.
***
## At a glance
The app editor has 2 main areas: the AI chat on the left, and your app on the right. The controls you use most sit in the bar above them. Hover over or tap a number to see what each part does.
New to Base44? Start in the AI chat. You can build a whole app just by chatting, and come back to the rest of the app editor when you need it. Nothing you build is live until you click **Publish**, and you can undo any change, so experiment freely.
***
## Chatting with AI
The AI chat on the left is where you build. Describe what you want in plain words, and the AI updates your app. The message box also lets you attach files, choose a model, and set custom instructions. Learn more about [using the AI chat](/Building-your-app/AI-chat-modes).
The AI chat has 2 modes. Switch between them with the mode button in the message box, or press **Cmd+.** (Mac) or **Ctrl+.** (Windows):
* **Build:** The AI changes your app as you chat.
* **Discuss:** Ask questions or plan your next change. The AI doesn't change your code until you approve.
Not sure how to ask for something? Use **Discuss** to talk it through first, then switch to **Build** when you're ready. Learn more about [writing good prompts](/Getting-Started/Prompt-guide).
***
## Previewing your app
The preview on the right shows your app as the people using it see it. Click through it to test your app as you build.
At the top of the preview, you can:
* **Open another page:** Type a page path in the page field, for example `/home`. Learn more about [managing your pages](/Building-your-app/managing-your-pages).
* **Refresh the preview:** Click the refresh icon at the start of the page field.
* **Check other screen sizes:** Click the device icon at the end of the page field to switch between desktop, tablet, and mobile.
* **Edit by hand:** Click **Edit**, then click any element in your app to change its text, colors, fonts, or spacing without using the AI chat. Learn more about [designing your app](/Building-your-app/Design).
* **See every page at once:** Click the **Canvas** icon to lay out all your pages on one board, add sticky notes and drawings, and send ideas to the AI chat. Learn more about [using the canvas](/Building-your-app/Canvas).
***
## Undoing changes
Every change is saved as a version, so you can always go back. Pick the way that fits what you want to undo:
* **One AI change:** Hover over the message in the chat and click the **Revert** icon under it. Your app goes back to how it was before that message, and later changes are undone too.
* **A change you made by hand:** In **Edit** or **Canvas**, click the undo button in the bar, or press **Cmd+Z** (Mac) or **Ctrl+Z** (Windows).
* **A lot at once:** Click the **Version history** icon above the AI chat to preview any earlier version, restore it to the app editor, or publish it directly while you keep working on your draft.
Learn more about [reverting changes](/Building-your-app/AI-chat-modes#reverting-changes).
***
## Using the Dashboard
Click **Dashboard** at the top of the preview to manage everything behind your app, such as its data, users, domains, and settings. Each section opens from the sidebar on the left. Some sections only appear when your app uses them. For example, **Payments** appears after you connect a payment provider, and **Secrets** appears when your app has backend functions.
| Section | What you do there | Learn more |
| - | - | - |
| **Overview** | Check your app's status and who can open it | [App visibility](/Setting-up-your-app/Managing-access#setting-your-app-visibility) |
| **App Users** | Invite people to your app and choose their roles | [Managing access](/Setting-up-your-app/Managing-access) |
| **Data** | View and edit the data your app stores | [Managing your app data](/Building-your-app/Managing-your-app-data) |
| **Analytics** | See how many people visit your app and what they do | [App analytics](/documentation/performance-and-seo/app-analytics) |
| **Marketing** | Improve your SEO and promote your app | [Creating a marketing plan](/promoting-your-app/creating-a-marketing-plan) |
| **Domains** | Change your app's URL or connect a custom domain | [Setting up your domain](/Setting-up-your-app/Setting-up-your-custom-domain) |
| **Integrations** | Connect your app to other services | [Using integrations](/Integrations/Using-integrations) |
| **Security** | Scan your app for security issues and fix them | [Running a security scan](/Setting-up-your-app/running-a-security-scan) |
| **Code** | View and edit your app's code | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Agents** | Add AI agents that work inside your app | [In-app agents](/Building-your-app/AI-agents-for-apps) |
| **Workflows** | Automate tasks that run on a schedule or when something happens | [Creating workflows](/Building-your-app/Creating-workflows) |
| **Emails** | Design the emails your app sends | [Designing emails](/Building-your-app/Designing-emails) |
| **Logs** | Review everything that happens in your app | [Exploring app logs](/Building-your-app/exploring-app-logs) |
| **API** | Connect other tools to your app's data | [Your app's API](/Building-your-app/your-apps-api-page) |
| **Settings** | Change your app's name and general settings, or delete the app | |
| **MCP** | Let AI assistants work with your app | [App MCP](/Integrations/app-mcp) |
Use the search box at the top of the Dashboard sidebar to jump to a section, a data table, or a connector by name.
***
## Publishing your app
When your app is ready, click **Publish** at the top right to put it live. In the **Publish Your App** panel, you can copy your app's link, choose who can open it with **App visibility**, and [connect a custom domain](/Setting-up-your-app/Setting-up-your-custom-domain).
Your live app only changes when you publish. Keep building in the app editor, then click **Publish** again whenever you want people to see your latest version.
***
## Working with others
Click **Add collaborator** (+) next to the avatars at the top right to invite someone to build with you. Everyone sees the same draft, and the avatars show who's in the app editor right now. Use **Comments** at the top of the preview to leave feedback on a specific part of a page. Learn more about [working with collaborators](/Setting-up-your-app/Managing-access#working-with-collaborators) and [commenting on your app](/Building-your-app/Commenting-on-your-app).
***
## Trying ideas safely
Want to try a redesign or a risky new feature without putting your working app at stake? Build it on a branch. A branch is a separate copy of your app, so you can experiment freely while your main version stays exactly as it is. If you like the result, merge it back in. If not, delete the branch and nothing has changed.
To create one, click **Main** next to your app's name above the AI chat. Learn more about [working with branches](/Building-your-app/working-with-branches).
***
## Additional actions
The **More actions** icon at the top right holds tools you use less often.
| Action | What it does | Learn more |
| - | - | - |
| **Act as a user** | Preview your app as one of your users to check what they see | [Testing your app as a user](/Setting-up-your-app/Managing-access#testing-your-app-as-a-user) |
| **Testing agent** | Let an AI agent test your app for you | [The testing agent](/documentation/managing-app-data/testing-agent) |
| **GitHub connection** | Sync your app's code with a GitHub repository | [Integrating with GitHub](/documentation/building-your-app/developer-tools#integrating-with-github) |
| **This page's files** | See the code files behind the page you're on, or click **See all files** | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Compare with live code** | See what changed since you last published | [Reverting changes](/Building-your-app/AI-chat-modes#reverting-changes) |
| **Activity monitor** | See what's running in your app right now | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Export project as ZIP** | Download your app's code | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Send to Coding Agent** | Continue building with your own coding agent, such as Claude, ChatGPT, or a local CLI agent. Available on the Builder plan or higher. | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Help center** | Open the Base44 help center | |
***
## Moving around faster
Press **Cmd+K** (Mac) or **Ctrl+K** (Windows) to open the command palette. Search for pages, files, and data, jump straight to an action such as publishing your app or inviting a collaborator, or search the Base44 docs, all without leaving the app editor. The command palette also works on your workspace home page.
These shortcuts work across the app editor:
| Shortcut | What it does |
| - | - |
| **Cmd+K** / **Ctrl+K** | Open the command palette |
| **Cmd+.** / **Ctrl+.** | Switch between Build and Discuss |
| **Cmd+Z** / **Ctrl+Z** | Undo a change in Edit mode or on the canvas |
| **Cmd+Shift+Z** / **Ctrl+Shift+Z** | Redo a change in Edit mode or on the canvas |
| **Enter** | Send your message in the AI chat |
| **Shift+Enter** | Start a new line in your message |
You can swap the Enter and Shift+Enter shortcuts in your [account preferences](/documentation/account-and-billing/managing-your-account). The canvas has its own set of [drawing and layout shortcuts](/Building-your-app/Canvas).
***
## FAQs
Click a question below to learn more about finding your way around the app editor.
Yes. You can build from your phone's browser by opening [base44.com](https://base44.com) and signing in, or from the Base44 app for iOS and Android. On a phone, your app's preview fills the screen, and you tap **Chat to Edit** to open the AI chat.
Some features are only available on desktop, including Edit mode, data permissions, editing code, working with APIs, and app templates. Learn more about [using Base44 on mobile](/Building-your-app/Mobile-experience).
No. Your work in the app editor is kept as you go, and every AI change becomes a version you can return to. Your live app only changes when you click **Publish**.
No. The preview is only for you and your collaborators. Nobody else can open your app until you publish it, and after that, who can open it depends on your [app visibility](/Setting-up-your-app/Managing-access#setting-your-app-visibility).
What you see depends on your role and your app. For example, people with view-only access don't see **Edit** or the **More actions** menu. Some Dashboard sections only appear once your app uses them, and on smaller windows some controls collapse into menus.
Try refreshing the page, clearing your browser cache, turning off browser extensions, or opening Base44 in a private window or another browser. If it still won't load, see [troubleshooting](/Community-and-support/Troubleshooting).
***
## Related topics
Go deeper into the parts of the app editor you use most.
Build and Discuss modes, models, Auto approve, and reverting changes.
Change colors, fonts, and layout with Edit mode and themes.
View, edit, import, and export the data your app stores.
Set visibility, invite users, and add collaborators.
# Using Base Code
Source: https://docs.base44.com/Getting-Started/base-code
Make changes to an existing GitHub codebase with the AI chat in Base Code, preview them on a branch, then get them reviewed and merged through pull requests.
[Base Code](https://base44.com/base-code) gives your team a shared cloud environment for an existing codebase without setting up a local development environment. Use the AI chat to make changes on branches, preview your work, and open pull requests for review. GitHub stays the source of truth.
**Before you begin:**
* Your project must be a web or full-stack project in a GitHub repository.
* You need an Editor role or higher in the workspace.
* You need to connect a GitHub account during setup.
***
## Setting up Base Code
Connect a GitHub repository to make changes with the AI chat in Base Code. If your GitHub account is already connected, continue to [choosing a repository](#choosing-a-repository).
### Connecting your GitHub account
Base Code works directly in your GitHub repositories, so it needs access to the ones you want to work on.
**To connect your account:**
1. Go to [Base Code](https://app.base44.com/base-code).
2. Click **Connect GitHub**.
3. Sign in to GitHub if prompted, then authorize **Base44 Builder**.
4. Select the GitHub account or organization, then follow the prompts to install or configure **Base44 Builder** and give it repository access.
### Choosing a repository
Pick the codebase you want to work on, from your own repositories or a copy of one you can't push to.
**To choose a repository from your account:**
1. In [Base Code](https://app.base44.com/base-code), click **View more**.
2. Select a repository.
3. Under **Branch**, keep the selected branch or select another.
4. Click **Connect**.
**To choose a repository by pasting a link:**
1. In [Base Code](https://app.base44.com/base-code), click **View more**.
2. Click **Paste a link**.
3. Paste the GitHub repository URL.
4. Continue based on your access:
* **You have write access:** Keep or change the selected **Branch**, then click **Connect**.
* **You don't have write access:** Under **Your copy on GitHub**, keep or change the suggested name. Select **Fork (public)** and click **Fork and connect**, or select **Private copy** and click **Copy and connect**. Your pull requests target your fork or copy, not the original repository.
**Other ways to open a repository:**
* **Open a listed repository:** Select it on the Base Code page, then click **Open in Base**. It opens on its default branch.
* **Connect another repository:** Click the repository drop-down in the sidebar, then click **Add repository**. On mobile, the repository drop-down on the Base Code page calls it **Add new repository**. Both open **Connect your repository**.
***
## Working on your project
Use the AI chat to make changes to your connected repository and test them in a development preview. As you chat, Base Code commits and pushes your changes to your working branch on GitHub.
Base Code provides a development preview, not production hosting. To release your changes or connect a custom domain, use your project's existing deployment process and hosting provider.
### Making your first change
Base Code starts a new branch from your first request and names it for you, so your change stays separate until you open a pull request. To keep working on an existing GitHub branch, [import it](#importing-a-branch-from-github).
**To make your first change:**
1. Go to [Base Code](https://app.base44.com/base-code).
2. (Optional) If a drop-down appears next to **Create new branch**, select the branch to start from.
3. In the prompt box, describe the change you want to make. For example:
```text theme={null}
Add a dark mode toggle to the settings page,
and remember the choice between visits.
```
4. Click **Create branch** to open the new branch and start making changes.
5. Review the change in **Preview**, then ask the AI chat for any adjustments.
### Reviewing your changes
Check exactly what changed before you ask anyone to review it.
**To review your changes:**
1. Open the changes you want to check:
* **One reply's changes:** Use the file list below that reply in the AI chat.
* **Every change on the branch:** Click **Create PR** at the top of the editor, or click the PR number if one already exists.
2. Click a file name to see its diff, with the lines added and removed.
### Reverting a file
Undo the changes you don't want in a file, with the revert saved as a new commit on your branch.
Reverting a file undoes all its committed changes on the branch, not just the changes from one reply.
**To revert a file:**
1. Click the revert icon next to the file in either file list, including an open pull request's.
2. Check that the right file appears in **Revert branch changes?**, then click **Revert**.
***
## Managing branches
Branches let you work on several changes at once without them affecting each other. Each branch has its own development environment in Base Code and its own pull request.
The branch sidebar is available on desktop. On mobile, use the branch drop-down.
### Working from the sidebar
See where each of your branches stands and go straight to the one that needs you.
**Your branches** in the sidebar lists the branches you created. Merged branches stay in the list, so you can still read their chats.
Each branch has a status icon. Hover over it to see the label, with the pull request number when there is one.
| What the icon shows | When you see it |
| - | - |
| Needs you | **Conflicts**, **Failed checks**, or **Changes requested** |
| On hold | **CI running** or **Review pending** |
| Nothing blocking | **Open** or **Approved** |
| Done | **Merged** |
| Not in review yet | **Draft**: you haven't opened a pull request for this branch, or the one you opened is still a draft on GitHub |
While the AI is building, the icon is replaced by **Working**, and by **Merging** while a merge runs. A dot on the right of a branch means the AI finished there and you haven't opened it since.
To open a branch, click it under **Your branches**. You can also click the branch drop-down above the AI chat and select a branch.
### Organizing your branches
Keep the branches you're focused on within reach and bring the ones that need you to the top.
**To pin a branch:**
1. Hover over the branch in the sidebar, then click its options icon .
2. Click **Pin**.
Pinned branches sit at the top of **Your branches**, above your groups. To unpin one, click **Unpin** in the same menu.
**To group branches:**
1. Click the **New group** icon next to **Your branches**.
2. Enter a **Group name**, then click **Create group**.
3. Drag a branch onto the group, or click the branch's options icon , click **Move to group**, then select the group.
To take a branch back out, drag it onto **Your branches**, or click its options icon , click **Move to group**, then click **Remove from group**. A group's own options icon has **Rename group** and **Delete group**.
**To sort branches:**
1. Click the **Sort branches** icon next to **Your branches**.
2. Under **Sort by**, select one of the following:
* **Priority:** Branches that need you first, then the ones on hold.
* **Last updated:** Most recently worked on first. This is the default.
* **Manual order:** The order you arranged by dragging.
**Arranging branches by hand:** Drag a branch to put it where you want it. The list switches to **Manual order** and keeps your arrangement until you sort it another way. You can also drag groups to reorder them.
### Creating branches
Start each new change on its own branch, from your default branch or from another branch you're working on.
**To create a branch from the sidebar:**
1. Click **New branch** in the sidebar.
2. Describe your change in the AI chat and send the message.
The sidebar names the branch for you and starts it from your repository's default branch. To start from another branch, use the branch drop-down instead.
**To create a branch from the branch drop-down:**
1. Click the branch drop-down above the AI chat.
2. Click **Create new branch**.
3. Select the starting branch from the drop-down next to **Start from**.
4. Describe your change in the AI chat and send the message.
### Importing a branch from GitHub
Import an existing GitHub branch to keep working on it in Base Code. Your changes are committed and pushed to that branch.
**To import a branch:**
1. Click the branch drop-down above the AI chat.
2. Click **Import from GitHub**.
3. Select the branch.
4. Click **Import**.
### Deleting a branch
Clear out branches you're done with, along with their chats, while the branches stay on GitHub.
**To delete a branch:**
1. Open the branch's menu in one of these places:
* In the sidebar, hover over the branch, then click its options icon .
* In the branch drop-down above the AI chat, click **More actions** next to the branch.
2. Click **Delete**.
3. Click **Delete branch** to confirm.
***
## Working with pull requests
Get your changes reviewed and merged through pull requests on GitHub.
Base Code always uses your own GitHub connection, whatever your workspace sets for its other apps. Your GitHub account needs to be connected and have write access to the repository. Base44 opens pull requests from your account. Each commit from the AI chat lists you as the author and `base44-builder[bot]` as co-author.
### Opening a pull request
After testing your changes, open a pull request for review.
Your pull request targets the branch your working branch was created from. The AI chat writes the title and description from your conversation and committed changes.
**To open a pull request from the top of the editor:**
1. Click **Create PR** at the top of the editor.
2. Review the changed files in **Create pull request**.
3. Click **Continue in builder**.
4. Review and send the prefilled message in the AI chat.
**Opening a pull request from the branch drop-down:** The drop-down opens a shorter form for the title and description, without the file review.
### Tracking your pull requests
Track the progress of your open pull requests and see which ones need your attention.
**To track your pull requests:**
1. Go to [Base Code](https://app.base44.com/base-code).
2. Under **Your open PRs**, choose what you want to do:
* **Open a pull request:** Click its PR number to open it on GitHub, or click its title to open its branch in Base Code.
* **Filter by status:** Click the filter, then select **All**, **In review**, **Conflicts**, or **Open**.
* **Find a pull request:** Click the search icon and enter its title or number.
* **Sort pull requests:** Click **Sort** to reverse the order by pull request number.
* **Draft:** It's still a draft on GitHub.
* **Open:** No reviewer yet, and nothing is blocking it.
* **In review:** A reviewer is assigned or has requested changes.
* **Approved:** A reviewer approved it.
* **Conflicts:** Your branch has [conflicts to resolve](#resolving-branch-conflicts) with its base branch.
### Resolving branch conflicts
If your pull request has conflicts, the AI chat can resolve them for you. Resolving conflicts merges the pull request's base branch into your working branch.
**To resolve conflicts:**
1. Click **Resolve conflicts** above the prompt box.
2. Review and test the changes the AI makes, especially where both branches changed the same feature.
### Answering review comments
Use the AI chat to address feedback on your pull request.
**To answer review comments:**
1. Ask the AI chat to list unresolved comments on your pull request. It includes the file and line for each thread.
2. Tell it which comments to address and what to change.
3. Review the proposed changes and replies before asking it to post.
4. Ask the AI chat separately to resolve a thread when you're ready.
***
## Adding secrets
Give your project the API keys and other credentials it needs without putting them in your repository.
The AI chat prompts you when a secret is required. Secrets are encrypted, shared across branches and kept when your environment rebuilds.
Changes and removals apply automatically to running branches. Inactive branches pick them up when you next open them.
**To add a secret:**
1. Click **Dashboard** at the top of the editor.
2. Click **Secrets**.
3. Click **Add Secret**.
4. Enter the **Secret Name** and **Secret Value**, then click **Add Secret**.
**Adding secrets in bulk:** Click **Import .env**, then upload or paste your file. Each `KEY=VALUE` line becomes a secret. An existing secret with the same name is overwritten.
***
## Collaborating with teammates
Your team can contribute to the same project and review each other's changes through pull requests.
Anyone with an Editor role or higher in the workspace can open an existing Base Code project without a separate app invitation. To invite someone outside your workspace, [add them as a collaborator](/Setting-up-your-app/Managing-access#working-with-collaborators) from the app editor.
***
## FAQs
Base Code works with web and full-stack projects. If you're building your app in Base44, keep building it in the app editor, and use the [GitHub integration](/developers/app-code/local-development/github) to sync it with a repository.
Base Code checks the project at the root of your repository. That project must be a web or full-stack project. A mobile app in a subfolder is fine as long as the root project qualifies.
On the Base Code page, click **View more**, or click **Add repository** in the sidebar's repository drop-down, to open **Connect your repository**. If your repository is still missing, give Base44 access to it on GitHub.
**To update repository access:**
1. On GitHub, give **Base44 Builder** access to the repository.
2. Reopen **Connect your repository** in Base Code.
Your workspace doesn't allow repositories from this GitHub organization. Ask someone who manages your workspace's GitHub settings to check that the organization is connected and **Allowed** under **Build tools** > **GitHub**, then try again.
If you only have read access, [connect a fork or private copy](#paste-a-link) instead. When your workspace limits repositories to approved organizations, you need write access to a repository in one of them.
Workspace settings control who can connect GitHub organizations and which organizations are available for new apps. Anyone in the workspace can use an organization that is already connected. This only controls who can add a new one.
**To manage GitHub organizations:**
1. Go to your workspace settings.
2. Under **Build tools**, click **GitHub**.
3. Choose what you want to do:
* **Choose who can connect organizations:** Under **Who can connect organizations**, select who can add an organization.
* **Filter organizations:** In **Connected organizations**, use the filter to show **All**, **Active**, or **Disconnected** organizations.
* **Make an organization available for new apps:** Under **Connected organizations**, use **Allowed** to control which organizations are available. Changing **Allowed** doesn't affect apps already using that organization.
* **Disconnect an organization:** Click the actions icon next to the organization, click **Disconnect organization**, then click **Disconnect**.
Disconnecting stops apps tied to that organization's workspace connection from syncing with GitHub. The confirmation lists the affected apps. **Base44 Builder** stays installed on GitHub, so you can reconnect the organization.
Yes. Base Code uses **Auto mode** by default to choose an AI model for each request.
**To choose an AI model:**
1. Click the model at the bottom of the AI chat.
2. Select the model you want to work with.
For more details, see [choosing an AI model](/Building-your-app/AI-chat-modes#choosing-your-model).
Your GitHub account must be connected and have write access to the repository. Otherwise, the project shows a **Read only** badge. You can discuss the project in the AI chat and switch branches, but you can't make changes or create a branch.
**To connect your GitHub account:**
1. Open the project.
2. In the **Connect your GitHub account** banner, click **Connect account**.
3. Authorize **Base44 Builder** on GitHub.
If you see **GitHub write access required**, your account is connected but lacks write access. Ask a repository admin to grant it, then click **Recheck permissions**.
When you return to Base Code, your project environment starts back up so you can continue working. If your environment needs rebuilding, Base Code uses the latest commit on your GitHub branch. Ask the AI chat to confirm your latest changes are on that branch before you leave.
Yes. Ask the AI chat to add the code using your project's own stack.
Connecting a repository doesn't automatically add or configure Base44 entities, login, or the SDK. Your project keeps its existing database, authentication, and routing.
For a new database or service, [add its connection string or API key as a secret](#adding-secrets).
If setup changes are required and you connected the default branch, Base Code creates a setup branch and commits them there. Its pull request targets the branch you connected. If you connected another branch, Base Code commits any setup changes directly to that branch.
To include unmerged setup changes in a new branch, [start from the branch containing those changes](#creating-branches).
After you open a pull request, new changes on your working branch are added to it, and GitHub runs your repository's configured checks.
Merge your pull request on GitHub, or ask the AI chat to merge it.
Base44 needs permission to open pull requests in your repository. If prompted, click **Review permissions on GitHub**. An owner of the GitHub account or organization that owns the repository needs to approve the requested access. Once approved, return to Base Code and try again.
See Base44's [Privacy Policy](https://base44.com/privacy-policy) for information about how personal information is collected and used. For information about AI model training and your data controls, see [Privacy and security](/Community-and-support/Privacy-and-security).
You can apply a coupon before or after connecting a repository.
Each coupon code applies to up to 10 people in your workspace.
**To apply a coupon:**
1. Go to [Base Code](https://app.base44.com/base-code).
2. Enter your coupon code:
* **Before connecting a repository:** Click **Have a coupon?** at the top right, then enter your code in the dialog.
* **After connecting a repository:** Enter your code in the field under **Have a coupon?**.
3. Click **Apply**.
# Building a website
Source: https://docs.base44.com/Getting-Started/building-a-website
Build a website with Base44. Describe it, customize design and content, make it accessible, connect a domain, publish, and optimize for SEO and AI visibility.
## Why build your website with Base44
Base44 is not only for building apps. It is also an [AI-powered website builder](https://base44.com/ai-website-builder), so you can create a full website just by describing what you want. You do not need any coding or design skills. Base44 builds it for you, including the design, pages, content, hosting, and everything running behind the scenes.
A website is one of the most popular things to build on Base44. Whether you want a simple page to share your work or [a full site for your business](https://base44.com/website-builder/business-site), Base44 handles the technical side so you can focus on your content and your brand.
* A business or agency website
* A landing page for a product or event
* A personal portfolio or resume site
* An online store or product catalog
* A blog or content site
* A booking or contact page for your services
Build my website now
***
## Step 1 | Describe your website
Start by going to [Base44](https://app.base44.com/) and telling it what kind of website you want in your own words. You can describe the purpose, the pages you need, and the style you are going for. For example, "a clean one-page site for my photography business with a gallery and a contact form."
When you begin, you are asked to sign up so your work is saved and you can return to your website anytime.
There are a few ways to start, depending on what you already have. Pick the one that fits, then follow the full walkthrough in [Starting from your first prompt](/Getting-Started/starting-from-your-first-prompt).
Describe your website in plain language and let Base44 build it. See [Using a prompt](/Getting-Started/starting-from-your-first-prompt#using-a-prompt).
Talk your website through with the AI first, then turn the plan into a site. See [Using plan mode](/Getting-Started/starting-from-your-first-prompt#using-plan-mode).
Begin from a website you already own and refine it. See [Starting from an existing URL](/Getting-Started/starting-from-your-first-prompt#starting-from-an-existing-url).
Turn a Figma frame into a working website. See [Starting from a Figma design](/Getting-Started/starting-from-your-first-prompt#starting-from-a-figma-design).
Bring in tools like Google Workspace, Slack, and GitHub from your first prompt. See [Connecting your tools](/Getting-Started/starting-from-your-first-prompt#connecting-your-tools).
***
## Step 2 | See your website come to life
Once you share your idea, Base44 builds your website automatically. It designs the layout, chooses colors and fonts, arranges your sections, and adds the pages and features you asked for, such as a contact form, a gallery, or a booking section.
Base44 keeps simple sites lean, so your website may start as a single page. Ask the AI to add more pages, such as an About or Contact page, whenever you need them.
Everything technical is handled for you in the background, including hosting, data storage, and any login or signup flows your site needs. Watch your website appear in the preview window as Base44 works, and click through it to try it out right away.
***
## Step 3 | Customize your design and content
Once your website is built, you can make it your own. The easiest way is with the AI chat. Type what you want to change, and Base44 updates your site. For example, "Change the main color to deep green," or "Add an About page with our team photos and a short story."
To brainstorm or ask questions before making changes, use Discuss mode in the AI chat. It uses fewer credits. [Learn more about the AI chat modes](/Building-your-app/AI-chat-modes).
There are lots of ways to shape your website:
Change colors, fonts, spacing, and styling to match your brand. You can apply changes across the whole site or to a single page. See [Customizing the design of your app](/Building-your-app/Design).
Set up a design system, responsive layouts, and reusable page structures so every page feels part of the same site. See [Design foundations and layout](/Building-your-app/Design-foundations-and-layout).
Add new pages, control which pages appear in your navigation, and decide which are public. See [Managing your app pages](/Building-your-app/managing-your-pages).
Upload your logo, photos, videos, and other files to make your website stand out. See [Uploading and managing media](/Building-your-app/Using-media).
***
## Step 4 | Make your website accessible
An accessible website works for everyone, including people who use screen readers, navigate with a keyboard, or need larger text and clear contrast. Accessibility also improves your search visibility, since the same structure that helps people helps search engines understand your pages.
Keep this checklist in mind as you build:
Use clear heading levels so each page has one main heading and a logical structure.
Add descriptive alt text to your images so screen readers can describe them.
Choose color combinations with enough contrast between text and background.
Write descriptive link text, such as "Read our pricing," instead of "Click here."
Make sure people can reach every menu, button, and form using only a keyboard.
You can ask the AI chat to help, for example "Check my homepage for accessibility issues and fix the color contrast." For more on building an accessible, well-structured site, see [Design foundations and layout](/Building-your-app/Design-foundations-and-layout).
***
## Step 5 | Test your website
Before you share your website, test how it looks and works from your visitors' perspective.
Click through the preview like a visitor, following your menus and checking every link.
Check your site on both desktop and mobile to catch layout or navigation issues.
Open your site in an incognito or private browser window to see what a first-time visitor experiences.
Test every form, signup, and payment flow end to end to confirm they work and you receive the data.
Proofread your text and check that images and buttons look and work as expected.
Ask the AI chat to help you test key flows, such as submitting your contact form.
***
## Step 6 | Connect a domain
Your website is live on a Base44 web address as soon as it is built. Connecting your own domain, such as `yourbusiness.com`, makes your site look professional, easier to remember, and easier to share. It also has a big impact on your search ranking, since search engines treat sites on a custom domain as more trustworthy than ones on a shared subdomain.
**You have a few ways to set up a domain:**
* Buy a domain directly from Base44 for the simplest setup, with DNS and SSL handled for you. See [Buying a domain with Wix](/Setting-up-your-app/Buying-a-domain-with-Wix).
* Connect a domain you already own by updating your DNS records. See [Connecting an external domain](/Setting-up-your-app/Connecting-an-external-domain).
* Send your website's emails from your own domain, such as `hello@yourbusiness.com`. See [Sending emails from a custom domain](/Setting-up-your-app/Sending-emails-from-a-custom-domain).
For an overview of how domains work in Base44, see [Connecting a domain to your app](/Setting-up-your-app/Setting-up-your-custom-domain).
***
## Step 7 | Publish and share your website
When you are ready to go live, click **Publish** in the top bar. Publishing pushes your latest changes to your live website so visitors can see them. After you publish, a window confirms your website is live. It shows its address, ways to share it, and next steps such as connecting a custom domain.
**From the publish menu, you can:**
* Copy your website's web address, or edit the part before `.base44.app`.
* Click **Get domain** to use your own address instead.
* Click **Share your app** to get a link you can send by email or post on social.
* Set **App visibility** to choose who can access your site.
* Check **Security status**, and run a security scan if it is out of date.
* Click **Publish** to push your latest changes live.
***
## Step 8 | Optimize for search and AI visibility
Once your website is published and connected to a domain, you can help people find it. Base44 handles the technical foundation of search engine optimization (SEO) and generative engine optimization (GEO) for you, so your site can show up both in search engines like Google and in AI tools like ChatGPT and Gemini.
Your website must be published before search engines and AI tools can reach it. Connecting a custom domain is the single biggest improvement you can make to your search visibility.
The **SEO & GEO** page in your app dashboard is where you manage this. Run a scan to get a score and a prioritized checklist, set custom titles and descriptions for each page, and control indexing and structured data.
**To get your website found:**
1. Learn the fundamentals in [Getting your app found in search](/Performance-and-SEO/SEO-and-search-visibility).
2. Run a scan and fix issues from your dashboard. See [Optimizing your app's SEO & GEO](/Performance-and-SEO/checking-your-seo-and-geo).
***
## Step 9 | Promote and grow your website
With your website live, you can start bringing people to it.
* Generate a social promotion strategy and ready-to-post content for your site. See [Promoting your app](/promoting-your-app/social-content).
* Submit your site to Launchpad for a chance to get featured and reach the Base44 community. See [Submitting your app to Launchpad](/promoting-your-app/submitting-to-launchpad).
***
## FAQs
Click a question below to learn more.
Your first build uses a small, fixed amount, about 1 credit, no matter how detailed your prompt is or which AI model you choose. After that, each change you ask for costs credits based on how much work it involves and the model you use.
Credits are used only when the AI builds or updates something for you, so previewing your website and clicking through it are always free. Learn more about [credits](/Account-and-billing/Credits) and [plans](/Account-and-billing/Billing-and-plans).
No. Your website is live on a Base44 web address as soon as it is built, and you can share that address right away. A custom domain is optional, but it makes your site look more professional and has a big impact on your search ranking.
Yes. Base44 automatically adapts your website for mobile devices. Use the device menu in the top bar to switch to the mobile view and check how everything looks. If you want to adjust the mobile layout, ask the AI chat to do it for you.
Publish your website, connect a custom domain, then run an SEO & GEO scan from your app dashboard and fix the issues it finds. For the full process, see [Optimizing your app's SEO & GEO](/Performance-and-SEO/checking-your-seo-and-geo).
Yes. The **Meta tags** tab on the **SEO & GEO** page lets you set a custom title and description for each public page. These control what appears in search results and when someone shares a link to your site. See [Optimizing your app's SEO & GEO](/Performance-and-SEO/checking-your-seo-and-geo).
Yes. Keep editing your website with the AI chat or manual changes at any time. Your changes go live the next time you click **Publish**.
Yes. You can unpublish your website at any time. When it is unpublished, people cannot access it until you publish it again. All your data and settings are saved when you unpublish.
**To unpublish your website:**
1. Click **Dashboard** in your app editor.
2. Click **Settings** in the left menu.
3. Scroll to **Danger Zone**. Next to **Unpublish App**, click **Unpublish**, then click **Unpublish** again to confirm.
Yes, on the Builder plan or higher. You can connect a payment provider such as Stripe to accept payments. See how to [set up payments](/Setting-up-your-app/setting-up-wix-payments) for your site.
For self-serve guidance while you work, click your workspace name at the bottom left of your account and select **Help & support** to open our docs, or go to [docs.base44.com](/).
If you need more hands-on help, you have a few options to get expert help with your Base44 website.
You can work with a [Base44 Partner](/Getting-Started/Hiring-a-partner) for tailored, one-on-one support on larger or ongoing projects. Partners can help you plan and build full sites and apps, handle complex integrations, and provide long-term strategic guidance. [Choose your partner](https://app.base44.com/partners) →
If you would like feedback from other people building with Base44, you can also [join our Discord community](https://discord.com/invite/ThpYPZpVts). It is a great space to connect with others who can share advice, help, and tips from their own projects.
**Need more help or inspiration?**
Explore [Base44's templates](https://app.base44.com/app-templates) to start your website from a ready-made base.
# Importing from Figma
Source: https://docs.base44.com/Getting-Started/import-from-figma
Turn your Figma designs into working apps and pages. Import a frame to start a new app, or add Figma pages to an existing app at any point in the app editor.
Base44 connects to Figma so you can build directly from your designs. Import a Figma frame when starting a new app, or add pages from Figma to an existing app at any point during development.
* **Figma seat:** You must have an Editor seat. Figma blocks API access for View and Collaborator accounts.
* **Design file:** You must use a Figma Design file. FigJam, Slides, and other file types are not supported.
* **Public frame link:** Your frame link must be set to **Anyone with the link – Can view**. In Figma, click **Share** to update this. You can set it back to private after the import.
You can connect one Figma account per workspace.
***
## Starting an app from Figma
Use **Import from Figma** on the home screen to turn a Figma frame into a new Base44 app. Base44 recreates the layout, structure, and visual style of your design as a starting point.
**To start a new app from a Figma design:**
1. Go to [Base44](https://base44.com).
2. Click the **+** icon in the prompt box.
3. Click **Import from Figma**.
4. Click **Connect to Figma**.
5. Follow the on-screen instructions to give Base44 access to Figma.
6. Paste your Figma link and click **Generate**.
The import focuses on the selected frame or section. Other parts of the Figma file are not included unless you import them separately.
***
## Adding a page from Figma
Once your app is in the app editor, you can add Figma frames as new pages at any point. You are not limited to the initial import. Editor access is required to add pages from Figma. Viewers cannot add pages, and you must wait for any active generation to finish before adding a page.
**To add a page from Figma:**
1. Open your app in the app editor.
2. In the AI chat, click the **+** icon and select **Add page from Figma**.
3. In Figma, right-click the **frame or section** you want to import.
4. Choose **"Copy/Paste as"**, then select **"Copy link to selection"**.
5. Paste the link into the dialog and click **Add page**.
***
## Figma import guidelines
Preparing your Figma file before you import helps Base44 read your design and recreate it as a clean, accurate layout. Follow these guidelines to get the best results.
### Structuring your Figma layout
A clear structure in Figma makes it easier for Base44 to build a responsive layout that matches your intent.
A well-structured home page with clear sections and consistent components gives the best results when you extend the design into a full app.
* **Divide the page into logical sections:** Wrap related content (for example, a hero, feature row, or footer) inside frames or groups so each area of the page is clearly defined.
* **Use auto layout for hierarchy:** Apply `Auto Layout` to components such as cards, navigation bars, and repeating content blocks. For example, an info card with an image, title and description should be grouped as `Frame` or `Group`, or preferably `Auto Layout`. This helps Base44 understand how elements relate to each other and how they should resize.
* **Keep nesting meaningful:** Group elements that belong together (for example, image + title + description in a card), and avoid deep, unnecessary nesting that does not reflect the visual structure.
* **Align and space consistently:** Use consistent padding, gaps, and alignment inside your frames so Base44 can preserve your spacing and hierarchy.
### Working with vectors and shapes
Cleaning up vector elements before import makes positioning and rendering more accurate. Flattening and simplifying vectors reduces surprises in how elements align, scale, and render once they are in Base44.
* **Flatten complex vectors:** If a vector is built from many separate paths (for example, an icon made from multiple shapes), flatten it into a single vector whenever you can.
* **Outline strokes before flattening:** For lines, circles, stars, and similar shapes:
* Use **Outline Stroke** then flatten the result into a single vector element.
* **Remove hidden elements:** Delete layers that are completely hidden or pushed far off canvas so they do not interfere with the imported layout.
* **Simplify fills:** If an element has multiple fills, keep only what you actually need. Base44 only imports the last fill on an element.
### Fonts, effects, and other limitations
Some parts of your Figma design are adapted during import so the resulting layout works reliably in Base44.
* **Fonts:**
* Only Google Fonts are fully supported.
* Custom fonts are replaced with a default font during import. You can update typography later inside Base44.
* **Design effects that may not be preserved exactly:**
* Image filters
* Multiple background layers on a single element
* Variables and variable-driven styles
* **Layout refinements:**
* Fine-tune spacing, responsiveness, and interactions after import using the AI chat or Edit mode.
* If something does not look right, adjust the structure directly in Base44 or update your Figma file and import again from a cleaner frame.
If your design relies heavily on unsupported effects or complex variable setups, expect visual differences after import and plan to refine the result inside Base44.
### Building the rest of your app
Once your Figma frame is imported, you can treat the new page as the foundation for a full app or website.
* Use the imported page as your **home page** and main reference for structure, layout, and visual language.
* Ask the AI chat to:
* Identify which additional pages are missing (for example, About, Pricing, Blog, or Contact).
* Create new pages that follow the same design language and layout principles.
* Connect buttons, menus, and links on the home page to the new internal pages.
**You can use a prompt like:**
> `Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.`
If you see repeated patterns in your imported design (such as cards, feature rows, or call-to-action blocks), mention them in your prompt so the AI can reuse those patterns on the new pages.
# Import from Figma into Base44
Source: https://docs.base44.com/Getting-Started/import-from-figma-guidelines
Prepare your Figma file for import into Base44. Structure your layout, handle vectors, shapes, and fonts, then add a page from Figma and build out your app.
## Before you import from Figma
Preparing your Figma file correctly helps Base44 read your design and recreate it as a working layout.
* Make sure you are working in a **Figma Design** file. FigJam, Slides, and other file types are not supported.
* Select a **single frame or section** that you want to import. Do not use a full document or page-level link.
* In Figma, click **Share** and under **Who has access**, set the link to **Anyone with the link – Can view**. Copy the link for the selected frame or section and paste it into **Import from Figma** in Base44. After the import is complete, you can set the Figma file permissions back to private if you prefer.
Import from Figma focuses on the selected frame or section. Other parts of the Figma file are not brought into Base44 unless you import them separately.
***
## Structuring your Figma layout
A clear structure in Figma makes it easier for Base44 to build a responsive layout that matches your intent.
A well-structured home page with clear sections and consistent components gives the best results when you extend the design into a full app.
* **Divide the page into logical sections:** Wrap related content (for example, a hero, feature row, or footer) inside frames or groups so each area of the page is clearly defined.
* **Use auto layout for hierarchy:** Apply `Auto Layout` to components such as cards, navigation bars, and repeating content blocks. For example, an info card with an image, title and description should be grouped as `Frame` or `Group`, or preferably `Auto Layout`. This helps Base44 understand how elements relate to each other and how they should resize.
* **Keep nesting meaningful:** Group elements that belong together (for example, image + title + description in a card), and avoid deep, unnecessary nesting that does not reflect the visual structure.
* **Align and space consistently:** Use consistent padding, gaps, and alignment inside your frames so Base44 can preserve your spacing and hierarchy.
***
## Working with vectors and shapes
Cleaning up vector elements before import makes positioning and rendering more accurate. Flattening and simplifying vectors reduces surprises in how elements align, scale, and render once they are in Base44.
* **Flatten complex vectors:** If a vector is built from many separate paths (for example, an icon made from multiple shapes), flatten it into a single vector whenever you can.
* **Outline strokes before flattening:** For lines, circles, stars, and similar shapes:
* Use **Outline Stroke** then flatten the result into a single vector element.
* **Remove hidden elements:** Delete layers that are completely hidden or pushed far off canvas so they do not interfere with the imported layout.
* **Simplify fills:** If an element has multiple fills, keep only what you actually need. Base44 only imports the last fill on an element.
***
## Fonts, effects, and other limitations
Some parts of your Figma design are adapted during import so the resulting layout works reliably in Base44.
* **Fonts:**
* Only Google Fonts are fully supported.
* Custom fonts are replaced with a default font during import. You can update typography later inside Base44.
* **Design effects that may not be preserved exactly:**
* Image filters
* Multiple background layers on a single element
* Variables and variable-driven styles
* **Layout refinements:**
* Fine-tune spacing, responsiveness, and interactions after import using the AI chat or Edit mode.
* If something does not look right, adjust the structure directly in Base44 or update your Figma file and import again from a cleaner frame.
If your design relies heavily on unsupported effects or complex variable setups, expect visual differences after import and plan to refine the result inside Base44.
***
## Adding a page from Figma
Once your app is in the app editor, you can keep adding Figma frames as new pages. You are not limited to the initial import: each frame you add becomes a new page in your app.
**To add a page from Figma:**
1. Open your app in the app editor.
2. In the chat input, click the **+** icon.
3. Select **Add page from Figma**.
4. Paste a link to the Figma frame you want to import.
5. Click **Add page**.
Base44 generates a new page from your design and adds it to your app. The same file setup requirements apply: make sure your frame link is set to **Anyone with the link – Can view** before you add it.
Editor access is required to add pages from Figma. Viewers cannot add pages. The app also cannot be processing another prompt at the same time. Wait for any active generation to finish before adding a page.
Importing frames from the same Figma file keeps fonts, colors, and spacing consistent across pages. After adding a page, ask the AI chat to connect navigation between your existing pages and the new one.
***
## Building the rest of your app
Once your Figma frame is imported, you can treat the new page as the foundation for a full app or website.
* Use the imported page as your **home page** and main reference for structure, layout, and visual language.
* Ask the AI chat to:
* Identify which additional pages are missing (for example, About, Pricing, Blog, or Contact).
* Create new pages that follow the same design language and layout principles.
* Connect buttons, menus, and links on the home page to the new internal pages.
**You can use a prompt like:**
> `Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website’s structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.`
If you see repeated patterns in your imported design (such as cards, feature rows, or call-to-action blocks), mention them in your prompt so the AI can reuse those patterns on the new pages.
# Migrating a project to Base44
Source: https://docs.base44.com/Getting-Started/migrating-an-existing-app
Migrate a project to Base44 from Salesforce, HubSpot, Shopify, WordPress, Lovable, or Bolt.new, and see what data, pages, and code come over from each one.
You can migrate an existing project from another platform directly into Base44. Base44 connects to your source and brings over not just the design and structure, but your actual data too: contacts, products, pages, and more. Pick up right where you left off, without starting from scratch.
This works with both SaaS tools like [Salesforce](https://base44.com/migrate/salesforce-migration), [HubSpot](https://base44.com/migrate/hubspot-migration), Shopify, and WordPress, and vibe-coding platforms like Lovable and Bolt.new.
***
## What gets migrated
What Base44 imports depends on the platform. Click your platform below to see what's included.
* 24 standard CRM objects (e.g., Account, Contact, Lead, Opportunity)
* All custom objects
* All scalar and reference fields (with proper types preserved)
* Cross-object relationships
* Contacts, Companies, Deals, Line items
* Owners
* Contact, Company, and Deal schemas
* Products; Orders; Customers; Collections; Pages
* Articles (blog posts); Discounts
* Frontend theme code
* Storefront URL preserved
* Posts, Pages, Categories, Tags
* Media library metadata, Comments
* Users (self-hosted only)
* Site frontend structure
* WooCommerce add-on: Products, Orders, Customers with standard fields
Custom fields are not currently imported. If you need custom fields support, submit a request at [feedback.base44.com](https://feedback.base44.com).
* All user-created tables in the public schema (schema + data)
* Column schema
* Primary keys and foreign keys
* Row level security flag
* Frontend source from GitHub repo
Moving from Lovable? Learn more about [migrating from Lovable to Base44](https://base44.com/migrate/lovable-migration).
Base44 imports 100 items from each entity first so you can preview your app before committing. Once you're happy with the result, you're prompted to migrate all your data.
***
## Migrating an app
Select your platform below to get started.
Import your data and pipelines
Import contacts, companies, and deals
Import your store data
Import an existing website
Migrate entities, data, and frontend code
Migrate entities, data, and frontend code
***
### Salesforce
Base44 connects to your Salesforce account via a secure OAuth connection. Once connected, you can review and select exactly which data to import.
Base44 only reads your data and connects via OAuth. Nothing in your Salesforce org is modified.
**To migrate from Salesforce:**
1. From the Base44 home page, click **+** on the prompt box.
2. Click **Migrate from another platform**.
3. In the **Import existing project** panel, select **Salesforce**.
4. Select your environment: **Production** or **Sandbox**.
5. Click **Connect** and complete the authorization.
6. Go back to Base44, and in the **Choose entities to migrate** panel, select the entities you want to bring over and click **Import & Continue**.
7. On the home page, review the pre-filled prompt and click **Send** to start building your app.
***
### HubSpot
Base44 uses your Private App token to read your HubSpot CRM data. You need to create one in HubSpot with the required read scopes before connecting.
Your Private App token lets Base44 read your CRM data. Base44 only reads your data and nothing in your HubSpot portal is modified.
**To migrate from HubSpot:**
1. From the Base44 home page, click **+** on the prompt box.
2. Click **Migrate from another platform**.
3. In the **Import existing project** panel, select **HubSpot**.
4. Enter your **Private App access token**. To find this:
1. In HubSpot, go to **Settings** > **Integrations** > **Private Apps** > **Create a private app**.
2. Select these read scopes: `crm.objects.contacts.read`, `crm.objects.companies.read`, `crm.objects.deals.read`, `crm.objects.line_items.read`, `crm.objects.owners.read`, `crm.schemas.contacts.read`, `crm.schemas.companies.read`, `crm.schemas.deals.read`.
3. Copy the access token and paste it into Base44.
5. Click **Connect**.
6. In the **Choose entities to migrate** panel, select the entities you want to bring over and click **Import & Continue**.
7. On the home page, review the pre-filled prompt and click **Send** to start building your app.
***
### Shopify
Base44 uses your Shopify app credentials to securely read your store data. Once connected, you can review and select exactly which data to import.
Connecting your Shopify credentials lets Base44 securely read your store data during migration only. Nothing in your Shopify store is modified.
**To migrate from Shopify:**
1. From the Base44 home page, click **+** on the prompt box.
2. Click **Migrate from another platform**.
3. In the **Import existing project** panel, select **Shopify**.
4. Enter your **Store URL** (format: `https://mystore.myshopify.com`).
Make sure to include `http://` or `https://` in the URL.
5. Enter your **Client ID** and **Client Secret**. To find this:
1. In Shopify, click your store name at the top right and select **View Dev Dashboard**.
2. Select your app from the list.
3. Go to **Settings**.
4. Find your **Client ID** and **Client Secret** under **Credentials**.
6. Click **Connect**.
7. Go back to Base44, and in the **Choose entities to migrate** panel, select the entities you want to bring over and click **Import & Continue**.
8. On the home page, review the pre-filled prompt and click **Send** to start building your app.
***
### WordPress
Base44 reads your site content to rebuild it in Base44. Once connected, you can review and select exactly which data to import.
Base44 securely reads your site content during migration only. Nothing on your WordPress site is modified.
Custom fields are not imported. If you need custom fields support, submit a request at [feedback.base44.com](https://feedback.base44.com).
**To migrate from WordPress:**
1. From the Base44 home page, click **+** on the prompt box.
2. Click **Migrate from another platform**.
3. In the **Import existing project** panel, select **WordPress**.
4. Enter your **Site URL**.
5. If you are on a self-hosted WordPress site, also enter your **Username** and **Application Password**.
* Find your Application Password in WordPress under **Users** > **Profile** > **Application Passwords**.
* WordPress.com sites don't require these fields.
6. Click **Connect**.
7. Go back to Base44, and in the **Choose entities to migrate** panel, select the entities you want to bring over and click **Import & Continue**.
8. On the home page, review the pre-filled prompt and click **Send** to start building your app.
***
### Lovable
Lovable stores your app's data in Supabase. Base44 uses your Supabase credentials to read your database schema and data and bring it into Base44.
Base44 securely reads your database schema and data during migration only. Nothing in your Supabase project is modified.
**To migrate from Lovable:**
1. From the Base44 home page, click **+** on the prompt box.
2. Click **Migrate from another platform**.
3. In the **Import existing project** panel, select **Lovable**.
4. (Optional) Click **Connect** next to **GitHub** to import your source code.
5. Enter your **Supabase URL** (format: `https://xxx.supabase.co`).
6. Enter your **Service Role Key**.
1) Go to [supabase.com](https://supabase.com) and sign in with the account linked to your project.
* **Not sure which account?** In Lovable, go to **Settings** > **Connectors** > **Supabase** to see your linked account.
* **Not got a Supabase account?** If Supabase isn't connected yet, go to **Settings** > **Connectors** > **Supabase** and click **Connect Supabase**, then complete the authorization. Use the same email to create an account in Supabase as Lovable.
2) Open your project.
3) Click **Copy** next to the URL at the top of the project homepage and select **Project URL**.
1. In your Supabase project, go to **Settings**, then **API Keys**.
2. Click the **Legacy anon, service\_role API keys** tab.
3. Click **Reveal** next to `service_role` and copy the key.
7. Click **Connect**.
8. In the **Choose entities to migrate** panel, select the entities you want to bring over and click **Import & Continue**.
9. On the home page, review the pre-filled prompt and click **Send** to start building your app.
***
### Bolt.new
Bolt.new stores your app's data in Supabase. Base44 uses your Supabase credentials to read your database schema and data and bring it into Base44.
Base44 securely reads your database schema and data during migration only. Nothing in your Supabase project is modified.
**To migrate from Bolt.new:**
1. From the Base44 home page, click **+** on the prompt box.
2. Click **Migrate from another platform**.
3. In the **Import existing project** panel, select **Bolt.new**.
4. (Optional) Click **Connect** next to **GitHub** to import your source code.
5. Enter your **Supabase URL** (format: `https://xxx.supabase.co`).
6. Enter your **Service Role Key**.
1) Go to [supabase.com](https://supabase.com) and sign in with the account linked to your project.
* **Not sure which account?** In Bolt.new, go to **Settings** > **Connectors** > **Supabase** to see your linked account.
* **Not got a Supabase account?** If Supabase isn't connected yet, go to **Settings** > **Connectors** > **Supabase** and click **Connect Supabase**, then complete the authorization. Use the same email to create an account in Supabase as Bolt.new.
2) Open your project.
3) Click **Copy** next to the URL at the top of the project homepage and select **Project URL**.
1. In your Supabase project, go to **Settings**, then **API Keys**.
2. Click the **Legacy anon, service\_role API keys** tab.
3. Click **Reveal** next to `service_role` and copy the key.
7. Click **Connect**.
8. In the **Choose entities to migrate** panel, select the entities you want to bring over and click **Import & Continue**.
9. On the home page, review the pre-filled prompt and click **Send** to start building your app.
***
## FAQs
Click a question below to learn more about migrating to Base44.
**Start from URL** captures the look and feel of any public webpage, with no credentials needed.
**Migrate from another platform** connects to your actual account and brings over your real data, schema, and frontend code. It requires credentials and is designed for when you want to carry your existing work into Base44, not just replicate a design.
Yes. After connecting, Base44 shows you what's available and lets you select what to bring over before the migration runs.
Large datasets can take a while depending on the size of your data. You can leave the page and your migration keeps running in the background.
All third party trademarks depicted in this product are the property of their respective owners. No affiliation or endorsement is implied.
# Starting from your first prompt
Source: https://docs.base44.com/Getting-Started/starting-from-your-first-prompt
Start building on Base44 with your first prompt. Describe your idea, use plan mode, start from a URL or a Figma design, attach files, and connect your tools.
Every app and website on Base44 starts with your first prompt. Go to [Base44](https://app.base44.com/) and describe what you want to build in your own words. There are a few ways to begin, depending on what you already have.
When you begin, you are asked to sign up so your work is saved and you can return to your project anytime.
***
## Using a prompt
Writing what you want in plain language is the simplest way to start. Share as much detail as you like, and refine the design, copy, and structure later.
Describe your idea in your own words. For example, "a simple to-do list," "a client portal where users can log in," or "a clean one-page site for my photography business with a gallery and a contact form." This first prompt gets things started, and you can add features or make changes at any time.
If your prompt leaves something important open, such as what your app does or who it's for, the AI asks a few quick questions in the chat before it builds your app, up to 3 at a time. Pick an answer, or more than one when the options can go together, write your own, or click **Skip question**. Click **Next** to move on, and **Send** after the last question. If you skip or tell it to just build, it builds with its best guess. For details only you know, such as your business name, choose **Use a placeholder** and change it later. These questions appear when you start a new web app, and not in plan mode.
**Getting started with your prompt:**
* **Dictate instead of typing:** Click the **Speech to text** icon in the prompt box to speak your prompt.
* **Get ideas:** Browse the [Prompt library](/Getting-Started/Prompt-library) for ready-made prompts you can copy and adapt, then use the [Prompt guide](/Getting-Started/Prompt-guide) to shape your own.
***
## Using plan mode
Use plan mode when you want help shaping your app or website before you start building. It turns a short conversation into a structured plan you can adjust before Base44 builds anything.
The **Plan progress** panel is rolling out gradually and may not be available on your account yet.
**Plan mode helps you:**
* Get a higher-quality first build by aligning it with your intent
* Reduce back-and-forth later by adding key details up front
* Think through your idea without needing to know what to specify in advance
* Capture more complete requirements, including flows, roles, and constraints
* Move faster from idea to execution while staying in a focused flow
In the prompt box, open the Mode dropdown (it shows **Build** by default), choose **Plan**, then send your prompt. Base44 opens the plan screen, and the conversation starts there.
What follows is a conversation rather than a form. The AI reacts to what you say, suggests things you have not thought of, and asks about what is genuinely missing. Most of its questions come in its own words, so you can answer partly, skip one, or take it somewhere else. Some arrive as a card of options to pick from when the answer is a concrete choice. You do not have to wait to be asked: keep typing while a question is on screen and the AI takes your message into account alongside your answers.
Beside the conversation, **Plan progress** fills in as you talk. It tracks 4 sections, and each one gets a checkmark once there is enough to write it:
* **Intent and goal:** What the app is for.
* **Audience and roles:** Who uses it, and who can do what.
* **Core flows:** The things people actually do in it.
* **Design:** Visual direction. This one comes last, and you can skip it without holding up the plan.
If your first prompt is already detailed enough that none of those are open questions, the AI skips straight to writing the plan.
The design question is the last one you are asked, and it works differently: instead of describing a style, you get 4 working previews of your app's main screen to choose between. Expand one to see it full size, and if it is close but not right, describe what to change and Base44 rebuilds that preview. You can refine each option up to 3 times, regenerate the whole set, or skip the question and settle the look later.
You can also add files to the plan. Under **Files** in the plan panel, attach images, documents, or references you want Base44 to work from.
Base44 writes the plan when those sections are covered. Review it before you build, and if something is missing or wrong, keep typing in the same conversation to change it.
When you are ready, click **Start Building**. Your final plan is sent into the AI chat in the app editor, so you can always scroll back to it later. Base44 opens the app editor and starts building from your plan.
**Important:**
* Plan mode costs only a fraction of a credit per message. Once you click **Start Building**, your first build uses about 1 credit, and further changes cost credits based on the work involved and the model you use.
* You can keep editing in the app editor after the build using prompts and manual changes. Learn more about [getting to know the app editor](/Getting-Started/app-editor-overview).
* A plan conversation holds up to 50 messages. If you reach that, click **Start Building** to carry on in the app editor.
* To use plan mode again, start a new build from the home screen and choose **Plan** in the prompt box's Mode dropdown.
**To start a new build using plan mode:**
1. Go to [Base44](https://app.base44.com/).
2. Enter your first prompt, then click the dropdown arrow next to **Build** in the prompt box and choose **Plan**.
3. Answer the questions and add more details as needed.
4. Click **Start Building** on the plan when you are ready.
***
## Starting from an existing URL
Use **Start from URL** to begin from a website you already own. Base44 recreates the visible front end, including the page structure, key content sections, visual hierarchy, and familiar UI patterns such as hero sections, cards, and lists. This gives you a recognizable starting point in the app editor to refine with AI instead of rebuilding from scratch.
You can choose how Base44 uses the site:
* **Content & Design:** Recreates the site's content and layout to build a similar site.
* **Design only:** Uses the site's visual style to create a new site with the same look and feel.
If you are moving a whole existing site or project onto Base44, see [Migrating a project to Base44](/Getting-Started/migrating-an-existing-app).
**Starting from a URL helps you:**
* Recreate sites you own without redesigning from scratch
* Preserve your brand, layout, and visual hierarchy
* Start migrations with a solid page structure instead of guesswork
* Create high-fidelity prototypes that look and feel real
For example, you can recreate a personal website, upgrade a small-business site into a smarter app with entities like Orders and Customers, turn a landing page into a product with authentication and dashboards, or convert a public concept page into an internal tool. After the build finishes, refine it with prompts to adjust the structure, connect entities and APIs, and add flows and logic.
**Important:**
* This feature is available on all plans, including the Free plan.
* Starting from a URL uses credits during generation.
* You must be the rightful owner of the website you start from, or have full rights to its content, design, and images. Do not use third-party or copyrighted sites without permission.
* Starting from a URL does not copy private backend code, hidden data, or third-party integrations, so you still need to set up those parts manually.
**To start from an existing URL:**
1. Go to [Base44](https://app.base44.com/).
2. Click the **+** icon in the prompt box.
3. Click **Start from URL**.
4. Paste the URL of the website you want to use. Make sure you have the rights to use its content.
5. Select **Content & Design** or **Design only**, depending on what you want to reuse.
6. Click **Add**.
***
## Starting from a Figma design
Use **Import from Figma** to turn an existing Figma design into a working app or website. Base44 recreates the layout, structure, and visual style from your frame, so you continue from a familiar starting point instead of rebuilding from scratch.
For steps, requirements, and guidelines, see [Importing from Figma](/Getting-Started/import-from-figma).
You can also add a page from Figma later on, from inside the app editor, not just at your first prompt.
***
## Attaching files
Attach files to your first prompt so Base44 can build from your own content, data, or reference material instead of starting from a blank page. You can attach images, PDFs, documents, and spreadsheets, among other file types.
Base44 uses what you attach as context for your build:
* Images and PDFs become visual reference, so Base44 can match a design, a screenshot, or a document.
* Spreadsheets and CSV files are read for their columns and sample data, so Base44 can build around your data.
* Word documents, text, and Markdown files are read to inform your content and structure.
Click the **+** menu in the prompt box, choose **Attach files**, then upload from your computer or from Google Drive. The first time you use Google Drive, you are asked to connect your Google account.
***
## Connecting your tools
You can connect your app or website to tools you already use, like Google Workspace, Slack, and GitHub, so Base44 builds with your data and services in mind from your very first prompt. For example, connect Google Calendar so your app can read and create events, or Slack so it can post updates to your team.
Click the **+** menu in the prompt box, choose **Connectors**, select the tools you want, then send your prompt. Learn more in [Connectors overview](/Integrations/Connectors).
***
## FAQs
Click a question below to learn more.
Yes. Your first prompt is only the starting point. Once you are inside the app editor, you can keep building and change everything using the AI chat or manual edits. [Learn how to work with the AI chat](/Building-your-app/AI-chat-modes).
Yes, on a [Builder plan](/Account-and-billing/Billing-and-plans) or higher. Click the **Tools** icon in the prompt box to choose which AI model powers your build. [Learn more about the AI chat and its controls](/Building-your-app/AI-chat-modes).
# Building a Superagent
Source: https://docs.base44.com/Getting-Started/superagent
Build a Superagent to handle work for you. Chat with it, use plugins, run workflows, record meetings, take notes, browse the web, store files, and add channels.
Build [Superagents](https://base44.com/superagents) to handle work for you. Tell your Superagent what you need, and it can turn everyday work into tasks, updates, reports, and automated actions.
Your Superagent can act like a personal assistant, support rep, marketer, or analyst, depending on the job you give it. It can monitor updates, capture leads, prepare reports, run recurring workflows, send updates, and respond through chat or connected channels.
* Act like a personal assistant, support rep, marketer, or analyst, depending on the task.
* Connect to tools like Google Workspace, Slack, GitHub, Notion, and HubSpot.
* Run scheduled workflows, such as daily summaries, weekly reports, and recurring reminders.
* Respond when a trigger happens, such as new app data or activity in a connected tool.
* Monitor systems, tools, and connected services for important updates.
* Join your meetings with a video link and save the notes and action items.
* Keep shared notes that you and your Superagent both read and update.
* Capture leads, track competitors, prepare reports, and organize follow-ups.
* Browse the web to research topics, look things up, and complete tasks for you.
* Use files, memory, and connected tools to respond with more context.
* Work on your Base44 apps from chat, from small edits to running backend functions.
* Communicate through channels like WhatsApp, Telegram, iMessage, Slack, and LINE.
Create a Superagent, connect your tools, and start giving it work to do.
***
## Chatting with your Superagent
Give your Superagent work to do. Describe the outcome you want, ask follow-up questions, refine results, and add context as you go. You can upload files, paste images, or use speech to text to help your Superagent understand the task.
As you interact, your Superagent suggests relevant prompts, connectors, and workflows based on your current conversation. Suggestions can appear directly in the chat input, match the language you use with your Superagent, and be refreshed when you want a different starting point.
Start with a real task you handle often, such as finding new leads, tracking competitors, preparing reports, monitoring emails, or summarizing updates across tools.
You can interact with your Superagent in different ways:
* Type a message in the chat input.
* Use **Speech to text** to dictate a message.
* Use **Voice mode** to have a live conversation.
* Share your screen or camera during a voice call so your Superagent can see what you're working on.
When your Superagent sends you a file it created, such as an image or PDF, the file appears as a preview card in chat. From the card, click **Preview** to open the file, or click the **File options** icon to rename it or select **View in Files** to open it in **Files**.
For heavy or parallel work, your Superagent can delegate tasks to background subagents so several run at once while you keep chatting. Learn more in [Subagents](/superagents/subagents).
To create your Superagent and start your first conversation, see [Creating a Superagent](/superagents/creating-a-superagent).
***
## Using plugins
Use Plugins to connect your Superagent to services and add skills it can run.
* **Connectors:** Services your Superagent can connect to, such as Google Workspace, Slack, GitHub, Notion, or HubSpot. For example, connect Gmail so your Superagent can summarize and draft emails for you.
* **Skills:** Reusable instruction sets that give your Superagent new capabilities. Browse curated Base44 skills, explore the full catalog by category, or create and upload your own.
To learn how to connect tools and add skills, see [Creating a Superagent](/superagents/creating-a-superagent).
***
## Running workflows
Run actions on a schedule or when a trigger happens. Use workflows for recurring work, such as a morning brief every day at 8 AM, or a reminder whenever an email sits unread for a day.
You can set up workflows by chatting with your Superagent, or by choosing a suggested workflow on the **Workflows** page. From **Workflows**, you can manage:
* **Scheduled Workflows:** Run at specific times, such as daily summaries, weekly reports, or recurring reminders.
* **Triggered Workflows:** Run when a trigger happens, such as when your data changes or activity happens in a connected tool.
* **Activity:** Review your recent workflow runs.
To learn how to create and manage workflows, see [Setting up workflows](/superagents/setting-up-workflows).
***
## Recording your meetings
Your Superagent can join meetings that have a video link, such as Google Meet or Zoom, as a notetaker. When the meeting ends, it saves the notes and action items to its notes library and emails them to you. Open **Meetings** in the sidebar to connect your calendar and see your upcoming meetings.
To learn how to connect your calendar and manage recordings, see [Recording your meetings](/superagents/meeting-notes).
***
## Taking notes
Notes is a shared space where you and your Superagent keep the information you both work from, organized by topic. The pinned **For you** note tracks your priorities and anything that needs your attention, and you can add and edit notes of your own. Open **Notes** in the sidebar.
To learn how to create, refresh, and share notes, see [Taking notes with your Superagent](/superagents/taking-notes).
***
## Browsing the web
Your Superagent can browse the web to research topics, look things up, and complete tasks for you. It uses a secure cloud browser that runs in the background, so you can watch it work right from the chat. You do not need to install anything to use it.
To learn more, see [Browsing with your Superagent](/superagents/browser-control).
***
## Storing files
Store documents, folders, and other resources your Superagent can reference, including ones you upload and ones it creates while working. You can upload files, upload folders, or create folders to organize your Superagent's workspace. Open **Files** from the **More** menu in the sidebar.
***
## Reviewing memory
Keep useful context from your conversations. Your Superagent saves durable facts, preferences, instructions, and decisions as knowledge, tracks the goal and next steps of each conversation as working context, and keeps a daily log of your conversation history. Open **Memory** from the **More** menu in the sidebar to review what your agent remembers and where each memory came from.
To learn how to review and manage memory, see [Creating a Superagent](/superagents/creating-a-superagent).
***
## Managing data
View and manage the data your Superagent stores. You can browse records, add and edit them inline, export a table to CSV, inspect a table's structure, and restore recently deleted records. Open **Data** from the **More** menu in the sidebar.
***
## Connecting channels
Connect your Superagent to channels so you can interact with it anywhere, including Base44 chat and messaging apps like WhatsApp, Telegram, iMessage, Slack, and LINE. Once connected, it can respond to messages, run workflows, and format responses for the channel you are using. To connect a channel, open **Agent Settings** in the sidebar and click **Channels**.
You can also install the **Browser extension** to let your Superagent work in Chrome. Learn more about [browsing with your Superagent](/superagents/browser-control).
For each channel's setup steps, see [Customizing your Superagent](/superagents/customizing-your-superagent#connecting-channels).
You can also interact with your Superagent in the Base44 mobile app. Download Base44 from the [App Store](https://apps.apple.com/us/app/base44-build-with-ai/id6757432427) or [Google Play](https://play.google.com/store/apps/details?id=com.base44.android).
***
## Customizing your Superagent
Open **Agent Settings** in the sidebar to control how your Superagent works, sounds, and connects to your tools.
* **General:** Choose the AI models your Superagent uses for chat and automations, control which workspace apps it can access, pick its voice, move it to another workspace, or delete it.
* **Credit usage:** See your plan and how many message and integration credits you have used.
* **Sharing & access:** Invite collaborators, create a public template link, and choose how memory works across conversations.
* **Personalization:** Update your Superagent's name, avatar, and identity, and manage what it knows about you.
* **Channels:** Connect messaging apps like WhatsApp, Telegram, iMessage, and Slack.
* **Security:** Manage permissions, store secrets, and set connector rules.
* **Developer:** Connect to your Superagent through the API and webhooks.
For every setting in detail, see [Customizing your Superagent](/superagents/customizing-your-superagent).
***
## FAQs
Click a question below to learn more about building a Superagent.
Most Superagents are built in 4 steps:
1. Define the goal.
2. Connect your tools.
3. Add files, memory, and context.
4. Set up workflows.
You can start simple and refine your Superagent over time.
Both approaches work.
You can create one central Superagent that manages everything across your workspace, or multiple specialized Superagents for specific tasks.
You can also start with focused Superagents and later bring those workflows into your main Superagent. To organize multiple Superagents, see [Managing your Superagents](/superagents/managing-your-superagents).
A Superagent works across your workspace and tools.
An app agent works inside a specific app and is limited to that environment.
Superagents use message credits when processing messages and running workflows. They use integration credits for actions such as image generation, file processing, file upload, and creating download links.
To see your usage, open **Agent Settings** in the sidebar and click **Credit usage**.
No. Base44 does not store recordings of your voice, screen, or camera. Text transcripts of the conversation are saved as part of your chat history, the same as your text messages.
Yes. You can add collaborators to work with the same Superagent, or share your Superagent as a template so others can create their own copy.
When you share a Superagent as a template, you can choose whether to include skills, agent memory, files, and workflows. Connectors are not included, and anyone who creates a copy must reconnect their own accounts and services.
Agent memory may include sensitive data. Review what you include before creating and sharing a template link.
Superagents are personal by default. They run at the account level, not the workspace level. Other workspace members cannot access your Superagent, conversations, memory, or connectors unless you add them as collaborators or share it using an available sharing option.
Workspace admins cannot view your Superagent conversations by default.
Base44 may access relevant Superagent data when needed to provide support, investigate issues, maintain security, or operate the service.
Yes. On an Enterprise plan (Business or Enterprise), workspace owners and admins can disable Superagents from their workspace settings.
**To disable Superagents:**
1. Go to your workspace settings.
2. Click **Basic information**.
3. Turn on the **Disable Superagents** toggle.
Yes. You can transfer your Superagent, including its full conversation history, to a different workspace.
**To move your Superagent:**
1. Open your Superagent.
2. Click **Agent Settings** in the sidebar.
3. Click **General**.
4. Click **Move to workspace**.
5. Select the target workspace from the dropdown.
6. Click **Move agent** to confirm.
Conversation history is preserved after the move. The agent belongs to you in the new workspace. This action cannot be undone.
You must be a member of the target workspace to move an agent to it. Who can move agents out depends on the source workspace's **App transfers** setting. On an Enterprise plan (Business or Enterprise), workspace admins can move agents by default. On other plans, only the workspace owner can.
Yes. Deleting a Superagent moves it to Recently deleted, and you can restore it for 30 days.
Its integrations are disconnected as soon as you delete it, and restoring the Superagent does not bring them back.
Create your Superagent, connect your tools, and give it work to handle.
# AI Integrations in Base44
Source: https://docs.base44.com/Integrations/AI-integrations
Connect your app to AI services such as OpenAI, Claude, Groq, or Mistral. Get an API key from your AI provider, then add it in Base44 to use it in your app.
Note: AI integrations are available on the Builder plan and above. If you're on the Free plan, you need to upgrade your app to use backend functions and payment features.
***
## Part 1: The AI provider's side
If you already have your secrets or API keys, you can skip ahead to "The Base44 side" setup
1. Open your provider’s developer portal in a new browser tab
We're using OpenAI for this example and their developer portal is at: [https://platform.openai.com](https://platform.openai.com)
2. Log in or create a new account
3. Go to the **API keys** section
1. Go to your provider’s **billing** or **payment** section.
To obtain and utilize an OpenAI API key, a paid account is required. While creating an OpenAI account is free, using the API necessitates funding the account with a credit balance or having a billing method on file. OpenAI operates on a pay-per-use model for its API services, where charges are incurred based on the actual usage of the models.
2. Add a valid payment method such as a credit card or PayPal.
3. (Optional) Set up a spending limit to control costs.
4. Make sure your account has active credits if your provider requires it.
1. In your provider’s API keys section, click **Create new API key**
Note: The button text may be different across providers. Sometimes it may be called "Create new secret"
2. Copy the generated key immediately because you may not be able to see it again.
***
## Part 2: The Base44 side
1. Go to Base44 and click **Integrations**.
Make sure you're logged into Base44 to view the [Integrations catalog page](https://app.base44.com/integrations-catalog)
2. Use the search bar or scroll to find your **AI provider**.
3. Select your **AI provider** and click **Use this integration**. (In this example we are using OpenAI.)
1. Type out your app idea inside the AI chat box
2. Paste the key when prompted
Example: For OpenAI you might see: OPENAI\_API\_KEY
Optional: You can save your key securely in **Dashboard → Secrets** so you can reuse it later.
Important: Never paste API keys into public code, visible components, or prompts.
1. Once your app has been created, in the Base44 chat, describe the task you want the AI to perform
2. Base44 creates the backend and frontend components for you.
3. You can improve the AI’s behavior with follow-up prompts.
1. Try your AI feature with test inputs or example prompts.
2. Check the AI’s output.
3. Experiment with different styles, tones, or examples until it works the way you want.
When running tests, do not paste real customer data. Use sample or dummy content.
Once everything works:
* Preview your app on different devices
* Deploy it and share with others
* Monitor your **API usage** in your provider’s dashboard
***
## Recap
What you did (no coding required)
* Selected an AI provider for your use case.
* Connected it securely with an API key.
* Let Base44 handle the backend setup.
* Used prompts to design your AI’s behavior.
* Tested and launched your AI-powered app.
You now have a working AI integration. You can repeat these steps for any provider that uses API keys, not just OpenAI.
## FAQ
You can still connect it with help from the Base44 AI. The process is a little more manual, but the AI guides you step by step.
Say: `"Use the provider “[provider name]”. I have an api key. Help me connect it and create a simple test. Ask me for the details you need."`
Keep your API key somewhere safe until the AI asks for it. You also need a few details from your provider’s documentation.
**Some important requirements for manual setup**\
Your provider needs to offer a standard online API that works over https (often called a “REST API”). This means:
* A web address (URL) where Base44 can send requests.
* An API key for authentication.\
Instructions from the provider on what information to send and how it should be formatted.
* Details on how the provider sends responses back, ideally in a format like JSON (a common way to send structured text).
Store it in Base44’s **Secrets** section or a password manager. Never share it in public code, screenshots, or chat messages.
Your AI integration stops working until you add more credits or update your billing settings with the provider.
No. You can set everything up by following the steps in the guide and writing prompts in plain language.
Yes. You can connect to a different provider at any time. You need to add the new API key in Base44 and may need to update your prompts or components so they work with the new provider’s API.
Most AI providers let you set spending limits or usage caps in your account’s billing settings. You can also monitor your usage in their dashboard. For testing, try shorter prompts or smaller requests to keep costs low. Keep in mind that each provider’s cost controls work a little differently, so it’s a good idea to check their help docs.
Make your prompt more specific. Include clear instructions, important context, and examples of what you want. If possible, tell the AI what *not* to include. You can also try switching to a different model if your provider offers one that is more focused on accuracy. If the problem continues, share the prompt and response with the Base44 AI and ask it to help troubleshoot step by step.
“If you get stuck, paste your prompt and the AI’s response into the Base44 chat and say ‘help me troubleshoot this step by step.’”
Yes. You can add multiple integrations in Base44, you would just need to make sure you specify which provider is used for which function
# Airtable Integration
Source: https://docs.base44.com/Integrations/Airtable-integration
Connect your app to Airtable with an API token and Base ID. Create a new app with a ready-made integration or add Airtable to an existing app, and fix issues.
Note: Airtable integration is available on the Builder plan and above. If you're on the Free plan, you need to upgrade your app to use backend functions and payment features.
***
## Part 1: The Airtable side
If you already have a Airtable API token and Base ID, feel free to skip ahead to [**Part 2: The Base44**](#part-2-the-base44-side) side.
* Go to [Airtable’s token creation page](https://airtable.com/create/tokens/new) .
* Under "Scopes," create a token scoped to the correct workspace/base with at least:
* `data.records:read`
* `schema.bases:read` *(optional but helpful for testing)*
* Name your token, set a credit limit if you use them, and copy the token somewhere safe.
1. Open your Airtable base in a browser.
2. Look at the URL and copy the string starting with "**app**" as this is your Base ID
Example: `https://airtable.com/app123XYZ/...`
***
## Part 2: The Base44 side
Once you have your API token and Base ID, you can connect it to Base44 in 2 different ways:
* Choose this path if you are starting a new app from scratch.
* Choose this path if you are already in the midst of building and would like to integrate Airtable into an existing app.
### Option A: Ready-made integration (create a new app)
* In the integrations catalog, select Airtable
* Then click "Use this integration"
* When prompted, paste:
* `AIRTABLE_API_KEY`
* `AIRTABLE_BASE_ID`
* Here's a sample prompt you can use:
`“Build an internal dashboard. We will connect to my Airtable base and show real records. Include a Sync Status page and start by letting me choose a table before building visuals.”`
* The app runs a test call to Airtable and lists your tables
* You select one
* It fetches real records and shows a raw data table so that the schema is clear
You’ll get a page with the following:
* A **Check Connection** button to re-run the test
* Table list
* Last check time
* Connection status
***
### Option B: Instant integration (connecting to an existing app)
Choose this path if you already have an app in progress.
* Here's the prompt that we typed out in the AI chat to build our sample app:
`“Build an internal dashboard. Let me pick a data source later.”`
* Here's a sample prompt that we pasted in our AI chat:
`Connect this app to Airtable. Ask me for AIRTABLE_API_KEY and AIRTABLE_BASE_ID and save them as Secrets. Add a backend function that can test the connection and fetch records. Create a Sync Status page with a Check Connection button.`
* Click on "**Set secrets**" in the AI chat
* Paste your **API Key** and **Base ID** when prompted
* Prompt the AI chat to show you the data
* Here's a sample prompt that we used for our app:
`Run the connection test to list my tables, let me pick one, then fetch records and show a raw table view before any visuals.`
* Open **Sync Status** and click **Check Connection**
* Choose a table and confirm you see live rows
***
## Troubleshooting
* **403 or connection failed:** Token scope is wrong. Make sure data.records:read is enabled. Add schema.bases:read if table listing fails.
* **Wrong Base ID:** Double-check you copied the app… string from the URL.
* **No data shown:** Make sure the base actually has records and the token has access.
* **Public preview vs app editor session:** Stay logged into the app editor while testing Sync Status.
***
## Common use cases
Here are a few ways teams often use Airtable with Base44:
* **Dashboards:** Pull in Airtable data and visualize it in real time.
* **Data management:** Give teammates a friendly UI for viewing or checking Airtable records.
* **Sync monitors:** Create a Sync Status page to quickly test connections and confirm updates.
* **Internal tools:** Build lightweight apps (like CRM views or content trackers) on top of Airtable without custom code.
# Connectors overview
Source: https://docs.base44.com/Integrations/Connectors
Connectors link your Base44 app to the tools you use, through one shared account or each person's own account.
[Connectors](https://base44.com/integrations) let your Base44 app work with the tools and data your business already uses, from Gmail and Slack to Google Workspace, Snowflake, and Databricks.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors.
***
## About connectors
Connect the tools your team already works in, then build app flows on top of them.
Email reports, alerts, or summaries through **Gmail** or **Outlook**.
Create documents, spreadsheets, presentations, or files using **Google Workspace** tools.
Create and manage events or availability using **Google Calendar** or **Outlook**.
Send notifications or updates to teams through **Slack**.
Track code activity, issues, and pull requests with **GitHub API**.
Query external data and build dashboards with **Snowflake** or **Databricks**.
***
## Connector types
Every connector has a type, which decides whose account the connection uses. You choose the type when you add the connector.
You connect one account once, and everyone who uses your app shares that connection and its data.
Best for a team account or a data platform, like Slack alerts to your team's channel or a Snowflake dashboard.
Each person connects their own account, so your app can work with the data that account can access.
Best for per-person actions, like a CRM where each sales rep sends email from their own Gmail.
Only workspace admins can set up an app user connector. If you aren't an admin, that option is turned off when you add a connector. Ask an admin to set it up.
***
## Adding a connector
You add a connector from the **Connectors** page in your workspace, from an app, or by asking the AI chat.
### From the Connectors page
Add a shared connector so everyone using your app can use the same connected account.
**To add a shared connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for the connector, then click it.
4. If the connector offers both types, select **Shared connector**, then click **Next**.
5. Enter a **Connection name**.
6. Under **Who can access**, select where the connection can be used. The default is **Apps and Super agent**. For Slack, this setting is fixed to **Apps only**.
7. (Optional) Under **Permissions**, select **Read-only** or **Read & write**. This appears only for connectors that offer the choice.
8. Click **Add connector**, then authorize the account you want to share in the provider's window.
To add an app user connector instead, select **App user connector** in step 4, then follow [Using your own OAuth client](#using-your-own-oauth-client).
### From your app
Add a shared connector without leaving the app you're working on.
**To add a shared connector from an app:**
1. In your app, click **Dashboard**, then **Integrations**.
2. Click **Add connector**.
3. Search for the connector, then click it.
4. If the connector offers both types, select **Shared connector**, then click **Next**.
5. (Optional) Under **Permissions**, select **Read-only** or **Read & write**. This appears only for connectors that offer the choice.
6. Click **Add connector**, then authorize the account in the provider's window.
### From the AI chat
Tell the AI chat what you want to connect and how you want to use it, and it suggests connectors based on your app's structure, pages, and data. When a flow needs access, the chat shows a card asking you to approve the connection before it carries on building.
To browse the full list with categories and example prompts, see the [connectors catalog](/Integrations/connectors-catalog).
***
## How connectors work in your app
Once you connect a tool, you can reuse it across pages, flows, and backend functions. Ask the AI chat to build pages, tables, dashboards, or automations that read from or write to the connector.
When you include a connector in a flow, Base44 creates a backend function. To review its code, go to your app's dashboard, [click **Code**](/documentation/building-your-app/editing-code), and open the function under `base44` > `functions`. You can edit it yourself or prompt the AI chat to update it. For example:
```text theme={null}
Send a Slack message to #product-updates when this function runs.
```
If you later add a flow that needs extra permissions, the AI chat asks you to approve the new permissions for that tool.
***
## Using your own OAuth client
Some connectors run on your own OAuth client instead of Base44's. You register the client with the provider, then add its credentials in your workspace, and the connector uses them from then on.
**Before you begin:** You need to be a workspace admin. Register an OAuth application with the provider and get its credentials. Add the [callback URL](#registering-callback-urls) to the provider's allowed redirect URIs.
**To add a connector with your own OAuth client:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for the connector, then click it.
4. If the connector offers both types, select **App user connector**, then click **Next**. Snowflake and Databricks open this form directly.
5. Enter a **Connector name** to identify this configuration.
6. Enter your **Client ID** and, if required, **Client Secret**. Complete any other fields shown for your connector.
7. Under **Scopes**, review the selected scopes and add or remove any as needed. For permissions not listed, enter one scope per line in **Additional scopes**.
8. Click **Add Connector**.
Treat your **Client Secret** like a password. Don't share it or include it in screenshots.
***
## Registering callback URLs
When you set up a connector with your own OAuth client, you register a callback URL with your OAuth provider so it knows where to send people back after they authorize.
### Using the single callback URL
Every connector you add uses one callback URL for all of your apps, so you register it with your OAuth provider once and it keeps working as you build more apps and connect custom domains.
Add this URL to your OAuth provider's allowed redirect URIs:
```
https://connectors.base44.com/api/oauth/callback
```
### Viewing your callback URLs
A connection still on per-app URLs lists them per app, split into **Builder** and **Live app**. The single callback URL is shown on the connector's own form when you add it.
**To view per-app callback URLs:**
1. Click **Connectors** in your workspace sidebar.
2. Next to the connector, click **View**.
3. Next to the connection, click **View connection**.
4. Click **View redirect URIs**.
5. In **OAuth Redirect URIs**, select an app under **App**.
6. Find the URLs under **Builder** and **Live app**. Expand **Per-app URLs (for legacy connectors)** if it's shown.
### Switching an older connection
Connections you added before August 17, 2026 register a separate URL for each app host, and they show a **Per-app URLs** badge next to their name. Each connection is switched over on its own, so one connector can have some connections on the single callback URL and others still on per-app URLs.
Switching is worth doing if you're adding apps or custom domains and keep registering a new URL for each one. If your setup is stable and working, there's no need to switch. Existing connections keep working on their per-app URLs for as long as you leave them there.
Keep your existing per-app callback URLs registered with your provider when you switch. People who connected before the switch still need them, and changes in your provider can take a few minutes to take effect.
**To switch a connection to the single callback URL:**
1. Click **Connectors** in your workspace sidebar.
2. Next to the connector, click **View**.
3. Next to the connection, click **View connection**.
4. Under **Callback URLs**, which reads **Uses per-app callback URLs**, click **Switch to a single URL**.
5. Add the URL shown to your OAuth provider's allowed redirect URIs. Select **I've added the URL to my OAuth provider**, then click **Switch**.
To move a connection back later, open it again and click **Switch back to per-app URLs**. Check that your provider still has the per-app URLs registered first, because a connection created on the single callback URL may never have had them.
***
## Choosing Google scopes
Ask for the narrowest scope that does the job. Reading someone's mail is restricted, while sending on their behalf is sensitive, so an app that only needs to send email can stay out of the restricted group by not asking to read.
Google sorts the permissions an app can ask for into 3 groups, and which group you land in decides how much you have to do before your app can go live. This matters most for Gmail, Drive, Calendar, and Google Fit.
If you connect Google using your own Google Cloud project rather than Base44's managed connector, your app is the one registered with Google, so anything Google asks for here is asked of you rather than of Base44.
| Google's grouping | What it usually covers | What Google asks of you |
| - | - | - |
| Basic | Name, email address, and profile | Nothing extra |
| Sensitive | Broader access to a Google service, such as creating calendar events | App verification, including a review of how you use the data |
| Restricted | Reading the content of someone's messages or files, such as reading Gmail | App verification, and Google may also require a yearly independent security assessment |
When one is required, that assessment is called CASA, and it is run by the App Defense Alliance rather than by Google. It looks at your whole application, including how people sign in, how sessions are handled, and how third-party code is managed.
Plan for this before you build rather than after. Restricted-scope verification can take several weeks, and until it clears, Google may limit how many people can use your app and show an unverified-app warning. Requirements, timings, and exceptions are Google's to set, so check [Google's developer documentation](https://developers.google.com/identity/protocols/oauth2/production-readiness/restricted-scope-verification) before you plan around them.
**Where Base44 fits in:**
* Your Google Cloud project, your OAuth app, and your verification are yours to manage. Base44 cannot submit them on your behalf.
* An assessment asks about the platform your app runs on as well as your own code. [Contact support](/Community-and-support/Contacting-support) early if you are working through one, so the right people can help.
***
## Managing your connectors
Keep each app's connections working: reconnect one that expired, or remove one you no longer need. For an app user connector, each person reconnects their own account from inside your app.
**To manage a connection:**
1. In your app, click **Dashboard**, then **Integrations**.
2. Under **App connections**, find the connection.
3. Click the actions icon (`···`) and select an option:
* **Reconnect** to restore a connection that expired or was revoked.
* **Remove** to delete the connection from this app.
### Managing workspace OAuth configurations
Workspace OAuth configurations are separate from the accounts connected inside an app. You can edit their credentials and scopes, add another connection, or delete a configuration.
Deleting a workspace OAuth configuration can't be undone.
**To manage a workspace OAuth configuration:**
1. Click **Connectors** in your workspace sidebar.
2. Next to the connector, click **View**.
3. Choose what to do:
* To edit a configuration, next to the connection click **View connection**. Update the name, credentials, or scopes, then click **Save Changes**. Leave **Client Secret** empty to keep the existing secret.
* To add another connection to the same connector, such as the other connector type, click **Add another connector**.
* To delete a configuration, next to the connection click **View connection**, then click **Delete Connector** and confirm.
Scope changes apply to new connections. People who already connected keep their approved access until they connect again. Scope lists can also change on the provider's side, so always review the permissions shown during the connection flow.
***
## Controlling workspace availability
Workspace owners and admins can choose which connectors people in the workspace can use. See [Managing connector availability for your workspace](/Enterprise/workspace-connectors).
You need a Business or Enterprise plan to manage connector availability.
***
## FAQs
You may need to reconnect if the account was disconnected, its access was revoked, or the connected service requires you to sign in again. For the steps, see [Managing your connectors](#managing-your-connectors) above.
When you use your own OAuth client, the callback URL registered with the service has to match the one Base44 sends, exactly. Check that `https://connectors.base44.com/api/oauth/callback` is registered in your OAuth app. If the connection is still on per-app URLs, every URL it lists has to be registered instead. To find them, see [Viewing your callback URLs](#viewing-your-callback-urls) above.
An app user connector only works for the people your own OAuth app admits. Most providers hold a new OAuth app to a test or internal audience until you publish or distribute it, so check the audience setting on your OAuth app with the provider.
***
Need more control over a specific API? Use a [custom integration](/documentation/integrations/using-custom-integrations).
# ElevenLabs Integration
Source: https://docs.base44.com/Integrations/Elevenlabs-integration
Add lifelike voice to your app with ElevenLabs. Create a restricted API key in ElevenLabs, add it in Base44, and explore uses like voiceovers and accessibility.
Note: ElevenLabs integration is available on the Builder plan and above. If you're on the Free plan, you need to upgrade your app to use backend functions and payment features.
## Step-by-step setup
### Part 1: The ElevenLabs side
If you already have your ElevenLab secrets, you can skip ahead to "[Part 2 - The Base44 side](#part-2-the-base44-side)" setup
1. Sign in to ElevenLabs and go to: Profile → API Keys → Create key.
2. Copy and save the key somewhere secure, but also keep it handy as you’ll need to paste it into Base44 later.
3. While creating the key, turn on Restrict Key and choose which features this key can use:
**At a minimum, enable Text to Speech.** Keep all other features set to “No access” unless you specifically plan to use them (e.g., Speech to Speech, Speech to Text, Sound Effects, Dubbing, etc.).
Set a **Credit Limit** for this key and scope it to a **Project** if you use projects.
You can pick any voice available to your account whether it's stock/public voices, your own custom or cloned voices, or shared/community voices.
Tip: Add the voice to *My Voices*, then copy its Voice ID (for example: `Bella EXAVITQu4vr4xnSDxMaL`). If you want app users to switch voices, store multiple Voice IDs and display them in a dropdown.
Important: Each API request uses your ElevenLabs credits. All billing happens directly with ElevenLabs, not through Base44.
### Part 2: The Base44 side
Once you have your ElevenLabs API keys, there are 2 ways to use this integration in Base44.
Click the option below to expand and view the instructions.
This option uses our ready-made integration, available in the[ integrations catalog](https://app.base44.com/integrations-catalog)
1. Head over to Base44 and click on Integrations.
Make sure you're logged into Base44 to view the [Integrations catalog page](https://app.base44.com/integrations-catalog)
2. Select ElevenLabs and click on "Use this integration"
3. When prompted, type out your prompt and paste your ELEVENLABS\_API\_KEY and VOICE\_ID. The integration handles the backend wiring to ElevenLabs.
You don’t need to manually activate backend functions. Ready-Made integrations enable them automatically.
1. Open your existing app in the app editor and [set up backend functions](/Integrations/Using-integrations#external-api-calls-with-backend-functions).
2. Use the AI chat to connect ElevenLabs and add your secrets.
\*\*Let's use a training app as an example: \*\*
`Build a personal trainer app for daily workouts. I choose a muscle group, you auto-generate 3-6 exercises with sets, reps, and rest. Show one exercise at a time with work/rest timers.`
\*\*App prompt to conect ElevenLabs: \*\*
`Connect this app to ElevenLabs Text-to-Speech as an Instant integration. Ask me for ELEVENLABS_API_KEY and VOICE_ID and save them as Secrets. Create a backend function that calls ElevenLabs and returns MP3 as a Base44 data URL.`
3. In the AI chat, click **Set secrets**.
Enter your ElevenLabs API key and voice ID.
***
## Popular use cases
* **Interactive Learning Tools:** Read lessons, quizzes, or language exercises aloud with natural voices.
* **Fitness & Wellness Coaches:** Deliver spoken workout instructions, meditation guides, or mindfulness prompts.
* **Accessibility Features:** Provide audio versions of on-screen text for visually impaired people.
* **Customer Support Bots:** Speak responses instead of only showing text, for a more human-like experience.
* **Storytelling & Audiobooks:** Narrate stories, podcasts, or news articles in engaging voices.
* **Games & Entertainment:** Add character voices, mission briefings, or dynamic commentary.
* **E-commerce Guides:** Give audio product descriptions, guided tours, or checkout instructions.
* **Event & Tour Apps:** Offer spoken directions, exhibit descriptions, or venue overviews.
* **Language Learning:** Model pronunciation and practice dialogues in different languages.
* **Custom Brand Voice:** Use a consistent cloned or custom voice for your app’s personality.
## FAQ
Yes. You must have an active ElevenLabs account with credits to process audio. All billing goes through ElevenLabs, not Base44.
Yes, each generation of audio via the API uses your ElevenLabs credits. The number of credits depends on the model and text length
Yes, but only on a **paid plan**. Free-plan accounts are **limited to non-commercial use**. Paid plans (starting with Starter) enable commercial usage
No. You can only create professional voice clones of **your own voice**, even with their permission. A verification process is required to confirm the voice belongs to you
Yes. The ElevenLabs API lets you modify elements like style, stability, similarity, and speed to make the audio sound more natural.
Paste them into the **Secrets** fields when configuring the integration. Base44 encrypts and securely stores secrets.
# Google Places Integration
Source: https://docs.base44.com/Integrations/Google-places-integration
Connect your app to Google Places to search and show real-world places. Get an API key, add it to a new or existing app, and fix errors such as REQUEST_DENIED.
Note: Google Places integration is available on the Builder plan and above. If you're on the Free plan, you need to upgrade your app to use backend functions and payment features.
***
## Part 1: The Google side
If you already have a Google Places API key, feel free to skip ahead to [****Part 2: The Base44 side.****](#part-2-the-base44-side)
* Head to the Google Cloud Console and either pick an existing project or create a new one.
* In the left sidebar, click **APIs and Services** → **Library**.
* Use the search bar to find **Places API (New)** and open it.
* Click **Enable** to activate it for your project.
* From the API’s credentials page, click **Create Key** and copy it.
* Save the key somewhere secure. You’ll need to paste it into Base44.
If you see an error like `REQUEST_DENIED` later on, it usually means billing isn’t enabled or your API key restrictions are too tight. Turning on billing and loosening restrictions during testing often fixes this. If you plan to display a map in the browser, you should also enable the **Maps JavaScript API** and use a browser key restricted to your site.
***
## Part 2: The Base44 side
Once you have your Google Places API key, you can connect it to Base44 in 2 different ways:
* Choose this path if you are starting a new app from scratch.
* Choose this path if you are already in the midst of building and would like to integrate Google Places into an existing app.
### Option A: Ready-made integration (create a new app)
* In Base44 click on Integrations
* Find **Google Places**
* Select **Use this Integration**
* When prompted, paste your Places API key into the field labeled `GOOGLE_PLACES_API_KEY`.
* In the AI chat, describe your app’s purpose.
* For example:\
` Create an app to plan my next trip. I will tell you the city, you will suggest five places, and you will show them on a Google Places map.`
* Base44’s AI builds the basic structure for you.
* Enter a city, search for up to 5 places, and save the trip.
* Check that a map appears with markers for all selected places and that it automatically zooms to fit them.
***
### Option B: Instant integration (connecting to an existing app)
Use this approach when your app is partially built and you want to integrate Places without starting over.
* Here's the prompt that we typed out in the AI chat to build our sample app: \
` “Create an app to plan my next trip. I will tell you the city and you will choose five places for me to visit.”`
* Ask the chat to connect your app to Google Places. You can edit this sample prompt:
`Connect this app to Google Places using the Places API (New). Ask me for GOOGLE_PLACES_API_KEY and save it as a Secret. Create backend functions to:`
`- search by text and return id, displayName, formattedAddress, location, types`
`- get details by place_id with the same fields`
`All calls must run from the backend only.`
* When prompted by the AI Chat, click on `Update GOOGLE_PLACES_API_KEY`
* Then paste your API key into the pop up window
* Add the Trip Planner UI and map.
* You can use a prompt similar to this one to build your interface:
`Add a Trip Planner page with:`
`- a City field`
`- 5 auto-suggest place inputs powered by the backend`
`When a place is selected, save place_id, name, formatted_address, latitude, longitude, types.`
`Add a Google Map that places a marker for each saved place and automatically fits bounds to show them all. Include a Reset button.`
* Enter a city and let the app suggest 5 places, then save.
* Verify that markers appear and the map fits all points.
* Refresh the app to confirm the saved places render correctly.
***
## Troubleshooting
* **403 or REQUEST\_DENIED errors:** Usually the Places API isn’t enabled, the API key is wrong, or key restrictions are too strict. Double‑check that **Places API (New)** is enabled, your billing account is set up, and relax restrictions during testing.
* **Empty suggestions:** Try a different city or search term. Make sure the search is happening on the backend, not in the browser.
* **Map doesn’t fit all points:** Ensure your app calls fitBounds after all markers have been added to the map.
* **Wrong fields saved:** Save exactly the fields listed above (place\_id, name, formatted\_address, latitude, longitude, types) so the map and filters work reliably.
***
## Common use cases
Here are some ideas for how you can leverage the Google Places API inside Base44 apps, based on examples from Google’s own documentation and other Places API providers:
* **Trip planners:** Suggest restaurants, attractions, or hotels when someone picks a city.
* **Local business finders:** Let people search for nearby cafés, shops, or services.
* **Route helpers:** Show gas stations, rest stops, or food spots along a journey.
* **Real estate tools:** Highlight schools, parks, or shops near a property.
* **Emergency services locators:** Quickly find hospitals, police stations, or pharmacies.
* **City guides:** Build apps with curated landmarks, events, or lifestyle spots.
These examples illustrate just a few of the many ways you can use the Places API to add location‑aware features, search tools and personalized recommendations to your Base44 apps.
# Resend Integration
Source: https://docs.base44.com/Integrations/Resend-integration
Send emails from your own domain with Resend. Add and verify your domain in Resend, create an API key, and connect it to your app for confirmations and updates.
**Note:** Resend integration is available on the Builder plan and above. If you're on the Free plan, you need to upgrade your app to use backend functions.
## **Step-by-step setup**
### **Part 1: The Resend side**
If you already have your Resend API keys, you can skip ahead to "[Part 2 - The Base44 side](/Integrations/Resend-integration#part-2%3A-the-base44-side)" setup
If you don’t already have one:
1. Go to [Resend domains](https://resend.com/domains)
2. Sign up and add your domain
After adding your domain
1. Follow the DNS instructions provided by Resend to complete domain verification. You’ll be given DNS records (TXT, MX) to add via your own DNS provider.
2. These help prevent your emails from being flagged as spam.
Resend requires an MX record on a subdomain host such as `send.yourdomain.com`, not on your root domain. If you bought your domain through Base44, MX records are set for your root domain by the email provider you connect and cannot be edited by hand, so contact support with the host, value, and priority for the subdomain record and we will add it for you.
Tip: You can use a subdomain like [updates.yourdomain.com](http://updates.yourdomain.com) or [mail.yourdomain.com](http://mail.yourdomain.com) instead of your main domain. This helps isolate your email sending reputation and can reduce the chance of deliverability issues affecting your primary domain.
1. Go to the [API Keys page](https://resend.com/api-keys)
2. Click on “**Generate API key**”
3. Copy and save the key somewhere secure, but also keep it handy. You’ll need to paste it into Base44 in the next step.
### Part 2: **The Base44 side**
Once you have your Resend API keys, there are 2 ways to use this integration in Base44. Click the option below to expand and view the instructions.
1. Head over to the [integrations catalog page](https://app.base44.com/integrations-catalog)
Make sure you're logged into Base44 to view this page
2. Find Resend and click “**Use this integration**”
3. When prompted, paste your API key from Step 3. Your app is now connected to Resend.
4. Type out your idea / prompt into the AI chat box to build your app
> *“Build me an app to create and send welcome emails when someone signs up.”*
Base44's AI walks you through setting it up.
If you're working in an existing app, you can use the chat to ask:
> *“Add the Resend integration to my app. Prompt me for the API key and send a welcome email when someone subscribes."*
The AI chat then walks you through the steps to set up this integration and prompts you for your API keys.
## **Common use cases for the Base44 x Resend integration**
Here are some examples of how Resend can be used in your Base44 app:
* Welcome emails when someone signs up
* Order confirmations or status updates
* Internal team alerts when forms are submitted
* Reminder emails for actions left incomplete
* Newsletter campaigns for subscribers or app users
* Survey or feedback requests after key actions
* Trigger-based updates to app users or admins
## **FAQ**
Resend is a modern email API platform. It helps developers send transactional and marketing emails easily, with a focus on deliverability and ease of use.
No. The free tier lets you send emails from a verified domain, with up to 3,000 emails per month and up to 1,000 marketing contacts. See [Resend's pricing](https://resend.com/pricing) for current limits.
Use Resend's Audiences to:
* Add contacts via CSV, manually, or via the API.
* Automatically manage unsubscribes with Resend's built-in link.
Unsubscribes are processed automatically:
* You must include an unsubscribe link in all broadcast emails.
* Resend removes people who unsubscribe from the audience you sent to.
* This ensures compliance with laws like CAN-SPAM and GDPR.
Yes, manually:
1. Send a confirmation email after form submission.
2. Include a link for people to click.
3. Only add people to your audience after they confirm.
A few common reasons:
* Your domain isn't verified
* Missing plain-text version
* Using a generic sender (e.g., [onboarding@resend.dev](mailto:onboarding@resend.dev))
* No unsubscribe link in marketing emails
Use Resend’s [Deliverability Insights](https://resend.com/docs/dashboard/emails/deliverability-insights) to get suggestions based on your email setup.
Yes, you can use tools like [React Email](https://react.email/), which is an open-source library for building styled emails with React components. If you use Base44's built-in emails instead, you can design them in **Emails** in your dashboard. Learn more about [designing your app's emails](/Building-your-app/Designing-emails).
Yes, Resend supports both types of emails:
* Transactional emails, like account confirmations, password resets, and real-time notifications
Marketing emails, such as newsletters and promotional campaigns, sent using the [Broadcast tool](https://resend.com/docs/dashboard/broadcasts/introduction) and [Audiences](https://resend.com/docs/dashboard/audiences/introduction)
# Slack Integration
Source: https://docs.base44.com/Integrations/Slack-integration
Send Slack messages from your app with a webhook. Create a webhook in Slack, then add it to a new or existing app to post task updates, and fix common issues.
Note: Slack integration is available on the Builder plan and above.
***
## Part 1: The Slack side
If you already have your Slack webhook, you can skip ahead to [Part 2 - The Base44 side.](#part-2-the-base44-side)
* Head over to: [https://api.slack.com/apps](https://api.slack.com/apps)
* Click **Create an App**
* Click **From Scratch**
* For example: `Base44 Notifications`
* Pick your workspace
* In the sidebar, open **Incoming Webhooks**
* Toggle **Activate Incoming Webhooks** to On
* Scroll down on this same page
* Click on **Add New Webhook to Workspace**
* Select the channel where messages should appear
* Click **Allow**
* Your webhook URL should look similar to this:
`https://hooks.slack.com/services/T000/B000/XXXXXXXX`
* Keep this handy, you'll use this in Base44 when it prompts you for the **secret**.
***
## Part 2: The Base44 side
Once you have your Slack webhook URL, you can connect it to Base44 in 2 different ways:
* Choose this path if you are starting a new app from scratch.
* Choose this path if you are already in the midst of building and would like to integrate Slack into an existing app.
***
### Option A: Ready-made integration (for new apps)
* In Base44 click on Integrations
* Select **Slack**
* Select **Use this Integration**
* When prompted, paste your `SLACK_WEBHOOK_URL`
* Type out your first prompt to scaffold the app
* Sample prompt:
`Build me a to-do list app "Todo" that will send a message to my Slack channel every time a task is created or the status changes to Done, In Progress, or Deleted.`
* Creating or updating your tasks should now post a message into your Slack channel
* If nothing appears, double-check:
* The webhook belongs to the correct channel
* The secret is saved correctly
* Posts are happening from the backend only (not the browser)
***
### Option B: Instant integration (connecting Slack to an existing app)
* Here's the prompt that we typed out in the AI chat to build our sample app: \
`Build me a to-do list app called Todo`
* Sample prompt for the AI Chat:
`Connect this app to Slack using an Incoming Webhook. Ask me for SLACK_WEBHOOK_URL and save it as a Secret. Post to Slack from the backend only.`
* When prompted by the AI Chat, click on `Update SLACK_WEBHOOK_URL secret`
* Then paste your webhook URL into the pop up window
* Tell the AI chat how you want your app to use Slack
* Sample prompt:
`Hook the backend Slack post into the todo lifecycle:`
`- On create: post "New task: {title}"`
`- On status change: post "Task status updated: {title} -> {status}"`
`- On delete: post "Task deleted: {title}"`
`Use the channel from SLACK_WEBHOOK_URL. If a call fails, show a small toast and continue.`
* Create a task.
* Change its status to *In Progress*, then *Done*.
* You should see the corresponding messages land in your Slack channel.
***
## Troubleshooting
* **No message in Slack** → The webhook might point to a different channel. Create a new one for the right channel.
* **Frontend errors (401 / CORS)** → Don’t call Slack directly from the browser. Always post from the backend.
* **Webhook rotated or revoked** → Paste the new webhook into Base44 Secrets.
* **Workspace blocks custom apps** → Ask a workspace admin to approve your Slack app.
***
## Common use cases
This integration is great for keeping your team in the loop without leaving Slack. Some popular patterns include:
* **Task tracking:** Post a message every time a new task is created, updated, or completed in your app.
* **Team notifications:** Send alerts to a shared channel when key events happen, like a status change to *Done*, *In Progress*, or *Blocked*.
* **Error reporting:** Have your backend send a Slack message when something fails (for example, a payment or data sync) so you can react quickly.
* **Daily summaries:** Combine with Zapier or another integration to push a morning digest into Slack, showing todos created or completed yesterday.
# Using Integrations
Source: https://docs.base44.com/Integrations/Using-integrations
See the ways to connect Base44 to other tools, from built-in integrations, connectors, and backend API calls in your app to custom OpenAPI and MCP connections.
## About integrations
[Integrations](https://base44.com/integrations) connect Base44 to the rest of your stack so you can automate workflows, pull in data, and call external services without wiring every API call by hand.
You can integrate at 3 levels:
* **App level:** Integrations inside a single app:
* **Built-in integrations** such as Invoke LLM and SendEmail.
* **Connectors** for OAuth-based connections to tools like Notion, Slack, or Google Workspace.
* **External API calls with backend functions** that use per-app Secrets and functions.
* **An app MCP server** that lets AI assistants like Claude, ChatGPT, and Cursor securely connect to your published app and use its data and actions.
* **Workspace level:** Shared APIs managed once for the whole workspace:
* **Custom OpenAPI integrations** based on OpenAPI specs that any app in the workspace can call securely.
* **Account level:** Connections that live on your Base44 account:
* **MCP connections** that you configure once so the Base44 AI chat can use external tools while you build, without changing your app's deployed code.
***
## App level integrations
App-level integrations live inside a single app. They include built-in integrations, connectors, and backend-powered external APIs that you wire to that app only.
### Built-in integrations
Some integrations come preinstalled in Base44 and are available to use immediately. Most work on any plan, with no extra setup or separate API keys. With these core integrations, you can add AI, messaging, file handling, and advanced logic to any app.
**Base44 built-in integrations include:**
* **Invoke LLM:** Generate AI responses from the built-in language model using detailed prompts. Supports JSON schema outputs, file attachments for added context, image analysis, and web search for up-to-date information.
* **SendEmail:** Send emails from your app with customizable sender names and rich HTML content, or send one of your [designed emails](/Building-your-app/Designing-emails). Anyone who has signed up to your app can be emailed on any plan. To email an address that has not signed up, your app needs a paid plan and a verified custom domain.
SendEmail does not support sending to external mailing lists. It can attach up to 5 files, up to 5 MB each and 10 MB in total.
* **SendPushNotification:** Send a native push notification to one person in your app, with an optional link to a specific page.
SendPushNotification needs a native mobile app with push notifications set up.
* **UploadFile:** Let people upload files to your app. Use the returned file URL in other integrations or workflows.
* **GenerateImage:** Create images from detailed text prompts, on their own or from existing images you give it as a reference. Returns a URL to the generated image.
* **ExtractDataFromUploadedFile:** Pull structured data from uploaded files (CSV, PNG, JPG, JPEG, PDF) using JSON schemas. Useful for importing data in bulk.
Learn more about [built-in integrations](/Integrations/built-in-integrations).
### Connectors
Connectors are OAuth-enabled integrations that let a specific app connect to supported tools. You ask the AI chat to connect a service, sign in, and approve the requested permissions. Your app can then read or write data in that tool based on what you allow.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
**Examples of what you can build with connectors:**
* Sync a Notion database to power a knowledge view in your app.
* Post updates to a Slack channel.
* Sync Salesforce or HubSpot records into an internal dashboard.
* Save files from your app to Google Drive.
* Block off time in Google Calendar when a new booking is made.
* Publish a LinkedIn post when a new blog post is published.
* Show TikTok profile stats and follower counts in a dashboard.
[Learn more about connectors](/Integrations/Connectors).
### External API calls with backend functions
External integrations using backend functions let a specific app talk directly to third-party services like Stripe, Twilio, or Google APIs with per-app credentials. These calls are wired through your own backend functions and Secrets.
**Use backend functions when:**
* You want a one-off integration for a single app.
* You need custom logic that is tightly coupled to that app.
* The service is not yet set up as a custom OpenAPI integration in your workspace.
**Examples of external integrations with backend functions:**
* Sending welcome emails to new people using your app via your email provider.
* Syncing your existing CRM with your app database.
* Alerting your team in Slack when someone submits a form.
* Generating content with AI tools using your own provider keys.
* Calling vendor-specific APIs that do not have a connector or custom OpenAPI integration yet.
**Important:** You need a [**Builder plan**](https://base44.com/pricing) or higher to use backend functions.
When you request an integration in the AI chat, Base44 guides you step by step and asks for credentials or authorization when needed. It then connects the backend and frontend logic automatically so you can get up and running fast.
You store credentials as **Secrets** in the app dashboard and use them in TypeScript functions under **Code** > `base44` > `functions`.
Each backend function has a code file you can edit, view, and test. To check a function's logs, open its file in **Code** and click **Logs**.
### Connecting AI assistants
Your published app can expose its own MCP server so AI assistants can use its data and actions, with access controlled by you. This is different from account-level MCP connections, which the Base44 AI chat uses while you build.
Learn more about [connecting AI assistants to your app](/Integrations/app-mcp).
***
## Workspace level integrations
Workspace-level integrations live in a workspace and can be reused across many apps without repeating setup or credentials.
### Custom OpenAPI integrations
Custom OpenAPI integrations let you register shared external APIs at the workspace level from an OpenAPI specification. You import a spec once, select the operations you want to expose, and any app in that workspace can call those operations through the SDK.
The AI and your frontend code can call custom OpenAPI integrations directly through `base44.integrations.custom` without exposing credentials. Calls are proxied through the Base44 backend, so secrets never reach the browser.
This is ideal for internal APIs and partner APIs that your team uses across many apps.
**Important:**
* Only **workspace owners and admins on a Builder plan or higher** can create or edit custom OpenAPI integrations.
* Anyone in the workspace can use an existing custom OpenAPI integration in their apps, even on a free plan.
Learn how to configure these APIs in detail in [**Managing custom API integrations**](/documentation/integrations/using-custom-integrations).
***
## Account level connections
Account-level connections are configured once for your Base44 account and are available wherever you use the Base44 AI chat.
### MCP connections
MCP connections let you connect custom MCP servers to your Base44 account so the AI chat can use external tools and data as context while you build. This gives you a context-aware AI chat without changing your app's deployed runtime.
**Important:**
* MCP connections are available on the **Builder plan or higher.**
* MCP servers are configured once per account under **Account preferences** → **Builder** → **MCP Connections**.
* The AI chat only calls an MCP server when your prompt requires it (for example, when you mention that server or ask for data it provides). It does not contact every MCP server for every message.
**Examples of what you can do with MCP connections:**
* Ask the AI chat to search an internal docs MCP and summarize the most relevant pages for a feature.
* Connect a GitHub MCP server and ask for a summary of open issues in a specific repo.
* Connect an analytics MCP, such as Amplitude or a custom metrics service, and ask the chat to pull recent product metrics into the conversation while you plan changes.
Learn how to add and manage MCP servers in [**Setting up a custom MCP**](/documentation/account-and-billing/setting-up-a-custom-mcp).
***
## Getting your API keys
Some integrations require an API key, which acts like a private password between Base44 and the external service. Your API key proves ownership and keeps your connection secure. Base44 stores your key safely so your app can use it without exposing it.
If you replace a saved key with a new one, your app uses the new value straight away while you build and preview. Publish your app again so your published version uses it too.
Never share your API key publicly. Treat it like a password.
**To get your API key:**
1. Log into the external service (for example, OpenAI, Resend, Notion).
2. Find the **Developer**, **API**, or **Integrations** section.
3. Click **Create API Key** or **Generate Token** and copy it.
4. Paste your API key in Base44:
* **Using the AI chat:** Enter your API key in the AI chat when prompted.
* **Setting up manually:** Save your API key in **Secrets**.\
a. Click **Dashboard** in your app's editor.\
b. Click **Secrets**.\
c. Click **Add Secret**.
Custom OpenAPI integrations also use secrets, but these are configured once by a workspace admin when creating or editing the integration and are stored as encrypted workspace secrets, not per-app Secrets.
***
## FAQs
Click a question below to learn more about using integrations.
Custom OpenAPI integrations are configured once in a workspace from an OpenAPI spec and are available to every app in that workspace through `base44.integrations.custom.call()`. Credentials are stored as encrypted workspace secrets and never exposed to app code, and you do not need backend functions to use them.
Per-app external APIs use backend functions and Secrets in a specific app. They are ideal for app-specific logic or when you do not want to share an API across all apps in a workspace.
Before publishing your app, test your integration so you can catch issues early:
1. Use sandbox or test mode (for example, Stripe test keys), if the provider offers it.
2. Try real flows and edge cases, not just a single happy path.
3. Check that inputs and outputs match your expectations in your UI and in the provider's dashboard.
4. Monitor integration credit usage in both Base44 and the external service.
5. Preview your app to catch slow loading, failed API calls, or missing data before going live.
If you run into issues, check the following:
* Your workspace is on a Builder plan or higher (for per-app external APIs that use backend functions).
* Your API key is correct and saved in Secrets or in the custom OpenAPI integration, if relevant.
* You have enough active credits in the external service.
* You are using live credentials, not test ones, when testing production flows.
* Your API request includes the correct endpoint, payload, and parameters.
* You have not hit the service's rate limits.
Backend functions and per-app external APIs require a Builder plan or higher on the workspace where the app was created. If the workspace is on a Free or Starter plan, backend functions and integrations that depend on them are unavailable.
Workspace owners and admins can create backend functions in apps they own. Collaborators with an Editor role can also edit and create backend functions in an app as long as the workspace has a Builder plan or higher.
If you see a 403 error when using backend functions, it may mean backend functions are not available for your app or workspace, or the request is missing permissions.
Common causes and fixes:
* **Plan requirement:** Backend functions are only available on a Builder plan or higher. If the workspace is on a Free or Starter plan, backend calls and per-app integrations that rely on them can fail with 403.
* **Permissions in your function:** Your backend function may be rejecting the request because the person is not signed in or does not have the right role. Check any role or access checks you added in the function code.
* **External service permissions:** A 403 can also come from the external API you are calling. Make sure the API key has the right scopes and that the request uses the correct endpoint and method.
* **Still having trouble:** See the [Troubleshooting Issues](/Community-and-support/Troubleshooting) article or contact Base44 support.
There are 2 types of API keys you may need to regenerate or update:
* **Third-party service keys:** Regenerate your key in that service's developer portal, for example OpenAI, Resend, Notion, then update it in **Dashboard → Secrets** or in your custom OpenAPI integration settings.
* **Your Base44 account API key:** This is being replaced. From **October 15, 2026** you can no longer use an account API key, so create a [personal access token](/Workspaces/Personal-access-tokens) instead and update anything that used the old key.
Until you move across, a regenerated Base44 account key updates across all of your Base44 apps automatically. If you have added your Base44 key in another service, update it there as well.
* Built-in integrations remain available.
* Connectors, custom OpenAPI integrations, MCP connections, and per-app external APIs that rely on backend functions may stop working until you upgrade to a [**Builder plan**](https://base44.com/pricing) or higher.
Yes. You can mix built-in integrations, connectors, custom OpenAPI integrations, and per-app external APIs in the same app, as long as your plan and settings support them.
For security reasons, external services like Stripe, OpenAI, or Notion do not let third parties, including Base44, access your credentials automatically. Instead, you need to:
1. Log in to the service.
2. Go to the API or developer section.
3. Generate your key.
4. Paste it into Base44 as a Secret or workspace header.
Once added, your app or custom OpenAPI integration can use that key behind the scenes safely and without code.
**Why this matters:** API keys act like passwords for services. Keeping them private and under your control keeps your data safe and ensures only you authorize access.
No. MCP connections are only for the Base44 AI chat while you build. They are configured at the account level under **Settings → MCP Connections** and are used only when your prompt requires that MCP server. Your deployed app does not call MCP servers through this settings page.
Still need help? Join our [**Discord**](https://discord.com/invite/ThpYPZpVts) and get real-time support from the Base44 team and community.
# Zapier
Source: https://docs.base44.com/Integrations/Zapier-integration
Connect your app to Zapier so actions in your app trigger tasks in other tools. Add it to a new or existing app, send a sample payload, and check your setup.
**Note:** Zapier integrations require the **Builder** plan or higher. If you’re on the Free tier, you need to upgrade before proceeding. You also need a premium Zapier account to use webhooks.
This integration can be added in 2 ways:
* Choose this path if you are starting a new app from scratch.
* Choose this path if you are already in the midst of building and would like to integrate Zapier into an existing app.
## Part 1: Ready-made integration (for new apps)
* Sign in to Zapier and click **Create Zap**.
* Choose **Webhooks by Zapier → Catch Hook** as the trigger.
* Leave the **Pick off a Child Key** field blank to capture the full payload.
* Continue and copy the webhook URL.
* In a new browser tab, go to Base44 and click **Integrations**.
* Search the catalog for **Zapier**.
* Open the Zapier integration and click **Use this integration**.
* When prompted, paste the webhook URL into the **ZAPIER\_WEBHOOK\_URL** field.
* Describe your app in natural language. For example: \
`I am a therapist. Build an app to manage my schedule and let my clients book meeting.`
* After the app is created, open the app preview and book a test meeting:
* Choose a date and time a few minutes in the future.
* Use your real email.
* Submit once and wait 2 to 5 seconds.
This sends a sample payload to your Zap so Zapier can load real fields during setup.
#### **Data to send from Base44 to Zapier**
Make sure the payload is detailed so Zap can create the right calendar event. Include and save these in your Meetings collection:
* **start\_iso**: an ISO 8601 datetime that combines the chosen date and time.
Example: new Date(\$dateT\$time:00).toISOString()
* **end\_iso** or **duration\_minutes**: either send an explicit end time as ISO, or send duration\_minutes so Zapier can compute +30m in the action
* **time\_zone**: your app or user time zone, preferably an IANA name like Asia/Jerusalem; if you cannot provide a name, include the numeric offset
* **meeting\_id**: a stable id to avoid duplicates, for example \$client\_email|\$start\_iso
* **client\_name**, **client\_email,** **notes**
Saving these fields ensures you can audit bookings and Zapier maps the event correctly every time.
* Back in Zapier, go to the Test tab of your trigger.
* Click **Find new records**, select the sample request your app sent, and continue.
* If nothing appears, submit another test meeting and click **Find new records** again.
* Add an action: **Google Calendar → Create Detailed Event**.
* Map the fields from your sample to the event fields:
* **Summary:** `Meeting with client_name`
* **Description:** `notes`
* **Start Date & Time:** `start_iso`
* **End Date & Time:** `start_iso + 30m` (or compute using duration\_minutes)
* **Guests:** `client_email`
* **Time Zone:** choose your calendar’s zone
* Click **Test** to ensure the event appears and that an invite is sent.
Click **Publish** to turn the Zap on. From now on, each new meeting in your app automatically creates a calendar event.
***
## Part 2: Instant integration (add Zapier to an existing app)
Use this method if your app already exists and you want to connect Zapier mid‑build.
* Here's the prompt that we typed out in the AI chat to build our sample app: :
`I am a therapist. Build an app to manage my schedule and let my clients book meeting.`
* In the chat window of your app, say something like:
`I want to connect my app to Zapier. Please make an integration that sends booking data to Zapier from the backend only. Never call Zapier from the browser.`
* Keep the chat open while you complete the next step.
* In Zapier, click **Create Zap**, just as you did in Part 1.
* Pick **Webhooks by Zapier → Catch Hook** for the trigger.
* Copy the webhook URL that Zapier generates.
* Paste this URL into the Base44 chat when prompted. The integration saves it securely and wires up a backend route to post booking data to Zapier.
* After the app is created, open the app preview and book a test meeting:
* Choose a date and time a few minutes in the future.
* Use your real email.
* Submit once and wait 2 to 5 seconds.
This sends a sample payload to your Zap so Zapier can load real fields during setup.
#### **Data to send from Base44 to Zapier**
Make sure the payload is detailed so Zap can create the right calendar event. Include and save these in your Meetings collection:
* **start\_iso**: an ISO 8601 datetime that combines the chosen date and time.
Example: new Date(\$dateT\$time:00).toISOString()
* **end\_iso** or **duration\_minutes**: either send an explicit end time as ISO, or send duration\_minutes so Zapier can compute +30m in the action
* **time\_zone**: your app or user time zone, preferably an IANA name like Asia/Jerusalem; if you cannot provide a name, include the numeric offset
* **meeting\_id**: a stable id to avoid duplicates, for example \$client\_email|\$start\_iso
* **client\_name**, **client\_email,** **notes**
Saving these fields ensures you can audit bookings and Zapier maps the event correctly every time.
* In your Zap trigger, go to the **Test** tab and click **Find new records**.
* Select the latest request and continue. If nothing appears, submit another test, then click **Find new records** again.
* Add an action: **Google Calendar → Create Detailed Event**.
* Map the fields from your sample to the event fields:
* **Summary:** `Meeting with client_name`
* **Description:** `notes`
* **Start Date & Time:** `start_iso`
* **End Date & Time:** `start_iso + 30m` (or compute using duration\_minutes)
* **Guests:** `client_email`
* **Time Zone:** choose your calendar’s zone
* Click **Test** to ensure the event appears and that an invite is sent.
* Turn on the Zap. New bookings now trigger calendar events automatically.
***
## Troubleshooting
* **No sample in Zapier:** Make sure you’ve booked one test meeting before testing.
* **401 or CORS errors:** Only post to Zapier from the backend; never call Zapier from the browser.
* **Wrong times:** Ensure you combine the date and time into a proper ISO datetime (start\_iso) and set the correct time zone when creating the calendar event.
* **Zap not running:** Confirm that you clicked **Publish** to turn the Zap on.
***
## Quick checklist
Use this list to make sure you haven’t missed anything:
* Catch Hook created with **Pick off a Child Key** left blank
* Webhook URL saved as **ZAPIER\_WEBHOOK\_URL** in Base44
* Builder tier or higher
* One sample meeting booked before testing
* Google Calendar action mapped and tested
* Zap published and turned on
***
# Connecting AI assistants to your app
Source: https://docs.base44.com/Integrations/app-mcp
Let AI assistants like Claude, ChatGPT, and Cursor work with your published app through App MCP. Set up MCP access, pick tool access, and connect an assistant.
App MCP lets external AI assistants like Claude, ChatGPT, and Cursor connect to your published app through its own Model Context Protocol (MCP) server. Connect an AI assistant to view or manage app data, message agents, or run custom tools, based on the access you allow.
***
## What you can do with App MCP
What an assistant can do depends on your server's access mode:
* **Public · No sign-in:** Give anyone read-only access to the entities you enable. Your app must be open without sign-in.
* **Sign in required · OAuth:** Require people to sign in with their app account. Their assistant acts as them when using the app data, agents, and custom tools you enable.
For example, with OAuth access, you could ask your AI assistant to find leads that need follow-up and add a new contact without opening your CRM app. Other people with access to your CRM can connect their own assistants using their own app accounts and permissions.
To build a custom AI chatbot that people can use inside your app, see the [AI agent builder](https://base44.com/ai-agent-builder).
***
## How App MCP works
You can control App MCP access at 3 levels:
* **Access mode:** Choose who can connect and whether they need to sign in. Check the current mode under **Access** on the **Overview** card. To change it, ask the AI chat.
* **Tool access:** Choose which entities, agents, and custom tools assistants can use. Edit these settings on the **MCP** page or ask the AI chat to change them.
* **App permissions:** Set your app's data permissions to control what each person can do. With **Sign in required · OAuth**, assistants use the signed-in person's permissions for entity operations. Custom tools follow the access checks in their backend functions.
App MCP lets you connect external AI assistants to your published app.
Check out additional types of MCP connections:
* [Base44 MCP](/developers/backend/overview/mcp-server): Build and manage Base44 apps from an external AI assistant.
* [Custom MCP connections](/documentation/account-and-billing/setting-up-a-custom-mcp): Connect the Base44 AI chat to external MCP servers while you build your app.
***
## Setting up MCP access
Set up App MCP separately for each app you want to connect.
If MCP is turned off for your workspace, ask its owner or an admin to enable it. See [Managing MCP access for your workspace](#managing-mcp-access-for-your-workspace).
**To set up App MCP access:**
1. Go to your app's dashboard.
2. Click **MCP**.
3. Click **Set up access**.
4. Follow the setup instructions in the AI chat. If your app requires sign-in, Base44 sets up OAuth automatically. Otherwise, choose **Public** or **Sign in required · OAuth**.
5. Click **Publish** to activate the MCP server.
**How publishing affects access:**
* If you change the access mode, publish again.
* Publishing stops every OAuth connection to this app if you remove its MCP configuration or Base44 can't read it. Restoring the configuration and publishing again doesn't bring them back: people must reconnect and approve access again.
***
## Managing tool access
Choose which entities, agents, and custom tools connected assistants can use. Public access lets assistants read entity records. With OAuth, you can also let them change records, message agents, and run custom tools.
**To manage tool access:**
1. Go to your app's dashboard.
2. Click **MCP**.
3. Click **Edit** in **Tool access**.
4. Choose what assistants can access:
* **Entities:** Your app's data tables. Choose **Full access** to allow all available actions, or **Custom access** to select individual actions. To remove MCP access for an entity, deselect all its action checkboxes.
* **Agents:** The AI agents in your app. Set each agent to **Enabled** or **Disabled**.
* **Custom tools:** Backend functions available through MCP. Set each tool to **Enabled** or **Disabled**.
5. Click **Save changes**.
6. Click **Publish** to apply your changes.
**For assistants connected with Sign in required · OAuth:**
These changes take effect after you publish. When people reconnect, they approve every tool and action currently available, not just the new ones. They can't approve only some.
* **Added access:** People must reconnect to use new entities, actions, agents, or custom tools.
* **Removed access:** Removed tools and actions stop working. People must reconnect if you remove all their approved tools.
* **Name or function changes:** People must reconnect to use a renamed entity, agent, or custom tool, or a custom tool you point at a different backend function. If that was their only approved tool, their whole connection stops working until they reconnect.
* **Title or description changes:** People with existing connections don't need to reconnect.
***
## Connecting an AI assistant
Use your app's MCP connection URL to connect an AI assistant.
**To connect an AI assistant:**
1. Go to your app's dashboard.
2. Click **MCP**.
3. Click the copy icon next to **Connection URL**.
4. Follow your AI client's setup guide to add a remote MCP server with these details:
* **Server URL:** The connection URL you copied from Base44.
* **Transport:** Streamable HTTP.
* **Authentication:** No authentication for **Public** access, or OAuth for **Sign in required · OAuth**.
5. If your server requires sign-in, sign in with your app account and approve access when prompted.
**AI client setup guides:**
* [Claude's custom connector guide](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp)
* [ChatGPT's developer mode guide](https://developers.openai.com/api/docs/guides/developer-mode)
* [Cursor's MCP setup guide](https://cursor.com/docs/mcp)
***
## Helping people connect AI assistants to your app
After setting up App MCP and publishing your app, ask the AI chat to add a `/connect` page for people using your app. The page includes your app's MCP connection URL and instructions for connecting their own AI assistants.
**To add a connection page:**
1. Go to your app's dashboard.
2. Click **MCP**.
3. Click the **Send to chat** icon on the **How to connect AI assistant** card.
4. Review the connection instructions generated by the AI chat, then click **Publish**.
***
## Managing MCP access for your workspace
Control whether apps in your workspace can use App MCP. The policy you set applies to every app in your workspace and overrides app-level settings.
**Before you set a policy:**
* You need an [Enterprise plan](https://base44.com/pricing) and must be a workspace owner or admin.
* App MCP is off by default in Enterprise workspaces.
* Policy changes take effect immediately, without publishing.
**To set the workspace MCP policy:**
1. Open your workspace **Settings**.
2. Click **Governance**.
3. Under **MCP access for AI assistants**, select a policy:
* **Allowed:** Apps can use App MCP, with or without sign-in.
* **Sign-in required:** Only OAuth servers can run. Existing Public servers stop accepting requests until you change them to OAuth and publish again.
* **Not allowed:** Apps in the workspace cannot use App MCP.
If you select **Not allowed**, active App MCP servers stop working on their next request. Existing connections remain intact: select **Allowed** to resume access without asking people to reconnect.
***
## Troubleshooting
Ask your workspace owner or an admin to enable App MCP. If you're an owner or admin, click **Open workspace settings** to change the MCP policy.
If the MCP page shows **Your app requires login but your MCP server is exposed publicly**, ask the AI chat to switch the server to **Sign in required · OAuth**, then publish your app again.
Ask your Claude admin whether custom connectors are enabled for your account.
# Using Base44 built-in integrations
Source: https://docs.base44.com/Integrations/built-in-integrations
Use built-in integrations to send emails and notifications, generate images, video, and speech, transcribe audio, handle files, and run LLM calls in your app.
[Built-in integrations](https://base44.com/integrations) are Base44 services you can call in your app without extra setup. They cover common needs such as sending email, generating images and videos, handling file uploads, extracting data from files, and running large language model (LLM) calls. You can use them from the AI chat, in flows, or in your own backend functions.
Each call to a built-in integration uses integration credits, so it is important to understand what each integration does and when to use it.
**Important:**
* The credit amounts shown on this page are estimates based on standard models and average complexity, provided as a guide rather than exact figures. They are subject to change at Base44's discretion. For details, see the [Base44 Terms of Service](https://base44.com/terms-of-service).
* The credits used for a given action can vary and are calculated after the action runs, so your actual cost may differ from the figures shown here. To see how many credits you have used, check your [credit usage](/Account-and-billing/Credits#checking-your-credit-balance).
* There is no way to preview an integration credit cost before running an action. To estimate it, run the action in a controlled test and review the execution logs afterward.
***
## Understanding built-in integrations
Built-in integrations are ready-made actions that run inside Base44. They are available in every app, and you do not need to set up API keys, connectors, or your own infrastructure. You can add them wherever you design logic in your app, and Base44 takes care of hosting, scaling, and provider connections behind the scenes.
Use built-in integrations when you want Base44 to handle these shared tasks for you. For example, you can send emails without configuring an email service, generate images on demand, let people upload and store files in Base44, extract structured data from uploads into your entities, or call LLMs to power agents and data workflows while keeping all billing and provider management in one place.
**What's the difference between built-in integrations, connectors and custom integrations?**
Connectors create OAuth connections to your own accounts in tools such as Gmail, Slack, or Google Drive. Custom integrations use your own API keys or OpenAPI specs. Built-in integrations rely on Base44’s own managed provider setup, so you do not handle API keys or other credentials yourself.
Use connectors or custom integrations when you need to act through your own provider accounts, control scopes and identities, or connect to tools that built-in integrations do not cover yet.
***
## Sending emails
SendEmail is a built-in integration that sends transactional and workflow emails from your app, such as confirmations, alerts, digests, and other notifications that need to go out automatically.
You can trigger SendEmail from:
* Flows that Base44 builds from the AI chat.
* Backend functions that you edit in your app’s code.
* Agents or workflows that need to notify people by email.
SendEmail is helpful for tasks like sending welcome messages, daily or weekly summaries, status change alerts, or passwordless access links. It can also send any email you designed in **Emails**, filling in details like the person's name. Learn more about [designing your app's emails](/Building-your-app/Designing-emails).
* `Connect SendEmail so that when someone submits this form, they get a confirmation email with their details.`
* `Add a daily workflow that uses SendEmail to send me a summary of all new signups in this app.`
* `When a task is marked as 'critical', use SendEmail to alert the ops team with a link to the record.`
**Notes:**
* SendEmail does not support sending to external mailing lists. It can attach up to 5 files, up to 5 MB each and 10 MB in total.
* Each email sent through SendEmail typically uses \~1 integration credit, or \~2 credits when sent from a custom email domain.
***
## Sending push notifications
SendPushNotification is a built-in integration that sends a native push notification to one person in your app, such as an order update, an appointment reminder, or an alert that needs their attention.
It works with native iOS and Android apps that have push notifications set up. To set yours up, see [adding push notifications](/documentation/building-your-app/uploading-to-app-stores#adding-push-notifications).
You can trigger SendPushNotification from:
* Backend functions that run with service role permissions in your app's code.
* Flows, agents, or automations that call one of those backend functions.
Sending happens on your server, so you decide who receives each notification.
**Each notification includes:**
* A title of up to 100 characters.
* A message of up to 500 characters.
* An optional action button label of up to 50 characters.
* An optional link to a specific page in your app. Tapping the notification opens that page. With no link, it opens your app's home page.
- `When an order status changes to 'shipped', use SendPushNotification to tell the customer and link to their order page.`
- `Add a backend function that uses SendPushNotification to remind someone about their appointment one hour before it starts.`
- `When a teammate is assigned a task, use SendPushNotification to notify them and link to the task.`
**Notes:**
* SendPushNotification reaches your native mobile app rather than your web app.
* Each call sends to one person. To notify several people, call SendPushNotification once for each of them.
* Each notification sent through SendPushNotification typically uses \~1 integration credit.
***
## Generating images
GenerateImage is a built-in integration that creates images using AI from text prompts or from flows in your app. It is useful for generating on-demand visuals such as covers, thumbnails, illustrations, or avatars without managing an external image provider.
GenerateImage can support scenarios like creating cover images for new content, generating temporary product images when photos are not ready yet, or producing simple marketing assets based on text descriptions.
GenerateImage can also work from images you already have. Alongside your prompt, you can give it the URLs of existing images to edit one of them, match the style of a reference, or give the AI visual context for what you are asking for.
* `Whenever I add a new article, use GenerateImage to create a cover image that matches the title and theme.`
* `When I create a new product, generate a simple placeholder image with the product name on a solid background and store its URL in the Products entity.`
* `Add a page where I can enter a short description and use GenerateImage to create a marketing image I can download.`
* `Let people upload a product photo, then use GenerateImage to create 3 variations of it in the same style.`
***
## Generating videos
GenerateVideo is a built-in integration that creates videos with AI from text prompts or app flows. It is useful for adding rich visual content to your app design, or for letting people generate videos inside your live app from prompts, forms, or app data.
You can use GenerateVideo to add hero videos and product previews while building your app, or to power features like marketing video generators, recipe previews, fitness clips, learning content, social media assets, and personalized media in your live app.
* `Create a short hero video for my recipe app showing lemon herb chicken cooking in a pan. Add it to the homepage hero section with a dark overlay.`
* `Add a page where people can enter a prompt, choose a video style, generate a short video with GenerateVideo, and save it.`
* `Let people generate short social media videos from prompts, preview them in the app, and save each video URL to the Videos entity.`
**Notes:**
* To generate videos from the AI chat, you need a [Starter plan](https://base44.com/pricing) or higher.
* When the AI chat generates a video, it uses the prompt's message credits plus \~1 additional message credit.
* Video generation in live apps typically uses \~5 integration credits per second of generated video.
***
## Generating speech
GenerateSpeech is a built-in integration that converts text into natural-sounding audio and returns a public URL to a generated MP3 file. Your app can play back, store, or embed the audio without connecting to an external speech provider.
GenerateSpeech is useful for adding read-aloud functionality to content-heavy apps, building narrated walkthroughs, delivering multilingual announcements, or producing audio summaries from app data. It works in 29 languages, and Base44 detects the language automatically.
For example, you can build an art exhibition guide where visitors tap an artwork title and hear a narrated description read aloud, like a personal audio tour inside your app.
* `Add a "Listen" button to each article page. When clicked, use GenerateSpeech to convert the article body to audio and play it back in the app.`
* `When a new lesson is saved, use GenerateSpeech with the "sunny" voice to generate an audio version and store the URL in the Lessons entity.`
* `Build a page where I can enter text, choose a voice, and generate a downloadable audio file using GenerateSpeech.`
**Notes:**
* Text input is limited to 5,000 characters per call.
* GenerateSpeech supports 29 languages including English, Spanish, French, German, Japanese, Portuguese, Arabic, and Hindi.
* Available voices are: `river` (calm, neutral), `honey` (warm, soft), `sunny` (bright, upbeat), `storm` (formal, authoritative), and `spark` (energetic, quick). The default voice is `river`.
* Each call uses integration credits based on text length: Typically \~1 credit per 50 characters, up to around 100 credits per call. Credits are charged every time audio is generated, including if the same text is played again. To avoid repeat charges, save the returned audio URL and replay it instead of calling GenerateSpeech again.
### Using an audio URL
When GenerateSpeech runs, it returns a public URL pointing to the generated MP3 file. You can use this URL directly in an audio player component in your app, or save it to an entity field so you can replay it later without generating the audio again. Ask the AI chat to store the URL in your entity after each call, for example:
```text theme={null}
After generating the audio, save the returned URL to the audio_url field in the Artworks entity.
```
***
## Transcribing audio
TranscribeAudio is a built-in integration that turns spoken audio into text. Your app sends it an uploaded audio file, and it returns the transcript as plain text that you can show, save, or pass to another step.
TranscribeAudio is useful for turning voice notes into text, transcribing interviews or meeting recordings, adding captions to spoken content, or letting people dictate instead of typing. For example, you can build a field notes app where people record a voice memo on site and the app saves the transcript to the visit record.
* `Add a record button to the notes page. When someone stops recording, upload the audio and use TranscribeAudio to save the transcript in the Notes entity.`
* `When a new interview recording is uploaded, use TranscribeAudio to transcribe it and store the text in the transcript field of the Interviews entity.`
* `Build a page where I can upload an audio file, transcribe it with TranscribeAudio, and then use InvokeLLM to summarize the transcript.`
**Notes:**
* Upload the audio file first, then pass its URL to TranscribeAudio. The AI chat handles this for you when you ask it to transcribe audio.
* Supported formats are MP3, MP4, M4A, MPEG, MPGA, WAV, WEBM, OGG, OGA, and FLAC.
* Each audio file can be up to 25 MB.
* Each call uses integration credits based on the length of the audio: Typically about 1 credit per minute, with a minimum of 1 credit per call. To avoid repeat charges, save the transcript instead of transcribing the same file again.
***
## Uploading files
UploadFile is a built-in integration that lets your app accept file uploads from people who use it. It powers file upload components in your UI so you can collect documents, images, and data files without building your own storage or upload endpoints.
UploadFile is a good choice when you want to gather receipts, contracts, screenshots, profile pictures, or data files such as CSVs and spreadsheets and keep them tied to records in your app.
* `Add a file upload field to this request page using UploadFile so people can attach a PDF when they submit.`
* `Let people upload profile pictures, store the file using UploadFile, and save the image URL in the Members entity.`
* `Create a page where I can drag and drop CSV files, upload them with UploadFile, and show a table of uploaded files.`
For current file sizes and types, check the [Uploading files](/Building-your-app/Using-media) guide.
***
## Extracting data from uploaded files
ExtractDataFromUploadedFile is a built-in integration that reads structured content from uploaded files and turns it into data your app can work with. It helps you move from “file storage” to “usable records” by pulling out key fields and rows for you. You can pull structured data from uploaded files (CSV, PNG, JPG, JPEG, PDF) using JSON schemas. It is particularly useful for importing data in bulk.
You can use ExtractDataFromUploadedFile to parse receipts, invoices, forms, or data files and convert them into clean entities, such as Contacts, Invoices, Expenses, or Metrics, without hand-writing parsing logic.
You can also combine UploadFile and ExtractDataFromUploadedFile. For example, someone uploads a CSV, Excel file, or PDF through UploadFile, then you use ExtractDataFromUploadedFile to transform the content into rows in your data tables.
* `When I upload a CSV file of customers, use UploadFile and ExtractDataFromUploadedFile to import the records into a Customers entity.`
* `Let me upload invoice PDFs and use ExtractDataFromUploadedFile to pull invoice number, vendor, date, subtotal, and total into an Invoices table.`
* `Build a page where I can upload an Excel file with KPIs, then use ExtractDataFromUploadedFile to update the Metrics entity.`
Extraction quality depends on the file type, its structure, and how well the fields are labeled. For critical workflows, test with several real examples and adjust your entities or flows based on the results.
***
## Running LLM calls
invokeLLM is a built-in integration that runs large language model (LLM) calls from inside your app. It lets your app “think” with AI over your data and flows, and powers text generation, explanations, and decisions that depend on LLMs.
invokeLLM is a good fit when you want to build data agents, summarize or rewrite content, classify records, generate recommendations from dashboards, or add in-app assistants that help people complete tasks. It works like other built-in integrations in your flows and backend functions, but with an extra layer of control: you can choose which underlying model it uses.
* `Add a data agent that uses invokeLLM so I can ask natural language questions about my Sales entity and see the answers in this app.`
* `When a support ticket is created, use invokeLLM to summarize the description into a short overview and store it in a Summary field.`
* `Create a flow that uses invokeLLM to classify each new lead into one of three segments based on their notes, and save the segment on the lead record.`
* `Switch invokeLLM to use a stronger model for my agents so they can give better explanations on complex analytics dashboards, and update any flows that depend on invokeLLM.`
## Choosing the model for invokeLLM
By default, invokeLLM uses a standard model that balances quality and cost. If you want, you can tell the AI chat inside Base44 to use a different supported model for invokeLLM by asking the AI chat to switch it for you. invokeLLM supports a subset of Base44's available models, not the full list offered elsewhere in the app editor. See [supported models](/developers/backend/resources/models) for the current preset IDs.
For example, you can say: `Switch invokeLLM to use for this app`.
Every model invokeLLM offers is available on every plan. Your plan does not limit which one you pick, and cost is controlled by credits instead: a more capable model uses more integration credits for each call.
When Base44 retires a model, your app keeps working. Calls that name the retired model are sent to a current model chosen to be close to it in capability and cost, so nothing breaks and your credit usage stays in a similar range. Your app is no longer using the model you named, though, so answers can differ in style or quality. If your app depends on a particular model, ask the AI chat to switch invokeLLM to one you have chosen.
When you change the model for invokeLLM, the style, reasoning ability, and quality of responses update to match that model. The number of integration credits each call uses also changes based on the new model’s cost, and any flows that rely on invokeLLM start using the new model automatically.
***
## Using the AI Gateway
GenerateImage, GenerateVideo, and invokeLLM cover most needs with a simple prompt. When you need more control, your app can call the AI Gateway instead. It gives your backend functions direct access to Base44's AI models for text, images, and video, so you can choose the exact model and set options such as aspect ratio, resolution, quality, or video length.
The AI Gateway works with common AI libraries, such as the OpenAI SDK and the Vercel AI SDK. Requests use your app's integration credits, so you don't need a separate account or API key with the model provider.
* `Use the AI Gateway in a backend function to generate a 16:9 product image at high resolution for each new item in my Products entity.`
* `Add a page where people describe a scene, then use the AI Gateway to generate an 8-second vertical video and save it to the Videos entity.`
Learn more in the developer docs about [the AI Gateway](/developers/references/sdk/docs/interfaces/ai-gateway), [generating images](/developers/references/sdk/getting-started/ai-gateway-images), and [generating video](/developers/references/sdk/getting-started/ai-gateway-video).
# Connectors catalog
Source: https://docs.base44.com/Integrations/connectors-catalog
Browse the connectors you can add to your app by category, from payments and CRM to storage and HR. See example prompts and the permissions each connector uses.
Connect your Base44 app to the tools you already use to sync data and automate everyday work.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors.
***
## Browse by category
Stripe, Square
Gmail, Outlook, Slack, Discord, Microsoft Teams, Google Meet
Google Analytics, BigQuery, Search Console, Snowflake, Databricks, Google Forms, Airtable, Typeform, PostHog
HubSpot, Salesforce, Gumroad, Zoho CRM, Mailchimp, Facebook Pages, Omnisend, Meta Ads, Instagram Business, LinkedIn, TikTok, Eventbrite, Klaviyo, Attio, X
Gorgias, Intercom
Linear
ClickUp, Wrike, Confluence, Jira, Todoist, Google Calendar, Google Tasks, Notion, Google Classroom, Calendly, Basecamp, Harvest, Asana, Miro, Google Contacts, Google Workspace
GitHub API, GitLab, Supabase, Hugging Face, Bitbucket, PagerDuty, Sentry, Datadog
SharePoint, Docusign, Microsoft Word, Microsoft OneNote, Microsoft Excel, Microsoft PowerPoint, Google Drive, Google Docs, Google Sheets, Google Slides, Dropbox, Box, OneDrive
Contentful, Wix, Twitch, Google Photos, WordPress.com
Splitwise, Polar
QuickBooks, FreshBooks, Moneybird, Wave
BambooHR
Tell the AI chat what you want to connect and how you want to use it, and get relevant suggestions based on your app's structure, pages, and data.
***
## Payments
Sell products or subscriptions and get paid online.
[Learn more about setting up Stripe](/documentation/setting-up-your-app/setting-up-payments)
**What you can do:**
* Sell subscriptions or one-time products.
* Trigger workflows after successful payments.
* Connect purchases to your app data.
**Example prompts:**
```text theme={null}
Connect Stripe and let people pay for a subscription in my app.
```
```text theme={null}
Charge customers with Stripe when they place an order in my app.
```
```text theme={null}
When a payment succeeds in Stripe, update the order status in my app and send a confirmation email.
```
**Permissions requested:**
```text theme={null}
read_write access to payments, customers, and checkout sessions
```
Process payments, manage inventory, customers, and orders with Square.
**What you can do:**
* Process payments.
* Manage inventory and catalog.
* Track orders and customers.
**Example prompts:**
```text theme={null}
Process payments through Square from this app.
```
```text theme={null}
Display Square sales and transaction data in a dashboard.
```
```text theme={null}
Manage Square inventory and product catalog.
```
**Permissions requested:**
```text theme={null}
MERCHANT_PROFILE_READ
PAYMENTS_READ
PAYMENTS_WRITE
ORDERS_READ
ORDERS_WRITE
CUSTOMERS_READ
CUSTOMERS_WRITE
ITEMS_READ
ITEMS_WRITE
INVENTORY_READ
INVENTORY_WRITE
INVOICES_READ
INVOICES_WRITE
```
***
## Communication
Email service. Messages, drafts and inbox.
**What you can do:**
* Send daily email digests.
* Alert teammates when something changes.
* Email summaries of activity.
**Example prompts:**
```text theme={null}
Send me a daily email with my to-do list using Gmail.
```
```text theme={null}
Email me a summary of all new signups from today.
```
```text theme={null}
Send a weekly Gmail digest with key metrics from this dashboard.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/gmail.readonly
https://www.googleapis.com/auth/gmail.modify
https://www.googleapis.com/auth/gmail.compose
https://www.googleapis.com/auth/gmail.send
https://www.googleapis.com/auth/gmail.labels
https://www.googleapis.com/auth/gmail.settings.basic
```
[Connect Gmail to your app](/Integrations/gmail-connector) with one shared account, or let each person connect their own.
Email and calendar. Messages, events and contacts.
**What you can do:**
* Send email summaries.
* Create calendar events.
* Check availability.
**Example prompts:**
```text theme={null}
Connect to my Outlook account and send me a daily email summary from this app.
```
```text theme={null}
Create Outlook calendar events when a new meeting is confirmed in this app.
```
```text theme={null}
Check my Outlook calendar availability before scheduling appointments.
```
**Permissions requested:**
```text theme={null}
User.Read
offline_access
Mail.Read
Mail.ReadWrite
Mail.Send
Calendars.Read
Calendars.ReadWrite
```
Team messaging. Send messages as yourself.
**What you can do:**
* Post updates to channels.
* Notify teammates.
* Search messages.
**Example prompts:**
```text theme={null}
Post a message to the #support channel when a new ticket is created.
```
```text theme={null}
Send a daily summary of completed tasks to my team's Slack channel.
```
```text theme={null}
Send alerts to a Slack channel when deadlines are approaching.
```
**Permissions requested:**
```text theme={null}
channels:read
chat:write
users:read
users:read.email
```
[Set up Slack User or Slack Bot](/Integrations/slack-connectors) depending on whether your app acts as a person or as a bot.
Team messaging. Post as a branded bot.
**What you can do:**
* Send automated bot messages.
* Post updates.
* Trigger alerts.
**Example prompts:**
```text theme={null}
Send a message as a bot to the #announcements channel when a release is published.
```
```text theme={null}
Send a daily bot summary to #team-updates at 5pm.
```
```text theme={null}
Send a bot message to #product-updates when a feature flag is enabled.
```
**Permissions requested:**
```text theme={null}
chat:write
chat:write.customize
chat:write.public
```
[Set up Slack Bot or Slack User](/Integrations/slack-connectors) depending on whether your app acts as a bot or as a person.
Notify channels and communities.
**What you can do:**
* Post messages.
* Send alerts.
* Notify communities.
**Example prompts:**
```text theme={null}
Post a message to the #announcements channel when a new feature is released.
```
```text theme={null}
Send an alert to the #ops channel when a critical error occurs.
```
```text theme={null}
Notify a Discord channel when a new support ticket is created.
```
**Permissions requested:**
```text theme={null}
webhook or bot access
```
Team chat. Channels, messages and meetings.
**What you can do:**
* Send channel messages.
* Create online meeting links.
* Share updates.
**Example prompts:**
```text theme={null}
Send a notification to my Teams channel when a new client is added.
```
```text theme={null}
Send meeting summaries to a Teams channel.
```
```text theme={null}
Create a Teams meeting link when a booking is confirmed.
```
**Permissions requested:**
```text theme={null}
User.Read
offline_access
Chat.ReadWrite
OnlineMeetings.ReadWrite
Team.ReadBasic.All
Channel.ReadBasic.All
ChannelMessage.Send
```
Video conferencing. Meetings, links and recordings.
**What you can do:**
* Create meeting links.
* Generate meeting spaces.
* Sync meetings.
**Example prompts:**
```text theme={null}
Create a Google Meet space when a new meeting is scheduled.
```
```text theme={null}
Generate a Google Meet link when a booking is confirmed.
```
```text theme={null}
Add a Google Meet link to scheduled appointments in my app.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/meetings.space.created
https://www.googleapis.com/auth/meetings.space.readonly
```
***
## Data & Analytics
Web analytics. Traffic, events and audiences.
**What you can do:**
* View traffic.
* Monitor engagement.
* Generate reports.
**Example prompts:**
```text theme={null}
Connect Google Analytics and show pageviews, sessions, and top pages in a dashboard.
```
```text theme={null}
Pull my Google Analytics traffic by source and show trends week over week.
```
```text theme={null}
Create a weekly report from Google Analytics and email it to me.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/analytics.readonly
https://www.googleapis.com/auth/analytics.edit
```
Analytics warehouse. Datasets, tables and queries.
**What you can do:**
* Run queries.
* Analyze data.
* Build dashboards.
**Example prompts:**
```text theme={null}
Connect this app to my BigQuery project and add a data agent that answers questions about my analytics.
```
```text theme={null}
Let users ask questions about sales trends from my BigQuery dataset.
```
```text theme={null}
Alert me when a KPI drops below a threshold based on BigQuery data.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/bigquery.readonly
```
Search analytics. Queries, clicks and indexing.
**What you can do:**
* Track rankings.
* Monitor clicks.
* Analyze queries.
**Example prompts:**
```text theme={null}
Connect Search Console and show my top queries and click data.
```
```text theme={null}
Alert me when a page drops in search rankings.
```
```text theme={null}
Track indexing status for new pages in this app.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/webmasters
https://www.googleapis.com/auth/webmasters.readonly
```
[Connect Google Search Console](/Integrations/google-search-console-connector) to bring search performance for the properties your Google account can access into your app.
Data warehouse. Databases, tables and queries.
**What you can do:**
* Query Snowflake data.
* Build dashboards from Snowflake data.
* Work with external data while building apps.
**Example prompts:**
```text theme={null}
Connect Snowflake and create a dashboard from my warehouse data.
```
```text theme={null}
Query Snowflake to show sales trends by region.
```
```text theme={null}
Use Snowflake data to answer questions in this app.
```
**Permissions requested:**
```text theme={null}
refresh_token
```
**Access details:**
```text theme={null}
Access depends on the Snowflake connector set up for your workspace and the permissions of the Snowflake identity being used.
```
[Set up Snowflake OAuth and register the connector](/Integrations/snowflake-connector) so your app can query your warehouse.
Data and AI platform. Notebooks, tables and jobs.
**What you can do:**
* Query Databricks data.
* Build dashboards from Databricks data.
* Work with external data while building apps.
**Example prompts:**
```text theme={null}
Connect Databricks and create a dashboard from my workspace data.
```
```text theme={null}
Query Databricks to show product usage trends.
```
```text theme={null}
Use Databricks data to answer questions in this app.
```
**Permissions requested:**
```text theme={null}
all-apis
offline_access
```
**Access details:**
```text theme={null}
Access depends on the Databricks connector set up for your workspace and the permissions of the Databricks identity being used.
```
[Set up a Databricks OAuth app and register the connector](/Integrations/databricks-connector) so your app can query your workspace.
Create and manage Google Forms and read form responses.
**What you can do:**
* Create and edit forms.
* Collect responses.
* Summarize response data.
**Example prompts:**
```text theme={null}
Create a customer feedback form and save the responder link in my app.
```
```text theme={null}
Show recent responses from a Google Form in an admin dashboard.
```
```text theme={null}
Summarize survey responses and show response counts by answer.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.readonly
https://www.googleapis.com/auth/forms.body
https://www.googleapis.com/auth/forms.body.readonly
https://www.googleapis.com/auth/forms.responses.readonly
```
Flexible database. Tables, records and views.
**What you can do:**
* Sync records.
* Manage tables.
* Build workflows.
**Example prompts:**
```text theme={null}
Sync data from this app with Airtable.
```
```text theme={null}
Create Airtable records when a new form is submitted in this app.
```
```text theme={null}
Show Airtable data in a dashboard inside my app.
```
**Permissions requested:**
```text theme={null}
data.records:read
data.records:write
schema.bases:read
user.email:read
```
Forms builder. Forms, surveys and responses.
**What you can do:**
* Collect data.
* Trigger workflows.
* Analyze responses.
**Example prompts:**
```text theme={null}
Show Typeform responses in this app.
```
```text theme={null}
Pull the latest Typeform responses into a dashboard.
```
```text theme={null}
Trigger a workflow in this app when a new Typeform response is submitted.
```
**Permissions requested:**
```text theme={null}
accounts:read
forms:read
forms:write
responses:read
```
Product analytics. Insights, dashboards and cohorts.
**What you can do:**
* View saved insights.
* Browse dashboards and cohorts.
* Review event definitions.
**Example prompts:**
```text theme={null}
Show a saved PostHog trends insight as a chart in my app.
```
```text theme={null}
Display the insights from my PostHog dashboard in an app dashboard.
```
```text theme={null}
List my active PostHog cohorts and their sizes.
```
**Permissions requested:**
```text theme={null}
cohort:read
dashboard:read
email
event_definition:read
insight:read
openid
person:read
profile
project:read
```
***
## CRM & Marketing
Manage marketing profiles, lists, campaigns, flows, and performance data.
**What you can do:**
* Sync profiles and lists.
* Trigger campaigns and flows.
* Track engagement metrics.
**Example prompts:**
```text theme={null}
Sync new app signups to Klaviyo profiles and add them to a list.
```
```text theme={null}
Show Klaviyo campaign and flow performance metrics in a dashboard.
```
```text theme={null}
Update Klaviyo profiles after support interactions.
```
**Permissions requested:**
```text theme={null}
accounts:read
campaigns:read
flows:read
lists:read
lists:write
metrics:read
profiles:read
profiles:write
segments:read
templates:read
```
CRM platform. Contacts, companies and deals.
**What you can do:**
* Sync contacts.
* Track deals.
* Manage contact lists.
**Example prompts:**
```text theme={null}
Sync new leads from this app into HubSpot contacts.
```
```text theme={null}
Show HubSpot deal stages inside my project dashboard.
```
```text theme={null}
Create HubSpot contacts when people sign up in this app.
```
**Permissions requested:**
```text theme={null}
crm.objects.contacts.read
crm.objects.contacts.write
crm.objects.companies.read
crm.objects.companies.write
crm.objects.deals.read
crm.objects.deals.write
crm.objects.owners.read
crm.objects.line_items.read
crm.objects.products.read
crm.lists.read
crm.lists.write
crm.schemas.contacts.read
crm.schemas.companies.read
crm.schemas.deals.read
tickets
oauth
```
CRM platform. Leads, opportunities and records.
**What you can do:**
* Sync leads.
* Track opportunities.
* Manage pipelines.
**Example prompts:**
```text theme={null}
Sync new leads from this app into Salesforce.
```
```text theme={null}
Show Salesforce opportunity stages inside my project dashboard.
```
```text theme={null}
Log customer support requests in Salesforce automatically.
```
**Permissions requested:**
```text theme={null}
api
refresh_token
full
web
id
openid
profile
email
address
phone
offline_access
custom_permissions
wave_api
chatter_api
visualforce
content
cdp_api
cdp_profile_api
cdp_query_api
cdp_segment_api
interaction_api
cdp_ingest_api
pardot_api
```
Sell digital products and track sales from your app.
**What you can do:**
* Sell digital products.
* Track sales and revenue.
* Manage products and customers.
**Example prompts:**
```text theme={null}
Show my Gumroad sales and revenue in a dashboard.
```
```text theme={null}
List recent Gumroad purchases in this app.
```
```text theme={null}
Notify me when a new Gumroad sale comes in.
```
**Permissions requested:**
```text theme={null}
account
view_profile
edit_profile
edit_products
edit_emails
view_sales
edit_sales
mark_sales_as_shipped
view_payouts
view_tax_data
```
Manage CRM records, deals, and contacts from your app.
**What you can do:**
* Track leads and contacts.
* Manage deals and pipeline stages.
* Sync CRM records into your app.
**Example prompts:**
```text theme={null}
Show my Zoho CRM leads and their status in a dashboard.
```
```text theme={null}
Create a Zoho CRM contact when someone submits a form in my app.
```
```text theme={null}
Sync Zoho CRM deals into this app and track pipeline stages.
```
**Permissions requested:**
```text theme={null}
ZohoCRM.modules.CREATE
ZohoCRM.modules.READ
ZohoCRM.modules.UPDATE
ZohoCRM.modules.DELETE
ZohoCRM.users.READ
ZohoCRM.settings.READ
```
Run email campaigns and manage audiences from your app.
**What you can do:**
* Manage audiences and subscribers.
* Create and send email campaigns.
* Track campaign performance.
**Example prompts:**
```text theme={null}
Add a subscriber to my Mailchimp audience when someone signs up in my app.
```
```text theme={null}
Show my Mailchimp campaign open and click rates in a dashboard.
```
```text theme={null}
Create a Mailchimp campaign from content in my app.
```
**Access details:**
```text theme={null}
Access depends on the Mailchimp connection set up for your workspace and the permissions available in Mailchimp.
```
Publish and manage your Facebook page from your app.
**What you can do:**
* Publish page posts.
* Manage page content.
* Track post engagement.
**Example prompts:**
```text theme={null}
Publish a post to my Facebook page when I add an update in my app.
```
```text theme={null}
Chart Page reach and impressions over time from Facebook Page insights.
```
```text theme={null}
Show recent Facebook page posts and their engagement in a dashboard.
```
**Permissions requested:**
```text theme={null}
pages_show_list
pages_read_engagement
pages_messaging
pages_manage_posts
read_insights
pages_manage_metadata
pages_manage_ads
business_management
```
Base44 uses `business_management` to access the Pages available to you through Business Manager.
Run ecommerce marketing campaigns from your app.
**What you can do:**
* Manage contacts and segments.
* Run email and SMS campaigns.
* Track campaign results.
**Example prompts:**
```text theme={null}
Add a contact to Omnisend when a customer places an order in my app.
```
```text theme={null}
Send an Omnisend campaign to customers from my app.
```
```text theme={null}
Show Omnisend campaign results in a dashboard.
```
**Permissions requested:**
```text theme={null}
automations.read
brands.read
campaigns.read
contacts.read
events.read
products.read
contacts.write
events.write
products.write
```
Manage and analyze your Facebook and Instagram ads campaigns.
**What you can do:**
* Create and manage ad campaigns.
* Manage budgets and audiences.
* Track ad performance.
**Example prompts:**
```text theme={null}
Show my Meta Ads campaign spend and performance in a dashboard.
```
```text theme={null}
Create a Meta Ads campaign from a product in my app.
```
```text theme={null}
Pause Meta Ads campaigns that exceed their budget from my app.
```
**Permissions requested:**
```text theme={null}
public_profile
email
ads_read
ads_management
pages_show_list
pages_manage_ads
read_insights
```
Social platform. Posts, comments and insights.
**What you can do:**
* Publish photos and videos to an Instagram Business feed.
* Read, reply to, edit, and delete comments.
* Access basic account details, such as username, ID, and media.
**Example prompts:**
```text theme={null}
Publish an approved Instagram Business feed post from this app.
```
```text theme={null}
Show recent Instagram Business posts and comments in a dashboard.
```
```text theme={null}
Reply to new Instagram Business comments from this app.
```
**Permissions requested:**
```text theme={null}
instagram_business_basic
instagram_business_manage_comments
instagram_business_content_publish
instagram_business_manage_messages
```
Instagram Business supports feed posts only. Stories, Reels, direct messages, and profile updates are not supported.
Professional network. Posts, profiles and connections.
**What you can do:**
* Post updates.
* Share content.
* Manage profile data.
**Example prompts:**
```text theme={null}
Post a LinkedIn update when I publish a new article.
```
```text theme={null}
Share company announcements to my LinkedIn profile.
```
```text theme={null}
Draft a LinkedIn post and let me approve it before publishing.
```
**Permissions requested:**
```text theme={null}
openid
profile
r_ads_reporting
r_organization_social
rw_organization_admin
w_member_social
r_profile_basicinfo
r_ads
r_verify
w_organization_social
rw_ads
r_basicprofile
r_organization_admin
email
r_1st_connections_size
```
[Connect LinkedIn to your app](/Integrations/linkedin-connector) with one shared account, or let each person connect their own.
Video platform. Profile stats, videos and insights.
**What you can do:**
* View stats.
* Track followers.
* Analyze content.
**Example prompts:**
```text theme={null}
Show my TikTok profile stats and follower count in a dashboard.
```
```text theme={null}
List my recent TikTok videos with their view counts.
```
```text theme={null}
Show my total likes, followers, and video count from TikTok.
```
**Permissions requested:**
```text theme={null}
artist.certification.read
artist.certification.update
user.info.basic
user.info.profile
user.info.stats
video.list
```
Manage Eventbrite events, attendees, orders, and organizations.
**What you can do:**
* List and create events.
* Track attendees and orders.
* Show ticket sales.
**Example prompts:**
```text theme={null}
List upcoming Eventbrite events in this app.
```
```text theme={null}
Show attendees for a selected Eventbrite event.
```
```text theme={null}
Sync Eventbrite orders into this app as records.
```
**Permissions requested:**
```text theme={null}
No granular scopes. Eventbrite uses an all-or-nothing token that grants access to the events, attendees, orders, and organizations available to the authorizing account.
```
CRM platform. Records, lists and notes.
**What you can do:**
* View and update records.
* Manage list entries.
* Read notes.
**Example prompts:**
```text theme={null}
Create an Attio record when someone signs up in this app.
```
```text theme={null}
Add qualified leads from this app to an Attio list.
```
```text theme={null}
Show the Attio notes for each customer in my account dashboard.
```
**Permissions requested:**
```text theme={null}
List Configuration: Read
List Entries: Read-write
Notes: Read
Object Configuration: Read
Records: Read-write
User Management: Read
```
Post, search, and manage content on X.
**What you can do:**
* Publish and manage posts.
* Search posts and look up profiles.
* Save posts to your bookmarks.
**Example prompts:**
```text theme={null}
Publish a new X post whenever I add a product launch announcement in my app.
```
```text theme={null}
Post a celebratory tweet when our team reaches a new subscriber milestone.
```
```text theme={null}
Show my recent posts and timeline from X in my dashboard.
```
**Permissions requested:**
```text theme={null}
tweet.read
tweet.write
users.read
bookmark.read
bookmark.write
like.read
offline.access
```
X is available as a [shared connector](/Integrations/Connectors#connector-types) only. Each API call uses [integration credits](/Account-and-billing/Credits).
***
## Customer Support
Customer support and helpdesk automation.
**What you can do:**
* Manage support tickets.
* Automate helpdesk workflows.
* Track customer conversations.
**Example prompts:**
```text theme={null}
Show open Gorgias support tickets in a dashboard.
```
```text theme={null}
Create a Gorgias ticket when a user reports an issue in my app.
```
```text theme={null}
Summarize recent Gorgias customer conversations for my team.
```
**Permissions requested:**
```text theme={null}
tickets:read
customers:read
users:read
customers:write
tickets:write
openid
offline
email
profile
```
Support customers and manage tickets from your app.
**What you can do:**
* Manage support tickets.
* Track customer conversations.
* Respond to customers.
**Example prompts:**
```text theme={null}
Show open Intercom conversations in a dashboard.
```
```text theme={null}
Create an Intercom ticket when a user reports an issue in my app.
```
```text theme={null}
Summarize recent Intercom conversations for my support team.
```
**Permissions requested:**
```text theme={null}
Read and list users and companies
Write users and companies
Read events
Write events
Read conversations
Write conversations
Read tags
Write tags
Read counts
Read tickets
Write tickets
Read admins
Read and list articles
```
***
## Project Management
Issue tracker. Issues, projects and cycles.
**What you can do:**
* Create issues.
* Track progress.
* Manage workflows.
**Example prompts:**
```text theme={null}
Connect Linear and show my issues by status, assignee, and priority in a dashboard.
```
```text theme={null}
Create a Linear issue automatically when a bug is submitted in this app.
```
```text theme={null}
Sync Linear issue status back into this app so I can track progress here.
```
**Permissions requested:**
```text theme={null}
read
issues:create
comments:create
write
admin
```
***
## Productivity
Create and manage tasks and projects, and view portfolios and goals.
**What you can do:**
* Create and update tasks.
* Organize projects and view portfolios.
* Assign work to teammates.
**Example prompts:**
```text theme={null}
Create an Asana task when a form is submitted in my app.
```
```text theme={null}
Display my team's Asana projects and their status in a dashboard.
```
```text theme={null}
Update an Asana task's status when work is completed in my app.
```
**Permissions requested:**
```text theme={null}
users:read
openid
email
profile
workspaces:read
workspaces.typeahead:read
teams:read
team_memberships:read
projects:read
projects:write
projects:delete
project_templates:read
tasks:read
tasks:write
tasks:delete
task_templates:read
task_custom_types:read
stories:read
stories:write
tags:read
tags:write
custom_fields:read
custom_fields:write
attachments:read
attachments:write
attachments:delete
portfolios:read
goals:read
jobs:read
webhooks:read
webhooks:write
webhooks:delete
```
Project management. Tasks, docs and goals.
**What you can do:**
* Create tasks.
* Track work.
* Manage teams.
**Example prompts:**
```text theme={null}
Connect ClickUp and show my tasks by status and due date in a dashboard.
```
```text theme={null}
Create a new ClickUp task when a new record is added to my Requests entity.
```
```text theme={null}
Sync ClickUp task status back into this app so I can track progress here.
```
**Permissions requested:**
```text theme={null}
Access to ClickUp resources such as tasks, lists, and spaces, based on the permissions you already have in your workspace.
```
Project management. Tasks, projects and timelines.
**What you can do:**
* Plan projects.
* Track tasks.
* Generate reports.
**Example prompts:**
```text theme={null}
Connect Wrike and show tasks for a selected project in a dashboard.
```
```text theme={null}
Display Wrike task statuses and assignees in a read-only dashboard.
```
```text theme={null}
Generate a weekly Wrike project status report and email it to me.
```
**Permissions requested:**
```text theme={null}
Default
wsReadOnly
```
Bring team docs and knowledge into your app.
**What you can do:**
* Access team docs.
* Search the knowledge base.
* Sync pages into your app.
**Example prompts:**
```text theme={null}
Show Confluence pages from a selected space in this app.
```
```text theme={null}
Search Confluence for docs matching a keyword and show results.
```
```text theme={null}
Sync Confluence knowledge base articles into this app.
```
**Permissions requested:**
```text theme={null}
read:content:confluence
read:page:confluence
write:page:confluence
read:space:confluence
write:space:confluence
read:attachment:confluence
read:group:confluence
write:group:confluence
read:me
offline_access
```
Track issues and project work from your app.
**What you can do:**
* Track issues.
* Manage project work.
* Update issue statuses.
**Example prompts:**
```text theme={null}
Show my open Jira issues in a dashboard.
```
```text theme={null}
Create a Jira issue when a bug is reported in my app.
```
```text theme={null}
Display Jira sprint progress in this app.
```
**Permissions requested:**
```text theme={null}
read:me
offline_access
read:jira-user
read:jira-work
write:jira-work
```
Plan tasks and projects from your app.
**What you can do:**
* Plan tasks.
* Organize projects.
* Track due dates.
**Example prompts:**
```text theme={null}
Show my Todoist tasks due today in a dashboard.
```
```text theme={null}
Create a Todoist task when an item is added in my app.
```
```text theme={null}
Organize my app's action items into Todoist projects.
```
**Permissions requested:**
```text theme={null}
data:read_write
```
Calendar app. Events, schedules and invites.
**What you can do:**
* Sync bookings.
* Create events.
* Check availability.
**Example prompts:**
```text theme={null}
Sync all my bookings directly to my Google Calendar.
```
```text theme={null}
Show my real-time availability from Google Calendar to clients.
```
```text theme={null}
When an appointment is confirmed, create a calendar event and invite attendees.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/calendar
https://www.googleapis.com/auth/calendar.readonly
https://www.googleapis.com/auth/calendar.events
https://www.googleapis.com/auth/calendar.events.readonly
https://www.googleapis.com/auth/calendar.events.freebusy
https://www.googleapis.com/auth/calendar.freebusy
https://www.googleapis.com/auth/calendar.app.created
https://www.googleapis.com/auth/calendar.calendarlist.readonly
https://www.googleapis.com/auth/calendar.events.public.readonly
https://www.googleapis.com/auth/calendar.settings.readonly
```
Task manager. Tasks, lists and due dates.
**What you can do:**
* Create tasks.
* Track progress.
* Manage lists.
**Example prompts:**
```text theme={null}
Create a Google Task when a new item is added in this app.
```
```text theme={null}
Add a Google Task when a request is marked urgent.
```
```text theme={null}
Sync tasks from this app to my Google Tasks list.
```
**Permissions requested:**
```text theme={null}
email
tasks.readonly
tasks
```
All-in-one workspace. Pages, databases and docs.
**What you can do:**
* Sync databases.
* Write pages.
* Organize content.
**Example prompts:**
```text theme={null}
Sync a Notion database with my CRM records.
```
```text theme={null}
Write project updates from this app into a Notion page.
```
```text theme={null}
Create a new Notion page for every new client added in this app.
```
**Permissions requested:**
```text theme={null}
read_content
update_content
insert_content
read_comment
insert_comment
```
Learning platform. Classes, assignments and grades.
**What you can do:**
* Manage courses.
* View assignments.
* Track students.
**Example prompts:**
```text theme={null}
List assignments from Google Classroom.
```
```text theme={null}
Show active Google Classroom courses in a dashboard.
```
```text theme={null}
Pull Google Classroom assignments and due dates into this app.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/classroom.courses
https://www.googleapis.com/auth/classroom.courses.readonly
https://www.googleapis.com/auth/classroom.coursework.students
https://www.googleapis.com/auth/classroom.coursework.me
https://www.googleapis.com/auth/classroom.courseworkmaterials
https://www.googleapis.com/auth/classroom.courseworkmaterials.readonly
https://www.googleapis.com/auth/classroom.topics
https://www.googleapis.com/auth/classroom.topics.readonly
https://www.googleapis.com/auth/classroom.rosters.readonly
https://www.googleapis.com/auth/classroom.announcements
https://www.googleapis.com/auth/classroom.announcements.readonly
https://www.googleapis.com/auth/classroom.student-submissions.students.readonly
https://www.googleapis.com/auth/classroom.student-submissions.me.readonly
https://www.googleapis.com/auth/classroom.guardianlinks.students.readonly
https://www.googleapis.com/auth/classroom.guardianlinks.me.readonly
https://www.googleapis.com/auth/classroom.profile.emails
https://www.googleapis.com/auth/classroom.push-notifications
```
Scheduling tool. Events, bookings and availability.
**What you can do:**
* Show availability.
* Track meetings.
* Trigger workflows.
**Example prompts:**
```text theme={null}
Show upcoming Calendly bookings in this app.
```
```text theme={null}
Display available Calendly meeting slots in a dashboard.
```
```text theme={null}
Trigger a workflow in this app when a new Calendly booking is confirmed.
```
**Permissions requested:**
```text theme={null}
availability:read
event_types:read
locations:read
scheduled_events:read
users:read
```
Manage projects, to-do lists, messages, documents, and schedules in Basecamp.
**What you can do:**
* Manage to-do lists.
* Post project messages.
* Track schedules.
**Example prompts:**
```text theme={null}
Show my Basecamp to-do lists and their status.
```
```text theme={null}
Create a Basecamp to-do when a task is added in my app.
```
```text theme={null}
Post a message to a Basecamp project when something important happens in my app.
```
**Permissions requested:**
```text theme={null}
Full access. Basecamp OAuth 2.0 has no granular scopes, so connecting grants access to all tools and resources the authorizing user can normally access.
```
Track time, manage projects and clients, and handle invoices and expenses in Harvest.
**What you can do:**
* Track time entries.
* Manage projects and clients.
* Handle invoices and expenses.
**Example prompts:**
```text theme={null}
Show my logged time entries for this week from Harvest.
```
```text theme={null}
Create a time entry in Harvest when I complete a task in my app.
```
```text theme={null}
List active Harvest projects and their clients.
```
**Permissions requested:**
```text theme={null}
Harvest is not scope-based.
```
Create Miro boards, profiles, and team settings for visual collaboration workflows.
**What you can do:**
* Create boards and add sticky notes.
* Show recent boards in your app.
* Invite people to your team and update profiles.
**Example prompts:**
```text theme={null}
Create a Miro board from a project brief submitted in my app.
```
```text theme={null}
Add sticky notes to a Miro board from collected brainstorming ideas.
```
```text theme={null}
Display recent Miro boards in a team workspace dashboard.
```
**Permissions requested:**
```text theme={null}
boards:read
boards:write
identity:read
identity:write
team:read
team:write
```
Read, create, and manage contacts in Google Contacts.
**What you can do:**
* Sync contacts with your app.
* Save new people as contacts automatically.
* Build a directory from your contacts.
**Example prompts:**
```text theme={null}
Build a CRM that syncs clients two-way with my Google Contacts.
```
```text theme={null}
Automatically save new customers as contacts when they sign up.
```
```text theme={null}
Create a searchable company directory from my Google Workspace organization.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/contacts.readonly
https://www.googleapis.com/auth/contacts
https://www.googleapis.com/auth/contacts.other.readonly
https://www.googleapis.com/auth/directory.readonly
```
Connect Gmail, Calendar, Contacts, Drive, Docs, and Sheets through one connection.
**What you can do:**
* Prepare for meetings with related emails, files, and contact details.
* Draft follow-up emails using meeting information.
* Summarize meetings and emails in documents and spreadsheets.
**Example prompts:**
```text theme={null}
Prep my next meeting from related email threads, files and the attendees' details.
```
```text theme={null}
Draft follow-ups to attendees after each meeting.
```
```text theme={null}
Turn this week's meetings and emails into a Doc and a Sheet.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/calendar.events
https://www.googleapis.com/auth/calendar.readonly
https://www.googleapis.com/auth/calendar.settings.readonly
https://www.googleapis.com/auth/contacts.readonly
https://www.googleapis.com/auth/documents
https://www.googleapis.com/auth/documents.readonly
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.readonly
https://www.googleapis.com/auth/gmail.compose
https://www.googleapis.com/auth/gmail.modify
https://www.googleapis.com/auth/gmail.readonly
https://www.googleapis.com/auth/gmail.send
https://www.googleapis.com/auth/spreadsheets
https://www.googleapis.com/auth/spreadsheets.readonly
```
***
## Developer Tools
Read and write repositories, pull requests, issues, pipelines, commits, and webhooks.
**What you can do:**
* Manage repositories and pull requests.
* Create and track issues.
* Monitor pipeline runs.
**Example prompts:**
```text theme={null}
Show my open Bitbucket pull requests in a dashboard.
```
```text theme={null}
Create a Bitbucket issue when a bug is reported in my app.
```
```text theme={null}
List repositories in my Bitbucket workspace with their latest commits.
```
**Permissions requested:**
```text theme={null}
account
account:write
email
issue
issue:write
pipeline
pipeline:variable
pipeline:write
project
project:admin
project:write
pullrequest
pullrequest:write
repository
repository:admin
repository:delete
repository:write
```
Manage PagerDuty incidents, schedules, and status pages.
**What you can do:**
* Open and manage incidents.
* Check on-call schedules.
* Post status page updates.
**Example prompts:**
```text theme={null}
Open a PagerDuty incident when something breaks.
```
```text theme={null}
Show who's on call and what's currently down.
```
```text theme={null}
Post a status page update during an outage.
```
**Permissions requested:**
```text theme={null}
change_events.read
change_events.write
escalation_policies.read
incidents.read
incidents.write
oncalls.read
schedules.read
schedules.write
services.read
status_pages.read
status_pages.write
teams.read
teams.write
users.read
```
Monitor issues, events, projects, releases, and application health.
**What you can do:**
* Track issues and errors.
* Monitor releases.
* Review event details.
**Example prompts:**
```text theme={null}
Show unresolved Sentry issues by project in a dashboard.
```
```text theme={null}
Resolve a Sentry issue when the linked bug is marked fixed in my app.
```
```text theme={null}
Track recent Sentry error counts for my deployments.
```
**Permissions requested:**
```text theme={null}
event:read
event:write
org:read
project:read
project:releases
project:write
team:read
```
Code hosting. Repos, issues and pull requests.
**What you can do:**
* Track PRs.
* Manage repos.
* Create issues.
**Example prompts:**
```text theme={null}
Show my open issues from GitHub in a dashboard.
```
```text theme={null}
List pull requests waiting for review in my repos.
```
```text theme={null}
Create a new GitHub issue when a bug is reported in my app.
```
```text theme={null}
Display my GitHub repository stats and activity.
```
```text theme={null}
Track commits and releases from my GitHub projects.
```
**Permissions requested:**
```text theme={null}
read:user
read:org
repo
```
`repo` is requested only when you choose **Read & write** for a shared connector, or select it under **Scopes** for an app user connector.
[Connect GitHub to your app](/Integrations/github-connector) to read profile and organization data, or add read and write access to your repositories.
DevOps platform. Projects, merge requests and pipelines.
**What you can do:**
* Track MRs.
* Run pipelines.
* Manage repos.
**Example prompts:**
```text theme={null}
List open merge requests in my GitLab project.
```
```text theme={null}
Show open GitLab merge requests in a dashboard.
```
```text theme={null}
Create a GitLab issue when a bug is reported in this app.
```
**Permissions requested:**
```text theme={null}
api
read_user
openid
profile
email
```
Read and write data, schemas, and settings in your Supabase projects.
**What you can do:**
* Browse projects, schemas, and tables.
* Create tables and add columns.
* Read, add, update, and delete records.
**Example prompts:**
```text theme={null}
Show the table schemas and column details for my Supabase project.
```
```text theme={null}
Insert a new row into a Supabase table when a form is submitted in my app.
```
```text theme={null}
Create a new table or add a column to my Supabase schema.
```
**Permissions requested:**
```text theme={null}
projects:read
projects:write
organizations:read
database:read
database:write
rest:read
rest:write
auth:read
auth:write
storage:read
edge_functions:read
edge_functions:write
environment:read
environment:write
domains:read
domains:write
secrets:read
secrets:write
```
AI model hub. Models, datasets and inference.
**What you can do:**
* Run models.
* Analyze data.
* Build AI features.
**Example prompts:**
```text theme={null}
Run sentiment analysis on customer feedback using Hugging Face.
```
```text theme={null}
Use a Hugging Face model to classify support tickets in this app.
```
```text theme={null}
Analyze text from this app with a Hugging Face model and return structured results.
```
**Permissions requested:**
```text theme={null}
manage-repos
read-repos
contribute-repos
openid
profile
email
inference-api
```
Monitoring platform. Monitors, metrics, hosts, events, and incidents.
**What you can do:**
* Track monitor statuses.
* Chart metrics over time.
* Review hosts, events, and incidents.
**Example prompts:**
```text theme={null}
Build a dashboard of Datadog monitor statuses grouped by service.
```
```text theme={null}
Chart a Datadog metric, like CPU by host, over the last 24 hours.
```
```text theme={null}
List unhealthy hosts from Datadog and group them by tag.
```
**Permissions requested:**
```text theme={null}
apm_read
dashboards_read
events_read
hosts_read
incident_read
logs_read_data
logs_read_index_data
metrics_read
monitors_read
teams_read
timeseries_query
```
***
## Storage & Documents
Manage documents.
**What you can do:**
* Store files.
* Search documents.
* Manage lists.
**Example prompts:**
```text theme={null}
Show SharePoint documents for a selected site in this app.
```
```text theme={null}
Display files from a SharePoint document library in a dashboard.
```
```text theme={null}
Sync documents from SharePoint to records in this app.
```
**Permissions requested:**
```text theme={null}
offline_access
User.Read
Files.ReadWrite.All
Sites.ReadWrite.All
```
Send documents for signature from your app.
**What you can do:**
* Send documents for signature.
* Track signing status.
* Manage signed documents.
**Example prompts:**
```text theme={null}
Send a document for signature with Docusign when a deal is approved in my app.
```
```text theme={null}
Show the signing status of Docusign envelopes in a dashboard.
```
```text theme={null}
Store signed Docusign documents against records in this app.
```
**Permissions requested:**
```text theme={null}
signature
openid
extended
```
Document storage and generation.
**What you can do:**
* Create documents.
* Edit document content.
* Generate documents from app data.
**Example prompts:**
```text theme={null}
Create a Word document from the notes in my app.
```
```text theme={null}
Generate a Word report from this app's data and save it.
```
```text theme={null}
Update a Word document when a record changes in my app.
```
**Permissions requested:**
```text theme={null}
User.Read
offline_access
Files.ReadWrite
```
Notebooks, sections, and note pages.
**What you can do:**
* Create notes.
* Organize notebooks and sections.
* Save app content to OneNote.
**Example prompts:**
```text theme={null}
Save meeting notes from my app into a OneNote notebook.
```
```text theme={null}
Create a OneNote page when I add a new idea in my app.
```
```text theme={null}
Organize my app's notes into OneNote sections.
```
**Permissions requested:**
```text theme={null}
offline_access
openid
profile
User.Read
Notes.ReadWrite.All
Notes.Read
```
Spreadsheet data and workbook automation.
**What you can do:**
* Create spreadsheets.
* Edit cells and sheets.
* Automate workbooks from app data.
**Example prompts:**
```text theme={null}
Export my app's records to an Excel workbook.
```
```text theme={null}
Create an Excel spreadsheet summarizing this month's orders.
```
```text theme={null}
Update an Excel sheet when new data is added in my app.
```
**Permissions requested:**
```text theme={null}
offline_access
openid
profile
User.Read
Search.Read.All
Files.ReadWrite.All
Sites.ReadWrite.All
```
Presentation storage and generation.
**What you can do:**
* Create presentations.
* Edit slides and layouts.
* Generate decks from app data.
**Example prompts:**
```text theme={null}
Generate a PowerPoint deck from this month's data in my app.
```
```text theme={null}
Create a PowerPoint presentation summarizing my app's records.
```
```text theme={null}
Update PowerPoint slides when data changes in my app.
```
**Permissions requested:**
```text theme={null}
User.Read
offline_access
Files.ReadWrite
```
Cloud storage. Export and back up app files.
**What you can do:**
* Save files.
* Organize folders.
* Back up data.
**Example prompts:**
```text theme={null}
Save generated PDF reports from my app to Google Drive.
```
```text theme={null}
Upload files from this app to a Google Drive folder for each client.
```
```text theme={null}
Back up exported data from this app to Google Drive every week.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.readonly
https://www.googleapis.com/auth/drive.file
```
Document editor. Documents, comments and edits.
**What you can do:**
* Generate docs.
* Fill templates.
* Create notes.
**Example prompts:**
```text theme={null}
Generate a Google Doc contract when a new client is added.
```
```text theme={null}
Create a Google Doc with a daily summary of activity from my app.
```
```text theme={null}
Save meeting notes from this app to a Google Doc.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/documents
https://www.googleapis.com/auth/documents.readonly
```
Spreadsheet app. Sheets, rows and cells.
**What you can do:**
* Sync data.
* Import and export.
* Generate reports.
**Example prompts:**
```text theme={null}
Sync new records from this app into a Google Sheets spreadsheet.
```
```text theme={null}
Keep a Google Sheets dashboard updated with daily metrics from my app.
```
```text theme={null}
Export weekly reports from this app to Google Sheets automatically.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/spreadsheets
https://www.googleapis.com/auth/spreadsheets.readonly
```
Presentation tool. Slides, decks and layouts.
**What you can do:**
* Generate slides.
* Fill templates.
* Share decks.
**Example prompts:**
```text theme={null}
Generate a Google Slides presentation summarizing this week's key KPIs.
```
```text theme={null}
Create a presentation from KPI data in this app.
```
```text theme={null}
Build a Google Slides deck from a weekly report in this app.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/presentations
https://www.googleapis.com/auth/presentations.readonly
```
Cloud storage. Files, folders and syncing.
**What you can do:**
* Upload files.
* Sync content.
* Organize storage.
**Example prompts:**
```text theme={null}
Upload files from this app to Dropbox.
```
```text theme={null}
Save client documents from this app to a Dropbox folder.
```
```text theme={null}
Sync uploaded files from this app to Dropbox automatically.
```
**Permissions requested:**
```text theme={null}
account_info.read
files.metadata.read
files.content.read
files.content.write
```
Cloud storage. Files, folders and permissions.
**What you can do:**
* Store files.
* Manage folders.
* Share content.
**Example prompts:**
```text theme={null}
Connect Box and list files for a selected project.
```
```text theme={null}
Upload files from this app to a Box folder.
```
```text theme={null}
Show Box files related to each client inside my app.
```
**Permissions requested:**
```text theme={null}
root_readwrite
```
Cloud storage. Files, folders and sharing.
**What you can do:**
* Store files.
* Sync data.
* Access documents.
**Example prompts:**
```text theme={null}
Save files from this app to OneDrive.
```
```text theme={null}
Upload generated reports from this app to OneDrive automatically.
```
```text theme={null}
Show OneDrive files related to each client in my app.
```
**Permissions requested:**
```text theme={null}
Files.ReadWrite.All
Sites.ReadWrite.All
Search.Read.All
User.Read
offline_access
openid
profile
email
```
***
## Content & Web
Publish and manage posts, pages, media, and comments on your WordPress.com sites.
**What you can do:**
* Create and publish posts and pages.
* Upload media.
* Review and manage comments.
**Example prompts:**
```text theme={null}
List my latest WordPress.com posts with their status in a dashboard.
```
```text theme={null}
Publish a blog post to my WordPress.com site when I approve a draft in my app.
```
```text theme={null}
Show recent comments on my WordPress.com site and let me approve them.
```
**Permissions requested:**
```text theme={null}
global
```
Headless CMS. Content, media and models.
**What you can do:**
* Fetch content.
* Manage entries.
* Sync data.
**Example prompts:**
```text theme={null}
Show content from Contentful in this app.
```
```text theme={null}
Pull blog posts from Contentful and display them in a dashboard.
```
```text theme={null}
Sync published Contentful entries into this app.
```
**Permissions requested:**
```text theme={null}
content_management_manage
content_management_read
```
Website builder. Site data, pages and store.
**What you can do:**
* View analytics.
* Sync customers.
* Track orders.
**Example prompts:**
```text theme={null}
Show Wix site analytics in this app.
```
```text theme={null}
Display recent Wix store orders in a dashboard.
```
```text theme={null}
Sync Wix customer data into this app and show it in a table.
```
**Permissions requested:**
```text theme={null}
Manage stores
Manage form submissions
Manage payments
Manage coupons
Manage events
Manage Paylinks
Manage blog
Manage Media Manager
Read stores
Manage inbox messages
Read site, business, and email details
Manage restaurants
Manage bookings
Manage eCommerce data
Manage email marketing
Manage members and contacts
```
Live streaming, advanced channel management, chat automation, and community moderation.
**What you can do:**
* Manage channel info and streams.
* Automate chat messages.
* Moderate your community.
**Example prompts:**
```text theme={null}
Show my Twitch channel stats and follower count in a dashboard.
```
```text theme={null}
Post a chat message when my Twitch stream goes live.
```
```text theme={null}
Display my recent Twitch streams and their viewer counts in this app.
```
**Permissions requested:**
```text theme={null}
user:read:email
channel:manage:broadcast
channel:read:subscriptions
moderator:read:followers
user:write:chat
user:read:chat
clips:edit
channel:manage:redemptions
bits:read
channel:read:hype_train
channel:moderate
moderation:read
```
Photo storage. Uploads, albums and selected photos.
**What you can do:**
* Upload photos from your app.
* Create albums and add uploaded photos to them.
* Use photos you select with the Google Photos Picker.
**Example prompts:**
```text theme={null}
Upload work-site documentation photos from my app into a dated Google Photos album.
```
```text theme={null}
Create Google Photos albums automatically from my app and show what was uploaded.
```
```text theme={null}
Let me select photos with the Google Photos Picker and show them in my app.
```
**Permissions requested:**
```text theme={null}
email
https://www.googleapis.com/auth/photoslibrary.appendonly
https://www.googleapis.com/auth/photoslibrary.edit.appcreateddata
https://www.googleapis.com/auth/photoslibrary.readonly.appcreateddata
https://www.googleapis.com/auth/photospicker.mediaitems.readonly
```
To use existing photos, select them with the Google Photos Picker. Outside the Picker, your app can read and edit only the photos and albums it created.
***
## Finance
Manage products, checkouts, orders, subscriptions, customers, benefits, and discounts.
**What you can do:**
* Manage products and subscriptions.
* Track orders and revenue.
* Grant benefits to customers.
**Example prompts:**
```text theme={null}
Show my Polar product sales and revenue in a dashboard.
```
```text theme={null}
Create a Polar checkout link when a user upgrades in my app.
```
```text theme={null}
List active subscriptions and their customers from Polar.
```
**Permissions requested:**
```text theme={null}
benefits:read
benefits:write
checkout_links:read
checkout_links:write
checkouts:read
checkouts:write
custom_fields:read
custom_fields:write
customer_meters:read
customer_portal:read
customer_portal:write
customer_seats:read
customer_seats:write
customer_sessions:write
customers:read
customers:write
discounts:read
discounts:write
disputes:read
disputes:write
email
events:read
events:write
files:read
files:write
license_keys:read
license_keys:write
member_sessions:write
members:read
members:write
meters:read
meters:write
metrics:read
metrics:write
notification_recipients:read
notification_recipients:write
notifications:read
notifications:write
openid
orders:read
orders:write
organizations:read
organizations:write
payments:read
payouts:read
payouts:write
products:read
products:write
profile
refunds:read
refunds:write
subscriptions:read
subscriptions:write
transactions:read
transactions:write
user:read
user:write
wallets:read
wallets:write
```
Track expenses.
**What you can do:**
* Track balances.
* Split bills.
* Manage expenses.
**Example prompts:**
```text theme={null}
Show current Splitwise balances for my group in this app.
```
```text theme={null}
Display all shared expenses from Splitwise in a dashboard.
```
```text theme={null}
Show who owes what across my Splitwise group.
```
**Permissions requested:**
```text theme={null}
read:user_profile
read:network
write:manage_network
write:delete_network
read:expenses
write:create_expenses
write:modify_expenses
read:metadata
read:notifications
```
***
## Accounting
Read and write sales invoices, estimates, documents, contacts, bank transactions, and time entries.
**What you can do:**
* Create and send sales invoices and estimates.
* Manage contacts.
* Track bank transactions.
**Example prompts:**
```text theme={null}
Create a Moneybird sales invoice for a contact when a deal closes.
```
```text theme={null}
Show my unpaid Moneybird sales invoices in a dashboard.
```
```text theme={null}
List my Moneybird contacts and their outstanding balances.
```
**Permissions requested:**
```text theme={null}
bank
documents
estimates
sales_invoices
settings
time_entries
```
Read and write invoices, estimates, customers, products, transactions, and sales tax.
**What you can do:**
* Send invoices and estimates.
* Manage customers and products.
* Track transactions.
**Example prompts:**
```text theme={null}
Show my unpaid Wave invoices in a dashboard.
```
```text theme={null}
Create a Wave invoice for a customer when a deal closes in my app.
```
```text theme={null}
List my Wave customers and their outstanding balances.
```
**Permissions requested:**
```text theme={null}
account:read
business:read
customer:read
customer:write
estimate:read
estimate:send
estimate:write
invoice:read
invoice:send
invoice:write
product:read
product:write
sales_tax:read
sales_tax:write
transaction:write
user:read
vendor:read
```
Manage invoices, expenses, customers, and accounting in QuickBooks Online.
**What you can do:**
* Create and manage invoices.
* Track expenses and payments.
* Manage customers and accounting data.
**Example prompts:**
```text theme={null}
Connect QuickBooks and show my outstanding invoices in this app.
```
```text theme={null}
Create a QuickBooks invoice when a customer places an order in my app.
```
```text theme={null}
Show expenses and customer balances from QuickBooks in a dashboard.
```
**Permissions requested:**
```text theme={null}
com.intuit.quickbooks.accounting
openid
email
profile
```
Handle invoicing and expenses from your app.
**What you can do:**
* Create and send invoices.
* Track expenses.
* Manage clients.
**Example prompts:**
```text theme={null}
Create a FreshBooks invoice when a project is completed in my app.
```
```text theme={null}
Show unpaid FreshBooks invoices in a dashboard.
```
```text theme={null}
Track FreshBooks expenses for a client in this app.
```
**Permissions requested:**
```text theme={null}
user:profile:read
user:clients:read
user:clients:write
user:projects:read
user:projects:write
user:invoices:read
user:invoices:write
user:expenses:read
user:expenses:write
user:credit_notes:read
user:credit_notes:write
user:estimates:read
user:estimates:write
user:uploads:read
user:uploads:write
user:time_entries:read
user:time_entries:write
```
***
## HR
Manage employees.
**What you can do:**
* View directory.
* Track time off.
* Manage HR data.
**Example prompts:**
```text theme={null}
Show my employee directory from BambooHR in this app.
```
```text theme={null}
Display upcoming time off from BambooHR in a dashboard.
```
```text theme={null}
Show employee details and managers from BambooHR.
```
**Permissions requested:**
```text theme={null}
application
application.write
job_opening
job_opening.write
email
openid
company:details
company:info
job_organization
employee
employee.write
employee:contact
employee:demographic
employee:job
employee:management
employee:name
employee:photo
employee_directory
offline_access
public.integration
public.user
webhooks
webhooks.write
time_off
```
# Connecting Databricks to your app
Source: https://docs.base44.com/Integrations/databricks-connector
Connect Databricks to your app to run notebooks, query data, and manage pipelines.
Connect your app to Databricks to run notebooks, execute SQL, and manage data pipelines, then build dashboards, reports, and AI apps on top of your lakehouse data.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
***
## What you can do
Turn your data and jobs into actions and insights in your app.
Trigger Databricks notebooks and data pipeline jobs from your app.
Run SQL against your lakehouse and SQL warehouses, and surface the results in your app.
Turn Databricks queries into charts, tables, and dashboards your team can read.
**Example prompts**
```text theme={null}
Run a Databricks notebook to process today's data.
```
```text theme={null}
Execute a SQL query on my Databricks lakehouse.
```
```text theme={null}
Trigger a data pipeline job in Databricks.
```
```text theme={null}
Fetch results from a Databricks SQL warehouse.
```
***
## Setting up OAuth in Databricks
You need a Databricks account admin to create a custom OAuth application before you connect Databricks to Base44.
Get the Base44 callback URL from [Registering callback URLs](/Integrations/Connectors#registering-callback-urls).
Follow [Databricks' guide to creating a custom OAuth application](https://docs.databricks.com/aws/en/integrations/enable-disable-oauth#enable-custom-oauth-applications-using-the-databricks-ui).
In Databricks, add that callback URL as a redirect URI and select **All APIs**.
Click **Generate a client secret**, then copy the Client ID and Client Secret. Databricks shows the Client Secret only once.
***
## Connecting Databricks
Connect Databricks so your app can query your data.
**Before you begin:**
* **Databricks OAuth app:** Have a Databricks account admin create a custom OAuth application and generate a client secret. Keep its **Client ID** and **Client Secret**. See [Setting up OAuth in Databricks](#setting-up-oauth-in-databricks).
* **Databricks Workspace URL:** Have your workspace URL ready, for example `adb-123456789.10.azuredatabricks.net`.
* **Base44 workspace access:** You must be a workspace owner or admin to register the connector in Base44.
* **Databricks access:** Each person who connects needs access to the Databricks workspace resources your app uses.
**To add Databricks from the Connectors page:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Databricks**, then click it.
4. Enter a **Connector name**.
5. Enter the **Client ID** and **Client Secret** from your Databricks OAuth app.
6. Under **Scopes**, keep the defaults. See [Scopes and permissions](#scopes-and-permissions).
7. Under **Connection Configuration**, enter your **Databricks Workspace URL**, for example `adb-123456789.10.azuredatabricks.net`. Don't include a path or query string.
8. Click **Add Connector**.
9. Open your app and ask the AI chat to add a Databricks feature.
10. Authorize the account when prompted.
Your app can use one shared Databricks connection or let each person connect their own account. Tell the AI chat which you want.
***
## Scopes and permissions
Your Databricks permissions determine which data and workspace resources your app can use.
* `all-apis`: Calls Databricks APIs
* `offline_access`: Refreshes the connection without another sign-in
* Leave **Additional scopes** empty unless your app needs more.
**Access:** Databricks limits the connection to the connected identity's existing workspace permissions.
***
## Using Databricks in a backend function
Once Databricks is connected, your backend functions can retrieve an access token and call Databricks APIs. Base44 handles the OAuth flow and credential storage.
Use `getWorkspaceConnection(connectorId)` when your app uses one shared Databricks identity.
```javascript theme={null}
import { createClientFromRequest } from "npm:@base44/sdk@0.8.44";
Deno.serve(async (req) => {
const base44 = createClientFromRequest(req);
const connectorId = "YOUR_CONNECTOR_ID";
const { accessToken, connectionConfig } =
await base44.asServiceRole.connectors.getWorkspaceConnection(connectorId);
const baseUrl = connectionConfig.host.startsWith("https://")
? connectionConfig.host
: `https://${connectionConfig.host}`;
// Use accessToken and baseUrl to call the Databricks REST API.
return Response.json({ workspaceUrl: baseUrl });
});
```
Use `getCurrentAppUserConnection(connectorId)` when each person connects with their own Databricks identity.
```javascript theme={null}
import { createClientFromRequest } from "npm:@base44/sdk@0.8.44";
Deno.serve(async (req) => {
const base44 = createClientFromRequest(req);
const user = await base44.auth.me();
if (!user) {
return Response.json({ error: "Unauthorized" }, { status: 401 });
}
const connectorId = "YOUR_CONNECTOR_ID";
const { accessToken, connectionConfig } =
await base44.asServiceRole.connectors.getCurrentAppUserConnection(connectorId);
const baseUrl = connectionConfig.host.startsWith("https://")
? connectionConfig.host
: `https://${connectionConfig.host}`;
// Use accessToken and baseUrl for the signed-in person's Databricks requests.
return Response.json({ workspaceUrl: baseUrl });
});
```
Retrieve a connection, read its details, and call the service API from a backend function.
***
## Troubleshooting
Check your workspace URL and Databricks permissions if the connector can't connect or run queries.
Your workspace host has to end in `databricks.com`, `azuredatabricks.net`, `cloud.databricks.us`, or `cloud.databricks.mil`. Enter it on its own, with no path, for example `adb-123456789.10.azuredatabricks.net`.
Each person who connects needs `CAN_USE` on the SQL warehouse your app queries, or Databricks returns `PERMISSION_DENIED`. For an app user connection, Unity Catalog applies per person, so the same query can return different rows for different people, or `TABLE_OR_VIEW_NOT_FOUND` for someone without access to a table.
Databricks has no default SQL warehouse, so every query needs a warehouse ID. Find it in Databricks under **SQL → SQL Warehouses**, then open the warehouse and copy its ID.
# Connecting GitHub to your app
Source: https://docs.base44.com/Integrations/github-connector
Connect GitHub to your app to track pull requests, work with issues, and follow repository activity.
Connect your app to GitHub to track pull requests, work with issues, and follow repository activity, either from one shared account or from each person's own GitHub account.
This connector lets your app work with the GitHub API. To [sync your app's code with a GitHub repository](/Getting-Started/base-code#setting-up-base-code), use Base Code instead.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
***
## What you can do
Bring engineering work into your app's workflows.
Show which pull requests are open, who is reviewing them, and what is waiting, on a dashboard inside your app.
List and filter issues, and open a new one when something is reported in your app.
Bring commits, releases, and repository stats into the pages and reports your team reads.
**Example prompts**
Describe the repository, what triggers the action, and any dynamic fields in the AI chat. For example:
```text theme={null}
Show my open issues from GitHub in a dashboard.
```
```text theme={null}
List pull requests waiting for review in my repos.
```
```text theme={null}
Create a new GitHub issue when a bug is reported in my app.
```
```text theme={null}
Display my GitHub repository stats and activity.
```
```text theme={null}
Track commits and releases from my GitHub projects.
```
***
## Connecting GitHub
Connect GitHub so your app can read repository data and open issues.
You connect one account once, and everyone who uses your app shares that connection and its data.
**To add a shared GitHub connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **GitHub API**, then click it.
4. Select **Shared connector**, then click **Next**.
5. Enter a **Connection name**.
6. Under **Who can access**, select where the connection can be used. The default is **Apps and Super agent**.
7. Under **Permissions**, select **Read-only** or **Read & write**. The default is **Read-only**.
8. Click **Add connector**, then sign in with the GitHub account you want to share.
Each person connects their own GitHub account, so your app can work with their repositories.
**Before you begin:** Only workspace admins can set up an app user connector, and you need your own OAuth client. See [Using your own OAuth client](/Integrations/Connectors#using-your-own-oauth-client).
**To add an app user GitHub connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **GitHub API**, then click it.
4. Select **App user connector**, then click **Next**.
5. Enter a **Connector name**.
6. Enter the **Client ID** and **Client Secret** from your GitHub OAuth app.
7. Under **Scopes**, select what your app needs. See [Scopes and permissions](#scopes-and-permissions).
8. Click **Add Connector**.
Then ask the AI chat to add a way for people to connect their own GitHub account.
***
## Scopes and permissions
Scopes control what your app can do in GitHub.
Under **Permissions**, select the access your app needs:
* **Read-only**: Grants `read:user` and `read:org`, to read profile and organization data
* **Read & write**: Adds `repo`, for full control of the repositories the connected account can access
Nothing is selected under **Scopes** by default, so select what your app needs. **Additional scopes** is prefilled with:
* `read:user` and `read:org`: Read profile and organization data
**Access:** Your app works with the repositories and organizations that the GitHub account authorizing the connection can access.
***
## Using GitHub in a backend function
Once GitHub is connected, your backend functions can retrieve an access token and call the GitHub API directly. Base44 handles the OAuth flow and token storage.
* For a shared connection, use `getConnection()` to retrieve the token.
* For an app user connection, use `getCurrentAppUserConnection()` so each request uses the signed-in person's token.
```javascript theme={null}
// Shared connection: one account the whole app uses
const connection = await base44.asServiceRole.connectors.getConnection("github");
// Use the connection's access token to call the GitHub API.
```
Configure, deploy, and call a shared connection from a backend function.
Retrieve a per-user token and call the API as the signed-in person.
# Connecting Gmail to your app
Source: https://docs.base44.com/Integrations/gmail-connector
Connect Gmail to your app to send, read, and manage emails.
Connect your app to [Gmail](https://base44.com/integrations/connectors/gmail) to send, read, and manage emails, either from one shared account or from each person's own inbox.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
***
## What you can do
Bring email tasks into your app's workflows.
Send confirmations, alerts, and personalized follow-ups when something happens in your app.
Read and parse messages that arrive, then turn them into records such as support tickets.
Organize mail as your app works through it, for example mark messages as read or apply labels.
**Example prompts**
Describe the subject line, message body, formatting, recipients, and any dynamic fields in the AI chat. For example:
```text theme={null}
Send automated confirmation emails when a new order is placed.
```
```text theme={null}
Read and parse incoming emails to create support tickets.
```
```text theme={null}
Trigger a workflow automatically when a new email arrives.
```
```text theme={null}
Send personalized follow-up emails to new leads.
```
```text theme={null}
Notify team members via email when tasks are assigned.
```
***
## Connecting Gmail
Connect Gmail so your app can send and read mail.
You connect one account once, and everyone who uses your app shares that connection and its data.
**To add a shared Gmail connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Gmail**, then click it.
4. Select **Shared connector**, then click **Next**.
5. Enter a **Connection name**.
6. Under **Who can access**, select where the connection can be used. The default is **Apps and Super agent**.
7. Under **Permissions**, select **Read-only** or **Read & write**. The default is **Read-only**.
8. Click **Add connector**, then sign in with the Gmail account you want to share.
Each person connects their own Gmail account, so your app can work with their email.
**Before you begin:** Only workspace admins can set up an app user connector, and you need your own OAuth client. See [Using your own OAuth client](/Integrations/Connectors#using-your-own-oauth-client).
**To add an app user Gmail connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Gmail**, then click it.
4. Select **App user connector**, then click **Next**.
5. Enter a **Connector name**.
6. Enter the **Client ID** and **Client Secret** from your Google OAuth app.
7. Under **Scopes**, review what is selected by default and remove any your app doesn't need. See [Scopes and permissions](#scopes-and-permissions).
8. Click **Add Connector**.
Then ask the AI chat to add a way for people to connect their own Gmail account.
***
## Scopes and permissions
Scopes control what your app can do in Gmail. You choose them when you set up an app user connector. For a shared connector, you select **Read-only** or **Read & write** instead.
* `email`: Identifies the Google account. It appears under **Always included**.
Under **Scopes**, these are selected by default. Remove any your app doesn't need. Gmail scope names start with `https://www.googleapis.com/auth/`:
* `gmail.compose`: Create and update drafts
* `gmail.labels`: Manage labels
* `gmail.modify`: Mark as read or apply labels
* `gmail.readonly`: Read messages and metadata
* `gmail.send`: Send messages
* In **Additional scopes**, `gmail.settings.basic` is filled in to manage filters, signatures, and the vacation responder.
**Access:** Your app works with the mail of the Gmail account that authorizes the connection.
Reading mail content is a restricted Google scope. [Check how Google groups these scopes](/Integrations/Connectors#choosing-google-scopes) before your app goes live.
***
## Using Gmail in a backend function
Once Gmail is connected, your backend functions can retrieve an access token and call the Gmail API directly. Base44 handles the OAuth flow and token storage.
* For a shared connection, use `getConnection()` to retrieve the token.
* For an app user connection, use `getCurrentAppUserConnection()` so each request uses the signed-in person's token.
```javascript theme={null}
// Shared connection: one account the whole app uses
const connection = await base44.asServiceRole.connectors.getConnection("gmail");
// Use the connection's access token to call the Gmail API.
```
Configure, deploy, and call a shared connection from a backend function.
Retrieve a per-user token and call the API as the signed-in person.
***
## Troubleshooting
Check account access if people can't connect Gmail.
If your Google OAuth app is in testing mode, only approved test users can connect. Publish or move your OAuth app out of testing mode so anyone using your app can connect their own account.
# Connecting Google Search Console to your app
Source: https://docs.base44.com/Integrations/google-search-console-connector
Connect Google Search Console to your app to access search performance and indexing data.
Connect your app to Google Search Console to access search performance data, sitemaps, URL inspection, and indexing status for your sites, either from one Search Console account for the whole app or from each person's own account.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
Get your own Base44 app into Google Search.
***
## What you can do
Use your site's search data to monitor performance and indexing.
Pull clicks, impressions, CTR, and average position into dashboards and reports inside your app.
Inspect URLs to see whether pages are indexed, and surface coverage issues as they appear.
List and submit sitemaps for your verified sites so Google can discover your pages faster.
**Example prompts**
```text theme={null}
Sync search performance data from Google Search Console into my app.
```
```text theme={null}
Show top queries and pages from Search Console in a dashboard.
```
```text theme={null}
Check indexing status for URLs and surface issues.
```
```text theme={null}
List and manage sitemaps for my verified sites.
```
```text theme={null}
Export search analytics (clicks, impressions, CTR) to my app.
```
***
## Connecting Search Console
Connect Search Console so your app can read search performance data.
You connect one account once, and everyone who uses your app shares that connection and its data.
**To add a shared Search Console connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Google Search Console**, then click it.
4. Select **Shared connector**, then click **Next**.
5. Enter a **Connection name**.
6. Under **Who can access**, select where the connection can be used. The default is **Apps and Super agent**.
7. Click **Add connector**, then sign in with the Google account that has access to the properties you want.
Each person connects their own Google account, so your app can work with the Search Console properties they can access.
**Before you begin:** Only workspace admins can set up an app user connector, and you need your own OAuth client. See [Using your own OAuth client](/Integrations/Connectors#using-your-own-oauth-client).
**To add an app user Search Console connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Google Search Console**, then click it.
4. Select **App user connector**, then click **Next**.
5. Enter a **Connector name**.
6. Enter the **Client ID** and **Client Secret** from your Google OAuth app.
7. Under **Scopes**, select what your app needs. See [Scopes and permissions](#scopes-and-permissions).
8. Click **Add Connector**.
Then ask the AI chat to add a way for people to connect their own Google account.
***
## Scopes and permissions
Scopes control what your app can do with your Search Console data.
* `email`: Identifies the Google account. It appears under **Always included**.
Under **Scopes**, select what your app needs. Search Console scope names start with `https://www.googleapis.com/auth/`:
* `webmasters`: View and manage data, including sitemaps
* `webmasters.readonly`: View data without making changes
**Access:** Your app sees the Search Console properties the connected Google account can access.
If you need a scope that isn't listed here, [share your feedback with us](https://feedback.base44.com/?b=67cf45295430bd6b6434b68c).
***
## Using Google Search Console in a backend function
Once Google Search Console is connected, your backend functions can retrieve an access token and call the Search Console API directly. Base44 handles the OAuth flow and token storage.
* For a shared connection, use `getConnection()` to retrieve the token.
* For an app user connection, use `getCurrentAppUserConnection()` so each request uses the signed-in person's token.
```javascript theme={null}
// Shared connection: one account the whole app uses
const connection = await base44.asServiceRole.connectors.getConnection("google_search_console");
// Use the connection's access token to call the Search Console API.
```
Configure, deploy, and call a shared connection from a backend function.
Retrieve a per-user token and call the API as the signed-in person.
***
## Troubleshooting
Check account access and property setup if your search data is missing.
Check the following.
* The connection is listed in your app's **Integrations** page under **App connections** and shows as connected.
* The Google account you used has access to the Search Console property you want to query.
* The property you want to query is verified in Search Console.
If the issue continues, [reconnect the connector](/Integrations/Connectors#managing-your-connectors).
If your Google OAuth app is in testing mode, only approved test users can connect. Publish or move your OAuth app out of testing mode so anyone using your app can connect their own account.
Search Console returns data for properties the connected account has permission to access, and new properties can take a few days to collect data. Confirm that account has access to the property, then check the same date range directly in Search Console.
***
## FAQs
Use the Google account that has owner or full access to the Search Console property you want to query. If you aren't sure which account has access, check the users list in Search Console under **Settings > Users and permissions**.
Yes. If you manage multiple properties under the same Google account, the AI chat can query data across them when you specify which property you want.
Base44 generates your sitemap at `/sitemap.xml`. When you describe sitemap tasks in the AI chat, you can reference this path directly.
# Connecting LinkedIn to your app
Source: https://docs.base44.com/Integrations/linkedin-connector
Connect LinkedIn to your app to publish posts and show profile details.
Connect your app to [LinkedIn](https://base44.com/integrations/connectors/linkedin) to publish posts and work with profile data, either from one shared account or from each person's own LinkedIn account.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
***
## What you can do
Bring LinkedIn updates into your app's workflows.
Post an update when something happens in your app, such as a release going out or a milestone being reached.
Bring profile information into dashboards and pages inside your app.
Send recurring updates, such as a weekly summary, straight from your app.
**Example prompts**
Describe the post text, what triggers it, and any dynamic fields in the AI chat. For example:
```text theme={null}
Post a status update to my LinkedIn feed when I publish a new article.
```
```text theme={null}
Share company announcements to my LinkedIn profile.
```
```text theme={null}
Display my LinkedIn profile information in my dashboard.
```
```text theme={null}
Post project milestones to LinkedIn automatically.
```
```text theme={null}
Create a LinkedIn post when a new blog post is published.
```
***
## Connecting LinkedIn
Connect LinkedIn so your app can publish posts and read profile details.
You connect one account once, and everyone who uses your app shares that connection and its data.
**To add a shared LinkedIn connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **LinkedIn**, then click it.
4. Select **Shared connector**, then click **Next**.
5. Enter a **Connection name**.
6. Under **Who can access**, select where the connection can be used. The default is **Apps and Super agent**.
7. Click **Add connector**, then sign in with the LinkedIn account you want to share.
Each person connects their own LinkedIn account, so your app can work with their data.
**Before you begin:** Only workspace admins can set up an app user connector, and you need your own OAuth client. See [Using your own OAuth client](/Integrations/Connectors#using-your-own-oauth-client).
**To add an app user LinkedIn connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **LinkedIn**, then click it.
4. Select **App user connector**, then click **Next**.
5. Enter a **Connector name**.
6. Enter the **Client ID** and **Client Secret** from your LinkedIn app.
7. Under **Scopes**, review what is selected by default and remove any your app doesn't need. See [Scopes and permissions](#scopes-and-permissions).
8. Click **Add Connector**.
Then ask the AI chat to add a way for people to connect their own LinkedIn account.
***
## Scopes and permissions
Scopes control what your app can do in LinkedIn. You choose them when you set up an app user connector.
* `email`, `openid`, and `profile`: Identify the LinkedIn account. They appear under **Always included**.
Under **Scopes**, this one is selected by default. Remove it if your app doesn't need it:
* `w_member_social`: Create and manage posts, comments, and reactions for the connected account
* In **Additional scopes**, these are filled in. Remove any your app doesn't need: `r_basicprofile`, `r_profile_basicinfo`, `w_organization_social`, `r_organization_social`, `r_organization_admin`, `rw_organization_admin`, `r_ads`, `r_ads_reporting`, `rw_ads`, `r_verify`, and `r_1st_connections_size`.
**Access:** Your app works with the LinkedIn account that authorizes the connection.
***
## Using LinkedIn in a backend function
Once LinkedIn is connected, your backend functions can retrieve an access token and call the LinkedIn API directly. Base44 handles the OAuth flow and token storage.
* For a shared connection, use `getConnection()` to retrieve the token.
* For an app user connection, use `getCurrentAppUserConnection()` so each request uses the signed-in person's token.
```javascript theme={null}
// Shared connection: one account the whole app uses
const connection = await base44.asServiceRole.connectors.getConnection("linkedin");
// Use the connection's access token to call the LinkedIn API.
```
Configure, deploy, and call a shared connection from a backend function.
Retrieve a per-user token and call the API as the signed-in person.
***
## Troubleshooting
Check the connection if LinkedIn stops working in your app.
LinkedIn doesn't renew access in the background, so a connection eventually shows **This connection needs to be reconnected**. [Reconnect it](/Integrations/Connectors#managing-your-connectors) and sign in with the same LinkedIn account to restore it for every app that uses it.
# Connecting Slack to your app
Source: https://docs.base44.com/Integrations/slack-connectors
Connect Slack to your app to send messages as a person or a bot.
Connect your app to [Slack](https://base44.com/integrations/connectors/slack) to send messages, respond to events, and trigger workflows, either as the person who connected Slack or as a bot you name and style.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
***
## What you can do
Keep your team informed with messages and updates from your app.
Send updates or announcements to a channel when something happens in your app.
Send an alert the moment a ticket, deadline, or threshold is hit.
Send recurring digests, reminders, and summaries from your app on a schedule.
**Example prompts for Slack User**
```text theme={null}
Post a message to the #support channel when a new ticket is created.
```
```text theme={null}
Send a daily summary of completed tasks to my team's Slack channel.
```
```text theme={null}
Trigger an automation when a message is posted in a channel.
```
**Example prompts for Slack Bot**
```text theme={null}
Post a message to #deployments when a new release is published.
```
```text theme={null}
Send a reminder to a channel when a task deadline is approaching.
```
***
## Connecting Slack User
Connect Slack User so your app can post as the person who connected it.
You connect one account once, and everyone who uses your app shares that connection and its data.
**To add a shared Slack User connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Slack User**, then click it.
4. Select **Shared connector**, then click **Next**.
5. Enter a **Connection name**. For Slack, **Who can access** is always **Apps only**.
6. Click **Add connector**, then authorize the Slack workspace you want to post to.
Each person connects their own Slack account, so your app can act on their behalf.
**Before you begin:** Only workspace admins can set up an app user connector, and you need your own OAuth client. See [Using your own OAuth client](/Integrations/Connectors#using-your-own-oauth-client).
**To add an app user Slack User connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Slack User**, then click it.
4. Select **App user connector**, then click **Next**.
5. Enter a **Connector name**.
6. Enter the **Client ID** and **Client Secret** from your Slack app.
7. Under **Scopes**, review what is selected by default and remove any your app doesn't need. See [Scopes and permissions](#scopes-and-permissions).
8. Click **Add Connector**.
Then ask the AI chat to add a way for people to connect their own Slack account.
***
## Connecting Slack Bot
Connect Slack Bot so your app can post as a bot you name and style.
You connect one account once, and everyone who uses your app shares that connection and its data.
**To add a shared Slack Bot connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Slack Bot**, then click it.
4. Select **Shared connector**, then click **Next**.
5. Enter a **Connection name**. For Slack, **Who can access** is always **Apps only**.
6. Click **Add connector**, then authorize the Slack workspace you want the bot to post to.
Each person connects their own Slack account, so your app's bot can post in their workspace.
**Before you begin:** Only workspace admins can set up an app user connector, and you need your own OAuth client. See [Using your own OAuth client](/Integrations/Connectors#using-your-own-oauth-client).
**To add an app user Slack Bot connector:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Slack Bot**, then click it.
4. Select **App user connector**, then click **Next**.
5. Enter a **Connector name**.
6. Enter the **Client ID** and **Client Secret** from the Slack app your bot posts under.
7. Under **Scopes**, review what is selected by default and remove any your app doesn't need. See [Slack Bot scopes](#slack-bot-scopes).
8. Click **Add Connector**.
Then ask the AI chat to add a way for people to connect their own Slack account.
To post in a private channel, invite the bot first.
### Customizing the bot identity
You can set the bot's name and icon for each message. Ask the AI chat for the ones you want.
```text theme={null}
Send messages as "Deploy Bot" with a rocket icon.
```
***
## Scopes and permissions
Each connector uses its own scopes, and the 2 sets aren't interchangeable. Selecting a Slack User scope for Slack Bot, or the reverse, causes the connection to fail.
### Slack User scopes
These permissions let your app post as the connected person.
* `users:read`: View people in the workspace
* `users:read.email`: View email addresses
* Under **Scopes**, `chat:write` is selected by default to send messages.
**Access:** Messages post as the connected person, with that person's Slack permissions.
The connector needs `channels:read`. If you remove it from **Additional scopes**, the connector doesn't work.
### Slack Bot scopes
These permissions let your app post as your bot.
* `chat:write.customize`: Set the bot's name and icon per message
* `chat:write.public`: Post to public channels without joining
* Under **Scopes**, `chat:write` is selected by default to send messages as the bot.
**Access:** Messages post as your bot, with the permissions granted to your Slack app.
***
## Using Slack in a backend function
Once Slack is connected, your backend functions can retrieve an access token and call the Slack API directly. Base44 handles the OAuth flow and token storage.
* For a shared connection, use `getConnection()` to retrieve the token.
* For an app user connection, use `getCurrentAppUserConnection()` so each request uses the signed-in person's token.
```javascript theme={null}
// Slack User: posts as the connected person
const userConn = await base44.asServiceRole.connectors.getConnection("slack");
// Slack Bot: posts as the bot
const botConn = await base44.asServiceRole.connectors.getConnection("slackbot");
```
Configure, deploy, and call a shared connection from a backend function.
Retrieve a per-user token and call the API as the signed-in person.
***
## Troubleshooting
Check scopes and workspace access if Slack can't connect or post messages.
Slack User and Slack Bot use different scope sets and can't be mixed. Check that you selected only the scopes listed for the connector you're setting up, and that your Slack app requests those same scopes.
If your Slack app isn't distributed, only people in your own Slack workspace can connect. Enable public distribution in your Slack app settings.
***
## FAQs
Yes. They are separate connectors, so add each one you need.
Yes. Describe the format, content, and timing you want in the AI chat. You can also go to your app's dashboard, click **Code**, and open the generated backend function under `base44` > `functions` to fine-tune the message payload, for example using blocks for more complex layouts.
# Connecting Snowflake to your app
Source: https://docs.base44.com/Integrations/snowflake-connector
Connect Snowflake to your app to query warehouse data.
Connect your app to Snowflake to query warehouse data, run analytics, and use the results in dashboards, reports, and workflows.
You need a [**Builder plan**](https://base44.com/pricing) or higher to use connectors in your app.
***
## What you can do
Use your warehouse data to answer questions and keep your team informed.
Run SQL against your Snowflake warehouse and show the results in your app.
Display warehouse results in charts, tables, and dashboards.
Use Snowflake queries in workflows, such as sending an alert to a Slack channel when a metric drops.
**Example prompts**
```text theme={null}
Query sales data from my Snowflake warehouse and display results.
```
```text theme={null}
Run an analytics report on customer data stored in Snowflake.
```
```text theme={null}
Fetch inventory levels from the Snowflake data warehouse.
```
```text theme={null}
Execute a SQL query to analyze trends in my Snowflake tables.
```
***
## Setting up OAuth in Snowflake
Snowflake OAuth uses a security integration. Create it in Snowflake before you register the connector in Base44.
Get the Base44 callback URL from [Registering callback URLs](/Integrations/Connectors#registering-callback-urls). The SQL below registers it as `OAUTH_REDIRECT_URI`.
Use `ACCOUNTADMIN` or a role with the global `CREATE INTEGRATION` privilege. This example uses `ACCOUNTADMIN`. If you use another role, replace the first statement.
```sql theme={null}
USE ROLE ACCOUNTADMIN;
CREATE SECURITY INTEGRATION BASE44_OAUTH
TYPE = OAUTH
OAUTH_CLIENT = CUSTOM
OAUTH_CLIENT_TYPE = 'CONFIDENTIAL'
OAUTH_REDIRECT_URI = 'https://connectors.base44.com/api/oauth/callback'
OAUTH_ISSUE_REFRESH_TOKENS = TRUE
OAUTH_REFRESH_TOKEN_VALIDITY = 7776000
ENABLED = TRUE;
```
This sets refresh tokens to 90 days, Snowflake's default and maximum value.
If **View redirect URIs** lists additional URLs for existing connections, add every one to `OAUTH_ALTERNATE_REDIRECT_URIS` in this `CREATE SECURITY INTEGRATION` statement.
If you choose another integration name, use it in the remaining SQL statements.
Read your Client ID and Client Secret.
```sql theme={null}
SELECT
PARSE_JSON(SYSTEM$SHOW_OAUTH_CLIENT_SECRETS('BASE44_OAUTH')):OAUTH_CLIENT_ID::STRING AS client_id,
PARSE_JSON(SYSTEM$SHOW_OAUTH_CLIENT_SECRETS('BASE44_OAUTH')):OAUTH_CLIENT_SECRET::STRING AS client_secret;
```
Use the cell's copy button for both values. The Client ID often ends in `=`, and omitting that character breaks the connection. The output also includes `OAUTH_CLIENT_SECRET_2` as a spare for rotation, so use the first secret.
Get the Snowflake account identifier you'll enter in Base44.
```sql theme={null}
SELECT CURRENT_ORGANIZATION_NAME() || '-' || CURRENT_ACCOUNT_NAME() AS account_identifier;
```
Use a regular Snowflake identity with a `DEFAULT_ROLE` and `DEFAULT_WAREHOUSE` set. Its role needs access to the databases and objects your app queries and permission to use the warehouse.
Snowflake blocks `ACCOUNTADMIN`, `SECURITYADMIN`, `ORGADMIN`, and `GLOBALORGADMIN` from using this integration by default. This is a Snowflake security default, not a Base44 restriction.
Use `ALTER` to change an existing integration. `CREATE OR REPLACE` deletes and recreates it, so don't use it for a redirect URI change.
If the integration already exists and only the callback URL needs updating, run this instead.
```sql theme={null}
ALTER SECURITY INTEGRATION BASE44_OAUTH
SET OAUTH_REDIRECT_URI = 'https://connectors.base44.com/api/oauth/callback';
```
If **View redirect URIs** shows URLs for existing connections, include all additional URLs in `OAUTH_ALTERNATE_REDIRECT_URIS`. Keep any alternate URLs that are already registered.
```sql theme={null}
ALTER SECURITY INTEGRATION BASE44_OAUTH
SET OAUTH_ALTERNATE_REDIRECT_URIS = ('');
```
***
## Connecting Snowflake
Connect Snowflake so your app can query your warehouse.
**Before you begin:**
* **Snowflake OAuth integration:** Create a Snowflake OAuth security integration so you have a **Client ID** and **Client Secret**. See [Setting up OAuth in Snowflake](#setting-up-oauth-in-snowflake).
* **Snowflake account identifier:** Get it with the SQL in [Setting up OAuth in Snowflake](#setting-up-oauth-in-snowflake).
* **Base44 workspace access:** You must be a workspace owner or admin to register the connector in Base44.
* **Snowflake access:** Each person who connects needs access to the databases you want to query.
**To add Snowflake from the Connectors page:**
1. Click **Connectors** in your workspace sidebar.
2. Click **Add connector**.
3. Search for **Snowflake**, then click it.
4. Enter a **Connector name**.
5. Enter the **Client ID** and **Client Secret** from your Snowflake OAuth integration.
6. Under **Scopes**, keep the defaults. See [Scopes and permissions](#scopes-and-permissions).
7. Under **Connection Configuration**, enter your **Snowflake Account** identifier in `orgname-account_name` format, for example `nzajreo-sp04035`. Don't use the legacy account locator.
8. Click **Add Connector**.
9. Open your app and ask the AI chat to add a Snowflake feature.
10. Authorize the account when prompted.
Your app can use one shared Snowflake connection or let each person connect their own account. Tell the AI chat which you want.
***
## Scopes and permissions
Your Snowflake permissions determine which warehouse data your app can query.
* `refresh_token`: Refreshes the connection without another sign-in
* Leave **Additional scopes** empty. Snowflake rejects unsupported values, such as `account:read`, with **The requested scope is invalid**.
* Don't add `session:role:`.
**Access:** Snowflake uses the default role and permissions of the identity that authorizes the connection.
***
## Using Snowflake in a backend function
Once Snowflake is connected, your backend functions can retrieve an access token and query your warehouse. Base44 handles the OAuth flow and credential storage.
Use `getWorkspaceConnection(connectorId)` when your app uses one shared Snowflake identity.
```javascript theme={null}
import { createClientFromRequest } from "npm:@base44/sdk@0.8.44";
Deno.serve(async (req) => {
const base44 = createClientFromRequest(req);
const connectorId = "YOUR_CONNECTOR_ID";
const { accessToken, connectionConfig } =
await base44.asServiceRole.connectors.getWorkspaceConnection(connectorId);
// Use accessToken to query Snowflake.
return Response.json({ account: connectionConfig.subdomain });
});
```
Use `getCurrentAppUserConnection(connectorId)` when each person connects with their own Snowflake identity.
```javascript theme={null}
import { createClientFromRequest } from "npm:@base44/sdk@0.8.44";
Deno.serve(async (req) => {
const base44 = createClientFromRequest(req);
const user = await base44.auth.me();
if (!user) {
return Response.json({ error: "Unauthorized" }, { status: 401 });
}
const connectorId = "YOUR_CONNECTOR_ID";
const { accessToken, connectionConfig } =
await base44.asServiceRole.connectors.getCurrentAppUserConnection(connectorId);
// Use accessToken to query Snowflake for the signed-in person.
return Response.json({ account: connectionConfig.subdomain });
});
```
Retrieve a connection, read its details, and call the service API from a backend function.
***
## Troubleshooting
Check roles, warehouse access, and callback URLs if Snowflake can't connect or run queries.
Check the connected Snowflake identity's `DEFAULT_ROLE` and `DEFAULT_WAREHOUSE`. The role needs `USAGE` on the warehouse, database, and schema, plus `SELECT` on the tables or views your app queries. For an app user connection, check each person's Snowflake role and grants.
The callback URL registered in Snowflake doesn't match the one Base44 sends. Check the URL or URLs your connection uses in [Registering callback URLs](/Integrations/Connectors#registering-callback-urls). Connections use either the single callback URL or separate URLs for each app host. Check that the integration is enabled and compare its registered redirect URIs with the URLs your connection uses.
```sql theme={null}
DESC SECURITY INTEGRATION BASE44_OAUTH;
```
Confirm that every URI Base44 shows is registered as `OAUTH_REDIRECT_URI` or in `OAUTH_ALTERNATE_REDIRECT_URIS`. Snowflake matches redirect URIs character for character.
You signed in with a privileged role. Snowflake blocks `ACCOUNTADMIN`, `SECURITYADMIN`, `ORGADMIN`, and `GLOBALORGADMIN` from using the integration by default. Sign in with a regular Snowflake user instead.
# Optimizing App Performance
Source: https://docs.base44.com/Performance-and-SEO/App-performance
Check your published app's speed with browser developer tools and improve its LCP, CLS, and INP scores. See how CDN and caching help your app load more quickly.
## Checking your app performance
Your app’s performance affects how quickly it loads and responds to people. You can measure this using your browser’s **Developer Tools**.
The key performance metrics include: **Largest Contentful Paint (LCP)**, **Cumulative Layout Shift (CLS)**, and **Interaction to Next Paint (INP)**.
Always check your **published app**, not the app editor preview. Performance scores are most accurate when testing the live version on both desktop and mobile.
## Optimizing your app performance
Optimize your app’s performance by focusing on the key metrics that affect how fast it loads, runs, and responds. Each one highlights a different aspect of the user experience, and you can prompt the Base44 AI chat to optimize them directly.
### Largest Contentful Paint (LCP)
LCP measures the time it takes for the largest visible element (image, text, or video) above the fold to appear.
**To optimize LCP:**
* Keep visible content above the fold light and fast.
* Move heavy elements (videos, iFrames, grids, lists) below the fold.
* Optimize and compress images before uploading.
* Use **lazy loading** for offscreen images.
*Prompt the AI:* "Apply lazy loading to images and videos below the fold."\
The AI automatically adds the proper attributes or dynamic imports.
### Cumulative Layout Shift (CLS)
CLS measures unexpected movement in your app's layout while loading.
**To optimize CLS:**
* **Add size definitions:** Give every image and video fixed height and width to avoid shifting as they load.
* **Optimize custom fonts:** Use the `font-display: swap;` property in your CSS to prevent invisible text during font loading.
* **Reserve space for dynamic content:** Set fixed spaces for ads, pop-ups, or anything that loads after the initial render.
* **Minimize DOM updates:** Limit layout changes caused by automatic scripts.
*Prompt the AI:*
* “Set fixed height and width for all media elements."
* “Prevent layout shifts while fonts load.”
The AI automatically updates the component styles or CSS.
### Interaction to Next Paint (INP)
INP measures how fast your app responds to clicks, taps, or keyboard input.
**To optimize INP:**
* Avoid long-running scripts triggered by user actions.
* Defer or remove non-essential scripts from the initial load.
* Keep layouts simple and animations minimal.
* Monitor responsiveness in the **Performance** tab.
*Prompt the AI:* “Defer non-critical scripts until after interaction” or “Simplify animations for better responsiveness.” The AI optimizes code execution order and animations during generation.
### Content Delivery Network (CDN) and caching
A **Content Delivery Network (CDN)** delivers copies of your app from servers closest to the user’s location, improving load times. Base44 automatically uses **Cloudflare CDN** for caching and delivery.
*Prompt the AI:* “Republish my app to refresh cached files.”\
Republishing triggers Base44’s automatic Cloudflare cache update.
Currently, you can't clear the CDN cache manually.
***
## FAQs
Click a question below to learn more about optimizing site performance.
You can check your app’s performance using **Chrome DevTools** or **Google PageSpeed Insights**.
**To check with Chrome:**
* **Quick check:**
1. Open your **published app**.
2. Right-click anywhere and select **Inspect**.
3. In the right panel, Chrome displays local metrics for **Largest Contentful Paint (LCP)**, **Cumulative Layout Shift (CLS)**, and **Interaction to Next Paint (INP)**.\
This gives you an instant view of how your live page performs.
* **Detailed check:**
1. Open **Chrome DevTools**.
2. Click the **Performance** tab.
3. Click **Record**, reload the page, and stop recording once it finishes loading.
4. Review the full performance timeline, including **First Contentful Paint (FCP)**, **LCP**, and main-thread activity.
**To check with PageSpeed:**
1. Go to [PageSpeed Insights](https://pagespeed.web.dev).
2. Enter your app’s URL and click **Analyze**.
3. Review the **Insights** and **Diagnostics** sections for ways to improve your app’s performance.
Aim to meet or exceed these recommended scores for the best experience:
* **Largest Contentful Paint (LCP):** 2.5 seconds or less.
* **Cumulative Layout Shift (CLS):** 0.1 or less.
* **Interaction to Next Paint (INP):** 200 milliseconds or less.
These benchmarks follow Google’s standards for excellent site performance and help ensure your app runs fast, stays stable, and responds smoothly.
A low performance score usually means some elements on your site are taking longer to load than expected. Heavy above-the-fold content, large scripts, or unoptimized media are the most common causes.
**To troubleshoot:**
1. Run your app through [Google PageSpeed Insights](https://pagespeed.web.dev) and check for:
* **Render-blocking resources:** move scripts to `async` or `defer`.
* **Large JavaScript bundles:** simplify or split vendor code.
* **Unoptimized images:** compress and re-upload.
2. In **Chrome DevTools**, open the **Network** tab and click **Reload** to see how your files load in real time.
* Watch for files taking more than 1 to 2 seconds to load. These are likely slowing your app.
**Quick fixes:**
* Move videos, data lists, or heavy sections below the fold.
* Compress and resize images before uploading.
* Remove unused scripts or CSS.
* Republish your app to refresh CDN caching.
*Prompt the AI:* “Optimize my app for faster LCP and INP” or “Reduce above-the-fold load size.” The AI automatically applies lazy loading and script deferring where relevant.
* Host videos externally (e.g. on **Vimeo** or **YouTube**).
* Add `loading="lazy"` to embedded videos or iframes.
* Place videos **below the fold** to prioritize text and images.
* Disable **autoplay** or **loop** for large background videos.
Mobile tests run on slower networks and devices, so scores are usually lower than desktop. Focus on optimizing your **LCP** and **INP** for mobile first by reducing heavy media, deferring non-critical scripts, and simplifying layouts.
# Getting your app found in search
Source: https://docs.base44.com/Performance-and-SEO/SEO-and-search-visibility
Help your app get found in search and AI answers. See what Base44 handles for SEO and GEO, build trust, add content and structured data, and use Search Console.
Base44 manages your app's core technical SEO and GEO foundation so search engines and AI-powered platforms can discover, crawl, and index your content.
The same elements that search engines reward, like high-quality content, structured data, and a strong backlink profile, are also the signals that AI models like ChatGPT, Gemini, and Perplexity use when deciding what to recommend. Strong SEO and strong GEO go hand in hand, and both start with the same fundamentals.
**Before you start:**
* Base44's SEO setup is designed and supported for apps that are published on a [custom domain](/Setting-up-your-app/Setting-up-your-custom-domain). Free Base44 URLs can still be crawled by search engines, but they are not intended for long-term, production SEO.
* Base44 has a built-in tool that scores your app and surfaces fixes directly in your dashboard. [Check your app's SEO and GEO](/Performance-and-SEO/checking-your-seo-and-geo) score.
***
## How your app's SEO and GEO works
Base44 sets up and maintains the main technical elements that search engines and AI platforms expect. This covers how your pages are discovered, how they are crawled, and how your app is represented across the web and in AI-generated answers. These technical signals support both search engine optimization (SEO) and generative engine optimization (GEO).
You do not need to upload or manage any of these files yourself. Your job is to publish on a custom domain and provide clear, trustworthy content.
Base44 apps are built to run in the browser, which normally means a crawler sees an empty page. Base44 serves crawlers a rendered version of your app instead, with your meta tags, structured data, and real page content in the HTML, so search engines and AI crawlers can read it without running your app. Base44 refreshes this when you publish or your content changes.
AI systems access your pages in different ways. Some bots collect content for search or training. AI assistants, such as ChatGPT and Perplexity, can also fetch your pages while answering someone’s question. Use [AI Visibility](/Performance-and-SEO/checking-your-seo-and-geo#ai-visibility) to view AI crawling, assistant page reads, and visits from people who click through.
**Core SEO and GEO features handled automatically:**
For apps published on a custom domain, Base44 automatically manages:
* **Meta titles:** Each page has a unique meta title based on its URL (for pages without URL parameters). This helps search engines distinguish between pages and show clear titles in results.
* **Heading structure and semantic HTML:** Base44 serves crawlers a rendered version of your pages, with your real headings, content, and semantic structure, so they can understand them without running your app. If a page has not been rendered yet, Base44 falls back to a short summary carrying that page's heading, its description, and links to your other pages, so crawlers still receive something meaningful rather than an empty shell. AI crawlers read whatever version is ready at the time, so a page they reach first may give them the summary.
* **Canonical tags:** Base44 adds self-referencing canonical tags to every page. For URLs that include query parameters, Base44 intelligently filters out tracking parameters (such as `utm_*` and `fbclid`) while preserving content-affecting parameters (such as `?id=123`). Parameters are also sorted consistently so that the same page always produces the same canonical URL regardless of parameter order.
* **Sitemap (sitemap.xml):** Base44 automatically generates and serves a sitemap at `/sitemap.xml`. Public, indexable pages are included, while private or internal pages are excluded. You can submit this sitemap directly in Google Search Console and other webmaster tools.
* **robots.txt:** Base44 creates and serves a `robots.txt` file for both free and paid apps. It allows search engines and AI crawlers to access your public content while protecting non-public or technical routes from indexing.
* **AI crawler access (llms.txt):** You can enable `llms.txt` generation from the **SEO & GEO** page in your dashboard. When enabled, Base44 generates a lightweight file that gives AI crawlers like GPTBot, ChatGPT-User, ClaudeBot, and PerplexityBot a clear, structured summary of what your app does. This supports GEO by helping AI-powered search tools understand and recommend your app. It is off by default.
* **Clean URLs and routing:** Your app uses clean, readable URLs rather than duplicate or unnecessary paths. This supports better crawl behavior and improves clarity for visitors.
* **Internal linking:** Navigation and internal links use proper anchor tags and clean URLs so search engines can follow and understand your app structure.
* **Social sharing tags and previews (Open Graph and Twitter):** Base44 sets social metadata so links to your app show a sensible title, description, and image when shared on social platforms. Social card images are automatically resized to 1200 × 630 and include the correct URL metadata, which reduces Open Graph and card size warnings and helps previews display consistently across major platforms such as Facebook, X (Twitter), LinkedIn, and WhatsApp. These previews use the title, description, and logo you configure in your app's settings.
* **Mobile-friendly layout:** Apps generated with Base44 are responsive and adapt to different screen sizes. This supports mobile-first indexing and improves your visitors' experience on phones and tablets.
* **Image optimization and performance:** Images and assets are served in optimized ways where possible, and the hosting environment is tuned for good performance. Strong performance helps with Core Web Vitals and overall search quality signals.
* **Other site metadata:** Base44 manages technical files such as the web app manifest and favicon for custom domains. These help browsers and devices display your app correctly in tabs, shortcuts, and installable views. They matter beyond the browser too: When an AI assistant lists recommended businesses, your site name and favicon are often the only brand assets someone sees.
In addition, you can use the Code tab in your dashboard to edit the generated `index.html` file for your app. This lets you add trusted `` tags and `
Tasks
Loading...
{{ task.title }}
```
Use the exact entity name from your schema when calling the SDK, including capitalization. By convention, entity names begin with a capital letter. For example, if your schema has `"name": "Task"`, you access it as `base44.entities.Task.list()`.
Start your Vue development server to test your integration. From your project root, run:
```bash theme={null}
npm run dev
```
Your Vue app will connect to your Base44 backend through the SDK client, allowing you to work with your deployed entities in real-time.
Build your Vue project for production with your app ID injected, then deploy:
```bash theme={null}
base44 build
base44 deploy
```
`base44 build` runs your `buildCommand` with `VITE_BASE44_APP_ID` set to your linked app's ID. `base44 deploy` uploads the compiled files and pushes any updates to your entity schemas. When complete, you'll see a link to your Base44 dashboard and your live application URL.
## Next steps
Now that your Base44 backend is integrated with your project, you can:
* Use the [SDK](/developers/references/sdk/getting-started/overview) to add more functionality to your frontend.
* Add [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), and [agents](/developers/backend/resources/agents/overview). If you're working in TypeScript, [generate types](/developers/references/sdk/getting-started/dynamic-types) to get autocomplete and type safety.
* Test locally with [`base44 dev`](/developers/references/cli/commands/dev). See [Local development](/developers/backend/overview/local-dev/local-development-overview) for setup instructions.
* Continue building your frontend and deploy updates with [`base44 deploy`](/developers/references/cli/commands/deploy).
* Open your deployed site with [`base44 site open`](/developers/references/cli/commands/site-open).
## See also
* [CLI Command Reference](/developers/references/cli/commands/introduction): All available CLI commands
* [Project Structure](/developers/backend/overview/project-structure): How project files are organized
* [JavaScript SDK Documentation](/developers/references/sdk/getting-started/overview): Connect your app to the backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Teach AI assistants to work with Base44
# React Quickstart
Source: https://docs.base44.com/developers/backend/quickstart/frameworks/quickstart-with-react
Add a Base44 backend to your React project
Follow this quickstart to add Base44 to your React project. You'll create a Base44 backend, define entities, and integrate the SDK into your frontend.
The CLI requires Node.js 20.19.0 or higher.
## Setup
Install the Base44 CLI globally:
```bash theme={null}
npm install -g base44@latest
```
Navigate to your React project directory, then run:
```bash theme={null}
base44 create
```
If you're not already logged in, the command will prompt you to authenticate.
Select **Create a basic project** when prompted. This creates the backend files within your React project directory. Then follow the prompts to configure your project.
When you create a project, [Base44 skills](/developers/backend/overview/base44-skills) are included automatically, providing your AI agent with instructions and context for Base44 tasks.
Update your [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) to point to your React build output and set the commands for building and serving. Add the `site.outputDirectory`, `site.buildCommand`, and `site.serveCommand` fields:
```json theme={null}
{
"site": {
"outputDirectory": "dist",
"buildCommand": "npm run build",
"serveCommand": "npm run dev"
}
}
```
With `serveCommand` set, [`base44 dev`](/developers/references/cli/commands/dev) starts your backend and frontend together from a single terminal. With `buildCommand` set, [`base44 build`](/developers/references/cli/commands/build) compiles your frontend with your app ID injected.
Create [entity schemas](/developers/references/entities/introduction) to define your data structures. Entity files must be placed in the `base44/entities/` directory.
For example, create `base44/entities/task.jsonc`:
```json theme={null}
{
"name": "Task",
"type": "object",
"properties": {
"title": {
"type": "string"
},
"completed": {
"type": "boolean",
"default": false
}
},
"required": ["title"]
}
```
Push your entity schemas to Base44:
```bash theme={null}
base44 entities push
```
This command synchronizes your local entity definitions with your Base44 backend, making them available for use in your application. See [`entities push`](/developers/references/cli/commands/entities-push) for more information.
Install the Base44 JavaScript SDK:
```bash theme={null}
npm install @base44/sdk
```
Create a Base44 SDK [client](/developers/references/sdk/getting-started/client) in your project. Read the app ID from `VITE_BASE44_APP_ID`, which [`base44 build`](/developers/references/cli/commands/build) and [`base44 dev`](/developers/references/cli/commands/dev) set automatically.
For example, create `src/api/base44Client.js`:
```javascript theme={null}
import { createClient } from '@base44/sdk';
export const base44 = createClient({
appId: import.meta.env.VITE_BASE44_APP_ID,
});
```
`VITE_BASE44_APP_ID` resolves to your linked app's ID, which the CLI reads from `base44/.app.jsonc`.
Create a simple component to list and add tasks. For example, create `src/components/TaskList.jsx`:
```jsx theme={null}
import { useState, useEffect } from 'react';
import { base44 } from '../api/base44Client';
export default function TaskList() {
const [tasks, setTasks] = useState([]);
const [newTaskTitle, setNewTaskTitle] = useState('');
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
loadTasks();
}, []);
const loadTasks = async () => {
setIsLoading(true);
try {
// Get records
const taskList = await base44.entities.Task.list();
setTasks(taskList);
} catch (error) {
console.error('Error loading tasks:', error);
}
setIsLoading(false);
};
const addTask = async (e) => {
e.preventDefault();
if (!newTaskTitle.trim()) return;
setIsLoading(true);
try {
// Create a record
const newTask = await base44.entities.Task.create({
title: newTaskTitle,
completed: false
});
setTasks([...tasks, newTask]);
setNewTaskTitle('');
} catch (error) {
console.error('Error creating task:', error);
}
setIsLoading(false);
};
return (
Tasks
{isLoading &&
Loading...
}
{tasks.map((task) => (
{task.title}
))}
);
}
```
Use the exact entity name from your schema when calling the SDK, including capitalization. By convention, entity names begin with a capital letter. For example, if your schema has `"name": "Task"`, you access it as `base44.entities.Task.list()`.
Start your Vite development server to test your integration. From your project root, run:
```bash theme={null}
npm run dev
```
Your React project will connect to your Base44 backend through the SDK client, allowing you to work with your deployed entities in real-time.
Build your React project for production with your app ID injected, then deploy:
```bash theme={null}
base44 build
base44 deploy
```
`base44 build` runs your `buildCommand` with `VITE_BASE44_APP_ID` set to your linked app's ID. `base44 deploy` uploads the compiled files and pushes any updates to your entity schemas. When complete, you'll see a link to your Base44 dashboard and your live application URL.
## Next steps
Now that your Base44 backend is integrated with your project, you can:
* Use the [SDK](/developers/references/sdk/getting-started/overview) to add more functionality to your frontend.
* Add [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), and [agents](/developers/backend/resources/agents/overview). If you're working in TypeScript, [generate types](/developers/references/sdk/getting-started/dynamic-types) to get autocomplete and type safety.
* Test locally with [`base44 dev`](/developers/references/cli/commands/dev). See [Local development](/developers/backend/overview/local-dev/local-development-overview) for setup instructions.
* Continue building your frontend and deploy updates with [`base44 deploy`](/developers/references/cli/commands/deploy).
* Open your deployed site with [`base44 site open`](/developers/references/cli/commands/site-open).
## See also
* [CLI Command Reference](/developers/references/cli/commands/introduction): All available CLI commands
* [Project Structure](/developers/backend/overview/project-structure): How project files are organized
* [JavaScript SDK Documentation](/developers/references/sdk/getting-started/overview): Connect your app to the backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Teach AI assistants to work with Base44
# React Native (Expo) Quickstart
Source: https://docs.base44.com/developers/backend/quickstart/frameworks/quickstart-with-react-native
Add a Base44 backend to your React Native Expo project
Follow this quickstart to add Base44 to your React Native (Expo) project. You'll create a Base44 backend, define entities, and integrate the SDK into your mobile app.
The CLI requires Node.js 20.19.0 or higher.
## Setup
Install the Base44 CLI globally:
```bash theme={null}
npm install -g base44@latest
```
Navigate to your React Native project directory, then run:
```bash theme={null}
base44 create
```
If you're not already logged in, the command will prompt you to authenticate.
Select **Create a basic project** when prompted. This creates the backend files within your React Native project directory. Then follow the prompts to configure your project.
When you create a project, [Base44 skills](/developers/backend/overview/base44-skills) are included automatically, providing your AI agent with instructions and context for Base44 tasks.
Create [entity schemas](/developers/references/entities/introduction) to define your data structures. Entity files must be placed in the `base44/entities/` directory.
For example, create `base44/entities/task.jsonc`:
```json theme={null}
{
"name": "Task",
"type": "object",
"properties": {
"title": {
"type": "string"
},
"completed": {
"type": "boolean",
"default": false
}
},
"required": ["title"]
}
```
Push your entity schemas to Base44:
```bash theme={null}
base44 entities push
```
This command synchronizes your local entity definitions with your Base44 backend, making them available for use in your application. See [`entities push`](/developers/references/cli/commands/entities-push) for more information.
Install the Base44 JavaScript SDK:
```bash theme={null}
npm install @base44/sdk
```
Create a Base44 SDK [client](/developers/references/sdk/getting-started/client) in your project. The `appId` can be found in your `base44/.app.jsonc` file.
For example, create `api/base44Client.js`:
```javascript theme={null}
import { createClient } from '@base44/sdk';
export const base44 = createClient({
appId: 'your-app-id-from-app.jsonc'
});
```
Create a simple screen component to list and add tasks. For example, create `screens/TaskListScreen.js`:
```javascript theme={null}
import { useState, useEffect } from 'react';
import { View, Text, FlatList, Button, TextInput, StyleSheet, ActivityIndicator } from 'react-native';
import { base44 } from '../api/base44Client';
export default function TaskListScreen() {
const [tasks, setTasks] = useState([]);
const [newTitle, setNewTitle] = useState('');
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
loadTasks();
}, []);
const loadTasks = async () => {
setIsLoading(true);
try {
// Get records
const taskList = await base44.entities.Task.list();
setTasks(taskList);
} catch (error) {
console.error('Error loading tasks:', error);
}
setIsLoading(false);
};
const addTask = async () => {
if (!newTitle.trim()) return;
setIsLoading(true);
try {
// Create a record
const newTask = await base44.entities.Task.create({
title: newTitle,
completed: false
});
setTasks([...tasks, newTask]);
setNewTitle('');
} catch (error) {
console.error('Error creating task:', error);
}
setIsLoading(false);
};
return (
Tasks item.id}
renderItem={({ item }) => {item.title}}
ListEmptyComponent={
isLoading ? : No tasks yet
}
/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
task: {
fontSize: 16,
padding: 12,
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
empty: {
textAlign: 'center',
color: '#999',
marginTop: 20,
},
inputRow: {
flexDirection: 'row',
gap: 10,
marginTop: 20,
},
input: {
flex: 1,
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
borderRadius: 5,
},
});
```
Use the exact entity name from your schema when calling the SDK, including capitalization. By convention, entity names begin with a capital letter. For example, if your schema has `"name": "Task"`, you access it as `base44.entities.Task.list()`.
Update your `App.js` to import and render the `TaskListScreen` component:
```javascript theme={null}
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, SafeAreaView } from 'react-native';
import TaskListScreen from './screens/TaskListScreen';
export default function App() {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
});
```
Start your Expo development server to test your integration. From your project root, run:
```bash theme={null}
npx expo start
```
Follow the [Expo CLI instructions](https://docs.expo.dev/more/expo-cli/#develop) to open your app on a simulator, physical device, or web browser.
Your React Native app will connect to your Base44 backend through the SDK client, allowing you to work with your deployed entities in real-time.
## Next steps
Now that your Base44 backend is integrated with your project, you can:
* Use the [SDK](/developers/references/sdk/getting-started/overview) to add more functionality to your mobile app.
* Add [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), and [agents](/developers/backend/resources/agents/overview). If you're working in TypeScript, [generate types](/developers/references/sdk/getting-started/dynamic-types) to get autocomplete and type safety.
* Test locally by running [`base44 dev`](/developers/references/cli/commands/dev) for the backend alongside your app's dev server. See [Local development](/developers/backend/overview/local-dev/local-development-overview) for setup instructions.
## See also
* [CLI Command Reference](/developers/references/cli/commands/introduction): All available CLI commands
* [Project Structure](/developers/backend/overview/project-structure): How project files are organized
* [JavaScript SDK Documentation](/developers/references/sdk/getting-started/overview): Connect your app to the backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Teach AI assistants to work with Base44
# Build with AI
Source: https://docs.base44.com/developers/backend/quickstart/quickstart-with-ai
Set up a Base44 project using your AI coding agent
Install Base44 skills and let your AI coding agent create, build, and deploy a new Base44 project on your machine.
If you'd rather point your agent at an app you already built in the app editor, the cloud sandbox is a lighter route with nothing to download and no deploy step. See [Bring your own agent](/developers/app-code/sandbox/bring-your-own-agent).
You need Node.js 20.19.0 or higher installed.
## Setup
Install skills globally so they are available in any project:
```bash theme={null}
npx skills add base44/skills -g
```
This teaches your AI coding agent how to work with Base44 projects, including the CLI, SDK, entities, backend functions, and deployment.
Open a folder in Cursor, Claude Code, Codex, OpenCode, or any agent that supports skills. The Base44 skills are automatically available.
Give your agent a prompt describing your project. Be specific about the data you need, how users interact with it, and any features you want. Here are some examples:
*"Create a new Base44 project for a job application tracker. I need to store data for Companies, Applications, and Interviews. Applications should have status, position title, salary range, and notes. Add authentication so each user only sees their own data."*
*"Create a new Base44 project for a customer support tool. I need an AI agent that can look up orders by email, check delivery status, and create refund requests. Store conversations and link them to customer records."*
*"Create a new Base44 project for a team standup bot. Add a Slack connector and a backend function that runs daily, collects standup updates from a Standups table, and posts a summary to a Slack channel."*
Your agent may prompt you to authenticate with Base44 during setup. This opens a browser window for you to sign in.
## What your agent will do
When you give your agent a prompt, it will typically:
1. Install the Base44 CLI if it is not already installed.
2. Run `base44 create` to scaffold the project.
3. Define [entity schemas](/developers/backend/resources/entities/overview) based on your description.
4. Configure [AI agents](/developers/backend/resources/agents/overview), [OAuth connectors](/developers/backend/resources/connectors), and other resources.
5. Write frontend and backend code.
6. Set up authentication, RLS rules, and other settings.
7. Deploy the project with `base44 deploy`.
You can guide your agent at each step or let it work through the full process.
## Keep building
After the initial setup, your agent can continue to make changes across your project. Some things you can ask it to do:
* Add or modify [entity schemas](/developers/backend/resources/entities/overview) and push them with the CLI.
* Write [backend functions](/developers/backend/resources/backend-functions/overview) with automations and cron schedules.
* Configure [AI agents](/developers/backend/resources/agents/overview) with custom tools and data access.
* Set up [OAuth connectors](/developers/backend/resources/connectors) for external services.
* Build frontend pages and components using the SDK.
* Deploy updates to production.
## Tips for better results
* **Be specific about your data model:** Name your entities and describe the fields you need, including relationships between them.
* **Mention authentication early:** If your app needs login or per-user data, say so in your initial prompt so the agent sets up RLS from the start.
* **Describe behavior, not just structure:** Instead of "add a notifications entity," try "send an email notification when a task is assigned to someone."
* **Iterate:** Start with a basic version and ask your agent to add features one at a time.
## See also
* [Skills](/developers/backend/overview/skills): Details on how skills work and what each skill covers
* [Project structure](/developers/backend/overview/project-structure): How Base44 projects are organized
* [CLI reference](/developers/references/cli/commands/introduction): All available CLI commands
* [Bring your own agent](/developers/app-code/sandbox/bring-your-own-agent): Connect your coding agent to an app you built in the app editor instead
# Backend only
Source: https://docs.base44.com/developers/backend/quickstart/templates/quickstart-backend-only
Create a backend only project with Base44
Create a backend only Base44 project with [entities](/developers/backend/resources/entities/overview) and [functions](/developers/backend/overview/project-structure#functions). Use this template when you want to build your own frontend or integrate with existing apps.
The CLI requires Node.js 20.19.0 or higher.
## Setup
Install the Base44 CLI globally:
```bash theme={null}
npm install -g base44@latest
```
Create a new Base44 project:
```bash theme={null}
base44 create
```
If you're not already logged in, the command will prompt you to authenticate.
Select **Create a basic project** when prompted, then follow the prompts to configure your project.
When complete, you'll see your project name and a link to your Base44 dashboard. The CLI creates your project with the following structure:
Your app ID is automatically added to [`.app.jsonc`](/developers/backend/overview/project-structure#app-jsonc).
## Next steps
Now that your Base44 project is set up, you can:
* Add [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), and [agents](/developers/backend/resources/agents/overview). If you're working in TypeScript, [generate types](/developers/references/sdk/getting-started/dynamic-types) to get autocomplete and type safety.
* Build or connect a frontend application using the [SDK](/developers/references/sdk/getting-started/overview).
* Deploy updates with [`base44 deploy`](/developers/references/cli/commands/deploy).
Your project includes [Base44 skills](/developers/backend/overview/base44-skills) that teach AI coding assistants how to work with Base44. You can open your project in Cursor, Claude Code, or your preferred AI assistant and describe what you want to build.
### Build a frontend
Create a frontend app using your preferred framework.
Install the Base44 JavaScript SDK:
```bash theme={null}
npm install @base44/sdk
```
Configure the SDK client with your app ID (from `base44/.app.jsonc`) and use it to interact with your entities:
```javascript theme={null}
import { createClient } from "@base44/sdk";
const base44 = createClient({
appId: "your-app-id",
});
const tasks = await base44.entities.Task.list();
```
Learn more in the [JavaScript SDK documentation](/developers/references/sdk/getting-started/overview).
### Local development
Most frontend frameworks support local development servers with hot reloading. Through the SDK, your local frontend will connect to Base44's hosted backend.
You can also run [`base44 dev`](/developers/references/cli/commands/dev) to start a local development server that handles backend functions, entities, and media uploads on your machine. This lets you test changes without deploying. See [Local development](/developers/backend/overview/local-dev/local-development-overview) for details.
### Deploy your frontend
If you want to deploy your frontend to Base44's hosting platform, configure the `outputDirectory` in your `base44/config.jsonc`:
```jsonc theme={null}
{
"name": "basic-test-app",
// Site/hosting configuration
"site": {
"outputDirectory": "./dist",
},
}
```
The `outputDirectory` tells the CLI where your build tool outputs the compiled files. Build your frontend, then deploy with the [`site deploy`](/developers/references/cli/commands/site-deploy) command.
## See also
* [Project Structure](/developers/backend/overview/project-structure): How project files are organized
* [CLI Command Reference](/developers/references/cli/commands/introduction): All available CLI commands
* [JavaScript SDK](/developers/references/sdk/getting-started/overview): Connect your app to the backend
* [Example apps](https://github.com/base44/apps-examples): Sample projects to learn from
# React Quickstart
Source: https://docs.base44.com/developers/backend/quickstart/templates/quickstart-react-template
Create a full-stack Base44 project with a Base44 backend and a Vite-powered React frontend
Follow this quickstart to scaffold a project, define an entity, and run your app locally. This project includes a pre-configured Base44 SDK client, UI components, and Tailwind CSS styling.
The CLI requires Node.js 20.19.0 or higher.
## Setup
Install the Base44 CLI globally:
```bash theme={null}
npm install -g base44@latest
```
Create a new Base44 project:
```bash theme={null}
base44 create
```
If you're not already logged in, the command will prompt you to authenticate.
Select **Start from a template** when prompted, then follow the prompts to configure your project, push entities, and deploy your site.
When complete, you'll see your project name, a link to your Base44 dashboard, and your live application URL.
The generated project structure:
For more information about the files in this project, see [Project Structure](/developers/backend/overview/project-structure).
This project includes an example `Task` [entity](/developers/references/entities/introduction) in `base44/entities/task.jsonc` which was pushed to Base44 during project creation. You can modify this entity or create additional ones.
## Next steps
Now that your Base44 backend is integrated with your project, you can:
* Use the [SDK](/developers/references/sdk/getting-started/overview) to add more functionality to your frontend.
* Add [entities](/developers/backend/resources/entities/overview), [backend functions](/developers/backend/resources/functions), and [agents](/developers/backend/resources/agents/overview). If you're working in TypeScript, [generate types](/developers/references/sdk/getting-started/dynamic-types) to get autocomplete and type safety.
* Test locally with [`base44 dev`](/developers/references/cli/commands/dev). See [Local development](/developers/backend/overview/local-dev/local-development-overview) for setup instructions.
* Deploy updates with [`base44 deploy`](/developers/references/cli/commands/deploy).
* Open your deployed site with [`base44 site open`](/developers/references/cli/commands/site-open).
Your project includes [Base44 skills](/developers/backend/overview/base44-skills) that teach AI coding assistants how to work with Base44. You can open your project in Cursor, Claude Code, or your preferred AI assistant and describe what you want to build.
## See also
* [CLI Command Reference](/developers/references/cli/commands/introduction): All available CLI commands
* [Project Structure](/developers/backend/overview/project-structure): How project resources are organized
* [Entities](/developers/references/entities/introduction): Learn about database schema configuration
* [Example apps](https://github.com/base44/apps-examples): Sample projects to learn from
# Create an Actor
Source: https://docs.base44.com/developers/backend/resources/actors/create-actor
Write your first actor and handle the connection lifecycle
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform.
Create an [actor](/developers/backend/resources/actors/overview#actors) to run backend logic for a live [session](/developers/backend/resources/actors/overview#sessions) that multiple [clients](/developers/backend/resources/actors/overview#client) share, such as a chat room or a multiplayer game. An actor handles client connections, messages, and disconnections from your backend.
## Actor files
Create actors as TypeScript files in your project's actors directory. Each actor lives in its own subdirectory under `base44/actors/` with an `entry.ts` file:
The folder name becomes the actor name in the SDK and determines how clients call the actor, for example `base44.actors.chatRoom`. Export the actor class as the default export from the `entry.ts` file.
You can include additional `.ts`, `.js`, `.json`, and `.jsonc` files in the actor directory and import them from `entry.ts`.
## entry.ts
The code file contains your actor class. Import `Actor` from `base44:runtime/actors` and export a class that extends `Actor` as the default export. Pass `Incoming` and `Outgoing` generics to type the messages the actor receives and sends.
Implement the following class methods. The `handleStart()` method is optional:
* `handleStart()`: Load saved session data from storage into class fields. Base44 calls this handler each time the session activates, so your restored state is ready before Base44 handles any connection. For a full storage example, see [persist session data](/developers/backend/resources/actors/sample-flows#persist-session-data).
* `handleConnect()`: Send the current session state to the connecting client. To reject connections or identify clients, see [manage client connections](/developers/backend/resources/actors/sample-flows#manage-client-connections).
* `handleMessage()`: Update session state, persist the state, and broadcast the change.
* `handleClose()`: Remove any state tied to that connection. If there's no connection state to clear, write an empty body.
* `handleTick()`: Run code on each tick interval. If the actor doesn't use ticks, write an empty body. To set up ticks, see [run ticks](/developers/backend/resources/actors/sample-flows#run-ticks). To schedule a one-time wake, see [schedule wakes](/developers/backend/resources/actors/sample-flows#schedule-wakes).
The following example shows a simplified `ChatRoom` actor:
```typescript theme={null}
import { Actor } from "base44:runtime/actors";
type Incoming = { type: "message"; text: string };
type Outgoing =
| { type: "history"; messages: string[] }
| { type: "message"; text: string };
export default class ChatRoom extends Actor {
messages: string[] = [];
async handleStart() {
this.messages = (await this.storage.get("messages")) ?? [];
}
async handleConnect(conn) {
conn.send({ type: "history", messages: this.messages });
}
async handleMessage(_conn, msg) {
this.messages.push(msg.text);
await this.storage.put("messages", this.messages);
this.broadcast({ type: "message", text: msg.text });
}
async handleClose(_conn) {}
async handleTick() {}
}
```
## See also
* [Actors Overview](/developers/backend/resources/actors/overview): Concepts and terminology
* [Actors Files and Code](/developers/backend/resources/actors/reference): Complete backend class API
* [Actors: Sample Flows](/developers/backend/resources/actors/sample-flows): More patterns for timers, connections, storage, and entities
* [`actors deploy`](/developers/references/cli/commands/actors-deploy): Deploy your actor to Base44
# Actors Overview
Source: https://docs.base44.com/developers/backend/resources/actors/overview
Learn how actors run shared, live sessions with realtime messages and timers
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform.
An actor is a long-running backend process that multiple clients connect to simultaneously.
With actors, you can build live session instances that support the following functionality:
* **Realtime messaging:** Send and receive messages with clients via WebSockets.
* **Persistent storage:** Keep session state alive between idle periods.
* **Scheduled work:** Run logic at a set interval or at a specific time.
Use actors when you're building features where multiple clients require realtime updates and interaction, such as a chat room or multiplayer game.
## Actors
[`Actor`](/developers/backend/resources/actors/reference) is the class you extend in your backend.
The actor class defines the behavior of a live session. With actors, you can:
* **[Manage connections](#connections):** Accept or reject a client connecting to the session, and identify who is connecting.
* **[Handle messages](#realtime-messages):** Receive a message from a client, update session state, and reply to one client or broadcast to all.
* **[Schedule work](#scheduled-work):** Run logic on an interval or at a scheduled time.
## Sessions
A session is a running instance of an actor, identified by the actor name and a session ID you choose.\
Each session manages its own state, storage, and client connections independently.
### Connections
A connection represents a client's WebSocket to a session. Each client that joins gets a unique connection. An actor uses that connection to identify who is connecting, manage client connections, and send messages.
To learn more, see [connections](/developers/backend/resources/actors/reference#connections). For a sample flow, see [manage client connections](/developers/backend/resources/actors/sample-flows#manage-client-connections).
### Active and idle sessions
A session is always in one of the following states:
* **Active:** The session is live and processing events. A session becomes active when a client connects, when a client messages an idle session, or when a scheduled wake time arrives.
* **Idle:** The session isn't processing events. A session goes idle shortly after it finishes its last message and all scheduled work stops. The session maintains its [stored data](#storage), scheduled times, and open connections until it becomes active again.
When a session goes idle, clients with open connections stay connected. Their next message or a scheduled [wake](#wakes) activates the session again.
## Client
Use [`base44.actors`](/developers/references/sdk/docs/type-aliases/actors) in the JavaScript SDK to connect a client to an actor session and exchange messages.
The actors SDK supports the following functionality:
* **Connect:** Open a WebSocket connection to a session.
* **Subscribe:** Receive messages from the actor.
* **Send:** Send messages to the actor.
* **Close:** Close the WebSocket connection to the actor.
To learn more, see [connect a client to a session](/developers/backend/resources/actors/sample-flows#connect-a-client-to-a-session).
## How actors and clients interact
The following diagram shows the general interaction between a client and an actor:
```mermaid theme={null}
sequenceDiagram
participant C as Client
participant A as Actor
C->>A: 1. connect(sessionId)
A->>A: 2. handleStart()
A->>A: 3. handleConnect(conn)
C->>A: 4. send(data)
A->>A: 5. handleMessage(conn, msg)
A-->>C: 6. broadcast(data)
C->>A: 7. close()
A->>A: 8. handleClose(conn)
```
1. The client connects to the actor over a WebSocket.
2. The session activates. [`handleStart()`](/developers/backend/resources/actors/reference#lifecycle-handlers) runs on first start and each time the session activates from idle.
3. The actor handles the connection. You can check the client's identity and reject the connection, or send the current state.
4. The client sends a message.
5. The actor handles the message. You can validate the format and the sender's permissions before you change session state.
6. The actor broadcasts the update to every connected client, or replies only to the sender.
7. The client closes the connection.
8. The actor handles the disconnect. You can remove per-connection state.
## Realtime messages
Each connected client belongs to a session and can send messages in realtime via WebSockets. Clients can also listen for incoming messages using [`subscribe()`](/developers/references/sdk/docs/type-aliases/actors#subscribe).
Base44 provides several realtime features that use a subscription-based listener:
* Actor [`subscribe()`](/developers/references/sdk/docs/type-aliases/actors#subscribe) listens for messages the actor sends to connected clients.
* Entity [`subscribe()`](/developers/references/sdk/docs/type-aliases/entities#subscribe) listens for changes to app entities.
Check which service you use so you receive the events you expect.
With realtime messages, you can:
* Reply to a specific client.
* Broadcast to all connected clients.
* List the clients that are currently connected.
* Identify each client and check whether the client has logged in.
To learn more, see [connections](#connections). For a sample flow, see [manage client connections](/developers/backend/resources/actors/sample-flows#manage-client-connections).
## Message types
A client and an actor exchange messages over a connection. Messages fall into the following types:
* **Incoming messages:** What a connected client sends to the actor, such as a text, a move, or a vote. The client sends them with [`send()`](/developers/references/sdk/docs/type-aliases/actors#send), and the actor receives them in [`handleMessage()`](/developers/backend/resources/actors/reference#lifecycle-handlers).
* **Outgoing messages:** What the actor sends to connected clients, such as a reply to a client, a broadcast to all connected clients, or the current board when someone joins. The actor sends them with [`conn.send()`](/developers/backend/resources/actors/reference#connections) or `broadcast()`, and the client receives them in a [`subscribe()`](/developers/references/sdk/docs/type-aliases/actors#subscribe) callback.
We recommend typing your messages so the actor and the client agree on each message's shape:
* **Backend:** Pass `Incoming` and `Outgoing` types as generics to the `Actor` class. For a complete example, see [create an actor](/developers/backend/resources/actors/create-actor).
* **Client:** Extend the [`ActorRegistry`](/developers/references/sdk/docs/type-aliases/actors#actorregistry) interface with the same shapes, so TypeScript checks the types of `send()` and `subscribe()`.
## Storage
Actors provide several storage options depending on how your session uses and retains data:
* **[In-memory storage](#in-memory-storage):** Working state that lives in class fields while the session is active and resets when the session goes idle.
* **[Persistent storage](#persistent-storage):** A key-value store for data that needs to survive when the session goes idle.
### In-memory storage
Class fields hold the working state while the session is active, such as the current board or a round timer. Use in-memory storage when your data changes frequently and doesn't need to persist when the session goes idle, such as a live score or a cursor position.
When a session becomes idle, class fields reset.
### Persistent storage
Each session has its own key-value store that you can fully manage.
Use persistent storage when your data needs to survive when the session goes idle, such as chat history or a game board.
To store data that's available across the entire app, use [entities](/developers/backend/resources/entities/overview).
To learn more about actor storage, see [storage](/developers/backend/resources/actors/reference#storage).
### Restoring state
When a session goes idle, in-memory state resets. Persistent storage survives, but the session doesn't automatically load the stored data back into memory when the session activates.
Use [`handleStart()`](/developers/backend/resources/actors/reference#lifecycle-handlers) to restore persistent data, such as the chat history or the game board.
For a sample flow, see [persist session data](/developers/backend/resources/actors/sample-flows#persist-session-data).
## Scheduled work
Actors provide functionality for a session to run logic on a schedule, independent of client messages:
* **[Ticks](#ticks):** Run code on an interval and keep the session active while they repeat.
* **[Wakes](#wakes):** Run once at a time you choose, whether the session is active or idle.
### Ticks
Ticks run code on an interval, and they keep the session active while they repeat.
Use [`shouldTick()`](/developers/backend/resources/actors/reference#timer-handlers-and-settings) to set the conditions for when ticking runs.
An actor re-evaluates `shouldTick()` after every connection, message, disconnection, and tick, so ticking stops as soon as the condition is no longer met.
Ticking needs at least one connected client.
With ticks, you can:
* Choose the length of each interval.
* Define a condition that starts and stops ticking, such as "at least two players are in the session."
* Write the code that runs each interval.
Use ticks to keep a session active even when clients aren't sending messages, such as updating a round timer.
To learn more about ticks, see [timer handlers and settings](/developers/backend/resources/actors/reference#timer-handlers-and-settings) and [run ticks](/developers/backend/resources/actors/sample-flows#run-ticks) for a sample flow.
### Wakes
A wake runs once at a time you choose, whether the session is active or idle.
With wakes, you can:
* Schedule when a wake runs.
* Implement logic that runs when a wake occurs.
Use a wake to schedule a one-time action, such as ending a game turn, closing an empty lobby, triggering a reminder, or starting an event at a specific time.
To learn more about wakes, see [timer handlers and settings](/developers/backend/resources/actors/reference#timer-handlers-and-settings) and [schedule wakes](/developers/backend/resources/actors/sample-flows#schedule-wakes) for a sample flow.
## Deploy an actor
Deploy actors with [`actors deploy`](/developers/references/cli/commands/actors-deploy). To push all project resources at once, use [`deploy`](/developers/references/cli/commands/deploy). Deploying adds and updates remote actors and leaves the rest in place.
## Delete an actor
To delete an actor:
* Run [`actors delete`](/developers/references/cli/commands/actors-delete) to delete the remote actor from Base44.
* Delete the actor directory from your local project.
If you don't delete the actor from your local project, the next [`actors deploy`](/developers/references/cli/commands/actors-deploy) or [`deploy`](/developers/references/cli/commands/deploy) recreates and deploys the actor to your Base44 project.
## See also
* [Create an Actor](/developers/backend/resources/actors/create-actor): Actor files and a minimal class
* [Actors: Sample Flows](/developers/backend/resources/actors/sample-flows): Lifecycle, timers, connections, storage, entities, and backend functions
* [Actors Files and Code](/developers/backend/resources/actors/reference): Complete backend class API
* [`actors` SDK reference](/developers/references/sdk/docs/type-aliases/actors): Client SDK API
# Actors Files and Code
Source: https://docs.base44.com/developers/backend/resources/actors/reference
Complete reference for the Actor class, its handlers, connections, storage, and timers
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform.
Complete reference for the `Actor` class that runs in your app's backend. For the client SDK that connects to a session, see the [`actors` SDK reference](/developers/references/sdk/docs/type-aliases/actors).
For actor concepts and terminology, see the [actors overview](/developers/backend/resources/actors/overview).
## Required handlers
The `Actor` class is abstract. Implement the body of each of the following handlers. The handlers respond to events from clients and timers.
| Handler | Events |
| - | - |
| [`handleConnect()`](#lifecycle-handlers) | A client connects. |
| [`handleMessage()`](#lifecycle-handlers) | A connected client sends a message. |
| [`handleClose()`](#lifecycle-handlers) | A client disconnects. |
| [`handleTick()`](#timer-handlers-and-settings) | Each tick interval, while ticking is on. |
## Optional handlers
When your actor needs them, implement these handlers.
| Handler | Events |
| - | - |
| [`handleStart()`](#lifecycle-handlers) | The session starts, before Base44 handles a connection. |
| [`shouldTick()`](#timer-handlers-and-settings) | After each connection, message, disconnection, and tick. |
| [`handleWake()`](#timer-handlers-and-settings) | A time set with `schedule()` arrives. |
When the session ticks, set [`tickIntervalMs`](#timer-handlers-and-settings). If you omit `shouldTick()`, the session never ticks.
## Methods to call
The actor class provides built-in functionality. The following are methods that you can use when implementing an actor's handlers.
| Method | Purpose |
| - | - |
| [`schedule()`](#timer-handlers-and-settings) | Arm a wake at a time you choose. |
| [`cancelSchedule()`](#timer-handlers-and-settings) | Clear a scheduled wake. |
| [`conn.send()`](#connections) | Reply to one client. |
| [`conn.reject()`](#connections) | Refuse a connecting client. |
| [`broadcast()`](#connections) | Reach every client in the session. |
| [`getConnections()`](#connections) | List the connected clients. |
| [`this.storage.get()`](#storage) | Read a saved session value. |
| [`this.storage.put()`](#storage) | Save a session value. |
| [`this.storage.delete()`](#storage) | Remove one saved value. |
| [`this.storage.deleteAll()`](#storage) | Clear the session store. |
| [`secrets.get()`](#read-secrets) | Read an app secret. |
Use [`this.client`](#entity-access) to read and write [entities](/developers/backend/resources/entities/overview).
## Class declaration
Import `Actor` from `base44:runtime/actors` and export a class that extends `Actor` as the default export from `base44/actors//entry.ts`.
The folder name becomes the actor name in the SDK. For setup details, see [create an actor](/developers/backend/resources/actors/create-actor).
Types the messages the actor receives from connected clients. Applies to the
`msg` parameter of `handleMessage()`.
Types the messages the actor sends to connected clients. Applies to
`conn.send()` and `broadcast()`.
## Runtime API
Actors import the `Actor` class from the `base44:runtime/actors` module:
```typescript theme={null}
import { Actor } from "base44:runtime/actors";
```
### Read secrets
Use `secrets.get()` to read your app's environment variables from a handler. The method returns the value as a string, or `undefined` when the secret isn't set.
Import `secrets` from the `base44:runtime` module:
```typescript theme={null}
import { secrets } from "base44:runtime";
```
Configure secrets from the CLI with [`secrets set`](/developers/references/cli/commands/secrets-set).
We recommend calling a [backend function](/developers/backend/resources/backend-functions/overview) for work that needs a secret. The function reads the secret and returns the result, so the actor never receives the secret. For a sample flow, see [call a backend function for secret work](/developers/backend/resources/actors/sample-flows#call-a-backend-function-for-secret-work).
## Lifecycle handlers
Base44 calls these handlers in response to client activity in the session.
You implement the body for each.
Learn more about [how actors and clients interact](/developers/backend/resources/actors/overview#how-actors-and-clients-interact).
For a sample flow, see [manage client connections](/developers/backend/resources/actors/sample-flows#manage-client-connections).
Runs anytime a session activates, such as:
* When the session is first created.
* When a client connects to an idle session.
* When a message arrives on an idle session.
* When a scheduled time arrives.
Returns `void` or a `Promise`.
Runs when a client connects to the session.
You can send the current session state with `conn.send()`, or refuse the connection with `conn.reject()`.
Returns `void` or a `Promise`.
Represents the client that connected.
Runs when a connected client sends a message.
You can validate the message before changing session state or accessing app data.
Returns `void` or a `Promise`.
Represents the client that sent the message.
Contains the message sent from the client. The `Incoming` generic defines
the message type.
Runs when a client disconnects.
Use this handler to remove any session state associated with the connection ID.
A reconnect that reuses the same ID replaces the old socket without running `handleClose()`.
Returns `void` or a `Promise`.
Represents the client that disconnected.
## Timer handlers and settings
These handlers and settings control timed work in the session.
Base44 calls them when a scheduled time arrives, not in response to client activity.
Learn more about [scheduled work](/developers/backend/resources/actors/overview#scheduled-work).
For sample flows, see [run ticks](/developers/backend/resources/actors/sample-flows#run-ticks) and [schedule wakes](/developers/backend/resources/actors/sample-flows#schedule-wakes).
Runs once per interval while `shouldTick()` returns `true` and the session has at least one client.
Returns `void` or a `Promise`.
Specifies the interval between ticks in milliseconds. Defaults to `100`.
Returns a `boolean`. Return `true` to keep the session ticking, or `false` to stop it. This method is synchronous.
Keep this method fast and free of side effects. Base44 calls this method after each connection, message, disconnection, and tick.
Runs once when a time set with `schedule()` arrives.
Returns `void` or a `Promise`.
Contains the key passed to `schedule()`.
Schedules one run of `handleWake()` at a specified time.
Returns a `Promise` that settles after Base44 stores the schedule.
The schedule survives an idle period and can start an idle session.
Calling this method again with the same key replaces the scheduled time.
Identifies the scheduled wake. Passed to `handleWake()` when the wake triggers.
Specifies when `handleWake()` runs. Use a `Date` object or milliseconds
since January 1, 1970.
Cancels the scheduled wake associated with a key.
Returns a `Promise` that settles after Base44 clears the schedule.
Specifies the key passed to `schedule()`.
## Connections
These properties and methods are available on the `conn` object passed to lifecycle handlers that involve a client.
Use these properties and methods to read client identity, send messages, and manage the connection.
For an overview of messaging, see [realtime messages](/developers/backend/resources/actors/overview#realtime-messages).
For a sample flow, see [manage client connections](/developers/backend/resources/actors/sample-flows#manage-client-connections).
`conn` is the backend end of the WebSocket, and `Connection` in the client is the other end of the same socket. Use `conn` in the actor class. See the `actors` SDK reference for the client object.
Identifies this connection. Matches the ID the client passed when connecting,
or an ID the SDK generated.
Identifies the client on this connection. Present on all
connections.
Contains `authenticated` or `anonymous`.
Identifies the logged-in client. Present when `type` is
`authenticated`.
Identifies the anonymous client. Present when `type` is `anonymous`.
Sends a message to this connection. Returns `void`.
Contains the message to send to this connection. The `Outgoing` generic defines the message type.
Refuses a connection from `handleConnect()`. Returns `void`.
Specifies the status code sent to the client.
Describes why the actor refused the connection.
Sends a message to every live connection in the session. Returns `void`.
Contains the message to send to every connection in the session. The `Outgoing` generic defines the message type.
Returns an array of live `conn` objects in the session. Use this method in
`handleStart()` to match restored data with clients that stayed connected
through an idle period.
Session-level property. Contains the session ID that the client used to reach
this session.
## Storage
Use `this.storage` to read and write session data. Unlike class fields, storage survives idle periods. To choose between storage and class fields, see [storage](/developers/backend/resources/actors/overview#storage). For a sample flow, see [persist session data](/developers/backend/resources/actors/sample-flows#persist-session-data).
Retrieves a value by key. Returns a `Promise` that resolves to the stored
value, or `undefined` when the key doesn't exist.
Specifies the key to retrieve.
Saves a value by key. Replaces the value already stored under the key. Returns
a `Promise` that settles when the write completes.
Specifies the key to save.
Specifies the JSON-compatible value to save.
Removes a value by key. Returns a `Promise` that resolves to `true` when the
key existed, and `false` otherwise.
Specifies the key to remove.
Removes all saved data for the session. Returns a `Promise` that settles when
the store is empty. A later connection starts with the same empty storage as a
new session.
## Entity access
Use `this.client` and `this.client.asServiceRole` to read and write app entities from inside an actor handler. For a sample flow, see [write entity data from a session](/developers/backend/resources/actors/sample-flows#write-entity-data-from-a-session).
Provides an app client scoped to this session. This client uses anonymous
authentication, so entity access follows the same rules as a logged-out
client, and it reads production data.
Provides elevated access that bypasses row-level security. Validate messages
before you use this client. Make writes safe to repeat, because the session can run a handler
again after an error.
## See also
* [Actors Overview](/developers/backend/resources/actors/overview): Concepts and terminology
* [Actors: Sample Flows](/developers/backend/resources/actors/sample-flows): Lifecycle, timers, connections, storage, entities, and backend functions
* [`actors` SDK reference](/developers/references/sdk/docs/type-aliases/actors): Client SDK API
* [`secrets set`](/developers/references/cli/commands/secrets-set): Configure environment variables from the CLI
# Actors: Sample Flows
Source: https://docs.base44.com/developers/backend/resources/actors/sample-flows
Sample flows for lifecycle handlers, timers, connections, storage, entities, and backend functions
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform.
Use these sample flows as a starting point for your implementation.
## Connect a client to a session
When the frontend needs to join a live session, receive messages from the actor, and send messages to the actor, connect a client to an actor session.
**To connect a client to a session:**
1. Call [`base44.actors.ActorName(sessionId)`](/developers/references/sdk/docs/type-aliases/actors) to select the session.
2. Call [`.connect()`](/developers/references/sdk/docs/type-aliases/actors#connect) to open the WebSocket connection.
3. Call [`conn.subscribe()`](/developers/references/sdk/docs/type-aliases/actors#subscribe) to register a listener for messages from the actor.
4. Call [`conn.send()`](/developers/references/sdk/docs/type-aliases/actors#send) to send a message to the actor.
The following example connects to a `chatRoom` actor session, listens for messages, and sends a message:
```typescript theme={null}
const conn = base44.actors.chatRoom("lobby-1").connect();
conn.subscribe((msg) => {
if (msg.type === "message") console.log(msg.text);
});
conn.send({ type: "message", text: "Hello" });
```
To learn more about connections, see [connections](/developers/backend/resources/actors/reference#connections).
## Run ticks
When work needs to repeat on an interval while clients are in the session, run ticks. Examples include broadcasting game state or updating a round timer.
**To run ticks:**
1. Set [`tickIntervalMs`](/developers/backend/resources/actors/reference#timer-handlers-and-settings) to the interval length in milliseconds.
2. Implement [`shouldTick()`](/developers/backend/resources/actors/reference#timer-handlers-and-settings) to return `true` to keep ticking and `false` to stop.
3. In [`handleTick()`](/developers/backend/resources/actors/reference#timer-handlers-and-settings), run the work for each interval.
The following example ticks every second while at least two clients are in the session, broadcasting a countdown each tick:
```typescript theme={null}
export default class Game extends Actor {
tickIntervalMs = 1000;
countdown = 60;
shouldTick() {
return this.getConnections().length >= 2;
}
async handleTick() {
this.countdown--;
this.broadcast({ type: "tick", countdown: this.countdown });
}
}
```
To learn more about ticks, see [timer handlers and settings](/developers/backend/resources/actors/reference#timer-handlers-and-settings).
## Schedule wakes
When work needs to run once at a specific time, whether the session is active or idle, schedule a wake. Examples include ending a turn after 30 seconds or closing an empty lobby.
**To schedule a wake:**
1. Call [`schedule()`](/developers/backend/resources/actors/reference#timer-handlers-and-settings) with a key and a time to arm the wake.
2. In [`handleWake()`](/developers/backend/resources/actors/reference#timer-handlers-and-settings), check the key and run the work for that wake.
3. When the wake no longer applies, call [`cancelSchedule()`](/developers/backend/resources/actors/reference#timer-handlers-and-settings) with the key.
The following example schedules a turn timeout when a turn starts and broadcasts a message when the timeout triggers:
```typescript theme={null}
export default class Game extends Actor {
async handleMessage(_conn, msg) {
if (msg.type === "start-turn") {
await this.schedule("turn-timeout", Date.now() + 30_000);
}
if (msg.type === "end-turn") {
await this.cancelSchedule("turn-timeout");
}
}
async handleWake(key: string) {
if (key === "turn-timeout") {
this.broadcast({ type: "timeout" });
}
}
}
```
To learn more about wakes, see [timer handlers and settings](/developers/backend/resources/actors/reference#timer-handlers-and-settings).
## Manage client connections
When you need to decide who can join a session, reply to a specific client, and reach every client in the session, manage client connections.
**To manage client connections:**
1. In [`handleConnect()`](/developers/backend/resources/actors/reference#lifecycle-handlers), check [`conn.identity`](/developers/backend/resources/actors/reference#connections) and call [`conn.reject()`](/developers/backend/resources/actors/reference#connections) to refuse a client.
2. Call [`conn.send()`](/developers/backend/resources/actors/reference#connections) to reply to only that client.
3. In [`handleMessage()`](/developers/backend/resources/actors/reference#lifecycle-handlers), call [`broadcast()`](/developers/backend/resources/actors/reference#connections) to reach every connected client. To identify the sender, include fields from `conn` in the message.
The following example rejects anonymous clients, sends history to the connecting client, and broadcasts messages with the sender's user ID:
```typescript theme={null}
async handleConnect(conn) {
if (conn.identity.type === "anonymous") {
conn.reject(401, "Login required");
return;
}
conn.send({ type: "history", messages: this.messages });
}
async handleMessage(conn, msg) {
this.broadcast({ type: "message", from: conn.identity.userId, text: msg.text });
}
```
To learn more about connections, see [connections](/developers/backend/resources/actors/reference#connections).
## Persist session data
When values need to survive an idle period, persist session data. Examples include a board, a history list, or the current turn.
**To persist session data:**
1. In [`handleStart()`](/developers/backend/resources/actors/reference#lifecycle-handlers), load values from [`this.storage`](/developers/backend/resources/actors/reference#storage) into class fields.
2. After each change, call [`this.storage.put()`](/developers/backend/resources/actors/reference#storage) to save the updated value.
3. To reset the session, call [`this.storage.delete()`](/developers/backend/resources/actors/reference#storage) or [`this.storage.deleteAll()`](/developers/backend/resources/actors/reference#storage).
The following example loads a board on start, saves it after each move, and clears storage when the last client disconnects:
```typescript theme={null}
async handleStart() {
this.board = (await this.storage.get("board")) ?? newBoard();
}
async handleMessage(_conn, msg) {
applyMove(this.board, msg.move);
await this.storage.put("board", this.board);
}
async handleClose(_conn) {
if (this.getConnections().length === 0) {
await this.storage.deleteAll();
}
}
```
To learn more about storage, see [storage](/developers/backend/resources/actors/reference#storage).
## Write entity data from a session
When the session needs to create or update app records, write entity data. Examples include a final score or a completed order.
**To write entity data from a session:**
1. Validate the incoming message before writing.
2. Read the user ID from [`conn.identity.userId`](/developers/backend/resources/actors/reference#connections).
3. Use [`this.client.asServiceRole`](/developers/backend/resources/actors/reference#entity-access) for elevated access. Write with a stable key, such as the session ID, so a repeated handler updates the same record.
The following example saves a final score for the authenticated client. A later save for the same session updates that record:
```typescript theme={null}
async handleMessage(conn, msg) {
if (msg.type !== "save-score" || conn.identity.type !== "authenticated") return;
if (typeof msg.score !== "number") return;
const fields = {
sessionId: this.instanceId,
userId: conn.identity.userId,
score: msg.score,
};
const [existing] = await this.client.asServiceRole.entities.Score.filter({
sessionId: this.instanceId,
});
if (existing) {
await this.client.asServiceRole.entities.Score.update(existing.id, fields);
} else {
await this.client.asServiceRole.entities.Score.create(fields);
}
}
```
To learn more about entity access, see [entity access](/developers/backend/resources/actors/reference#entity-access).
## Call a backend function for secret work
Actors can read app secrets with [`secrets.get()`](/developers/backend/resources/actors/reference#read-secrets). When a handler needs work that uses a secret, such as calling an external API with an API key, we recommend calling a [backend function](/developers/backend/resources/backend-functions/overview). The function reads the secret and returns the result, never the secret.
**To call a backend function from an actor:**
1. Create a backend function that reads the secret with `secrets.get()`, does the work, and returns the result.
2. In a handler, call [`this.client.functions.invoke()`](/developers/references/sdk/docs/interfaces/functions#invoke) with the function name and the data to send.
3. Use the result in your session, such as broadcasting it to connected clients.
The following example shows a backend function that reads an API key and returns a translation:
```typescript theme={null}
// base44/functions/translateText/entry.ts
import { secrets } from "base44:runtime";
export default async function (req: Request): Promise {
const { text } = await req.json();
const apiKey = secrets.get("TRANSLATE_API_KEY");
const res = await fetch("https://api.example.com/translate", {
method: "POST",
headers: { Authorization: `Bearer ${apiKey}` },
body: JSON.stringify({ text }),
});
const { translation } = await res.json();
return Response.json({ translation });
}
```
The following example calls that function from an actor and broadcasts the result:
```typescript theme={null}
export default class ChatRoom extends Actor {
async handleMessage(_conn, msg) {
const result = await this.client.functions.invoke("translateText", { text: msg.text });
this.broadcast({ type: "message", text: result.data.translation });
}
}
```
## See also
* [Actors Overview](/developers/backend/resources/actors/overview): Concepts and terminology
* [Create an Actor](/developers/backend/resources/actors/create-actor): Actor files and a minimal class
* [Actors Files and Code](/developers/backend/resources/actors/reference): Complete backend class API
* [`actors deploy`](/developers/references/cli/commands/actors-deploy): Deploy local actors
# Agent Skills
Source: https://docs.base44.com/developers/backend/resources/agents/agent-skills
Define reusable instruction sets for your app's AI agents
You're viewing developer documentation
This documentation is for developers working with the Base44 developer platform. For information about adding skills to agents in the app editor, see Setting up an AI agent.
Agent skills are reusable instruction sets that give your [AI agents](/developers/backend/resources/agents/overview) specific behaviors, expertise, or policies, such as a refund policy or a brand voice. Agent skills are app scoped, so you define them once for your app, then attach any of them to any agent in that app.
These are skills for the agents running inside your app, not the [Base44 skills](/developers/backend/overview/skills) that teach AI coding assistants like Claude and Cursor how to build Base44 apps.
## How agents use skills
Each agent selects the skills it needs by name. At runtime, the agent always sees each selected skill's description, and it loads the full instructions on demand only when it decides the skill is relevant. This keeps the agent's prompt small while giving it access to detailed instructions when needed.
You can attach up to 10 skills to a single agent, and an app can hold up to 100 skills in total.
To attach a skill to an agent, add the skill's name to the agent's `selected_skill_names` array:
```jsonc theme={null}
{
"name": "customer_support",
"description": "Handles customer support inquiries and ticket management",
"instructions": "You are a friendly customer support agent.",
"model": "claude-sonnet-5",
"selected_skill_names": ["refund-policy", "brand-voice"],
}
```
## Defining agent skills locally
Each skill is a single Markdown file in your `base44/agent-skills/` directory. The filename, without the `.md` extension, is the skill name. The YAML frontmatter holds the skill's `description`, and the body holds the instructions the agent follows when it uses the skill. For example:
```markdown theme={null}
---
description: How to handle refund requests and exceptions
---
When a customer asks for a refund, first check whether the order is within
the 30 day return window. If it is, approve the refund. If it is outside the
window, explain the policy politely and offer store credit instead.
```
Skill names must be lowercase and use hyphens to separate words, for example `refund-policy`. Descriptions can be up to 1024 characters, and instruction bodies up to 15000 characters.
By default, skills live in `base44/agent-skills/`. You can customize the path with `agentSkillsDir` in your [project configuration](/developers/backend/overview/project-structure#config-jsonc).
## Deploy agent skills
Deploy agent skills with [`agent-skills push`](/developers/references/cli/commands/agent-skills-push) or [`deploy`](/developers/references/cli/commands/deploy) to push all project resources at once.
To download agent skills to your local project, use [`agent-skills pull`](/developers/references/cli/commands/agent-skills-pull).
## See also
* [`agent-skills push`](/developers/references/cli/commands/agent-skills-push): Push your local agent skills to Base44
* [`agent-skills pull`](/developers/references/cli/commands/agent-skills-pull): Sync agent skills from Base44 to your local project
* [About Agents](/developers/backend/resources/agents/overview): Configure the agents that use these skills
# About Agents
Source: https://docs.base44.com/developers/backend/resources/agents/overview
Define AI agents using local configuration files
You're viewing developer documentation
This documentation is for developers working with the Base44 developer platform. For information about AI agents in the app editor, see Setting up an AI agent.
[AI agents](/Building-your-app/AI-agents-for-apps) are customizable AI assistants that take action and connect to tools to help team members and end users. Define agent behavior, permissions, and tools using local JSONC configuration files.
## Create agents
Create JSONC configuration files in your `base44/agents/` directory (one file per agent), then run [`agents push`](/developers/references/cli/commands/agents-push) to sync them to Base44.
## Example
```jsonc theme={null}
{
"name": "customer_support",
"description": "Handles customer support inquiries and ticket management",
"instructions": "You are a friendly customer support agent. Help users resolve their issues politely and efficiently. If you cannot help, escalate to a human agent.",
"model": "claude-sonnet-5",
"tool_configs": [
{
"entity_name": "tickets",
"allowed_operations": ["read", "create", "update"],
},
{
"entity_name": "customers",
"allowed_operations": ["read"],
},
{
"function_name": "send_notification",
"description": "Sends a push notification to the customer",
},
{
"function_name": "escalate_to_human",
"description": "Escalates the conversation to a human support agent",
},
],
"whatsapp_greeting": "Hi, I'm your support assistant. How can I help you today?",
"selected_skill_names": ["refund-policy", "brand-voice"],
}
```
## Field reference
Agent configurations use JSONC. Each agent is defined in a separate file in the `base44/agents/` directory.
### Required fields
Unique identifier for the agent. Use lowercase letters and underscores. The
name should match the filename, so an agent named `customer_support` would be
in `customer_support.jsonc`.
Brief description of what the agent does.
System prompt that defines the agent's behavior, personality, and guidelines.
The AI model the agent runs on. Use `automatic` to let Base44 choose one, or set a preset ID from the [supported models](/developers/backend/resources/models) list, for example `claude-sonnet-5` or `gpt_6_sol`.
Retired preset IDs that Base44 still recognizes are upgraded to a current replacement automatically.
### Optional fields
Tools the agent can use to interact with your app. See [Tool
configuration](#tool-configuration).
Welcome message for WhatsApp conversations with this agent.
Names of the [agent skills](/developers/backend/resources/agents/agent-skills)
attached to this agent. Up to 10 skills per agent.
## Tool configuration
The `tool_configs` array defines what capabilities your agent has. There are two types: **entity tools** and **function tools**.
### Entity tools
Entity tools allow the agent to perform CRUD operations on your app's [entities](/developers/backend/resources/entities/overview).
Name of the entity. Must match an existing entity in your app.
Operations the agent can perform on this entity. Valid values are `"read"`,
`"create"`, `"update"`, and `"delete"`.
### Function tools
Function tools allow the agent to invoke your app's [backend functions](/developers/backend/resources/backend-functions/overview).
Name of the function. Must match an existing function in your app.
Description of what the function does. The agent uses this to decide when to
call it.
## TypeScript types
Generate TypeScript types from your agent configurations to get type safety and autocomplete for agent names in your SDK code. Learn more about [dynamic types](/developers/references/sdk/getting-started/dynamic-types).
## See also
* [`agents pull`](/developers/references/cli/commands/agents-pull): Sync agent configurations from Base44 to your local project
* [`agents push`](/developers/references/cli/commands/agents-push): Deploy your local agent configurations to Base44
* [Agent Skills](/developers/backend/resources/agents/agent-skills): Define reusable instruction sets for your agents
* [`agents`](/developers/references/sdk/docs/interfaces/agents): SDK reference for working with agents in your code
* [Setting up AI agents](/Building-your-app/AI-agents-for-apps): Guide to creating and configuring AI agents
# Auth
Source: https://docs.base44.com/developers/backend/resources/auth
Manage your app's login methods using local configuration files
You're viewing developer documentation
This documentation is for developers working with the Base44 developer platform. For information about managing login methods in the app editor, see Managing login and registration.
Authentication controls how your app's users sign in, register, and access its features. Auth config lets you manage login methods as a local JSONC file that you sync with Base44 using the CLI.
## Configure
Your auth config is a single JSONC file at `base44/auth/config.jsonc`. You can customize the directory path with the `authDir` property in your [project configuration](/developers/backend/overview/project-structure#config-jsonc). Pull the current config from Base44 with [`auth pull`](/developers/references/cli/commands/auth-pull), then push changes with [`auth push`](/developers/references/cli/commands/auth-push) or [`deploy`](/developers/references/cli/commands/deploy).
You can also toggle login methods from the command line with [`auth password-login`](/developers/references/cli/commands/auth-password-login), [`auth social-login`](/developers/references/cli/commands/auth-social-login), and [`auth sso`](/developers/references/cli/commands/auth-sso).
## Example
```jsonc theme={null}
{
"enableUsernamePassword": true,
"enableGoogleLogin": false,
"enableMicrosoftLogin": false,
"enableFacebookLogin": false,
"enableAppleLogin": false,
"googleOAuthMode": "default",
"googleOAuthClientId": null,
"enableSSOLogin": false,
"ssoProviderName": null,
"useWorkspaceSSO": false
}
```
## Field reference
Allow users to sign in with an email address and password. Defaults to `false`.
Allow users to sign in with Google. Defaults to `false`.
Allow users to sign in with Microsoft. Defaults to `false`.
Allow users to sign in with Facebook. Defaults to `false`.
Allow users to sign in with Apple. Defaults to `false`.
How Google OAuth credentials are sourced. Use `default` to use Base44-managed credentials, or `custom` to use your own OAuth client. Defaults to `default`.
Custom Google OAuth client ID. Only used when `googleOAuthMode` is `custom`. Set this with [`auth social-login google enable --client-id`](/developers/references/cli/commands/auth-social-login). The matching client secret is stored as a project secret, not in this file. Defaults to `null`.
Allow users to sign in with the configured SSO identity provider. Toggle with [`auth sso enable|disable`](/developers/references/cli/commands/auth-sso). Mutually exclusive with social login. Defaults to `false`.
Name of the configured SSO provider when `enableSSOLogin` is `true`. One of `google`, `microsoft`, `github`, `okta`, or `custom`. Set by [`auth sso enable --provider`](/developers/references/cli/commands/auth-sso). Defaults to `null`.
Whether this app uses the SSO provider enforced at the workspace level instead of its own `ssoProviderName`. Set by a workspace admin in workspace settings, not by the [`auth sso`](/developers/references/cli/commands/auth-sso) command. Defaults to `false`.
If your config has no login methods enabled, the CLI warns that users will be locked out when you push. Make sure at least one login method is enabled.
## See also
* [`auth pull`](/developers/references/cli/commands/auth-pull): Fetch auth config from Base44
* [`auth push`](/developers/references/cli/commands/auth-push): Push auth config to Base44
* [`auth password-login`](/developers/references/cli/commands/auth-password-login): Enable or disable password login
* [`auth social-login`](/developers/references/cli/commands/auth-social-login): Enable or disable social login providers
* [`auth sso`](/developers/references/cli/commands/auth-sso): Configure SSO identity providers
* [`deploy`](/developers/references/cli/commands/deploy): Deploy all project resources
* [Managing login and registration](/Setting-up-your-app/Managing-login-and-registration): Configure login options in the dashboard
# Automations
Source: https://docs.base44.com/developers/backend/resources/backend-functions/automations
Schedule recurring tasks and trigger functions automatically based on database events or connector webhook events
You're viewing developer documentation
This documentation is for developers working with the Base44 developer platform. For information about automations in the app editor, see Creating automations for your app.
Automations allow [backend functions](/developers/backend/resources/backend-functions/overview) to run automatically on a schedule, in response to database events, or when a connected integration sends a webhook event. Use automations to process data at regular intervals, handle entity changes, react to external service events, or execute one-time tasks at specific times.
Each backend function can have multiple automations attached, configured in the function's `function.jsonc` file. If you only have an `entry.ts` or `entry.js` file, you'll need to add this configuration file to use automations. Automations are [deployed atomically with the function code](#deploy-automations) when you run [`deploy`](/developers/references/cli/commands/deploy) or [`functions deploy`](/developers/references/cli/commands/functions-deploy).
Apps that use workflows can't deploy these automations. If your app has workflows enabled, deploying a `function.jsonc` that contains automations fails with HTTP 409. Use [Workflows](/Building-your-app/Creating-workflows) to recreate the same schedule or trigger instead, and deploy the function without an `automations` block.
## Automation types
Base44 supports 4 types of automations:
* **[Scheduled automations with cron](#cron)**: Use cron expressions for precise scheduling control.
* **[Scheduled automations with simple schedules](#simple-schedule)**: Configure recurring tasks by interval without cron expressions.
* **[Entity event automations](#entity-events)**: Trigger functions when database records are created, updated, or deleted.
* **[Connector automations](#connector-automations)**: Respond to events from connected services in real time, such as a new email in Gmail or a file change in Google Drive.
## Common fields
### Common fields for all automations
All automation types share the following fields:
| Field | Type | Required | Description |
| - | - | - | - |
| `type` | `string` | Yes | The automation type. Possible values: `"scheduled"`, `"entity"`, or `"connector"`. |
| `name` | `string` | Yes | Unique identifier for the automation. |
| `description` | `string` | No | Human-readable description. |
| `function_args` | `object` | No | Arguments passed to the function when triggered. See [Function arguments](#function-arguments). |
| `is_active` | `boolean` | No | Whether the automation is enabled. Defaults to `true`. |
### Common fields for scheduled automations
Both cron and simple scheduled automations share these additional fields:
| Field | Type | Required | Description |
| - | - | - | - |
| `schedule_mode` | `string` | Yes | Whether the schedule repeats. Possible values: `"recurring"` or `"one-time"`. |
| `schedule_type` | `string` | Yes | Scheduling method to use. Possible values: `"cron"` or `"simple"`. |
| `ends_type` | `string` | No | When the recurring schedule should stop. Possible values: `"never"`, `"on"`, or `"after"`. Defaults to `"never"`. |
| `ends_on_date` | `string` | Conditional | Date when the recurring schedule ends, inclusive, in UTC. Required when `ends_type` is `"on"`. Format: `YYYY-MM-DDTHH:MM:SSZ`. For example, `"2026-12-31T23:59:59Z"`. |
| `ends_after_count` | `number` | Conditional | Number of executions after which the recurring schedule stops. Required when `ends_type` is `"after"`. |
## Automation configuration
Configure automations in your `function.jsonc` file using one of the following approaches. All automations use the [common fields for all automations](#common-fields-for-all-automations) listed above, plus the fields specific to each type.
### Cron
Use [common fields for all automations](#common-fields-for-all-automations) and [common fields for scheduled automations](#common-fields-for-scheduled-automations) along with the cron-specific fields listed here.
Set `type` to `"scheduled"` and `schedule_type` to `"cron"` to use cron expressions for precise scheduling control.
Cron automations use standard 5-field syntax: `minute hour day-of-month month day-of-week`. See [crontab.guru](https://crontab.guru/) for an interactive cron expression editor and syntax reference.
| Field | Type | Required | Description |
| - | - | - | - |
| `cron_expression` | `string` | Yes | 5-field cron expression. |
#### Cron example
This example runs a function every day at midnight UTC:
```jsonc theme={null}
{
"name": "sendDailyReport",
"entry": "entry.ts",
"automations": [
{
"type": "scheduled",
"name": "daily_midnight_report",
"description": "Runs every day at midnight UTC",
"function_args": { "mode": "full_sync" },
"is_active": true,
"schedule_mode": "recurring",
"schedule_type": "cron",
"cron_expression": "0 0 * * *"
}
]
}
```
### Simple schedule
Use [common fields for all automations](#common-fields-for-all-automations) and [common fields for scheduled automations](#common-fields-for-scheduled-automations) along with the simple schedule fields listed here.
Set `type` to `"scheduled"` and `schedule_type` to `"simple"` for straightforward scheduling needs.
Configure recurring tasks by interval such as minutes, hours, days, weeks, or months without writing cron expressions.
| Field | Type | Required | Description |
| - | - | - | - |
| `one_time_date` | `string` | Conditional | Date and time when the automation runs once, in UTC. Required when `schedule_mode` is `"one-time"`. Format: `YYYY-MM-DDTHH:MM:SSZ`. For example, `"2026-02-15T10:00:00Z"`. |
| `repeat_unit` | `string` | Conditional | Time unit for recurring automations. Required when `schedule_mode` is `"recurring"`. Possible values: `"minutes"`, `"hours"`, `"days"`, `"weeks"`, or `"months"`. |
| `repeat_interval` | `number` | Conditional | Interval between executions. Required when `repeat_unit` is `"minutes"`, `"hours"`, or `"days"`. |
| `start_time` | `string` | Conditional | Time of day when the automation runs, in UTC. Required when `repeat_unit` is `"days"`, `"weeks"`, or `"months"`. Format: `HH:MM`. |
| `repeat_on_days` | `number[]` | Conditional | Days of the week when the automation runs. Required when `repeat_unit` is `"weeks"`. Array of weekday numbers, where `0` is Sunday and `6` is Saturday. |
| `repeat_on_day_of_month` | `number` | Conditional | Day of the month when the automation runs. Required when `repeat_unit` is `"months"`. Valid values: `1`-`31`. |
#### Simple schedule examples
The following examples show different ways to schedule automations with simple schedules:
```jsonc Every 30 minutes theme={null}
{
"type": "scheduled",
"name": "every_30_minutes",
"description": "Runs every 30 minutes.",
"is_active": true,
"schedule_mode": "recurring",
"schedule_type": "simple",
"repeat_unit": "minutes",
"repeat_interval": 30
}
```
```jsonc Weekdays at 9am theme={null}
{
"type": "scheduled",
"name": "weekday_morning_report",
"description": "Runs at 9 AM Monday through Friday.",
"is_active": true,
"schedule_mode": "recurring",
"schedule_type": "simple",
"repeat_unit": "weeks",
"repeat_interval": 1,
"start_time": "09:00",
"repeat_on_days": [1, 2, 3, 4, 5],
"ends_type": "after",
"ends_after_count": 52
}
```
```jsonc One-time execution theme={null}
{
"type": "scheduled",
"name": "one_time_cleanup",
"description": "Runs once at a specific date and time.",
"function_args": { "cleanup": true },
"is_active": true,
"schedule_mode": "one-time",
"schedule_type": "simple",
"one_time_date": "2026-02-15T10:00:00Z"
}
```
### Entity events
Use [common fields for all automations](#common-fields-for-all-automations) along with the entity event fields listed here.
Set `type` to `"entity"` to trigger functions automatically when database records are created, updated, or deleted.
Entity automations can listen to 1 or more event types on a specific entity.
Entity automations only fire for single-record create, update, and delete calls made through the [entities API](https://docs.base44.com/developers/references/sdk/docs/type-aliases/entities). Bulk operations, such as [`bulkUpdate()`](http://docs.base44.com/developers/references/sdk/docs/type-aliases/entities#bulkupdate), and by-query operations, such as [`updateMany()`](https://docs.base44.com/developers/references/sdk/docs/type-aliases/entities#updatemany), do not trigger entity automations, even when they affect records that match your entity's name. Restoring a soft-deleted record or permanently deleting one also does not trigger an automation. If your automation must react to every change, avoid bulk or by-query writes on that entity, or trigger the automation's logic manually instead.
| Field | Type | Required | Description |
| - | - | - | - |
| `entity_name` | `string` | Yes | Name of the entity to monitor. |
| `event_types` | `string[]` | Yes | Database events to listen for. Possible values: `"create"`, `"update"`, `"delete"`. At least 1 required. |
#### Entity event examples
The following examples show how to trigger functions based on entity events:
```jsonc All order events theme={null}
{
"name": "processOrders",
"entry": "entry.ts",
"automations": [
{
"type": "entity",
"name": "on_order_changes",
"description": "Triggered on order create, update, or delete.",
"function_args": { "notify_slack": true },
"is_active": true,
"entity_name": "orders",
"event_types": ["create", "update", "delete"]
}
]
}
```
```jsonc New records only theme={null}
{
"type": "entity",
"name": "on_customer_create",
"description": "Triggered when a new customer is created.",
"is_active": true,
"entity_name": "customers",
"event_types": ["create"]
}
```
### Connector automations
Use [common fields for all automations](#common-fields-for-all-automations) along with the connector-specific fields listed here.
Set `type` to `"connector"` to trigger functions when a connected integration sends a webhook event. Use these to react to external service activity in real time. For example, you can parse a new email, sync a calendar change, or respond to a file update in Google Drive.
You can optionally add [trigger conditions](#trigger-conditions) to filter events so your function only runs when the payload matches rules you define.
When a connector automation fires, your function receives a structured [webhook payload](#webhook-payload) containing the event type, integration details, and the raw data from the external service.
The connector must be configured in your project and authorized before deployment. See [Shared connectors](/developers/backend/resources/connectors/shared-connectors) for setup instructions.
| Field | Type | Required | Description |
| - | - | - | - |
| `integration_type` | `string` | Yes | The connector type identifier to listen on. See [supported integrations](#supported-integrations-and-events) for accepted values. |
| `events` | `string[]` | Yes | One or more webhook event names to subscribe to. See [supported integrations](#supported-integrations-and-events) for available events per connector. |
| `resource_id` | `string` | Conditional | Scopes the automation to a specific resource. The expected format depends on the connector. See [Resource ID formats](#resource-id-formats) below. Required for Google Drive file-scoped events. Optional for other connectors. |
| `trigger_conditions` | `object` | No | Rules that must match the incoming event before your function runs. If the event does not match, the run is skipped. See [Trigger conditions](#trigger-conditions) for the full reference. |
#### Supported integrations and events
| Connector | `integration_type` | `events` value | Description |
| - | - | - | - |
| Gmail | `gmail` | `mailbox` | Any mailbox change, including new messages, label updates, and read status changes. |
| Google Calendar | `googlecalendar` | `events` | Any calendar event change, including created, updated, and deleted. |
| Google Drive | `googledrive` | `changes` | Any change in the drive, including files added, modified, or deleted. |
| Google Drive | `googledrive` | `file` | Any change to a specific file (requires `resource_id`). |
| Google Drive | `googledrive` | `file.update` | File content or properties changed (requires `resource_id`). |
| Google Drive | `googledrive` | `file.trash` | File moved to trash (requires `resource_id`). |
| Google Drive | `googledrive` | `file.untrash` | File restored from trash (requires `resource_id`). |
| Google Drive | `googledrive` | `file.delete` | File permanently deleted (requires `resource_id`). |
| Microsoft OneDrive | `one_drive` | `updated` | Any file or folder change, including created, modified, and deleted. |
| Microsoft Outlook | `outlook` | `created` | A new email, calendar event, or contact is created. |
| Microsoft Outlook | `outlook` | `updated` | An email, calendar event, or contact is updated. |
| Microsoft Outlook | `outlook` | `deleted` | An email, calendar event, or contact is deleted. |
| Microsoft SharePoint | `share_point` | `updated` | When a list item or document is created, modified, or deleted. |
| Microsoft Teams | `microsoft_teams` | `created` | When a new chat message is posted. |
| Microsoft Teams | `microsoft_teams` | `updated` | When a chat message is updated. |
| Microsoft Teams | `microsoft_teams` | `deleted` | When a chat message is deleted. |
| Slack | `slack` | `message` | When a message is posted to a channel. |
| Slack | `slack` | `message.im` | When a direct message is posted. |
| Slack | `slack` | `message.groups` | When a message is posted to a private channel. |
| Slack | `slack` | `message.channels` | When a message is posted to a public channel. |
| Slack | `slack` | `message.mpim` | When a message is posted to a multi-party IM. |
| Slack | `slack` | `reaction_added` | When a reaction is added to a message. |
| Slack | `slack` | `reaction_removed` | When a reaction is removed from a message. |
| Slack | `slack` | `member_joined_channel` | When a user joins a channel. |
| Slack | `slack` | `member_left_channel` | When a user leaves a channel. |
| Slack | `slack` | `file_shared` | When a file is shared. |
| Slack Bot | `slackbot` | `app_mention` | When the bot is @-mentioned. |
| Slack Bot | `slackbot` | `message.im` | When a direct message is sent to the bot. |
| Slack Bot | `slackbot` | `message.mpim` | When a message is sent in a group DM with the bot. |
| Slack Bot | `slackbot` | `message.channels` | When a message is posted in a public channel the bot is in. |
| Slack Bot | `slackbot` | `message.groups` | When a message is posted in a private channel the bot is in. |
| Wix | `wix` | `wix.forms.v4.submission_created` | A form submission was created on a Wix site. |
| Wix | `wix` | `wix.contacts.v4.contact_created` | A contact was created in Wix CRM. |
| Wix | `wix` | `wix.contacts.v4.contact_updated` | A Wix CRM contact was updated. |
| Wix | `wix` | `wix.contacts.v4.contact_deleted` | A Wix CRM contact was deleted. |
| Wix | `wix` | `wix.ecom.v1.order_created` | A Wix eCommerce order was created. |
| Wix | `wix` | `wix.ecom.v1.order_updated` | A Wix eCommerce order was updated. |
| Wix | `wix` | `wix.ecom.v1.order_canceled` | A Wix eCommerce order was canceled. |
| Wix | `wix` | `wix.ecom.v1.checkout_created` | A Wix eCommerce checkout was created. |
| Wix | `wix` | `wix.data.v2.data_item_created` | A Wix CMS data item was created. |
| Wix | `wix` | `wix.data.v2.data_item_updated` | A Wix CMS data item was updated. |
| Wix | `wix` | `wix.data.v2.data_item_deleted` | A Wix CMS data item was deleted. |
Gmail's `mailbox` event fires for any mailbox change, not just new messages. To run your function only when new emails arrive, add a trigger condition: `{ "field": "has_new_messages", "operator": "equals", "value": true }`.
Slack (`slack`) and Slack Bot (`slackbot`) connector automations require trigger conditions. Deployment will fail if no conditions are set for these connector automations.
#### Resource ID formats
The expected value for `resource_id` varies by connector:
* **Google Drive:** The file ID. Required for file-scoped events (`file`, `file.update`, `file.trash`, `file.untrash`, `file.delete`).
* **Gmail:** A comma-separated list of label IDs to watch. Defaults to `"INBOX"` if omitted.
* **Microsoft Teams:** `{chatId}` to watch a specific chat.
* **SharePoint:** `{siteId}/{listId}` to watch a specific list.
#### Trigger conditions
Use `trigger_conditions` to filter webhook events so your function only runs when the payload matches rules you define. If no conditions are set, the function runs for every incoming event. See [Connector automation examples](#connector-automation-examples) for complete configurations.
How to combine the conditions. Possible values: `"and"` (all must match), `"or"` (any must match). Defaults to `"and"`.
One or more condition objects or nested condition groups. Maximum 20 leaf conditions and 5 levels of nesting.
Dot-separated path into the webhook payload. For example, `"status"` reads `payload.data.status`, and `"sender.email"` reads `payload.data.sender.email`.
How to compare the field value.
| Operator | Description |
| - | - |
| `equals` | Field value exactly matches `value`. |
| `not_equals` | Field value does not match `value`. |
| `contains` | Field value contains `value` as a substring. |
| `not_contains` | Field value does not contain `value` as a substring. |
| `starts_with` | Field value starts with `value`. |
| `ends_with` | Field value ends with `value`. |
| `gt` | Field value is greater than `value`. |
| `gte` | Field value is greater than or equal to `value`. |
| `lt` | Field value is less than `value`. |
| `lte` | Field value is less than or equal to `value`. |
| `in_list` | Field value is one of the items in `value` (an array). |
| `not_in_list` | Field value is not one of the items in `value` (an array). |
| `exists` | Field is present and not null. No `value` required. |
| `not_exists` | Field is null or missing. No `value` required. |
| `is_empty` | Field is null, an empty string, an empty array, or an empty object. No `value` required. |
| `is_not_empty` | Field is not null, empty string, empty array, or empty object. No `value` required. |
The value to compare against. Not required for `exists`, `not_exists`, `is_empty`, and `is_not_empty`.
#### Webhook payload
When a connector automation triggers your function, the request body contains a `payload` object with the following structure. See [Connector automation examples](#connector-automation-examples) for a function that reads the payload.
| Field | Type | Description |
| - | - | - |
| `payload.automation.id` | `string` | ID of the automation that triggered this run. |
| `payload.automation.name` | `string` | Name of the automation. |
| `payload.automation.type` | `string` | Always `"connector"`. |
| `payload.event.type` | `string` | The webhook event name. For example, `"mailbox"`, `"events"`, or `"changes"`. |
| `payload.event.integration_type` | `string` | The connector type. For example, `"gmail"` or `"googlecalendar"`. |
| `payload.event.provider_identifier` | `string` | The provider account identifier used for routing. |
| `payload.data` | `object` | The raw webhook payload from the external service. Set to `null` when `payload_too_large` is `true`. |
| `payload.payload_too_large` | `boolean` | Is `true` when the webhook payload exceeded \~200 KB and `data` is `null`. |
#### Connector automation examples
```jsonc Basic connector automation theme={null}
// Triggers the function whenever a new email arrives in Gmail.
{
"name": "processInboundEmails",
"entry": "entry.ts",
"automations": [
{
"type": "connector",
"name": "on_new_gmail",
"description": "Runs when a new email arrives in Gmail.",
"is_active": true,
"integration_type": "gmail",
"events": ["mailbox"]
}
]
}
```
```jsonc Single trigger condition theme={null}
// Triggers only when a Google Calendar event has status "cancelled".
{
"type": "connector",
"name": "on_event_cancelled",
"description": "Runs only when a Google Calendar event is cancelled.",
"is_active": true,
"integration_type": "googlecalendar",
"events": ["events"],
"trigger_conditions": {
"logic": "and",
"conditions": [
{ "field": "status", "operator": "equals", "value": "cancelled" }
]
}
}
```
```jsonc Nested trigger conditions theme={null}
// Triggers only for Gmail messages that are both in the inbox and unread.
{
"type": "connector",
"name": "on_unread_inbox_email",
"description": "Runs only for unread emails in the inbox.",
"is_active": true,
"integration_type": "gmail",
"events": ["mailbox"],
"trigger_conditions": {
"logic": "and",
"conditions": [
{ "field": "labelIds", "operator": "contains", "value": "INBOX" },
{ "field": "labelIds", "operator": "contains", "value": "UNREAD" }
]
}
}
```
```typescript Reading the payload theme={null}
// Reads the structured payload from the request body.
Deno.serve(async (req) => {
const body = await req.json();
const { payload } = body;
const eventType = payload.event.type;
const integration = payload.event.integration_type;
if (payload.payload_too_large) {
console.warn("Webhook payload was too large and was not included.");
return Response.json({ ok: false, reason: "payload_too_large" });
}
const data = payload.data;
// Your function logic
console.log(`Received ${eventType} event from ${integration}`, data);
return Response.json({ ok: true });
});
```
### Function arguments
Pass data to your function when it's triggered by including the `function_args` field in your automation configuration. This is useful when one function handles multiple automations with different behaviors, such as a sync function that runs incrementally every 15 minutes but does a full sync daily.
Access these arguments in your function code through the request body.
#### Function arguments example
This example shows a function that handles both incremental and full sync modes based on the automation config:
```typescript Function code theme={null}
Deno.serve(async (req) => {
const body = await req.json();
const args = body.args ?? {};
// Use the arguments from automation config
const mode = args.mode ?? "incremental";
// Your function logic
});
```
```jsonc Automation config theme={null}
{
"name": "syncData",
"entry": "entry.ts",
"automations": [
{
"type": "scheduled",
"name": "incremental_sync",
"description": "Runs every 15 minutes with incremental mode.",
"function_args": { "mode": "incremental" },
"is_active": true,
"schedule_mode": "recurring",
"schedule_type": "simple",
"repeat_unit": "minutes",
"repeat_interval": 15
},
{
"type": "scheduled",
"name": "full_sync",
"description": "Runs daily at midnight with full sync mode.",
"function_args": { "mode": "full" },
"is_active": true,
"schedule_mode": "recurring",
"schedule_type": "cron",
"cron_expression": "0 0 * * *"
}
]
}
```
## Deploy automations
Deploy backend functions with their automations using the CLI [`functions deploy`](/developers/references/cli/commands/functions-deploy) command or the unified [`deploy`](/developers/references/cli/commands/deploy) command. You can deploy specific functions by name with `functions deploy `.
The deployment is atomic per function. A function is only considered deployed if both the Deno deployment and all its automations succeed. If any automation fails to deploy, the entire function deployment is rolled back.
After deploying, the CLI shows per-function status: deployed, unchanged, or error.
## Manage automations in the dashboard
Any changes made in the dashboard will be overwritten the next time you run [`functions deploy`](/developers/references/cli/commands/functions-deploy). There is no two-way sync between the dashboard and your local files. Automations defined in your local `function.jsonc` files are the source of truth.
If you want to make changes to your automations, update your local `function.jsonc` files and redeploy. Use the dashboard for monitoring execution logs and manually triggering automations when needed.
View and manage your automations in the Base44 dashboard under the **Automations** tab. From the dashboard, you can:
* View execution logs and history
* Run automations manually for testing
* Monitor automation status
## See also
* [Backend Functions](/developers/backend/resources/backend-functions/overview): Learn about backend functions
* [`functions deploy`](/developers/references/cli/commands/functions-deploy): Deploy functions with automations
* [`deploy`](/developers/references/cli/commands/deploy): Deploy all resources at once
* [`logs`](/developers/references/cli/commands/logs): View function logs
# Backend Functions Overview
Source: https://docs.base44.com/developers/backend/resources/backend-functions/overview
Write custom backend logic with Deno-powered serverless functions
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform. For information about backend functions in the app editor, see
Using Integrations
.
Backend functions let you run custom backend code in a secure, isolated environment. Use functions to implement business logic that shouldn't run in the browser, connect to third-party APIs with protected credentials, process webhooks, or extend your app with custom endpoints.
Backend functions run on [Deno](https://docs.deno.com/runtime/), a modern TypeScript runtime. Call functions from your frontend [using the SDK](/developers/references/sdk/docs/interfaces/functions), which handles authentication automatically. Each function also gets its own HTTP endpoint for webhooks and external integrations.
Functions can also run automatically using [automations](/developers/backend/resources/backend-functions/automations). Schedule functions to run at specific times or trigger them in response to database events like creating, updating, or deleting records.
Note the following:
* Deploying functions one at a time is not capped at 50. A single request that replaces every function in your project still tops out at 50.
* Backend functions have a maximum execution time of 5 minutes, enforced the same way whether the function is called directly, triggered by an automation, or invoked as a workflow step. Requests that exceed this limit are terminated.
## Create functions
Create backend functions as TypeScript files in your project's functions directory. By default the functions directory is `base44/functions/`, but you can customize the path in your [project configuration](/developers/backend/overview/project-structure#config-jsonc).
Each function lives in its own subdirectory with an `entry.ts` or `entry.js` file:
The CLI uses the directory path relative to the functions root as the function name. For example, `functions/sendWelcomeEmail/entry.ts` creates a function named `sendWelcomeEmail`. You can also nest functions in subdirectories for organization. `functions/email/send/entry.ts` creates a function named `email/send`.
### Adding a configuration file
For advanced needs like custom function names or [automations](/developers/backend/resources/backend-functions/automations), add a `function.jsonc` file:
The configuration file defines the function's name and entry point:
```jsonc theme={null}
{
"name": "sendWelcomeEmail",
"entry": "entry.ts",
}
```
| Property | Description |
| - | - |
| `name` | Optional. Unique identifier for the function. Used when invoking via SDK or HTTP. Defaults to the directory path relative to the functions root. |
| `entry` | The file containing the function code. |
| `automations` | Optional. Array of automation configurations to run the function on a schedule or in response to database events. See [Automations](/developers/backend/resources/backend-functions/automations) for details. |
### entry.ts
The code file contains your function logic. A function handles an incoming request and returns a `Response` object. Export your handler as the default export:
```typescript theme={null}
import { createClientFromRequest } from "npm:@base44/sdk";
export default async function (req: Request): Promise {
try {
const base44 = createClientFromRequest(req);
const user = await base44.auth.me();
if (!user) {
return Response.json({ error: "Unauthorized" }, { status: 401 });
}
const { name } = await req.json();
return Response.json({
message: `Hello, ${name || user.full_name}!`,
});
} catch (error) {
return Response.json({ error: error.message }, { status: 500 });
}
}
```
### Multiple files per function
A function isn't limited to a single `entry.ts`. Split logic into multiple files within the function's directory and import them with relative paths. Every `.js`, `.ts`, `.json`, and `.jsonc` file in the function directory is deployed with the function.
```typescript theme={null}
// entry.ts
import { validate } from "./validate.ts";
```
Relative imports are resolved when you deploy. An import that points to a file
the function isn't deployed with, such as a file in another function's
directory, fails at deploy time.
### Share code between functions
To reuse code across functions, place it in a `shared` directory inside your `base44/` folder.
When you deploy a function, the CLI uploads the `shared` directory along with it, and the server bundles only the shared files that function imports. Each function is deployed with its own copy of the shared code it uses. This means:
* Any function can import from `shared` with a relative path.
* Different functions can end up running different versions of the same shared file. Changing a shared file and deploying a single function updates only that function's copy. The others keep the old version until you redeploy them. To apply a shared change everywhere, run `base44 functions deploy` with no arguments to redeploy every function at once.
```typescript theme={null}
// base44/functions/greet/entry.ts
import { ok } from "../../shared/response.ts";
export default async function (req: Request): Promise {
const { name } = await req.json();
return ok({ message: `Hello, ${name}!` });
}
```
Relative imports can reach `base44/shared/` but can't escape `base44/`. To use
code from outside `base44/`, move it into `base44/shared/`, or import it with
an `npm:` or `jsr:` specifier.
## Test locally
Run your functions locally with [`base44 dev`](/developers/references/cli/commands/dev) to test changes without deploying. See [Local development](/developers/backend/overview/local-dev/local-development-overview) for details.
## Deploy functions
Deploy functions with [`functions deploy`](/developers/references/cli/commands/functions-deploy) or [`deploy`](/developers/references/cli/commands/deploy) to push all project resources at once. You can deploy specific functions by name with `functions deploy `, or use `--force` to remove remote functions not found locally.
To download deployed functions to your local project, use [`functions pull`](/developers/references/cli/commands/functions-pull). To see what's currently deployed, use [`functions list`](/developers/references/cli/commands/functions-list).
## Call functions
Call backend functions from your frontend using the SDK, or via HTTP for webhooks and external integrations.
### Via the SDK
Use [`base44.functions.invoke()`](/developers/references/sdk/docs/interfaces/functions) to call functions from your frontend. The SDK handles authentication automatically, passing the current user's credentials to your function.
```javascript theme={null}
import { base44 } from "@/api/base44Client";
const response = await base44.functions.invoke("sendWelcomeEmail", {
name: "Alice",
});
```
### Via HTTP
Each deployed function gets an HTTP endpoint at:
```
https:///functions/
```
This is useful for:
* **Webhooks:** Receive callbacks from external services like Stripe or GitHub.
* **External integrations:** Allow other systems to interact with your app.
* **Testing:** Call functions directly with tools like cURL or Postman.
**Example usage**
```bash theme={null}
curl -X POST https://your-app.base44.app/functions/sendWelcomeEmail \
-H "Content-Type: application/json" \
-d '{"name": "Alice"}'
```
When calling functions via direct HTTP (like cURL or webhooks), there's no
authenticated user context. Use `asServiceRole` for all operations in these
cases.
## Use the SDK in functions
Inside your backend functions, you can access your app's data, authentication, and integrations through the Base44 SDK. Use [`createClientFromRequest()`](/developers/references/sdk/docs/functions/createClientFromRequest) to create a client from the incoming request.
The authentication context depends on how the function was called:
* **When called via the SDK from your frontend:** The user's authentication is passed through automatically. You can access the current user with `base44.auth.me()` and perform operations with their permissions. To read or write data without entity access rules applying, use [`asServiceRole`](/developers/references/sdk/docs/functions/createClientFromRequest#asservicerole).
* **When called via direct HTTP (cURL, webhooks, external services):** There's no authenticated user, so use `asServiceRole` for all operations.
## Runtime API
Base44 provides a built-in `base44:runtime` module with platform utilities for your functions. Import it directly, with no installation needed:
```typescript theme={null}
import { waitUntil, secrets } from "base44:runtime";
```
The module exports two utilities:
* `waitUntil()`: keep the function alive to finish background work after you return a response.
* `secrets`: read your app's secrets at runtime with `secrets.get()`.
### Run background work after responding
Use `waitUntil()` to keep your function alive for background work after you return a response. Pass it a promise, and the function keeps running until that promise settles. This lets you respond quickly and finish work like logging, notifications, or outbound webhooks afterward.
```typescript theme={null}
import { waitUntil } from "base44:runtime";
export default async function (req: Request): Promise {
waitUntil(fetch("https://hooks.example.com/ping", { method: "POST" }));
return Response.json({ status: "accepted" });
}
```
`waitUntil()` returns the same promise you pass in, so you can compose or await it later in the same handler.
Background work is best-effort. It isn't guaranteed to complete or retry, so
don't rely on it for critical operations that must not be lost.
### Read secrets
Use `secrets.get()` to read your app's environment variables at runtime. It returns the value as a string, or `undefined` when the secret isn't set:
```typescript theme={null}
import { secrets } from "base44:runtime";
export default async function (req: Request): Promise {
const apiKey = secrets.get("API_KEY");
const res = await fetch("https://api.example.com/data", {
headers: { Authorization: `Bearer ${apiKey}` },
});
return Response.json(await res.json());
}
```
Call `secrets.get()` inside your handler, not at the top level of your module. Secrets resolve per request, so a read at module load, before any request runs, returns `undefined`.
Configure secrets from the CLI with [`secrets set`](/developers/references/cli/commands/secrets-set).
## Connect to third-party APIs
Backend functions are one of several ways to [connect to third-party APIs](/developers/references/sdk/getting-started/third-party-apis). They're ideal when you need full control over requests or want to store API keys securely as environment variables. Use [`secrets set`](/developers/references/cli/commands/secrets-set) to configure environment variables from the CLI.
## View logs
During [local development](/developers/backend/overview/local-dev/local-development-overview), function output is printed directly to your terminal without needing the `logs` command.
For deployed functions, view logs with the [`logs`](/developers/references/cli/commands/logs) command. The logs include console output, errors, and timing information. You can filter by function name or time range. If you're using an AI coding agent, the [base44-troubleshooter](/developers/backend/overview/skills#base44-troubleshooter) skill can fetch and analyze these logs automatically.
## TypeScript types
Generate TypeScript types from your function configurations to get type safety and autocomplete for function names in your SDK code. Learn more about [dynamic types](/developers/references/sdk/getting-started/dynamic-types).
## See also
* [Automations](/developers/backend/resources/backend-functions/automations): Schedule functions or trigger them on database events
* [`functions` module](/developers/references/sdk/docs/interfaces/functions): SDK reference for invoking functions
* [`createClientFromRequest`](/developers/references/sdk/docs/functions/createClientFromRequest): Creating a client in backend functions
* [`functions deploy`](/developers/references/cli/commands/functions-deploy): Deploy local functions to Base44
* [`functions pull`](/developers/references/cli/commands/functions-pull): Download deployed functions to your local project
* [`functions list`](/developers/references/cli/commands/functions-list): List all deployed functions
* [`functions delete`](/developers/references/cli/commands/functions-delete): Delete deployed functions
* [`logs`](/developers/references/cli/commands/logs): View function logs
* [`exec`](/developers/references/cli/commands/exec): Test functions in isolation from standalone scripts
# Connectors overview
Source: https://docs.base44.com/developers/backend/resources/connectors
Connect your app to third-party services using OAuth or managed provisioning
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform. For information about connectors in the app editor, see
Using Connectors.
Connectors give your app OAuth access tokens for third-party services, which you use to call those services' APIs directly. Base44 handles the OAuth flow and credential storage.
Base44 supports two connector types:
* **[Shared connectors](/developers/backend/resources/connectors/shared-connectors):** One account is connected for the whole app. All app users share the same token. Best for service accounts, like posting to a company Slack channel or reading from a shared Google Calendar.
* **[App user connectors](/developers/backend/resources/connectors/app-user-connectors):** Each signed-in app user connects their own account. Each user gets their own OAuth token. Best for actions that need to happen as the individual user, like sending email from their Gmail account or posting to their personal LinkedIn.
## Supported services
All services listed below support both shared and app user connections. See [Shared connectors](/developers/backend/resources/connectors/shared-connectors) or [App user connectors](/developers/backend/resources/connectors/app-user-connectors) for setup instructions.
| Service | Type identifier | Auth model |
| - | - | - |
| Airtable | `airtable` | OAuth |
| BambooHR | `bamboohr` | OAuth |
| Box | `box` | OAuth |
| Calendly | `calendly` | OAuth |
| ClickUp | `clickup` | OAuth |
| Contentful | `contentful` | OAuth |
| Databricks | `databricks` | OAuth |
| Discord | `discord` | OAuth |
| Dropbox | `dropbox` | OAuth |
| GitHub | `github` | OAuth |
| GitLab | `gitlab` | OAuth |
| Gmail | `gmail` | OAuth |
| Google Ads | `googleads` | OAuth |
| Google Analytics | `google_analytics` | OAuth |
| Google BigQuery | `googlebigquery` | OAuth |
| Google Calendar | `googlecalendar` | OAuth |
| Google Classroom | `google_classroom` | OAuth |
| Google Docs | `googledocs` | OAuth |
| Google Drive | `googledrive` | OAuth |
| Google Meet | `googlemeet` | OAuth |
| Google Search Console | `google_search_console` | OAuth |
| Google Sheets | `googlesheets` | OAuth |
| Google Slides | `googleslides` | OAuth |
| Google Tasks | `googletasks` | OAuth |
| HubSpot | `hubspot` | OAuth |
| Hugging Face | `hugging_face` | OAuth |
| Instagram Business | `instagram` | OAuth |
| Linear | `linear` | OAuth |
| LinkedIn | `linkedin` | OAuth |
| Microsoft Teams | `microsoft_teams` | OAuth |
| Microsoft OneDrive | `one_drive` | OAuth |
| Notion | `notion` | OAuth |
| Outlook | `outlook` | OAuth |
| QuickBooks | `quickbooks` | OAuth |
| Salesforce | `salesforce` | OAuth |
| SharePoint | `share_point` | OAuth |
| Slack User | `slack` | OAuth |
| Slack Bot | `slackbot` | OAuth |
| Snowflake | `snowflake` | OAuth |
| Splitwise | `splitwise` | OAuth |
| Square | `square` | OAuth |
| Stripe | `stripe` | Managed |
| Supabase | `supabase` | OAuth |
| TikTok | `tiktok` | OAuth |
| Typeform | `typeform` | OAuth |
| Wix | `wix` | OAuth |
| Wrike | `wrike` | OAuth |
Run [`connectors list-available`](/developers/references/cli/commands/connectors-list-available) to see the latest available integrations, including descriptions and any required connection config fields.
**Managed** connectors use a provisioning flow instead of OAuth. For example, Stripe is provisioned by the CLI rather than authorized through a browser. For more information on the difference, see [use in backend functions](/developers/backend/resources/connectors/shared-connectors#use-in-backend-functions).
See [connector permissions and scopes](/Integrations/connectors-catalog) for the OAuth scopes each service may request.
## See also
* [Shared connectors](/developers/backend/resources/connectors/shared-connectors)
* [App user connectors](/developers/backend/resources/connectors/app-user-connectors)
* [SDK connectors reference](/developers/references/sdk/docs/interfaces/connectors)
* [connectors initiate](/developers/references/cli/commands/connectors-initiate)
* [connectors list-available](/developers/references/cli/commands/connectors-list-available)
* [connectors pull](/developers/references/cli/commands/connectors-pull)
* [connectors push](/developers/references/cli/commands/connectors-push)
* [deploy](/developers/references/cli/commands/deploy)
# App user connectors
Source: https://docs.base44.com/developers/backend/resources/connectors/app-user-connectors
Let each app user connect their own third-party account
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform. For information about connectors in the app editor, see
Using Connectors.
App user connectors let each signed-in app user connect their own third-party account. Each app user gets their own OAuth token. Use this when actions need to happen as the individual app user, like sending email from their Gmail account, posting to their personal LinkedIn, or reading their own Google Calendar events.
Unlike shared connectors, where one account is shared across all app users, app user connectors store a separate OAuth token per user. The OAuth flow runs under your registered OAuth application, so app users see your app's name on the provider's consent screen.
App user connectors require a Builder plan or higher.
## Set up
Before app users can connect their accounts, register your OAuth app credentials in your workspace. This requires workspace admin access. You also need a client ID and client secret from the external service.
Register the connector from your Workspace Settings. See [Setting up connectors for app users](/Integrations/Connectors#using-your-own-oauth-client) for step-by-step instructions.
After you register the connector, the workspace assigns it an ID. Use that ID to connect and disconnect app users in your frontend code and retrieve their tokens in your backend functions.
## Connect and disconnect in your frontend
Use `base44.connectors` in your frontend code to start and end the OAuth flow for each app user.
To connect an app user, call [`connectAppUser`](/developers/references/sdk/docs/interfaces/connectors#connectappuser) with the connector ID. It returns a redirect URL. Navigate the app user to that URL to start the OAuth flow.
```typescript theme={null}
const redirectUrl = await base44.connectors.connectAppUser("YOUR_CONNECTOR_ID");
window.location.href = redirectUrl;
```
After the app user completes the flow, their token is stored and your [backend functions](/developers/backend/resources/backend-functions/overview) can retrieve it.
***
To disconnect an app user, call [`disconnectAppUser`](/developers/references/sdk/docs/interfaces/connectors#disconnectappuser) with the connector ID. It removes the stored token for the currently signed-in app user.
```typescript theme={null}
await base44.connectors.disconnectAppUser("YOUR_CONNECTOR_ID");
```
## Retrieve the token in a backend function
Use [`createClientFromRequest()`](/developers/references/sdk/docs/functions/createClientFromRequest) to create the SDK client in your backend function. It reads the app user's identity from the incoming request automatically, so the SDK knows which user's token to return.
Then call [`getCurrentAppUserConnection()`](/developers/references/sdk/docs/interfaces/connectors#getcurrentappuserconnection) with the connector ID to retrieve the token for the app user making the current request.
```typescript theme={null}
import { createClientFromRequest } from "@base44/sdk";
export default async function handler(req: Request) {
const base44 = createClientFromRequest(req);
const { accessToken } =
await base44.asServiceRole.connectors.getCurrentAppUserConnection(
"YOUR_CONNECTOR_ID",
);
const response = await fetch(
"https://www.googleapis.com/calendar/v3/calendars/primary/events",
{
headers: { Authorization: `Bearer ${accessToken}` },
},
);
const events = await response.json();
return Response.json(events);
}
```
## See also
* [Connectors overview](/developers/backend/resources/connectors)
* [Shared connectors](/developers/backend/resources/connectors/shared-connectors)
* [Setting up connectors for app users](/Integrations/Connectors#using-your-own-oauth-client)
* [SDK connectors reference](/developers/references/sdk/docs/interfaces/connectors#getcurrentappuserconnection)
* [createClientFromRequest](/developers/references/sdk/docs/functions/createClientFromRequest)
* [Backend Functions](/developers/backend/resources/backend-functions/overview)
# Shared connectors
Source: https://docs.base44.com/developers/backend/resources/connectors/shared-connectors
Connect a single service account that all app users share
You're viewing developer documentation
This documentation is for developers working with the Base44 developer
platform. For information about connectors in the app editor, see
Using Connectors.
A shared connector connects one account for the whole app. All app users share the same OAuth token. Use this for service accounts, like posting to a company Slack channel, reading from a shared Google Calendar, or querying a shared Notion workspace.
**To set up a shared connector:**
1. [**Configure**](#configure) a JSONC file for each service you need
2. [**Deploy and authorize**](#deploy-and-authorize) via the CLI
3. [**Use in backend functions**](#use-in-backend-functions) by calling [`getConnection()`](/developers/references/sdk/docs/interfaces/connectors#getconnection) for OAuth connectors, or using the [Stripe REST API](#stripe) directly for payments
## Configure
Each connector is a JSONC file in your project's connectors directory. The file defines the integration type and the scopes your app needs. By default the directory is `base44/connectors/`, but you can customize the path in your [project configuration](/developers/backend/overview/project-structure#config-jsonc).
### Example
This example configures a Google Calendar connector with read and event management scopes:
```jsonc theme={null}
{
"type": "googlecalendar",
"scopes": [
"https://www.googleapis.com/auth/calendar.readonly",
"https://www.googleapis.com/auth/calendar.events",
],
}
```
### Field reference
The integration type identifier. See the [supported services](/developers/backend/resources/connectors#supported-services) table for the full list of accepted values.
Each connector type can only be defined once in your project.
Array of OAuth scopes required for your integration. The specific scopes
depend on the external service and what operations your app needs to perform.
See the [connector permissions and
scopes](/Integrations/connectors-catalog) documentation for
available scopes for each service.
## Deploy and authorize
Deploy connectors with [`connectors push`](/developers/references/cli/commands/connectors-push) or [`deploy`](/developers/references/cli/commands/deploy). To download existing connectors from Base44, use [`connectors pull`](/developers/references/cli/commands/connectors-pull).
When you push, the CLI handles each connector based on its type:
* **OAuth connectors:** The CLI prompts you to authorize each connector one by one. It suggests opening your browser automatically, and if you accept, it iterates through each integration's authorization page sequentially. After authorization completes, your OAuth tokens are stored securely and you can retrieve them using the SDK.
* **Stripe:** The CLI provisions a Stripe sandbox for your app and returns a claim URL to complete onboarding. No OAuth flow is needed.
### Set up a connector without a local project
`connectors push` reads connector files from your project, so it needs a local checkout. To set up a connector without one, for example on an app you built in the app editor or from an AI agent, use [`connectors initiate`](/developers/references/cli/commands/connectors-initiate). It sets up one connector directly on a [target app](/developers/references/cli/commands/introduction#select-a-target-app) and starts its OAuth flow, without reading or writing any files. To bring the connector's configuration into a local project afterwards, run [`connectors pull`](/developers/references/cli/commands/connectors-pull).
`connectors initiate` sets up a single connector and never removes any. `connectors push` is a full sync, so it also removes connectors that are missing from your local files.
## Use in backend functions
Once deployed and authorized, use the connector in your [backend functions](/developers/backend/resources/backend-functions/overview). The approach depends on the connector's auth model:
Call [`connectors.getConnection()`](/developers/references/sdk/docs/interfaces/connectors#getconnection) with the connector type to retrieve an `accessToken` for making authenticated API calls. Some connectors also return a `connectionConfig` with additional parameters (e.g. a subdomain or account ID).
This example retrieves a Google Calendar connection and fetches upcoming events:
```typescript theme={null}
const { accessToken } =
await base44.asServiceRole.connectors.getConnection("googlecalendar");
const timeMin = new Date().toISOString();
const url = `https://www.googleapis.com/calendar/v3/calendars/primary/events?maxResults=10&orderBy=startTime&singleEvents=true&timeMin=${timeMin}`;
const response = await fetch(url, {
headers: { Authorization: `Bearer ${accessToken}` },
});
const events = await response.json();
```
Stripe does not use `getConnection()`. Instead, the platform stores your Stripe API keys as app secrets when you provision the connector. In your backend functions, read `STRIPE_SECRET_KEY` with `secrets.get()` and call the [Stripe REST API](https://docs.stripe.com/api) directly.
This example creates a Stripe Checkout session and returns the payment URL:
```typescript theme={null}
import { secrets } from "base44:runtime";
Deno.serve(async (req) => {
const STRIPE_SECRET_KEY = secrets.get("STRIPE_SECRET_KEY");
const { priceId, successUrl, cancelUrl } = await req.json();
const response = await fetch("https://api.stripe.com/v1/checkout/sessions", {
method: "POST",
headers: {
Authorization: `Bearer ${STRIPE_SECRET_KEY}`,
"Content-Type": "application/x-www-form-urlencoded",
},
body: new URLSearchParams({
"payment_method_types[]": "card",
"line_items[0][price]": priceId,
"line_items[0][quantity]": "1",
mode: "payment",
success_url: successUrl || `${req.headers.get("origin")}?success=true`,
cancel_url: cancelUrl || `${req.headers.get("origin")}?canceled=true`,
}),
});
const session = await response.json();
return Response.json({ url: session.url });
});
```
## Connector automations
Connector automations let your backend functions respond to events from connected services in real time. For example, you can run a function when a new email arrives in Gmail or a file changes in Google Drive.
Configure connector automations in your `function.jsonc` file alongside your other automations. See [Connector automations](/developers/backend/resources/backend-functions/automations#connector-automations) for the full field reference, supported events, and payload documentation.
## See also
* [Connectors overview](/developers/backend/resources/connectors)
* [App user connectors](/developers/backend/resources/connectors/app-user-connectors)
* [SDK connectors reference](/developers/references/sdk/docs/interfaces/connectors#getconnection)
* [connectors push](/developers/references/cli/commands/connectors-push)
* [connectors pull](/developers/references/cli/commands/connectors-pull)
* [connectors initiate](/developers/references/cli/commands/connectors-initiate)
* [deploy](/developers/references/cli/commands/deploy)
* [Backend Functions](/developers/backend/resources/backend-functions/overview)
* [Automations](/developers/backend/resources/backend-functions/automations)
# Entity Schemas
Source: https://docs.base44.com/developers/backend/resources/entities/entity-schemas
Define custom data structures using a JSON Schema with validation rules and field types
You're viewing developer documentation
This documentation is for developers working with the Base44 developer platform. For information about managing your app data using the app editor, see Managing app data.
Entities are defined using a JSON Schema that describes the data structure and validation rules.
## Basic schema structure
Entity schemas are defined in JSON files in your project's entities directory. By default, this is `base44/entities/`, but you can customize the path in your [project configuration](/developers/backend/overview/project-structure#config-jsonc). The filename determines the entity name. For example, `Task.json` creates a `Task` entity.
Here's an entity schema template:
```json theme={null}
{
"name": "my_entity",
"type": "object",
"title": "My Entity",
"description": "Description of what this entity represents",
"properties": {
"": {
"type": "",
"