# Setting up an AI agent for your app Source: https://docs.base44.com/Building-your-app/AI-agents-for-apps Turn chats into smart assistants that take action, connect to tools, and help you get more done in your Base44 app. AI agents 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. Aiagentexample 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 Before you can start working with AI agents, you need to enable them in your app dashboard. Then you can start creating them using the AI chat. You can enable agents for all new apps by default in your account settings in your workspace. 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. Enabling AI agents in your Base44 app **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 will be built based on your input. * You can enable agents for all new apps by default in your account settings. *** ## 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. Configuring the description, instructions and AI model for your agent **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 a model from Google Gemini, OpenAI GPT, or Anthropic Claude 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 typically costs about **3 integration credits per message**. If you need more control, you can pick a different model. Below is an estimation of credit usage with different models: | Model | Best for | Approx. credits / message | | -------------- | -------------------------------------------- | ------------------------- | | Automatic | General-purpose, fast responses | \~3 | | Gemini 3 Flash | Stronger reasoning at moderate cost | \~5 | | GPT-5.5 | Complex analysis and accuracy-critical tasks | \~40 | Credits are approximate and vary based on response length. Lighter models use fewer credits, while more powerful models use more. 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**. Allow anonymous access setting in the agent Guidelines tab ### 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. Setting the tools and capabilities of your agent **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, trigger automations, 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.](https://docs.base44.com/Integrations/user-connectors) **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 will be asked to grant. 4. Click **Approve**. Connectors **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. Adding skills to your app agent in Base44 There are two 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.](https://docs.base44.com/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. Enabling memory for your agent **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. Connecting your agent to WhatsApp 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 automations, 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. Using your agent in WhatsApp * 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-and-whatsapp-groups), which have their own pool. If you try to connect more than 3, you'll be 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 conversation supports both images and voice messages. * 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**. Whatsapp Agent ### 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. * Users can send voice notes and images for natural interaction. * Your Telegram bot is created and connected instantly with no manual configuration needed. * To start a conversation, users open your bot in Telegram and send `/start`. * You can add a Telegram button to your app so users 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**. Connecting your agent to Telegram ### 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. LINE *** ## 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. Agent users tab 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**. Tools and capabilities to configure for your Base44 AI agent. After updating, you should be able to send messages without errors. Yes. Agents are available on all plans, including the Free plan. You can turn agents on by default for every new app you create. When the **Enable agents for new apps by default** toggle is on in your **Account settings**, each new app automatically has the **AI Agents** toggle enabled in its dashboard so you can start adding and configuring agents right away. This setting does not change existing apps. To enable or disable agents for an existing app, open that app's **Dashboard**, click **Agents**, and adjust the **AI Agents** toggle there. **To turn on agents by default for new apps:** 1. Click your profile icon at the top right of your workspace. 2. Click **Settings**. 3. Click **Account settings**. 4. Turn on the **Enable agents for new apps by default** toggle in the **Default Agents** section. Defaultagentsaccount 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. * The default **Automatic** option (based on Gemini 2.5 Flash) gives you fast, general-purpose responses at around **3 credits per message**. * Models such as **Gemini 3 Flash** provide stronger reasoning at a moderate increase in credits. * Higher-end models such as **GPT-5.5** are designed for complex analysis and accuracy-critical decisions and generally use more credits per message. 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. Agent Credits 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. You can set up an in-app agent automation that runs the moment a new conversation starts with your agent. Use this 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. When you click **New Automation**, Base44 shows suggestions based on your app's context. If your app has an agent, in-app agent triggers appear in the **Suggested for you** list automatically. You can also click **Create from scratch** and select **In-app agent** as the trigger type. [Learn more about creating automations.](/Building-your-app/Creating-automations) # 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. Use chat modes and AI controls to fine-tune your app and get the results you want. ## 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. * 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. AI chat providing suggestions for next steps as you build 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: * **Default:** Acts instantly on your prompts. * **Discuss:** Lets you plan and refine ideas safely before applying changes. * **Edit:** Lets you click elements in your preview to adjust visuals directly. You can switch between modes anytime to brainstorm ideas, make design tweaks, or apply instant changes, all in one chat. ### Default 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. > **For example:** Ask the AI to create a new page to your app. Default For more examples and prompt frameworks, check out the [Prompt Guide](/Getting-Started/Prompt-guide). ### Discuss mode Click **Discuss** in the AI chat to have a conversation with the AI to brainstorm, clarify, or explore ideas before making any changes to your app. It is a safe space to ask questions, get suggestions, or talk through options without affecting your project. In Discuss mode, you can freely chat and refine your goals with the AI, but no app changes take place. Each message in Discuss mode uses 0.3 credits. Discuss mode helps you save credits by avoiding unnecessary trial and error before finalizing changes. Once you are ready for the AI to implement changes in your app, turn off **Discuss** and ask the AI to make the changes. > **For example:** Discuss the best way for users to invite their friends to their app. Discuss Discuss mode uses its own AI model regardless of the model you have selected in your app. This keeps Discuss mode costs low and consistent at 0.3 credits per message. ### Edit mode Use **Edit** mode to make changes to the design of your app. You can do it manually or ask the AI to make the changes for you. 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 the AI chat in your app editor. 2. Click **Edit**. 3. Make changes to the design: * **Manually:** Select an element in your app preview to make the changes directly. For example, you can change background colors, text colors, or spacing. You can also quickly access the element's code to make changes, adjust tailwind classes directly to fine-tune spacing, typography, layout, and responsiveness, or remove the selected element or section with the **Delete** icon in the Edit toolbar. This method does not use credits. Using Edit mode to make design changes in Base44 * **Using the AI chat:** Select an element in the app preview and then click **Edit Element**. Write what you want to change about the element and the AI will take care of it. This method uses message credits. The number of credits depends on the size and complexity of the change. Editing a specific element using the AI chat If you have multiple elements that repeat, you can apply bulk changes to them. Click the element and all repeating elements are highlighted, so you can apply changes to all of them at once. Bulk design changes using Visual Edit in Base44 Bulk design changes using Visual Edit in Base44 *** ## 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. Messagequeue **Notes:** * The queue appears above the chat input and shows all pending prompts in the order they will 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 will 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. *** ## Customizing the AI chat You can tailor how the AI behaves and set custom controls. ### Choosing your AI 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. **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 **Automatic**. 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. You can choose your model from your first prompt, or change it at any time while building. 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 selector. 2. Select the model you want, or keep **Automatic**. Choosing an AI model from your first prompt Switch models at any time while building your app from the app editor. 1. Go to your app editor. 2. Click the **Settings** icon at the bottom of the chat. 3. Click **AI Model**. 4. Select the model you want to use, or keep **Automatic** to let Base44 pick the best model for each request. Choosing an AI model in the app editor * **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:** A well-balanced choice for day-to-day building, writing, refactoring, and troubleshooting, with a strong mix of quality and speed. * **Opus 4.8:** 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. * **Fable 5:** Great for complex, multi-step builds and detailed debugging, when you want thorough, high-quality results. * **GPT-5.5:** A strong choice for complex reasoning and multi-step planning, with improved accuracy and consistency across large or evolving projects. * **GPT-5.6 Terra:** A cost-efficient GPT-5.6 option for complex reasoning and multi-step planning, at a lower credit cost. * **GPT-5.6 Sol:** The most capable GPT-5.6 option, for the hardest reasoning and large, evolving projects. Uses more credits. Not sure which model to choose? Keep **Automatic** and Base44 selects the best model for each request. ### Setting AI controls AI controls let you define how the AI interacts with your app. They help you set consistent rules and protect important areas from accidental edits. Click the **Settings** icon at the bottom of the chat, then select **AI Controls** to open the panel: * **Custom Instructions:** Add default guidance for every AI interaction, such as tone, design standards, or preferred behavior. * **Freeze Files:** Lock specific files or entities so the AI does not modify them. Adjusting AI Controls in Base44 settings. Clear, well-defined AI controls keep your app consistent and prevent accidental overwrites. *** ## 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. Revert and edit options under a message in the Base44 AI chat. ### 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 the code, or jump back to the chat message that created that version. The Version History options available in Base44. 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. * **View code:** Open the code for this version. * **Go to message in chat:** Jump to the chat message that created this version. *** ## FAQs Click a question below to learn more about AI chat modes and controls. Click the **Hide chat panel** icon above the preview window to display your app exactly as visitors see it, without any editor panels or chat tools. Hiding the chat panel to preview your app in full screen. 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 or behaves unexpectedly, 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 more help, 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 builder 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 within the builder 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. Speaking to the AI chat in Base44 If AI chat is unresponsive, gets stuck processing, or does not undo changes as expected, there are ways to recover. Check out the full troubleshooting guide for step-by-step solutions, including how to: * Use Version History or **Revert** under a previous message to safely undo actions. * Unstick a frozen prompt or stop button. * Get help if the chat panel is completely unresponsive. For detailed instructions and workarounds, see the [Troubleshooting Issues](/Community-and-support/Troubleshooting) article. 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. Note that Discuss mode uses its own fixed model regardless of your selection. [Learn more about Discuss mode.](https://docs.base44.com/Building-your-app/AI-chat-modes#discuss-mode) # 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. The canvas showing multiple app page frames on an infinite board 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. Accessing Canvas 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. Multiple collaborators working on the canvas with named cursors 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-to-your-app) *** ## Managing the page frames Every page in your app appears as a frame on the canvas, showing a live preview of that page. Resizing 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. Canvas Responsive 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. Refresh Frame Canvas 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. The canvas toolbar showing Select, Hand, Draw, Sticky note, and Image 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. A sticky note on the canvas with status, color, and formatting options 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 four 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. Freehand drawings on the canvas with stroke color and weight controls 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. An image on the canvas showing the Replace image, Crop, and Border toolbar 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 two elements on the canvas with an arrow to show relationships, for example linking a sticky note to the page it refers to. An arrow drawn from a sticky note to a page frame on the canvas **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. Right-click menu showing the Lock option on a sticky note **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% | # Adding components to your app Source: https://docs.base44.com/Building-your-app/Components-library Browse the components library in your app editor to add polished, ready-made UI components that Base44 rebuilds to match your app's theme, fonts, and content. ## What is the components library? The components 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. The components library window showing the For You tab with a grid of ready-made components *** ## Opening the components library You open the components library from the plus menu in your AI chat, next to where you type your prompts. **Before you begin:** Switch your AI chat to Build mode before you add a component. For more on chat modes, see [AI chat modes](/Building-your-app/AI-chat-modes). Selecting Build mode from the mode menu in the AI chat **To open the components library:** 1. Go to your app editor. 2. In the AI chat, click the plus icon next to the prompt box. 3. Click **Explore components library**. The AI chat plus menu with Explore components library highlighted *** ## Browsing and previewing components The components library opens in a full window with a search bar and category tabs across the top. **For You** shows recommended components, and the remaining tabs group components by purpose, such as **Commerce**, **Content**, **Dashboards & Analytics**, and **Navigation**. You have two ways to find a component: * **Search:** Type a keyword in the search bar to filter across all components. * **Categories:** Click a category tab to browse components for that purpose. The components library window with a search bar, category tabs, and a grid of components Click a component to open its preview, then interact with it to try its different states before you add it. *** ## Adding a component to your app You add one component at a time. Clicking **Add to chat** places the component in your AI chat with a message that you can edit before you send it. 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. A component preview in the components library with the Add to chat button highlighted **To add a component to your app:** 1. In the components library, click the component you want. 2. Click **Add to chat**. 3. Add any extra instructions in the prompt box, then send your message. A component added to an app and rebuilt in the app editor If a component relies on a code library your app does not have yet, Base44 asks you to approve installing it as part of building the component. For more on how this works, see [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 components 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 automations for your app Source: https://docs.base44.com/Building-your-app/Creating-automations Run backend work automatically, on a schedule or when data changes. Use automations when you want to take work off your plate, such as sending summary emails, generating reports, syncing or cleaning up data, or running recurring maintenance tasks. When [building an app](https://base44.com/ai-app-builder) in Base44, automations help you run backend functions automatically, on a schedule, when data changes, or when a connected integration sends an event through a connector. You create and manage automations using the AI chat in your app's dashboard. **Workflows is replacing automations.** You can now switch all of your automations to workflows in one step, keeping their triggers, schedules, and run history. See [Switching automations to workflows](/Building-your-app/Creating-workflows#switching-automations-to-workflows). Automations You can use automations for any backend work you want to happen automatically. Common examples include: * Sending emails or messages, such as daily welcome emails or weekly newsletters. * Generating reports or summaries, for example a daily revenue report. * Checking conditions and alerting only when something changes, such as low inventory. * Reacting to changes in your data, such as sending admins a message when a new product is added. * Scheduling posts on social media. * Running recurring maintenance or housekeeping tasks, like archiving old records or refreshing caches. * Backing up your app's data (e.g. to Google Drive) every week. * Sending notifications to external tools when something happens, for example posting salon booking updates into a Slack channel when calendar events change. *** ## How automations work When you create an automation, you choose how it starts. It can run on a schedule you define, in response to a data event such as a record being created, updated, or deleted, when an app user starts a conversation with an in-app agent, or when a connected integration sends an event using a connector. Each automation runs a backend function in your app and records the run so you can see what happened. Every automation has logs so you can always see when it ran, whether it succeeded, and any errors that occurred. This keeps everything transparent and easy to debug. **Important:** * You must have a **Builder plan** or higher to use automations. * Each time an automation runs, it uses **1 integration credit**. * Each automation run can last for a maximum of 3 minutes. If it takes longer, the run fails. For example, if your automation sends 1,000 emails but can only send 600 within 3 minutes, only the first 600 are sent and the rest are not processed. * The minimum interval between automation runs is 5 minutes. *** ## Types of automations There are 4 types of automations you can create. When describing what you want to the AI chat, it helps to know which type fits your use case. ### Scheduled automations Scheduled automations run at a time or interval you define. Use these for recurring tasks like daily digests, weekly reports, or regular maintenance jobs. 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.` ### Data event automations Data event automations 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.` ### In-app agent automations In-app agent automations run when an app user starts a new conversation with an in-app agent. Use these to stay on top of who is reaching out, for example to get notified when a customer starts a chat, automatically 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 automations Connector automations run when a connected integration sends an event, such as a new email arriving in Gmail or a calendar event being updated in Google Calendar. Use these to keep your app in sync with external tools. 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.` Connector automations are currently available for Gmail, Google Calendar, Google Drive, Microsoft Outlook and Microsoft OneDrive. *** ## Creating an automation When you click **New Automation**, Base44 shows suggestions based on your app's context. You can pick one of those or click **Create from scratch** to choose your automation type and describe what you want in the AI chat. ### Using a suggestion Each suggestion includes a short description of what it does. Clicking one sends a pre-filled prompt to the AI chat, where you can review and adjust it before the AI sets it up. **To create an automation from a suggestion:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click **New Automation**. 4. Browse the suggestions under **Suggested for you**. 5. Click a suggestion to send it to the AI chat as a pre-filled prompt. 6. Review the prompt, make any changes, and send it. 7. The AI sets up the automation and adds it to your **Automations** list. Automationsuggestions *** ### Creating from scratch If none of the suggestions fit what you need, create your automation from scratch. You choose the trigger type first, then describe what you want in the AI chat. **To create an automation from scratch:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click **New Automation**. 4. Click **Create from scratch**. 5. Select the trigger type: **Scheduled**, **Data event**, **In-app agent**, or **Connector**. 6. In the AI chat, describe the automation you want. For example: `Set up recurring email reminders to my email name@email.com for my tasks on my to-do list every Sunday at 17:00.` 7. The AI creates the automation and adds it to your **Automations** list. If you need a new backend function for your automation, just mention it in your prompt and the AI will write it for you. *** ## Managing automations After you start using automations, you can control when they run, change their settings, trigger them on demand, or clean up automations you no longer need. You can pause automations without deleting them, and you can duplicate an existing automation when you want a similar setup with small changes. When you turn an automation off, Base44 stops scheduling future runs, but existing logs stay available. You can turn the automation back on at any time. ### Turning an automation on or off Pause an automation at any time if you want to stop it running, and turn it on again when you need it. **To turn an automation on or off:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click the toggle on the left of the automation name to turn it on or off. Turning an automation on and off **Automatic pause for failing automations:** If a scheduled automation fails repeatedly, Base44 pauses it automatically and notifies you so you can investigate and fix the issue before re-enabling it. *** ### Editing an automation Make changes to an automation at any time. The changes affect future runs only. **To edit an automation:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click the **More Actions** icon on the automation. 4. Click **Edit automation**. 5. Update the automation details. 6. Click **Save**. Editing an automation in your app *** ### Duplicating an automation Create new automations by duplicating existing ones and editing the new automation. **To duplicate an automation:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click the **More Actions** icon on the automation. 4. Click **Duplicate**. 5. Update the new automation's details if needed, and click **Save**. Duplicating an automation in your app *** ### Running an automation immediately Run an automation right away when you want to trigger its backend function on demand. This helps you test changes, confirm that your configuration works, or handle something urgent between scheduled runs. Run now triggers the backend function one time in addition to any schedule or data event you configured. The run appears in the automation logs. **To run an automation:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click the **More Actions** icon on the automation. 4. Select **Run now**. Running an automation immediately *** ### Archiving an automation If you do not need an automation anymore, you can move it to Archive to keep your active list clean. **To archive an automation:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Find the relevant automation in the list. 4. Click the **More Actions** icon on the automation. 5. Click **Archive**. Archiving an automation *** ## Monitoring runs and using logs Every automation keeps its own log so you can see when it ran, how long it took, and whether it succeeded. When something goes wrong, logs help you understand what failed and where to look in your backend code, without guessing. Use logs to confirm that new automations are running at the right time after you first set them up. **To view logs for an automation:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click the automation you want to inspect. 4. Click the **Logs** tab. 5. Review the list of runs, including the timestamp, duration, and status of each run. Viewing the logs of an automation *** ## Automations and integration credits Each automation run uses at least 1 integration credit, plus additional credits for any built-in integrations called inside it. For example, an automation that calls invokeLLM and sends an email costs the 1-credit automation run plus credits for each action it triggers. [See the full credit breakdown.](/Account-and-billing/Credits#integration-credit-examples) Automations 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 cause an automation to fire so it does not run unnecessarily. * **Consolidate redundant automations.** If multiple automations perform overlapping tasks, combine them into fewer, smarter workflows. * **Resolve failing automations promptly.** Automations that error can still consume credits on each retry. Check your logs regularly and fix or disable problem automations as soon as you spot them. * **Review the frequency of scheduled tasks.** Consider whether recurring automations, such as daily reports or reminders, need to run as often as configured. * **Minimize invokeLLM calls.** Each invokeLLM call inside an automation is a separate credit charge. Only call the LLM when the result cannot be pre-determined. * **Test in a controlled environment first.** Run automations manually on a small dataset and check the execution logs to estimate the per-run credit cost before enabling them at scale. * **Use Discuss mode when designing automations.** Discuss mode costs roughly 0.3 message credits and lets you plan automation logic before applying changes, reducing trial and error. *** ## FAQs Click a question below to learn more. Yes. Ask the AI chat to add trigger conditions to any automation. For example: ```text theme={null} Only run this automation when the order status is "pending". ``` The automation then only fires when the trigger event also matches the conditions you describe. Conditions are shown in the **Advanced** section of the automation panel once set, and can only be changed by asking the AI chat — they cannot be edited manually. Trigger conditions in the Advanced section of the automation panel When an automation fails, you see a **Failed** label in the **Last run** column and a **Fix with AI** option on the same row. Failed 2 **To fix a failed run:** 1. Click **Dashboard** in your app editor. 2. Click **Automations**. 3. Click **Fix with AI** on the failed automation. 4. In the AI chat, review the explanation of what went wrong and how it affects your automation. Accept the suggested fix so the AI can update your code or automation configuration. 5. When the AI finishes applying the fix, use the **Run now** action from **Automations** and check the logs to confirm the automation succeeds. For more detail about what happened, open the automation, go to the **Logs** tab, and review the failed run entry. You can also ask the AI in your dashboard to explain any error messages that appear. If a **scheduled** automation fails several times in a row, Base44 automatically pauses it to protect your app and your credits, and notifies you. Fix the underlying issue, then turn the automation back on from the **Automations** page. The available events depend on which connector you are using. Here is a full list: | Connector | Event | Description | | ------------------ | ------------ | -------------------------------------------------------------------- | | Gmail | mailbox | New emails arriving in your mailbox | | Google Calendar | events | Any calendar event change, including created, updated, and deleted | | Google Drive | changes | Any change in the drive, including files added, modified, or deleted | | Google Drive | file | Any change to a specific file (requires a file ID) | | Google Drive | file.update | File content or properties changed (requires a file ID) | | Google Drive | file.trash | File moved to trash (requires a file ID) | | Google Drive | file.untrash | File restored from trash (requires a file ID) | | Google Drive | file.delete | File permanently deleted (requires a file ID) | | Microsoft Outlook | created | A new email, calendar event, or contact is created | | Microsoft Outlook | updated | An email or calendar event is updated | | Microsoft Outlook | deleted | An email or calendar event is deleted | | Microsoft OneDrive | updated | Any file or folder change, including created, modified, and deleted | Make sure the connector is connected and configured in **Integrations** in your app's dashboard before creating a connector automation. # Creating workflows for your app Source: https://docs.base44.com/Building-your-app/Creating-workflows Automate multi-step work that runs on a schedule, when data changes, or when a connected tool sends an event. Use 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, or when a connected integration sends an event. 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. The Workflows dashboard **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), 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 two 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. A workflow shown as a diagram > **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 There are 4 ways a workflow can start. 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 | ### 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. 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.` 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. *** ## Creating a workflow To create a workflow, click **Create workflow** in your app dashboard. Base44 opens a **Create a new workflow** canvas, where you either start from a trigger 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. ### 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: a scheduled trigger (**One time**, **Recurring**, or **On an interval**), 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. The Create a new workflow canvas with the Add trigger node ### 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 suggestions**, 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. Starting a workflow from a suggestion 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. Deactivating a workflow from the More Actions menu ### 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. Editing a 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. Replacing a workflow's trigger Click the add button below a step, then choose **Action** or **Condition**. Adding a step to a workflow 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. Renaming a workflow ### 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. Running a workflow with Run now ### 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**. Archiving a workflow 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. A workflow's run history ### 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. The Activity tab *** ## 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. Managing a workflow from the AI chat # Customizing the design of your app Source: https://docs.base44.com/Building-your-app/Design Customize your Base44 app's look with the Theme panel, Edit mode, and AI chat: colors, fonts, per-element styling, themes, 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 each approach with prompts and examples you can use directly. Designing your app in Base44 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. You can just 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. 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. ``` 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. ``` **Edit** mode is ideal when you want to adjust what you see without rewriting everything. Visualedittoolbar 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 ``` Use the [AI Controls](/Building-your-app/AI-chat-modes#setting-ai-controls) 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 AI will follow 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. You can use the AI chat to explore different directions before you commit. 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. 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. Design Options Select the option you want and click **Submit**, or click **Skip** to let the AI decide. *** ## 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. Accessing and customizing your app's theme ### 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 or browse **Brand Fonts** and **All Fonts**. 4. Click **Save & Apply** to apply the changes across your app. Changing your theme fonts in 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. Visual edit toolbar in Base44 ### Colors You can set the background and text color of any element using the colors defined in your theme or a custom color. Editing the color of an element using the theme colors in Base44 **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. Editing text content in visual edit 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. Font family picker in visual edit **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. Font size picker in visual edit **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. Text style panel in visual edit ### 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. Spacing controls in visual edit ### 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 Neumorphism style interface example in Base44 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 ``` Glassmorphism style interface example in Base44 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. ``` Material style interface example in Base44 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 ``` Claymorphism style interface example in Base44 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. ``` Neo brutalism style interface example in Base44 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. Light and dark mode themes in a Base44 app Code example for theme handling in a Base44 app 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 . Deleting an element using Visual Edit # Design foundations and layout Source: https://docs.base44.com/Building-your-app/Design-foundations-and-layout Keep your Base44 app consistent and well-structured: design systems, images and visual assets, responsive layout, page types, advanced customization, 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. ``` Changing the color palette of a Base44 app *** ### 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. ``` Using a custom font in the Base44 layout file 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. ``` Hero image example in a Base44 app 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. Managing entity images in the Base44 Data section 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. Uploading a reference image for app design inspiration 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, open **Visual Edit** and select the matching element. 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. Figma Dev mode showing CSS and gradient background for a selected element 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 mobile users. Viewing the mobile version of your app in the Base44 app editor **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. Your design systems in workspace settings **Availability:** * Design systems are available on the [**Builder plan**](https://base44.com/pricing) and above. * Workspaces on the Builder plan and above include 1 design system. Enterprise workspaces have no limit. * Design systems apply to web apps. They are not applied to mobile apps, apps imported from Figma, or apps started from a URL. * 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, with your brand settings on the left and a live preview on the right A design system covers three 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:** Buttons, icons, and cards that already match your brand, ready to drop into any app. *** ## Creating a design system You create a design system from your workspace settings. In one form you can combine a short description, your logo, an import from Figma or a website, 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 from Figma or URL:** Switch between **Figma file** and **Website URL**, then attach a `.fig` file or paste a website address. Only use URLs where you have the rights to the content. * **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. Creating a design system from your brand's materials You can import from a Figma file or a website URL, but not both in the same design system. When you attach a Figma file, you can attach all of its pages and frames or choose specific ones. Base44 processes the file to generate your design system and does not store the original file. *** ## 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. Editing your brand logos Choose your heading and body fonts, or upload your own. You can also fine-tune the weight of each font style. Choosing your heading and body fonts Click a color to edit it, or click **Generate palette** and describe the colors you want. Editing a color in the palette Defines how your brand communicates. Click **Add tone** to add a trait, or click the generate icon to let Base44 suggest a new set. Adding tone of voice traits The principles your brand stands for. Click **Add value** to add one, or click the generate icon to let Base44 suggest a new set. Adding your core values Set how rounded your components look. Setting your corner radius values Fine-tune how much space goes between elements. Fine-tuning your spacing scale Set how elevated your components look. Click a shadow to adjust its position, blur, spread, and color. Setting your shadow values 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. Editing your design guidelines 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:** * **Owners and admins:** Can create, edit, set the default, and delete any design system. * **Editors:** Can create and edit design systems. Only owners and admins can set the default or delete a design system. Opening a design system for editing ### 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**. Setting a design system as your workspace 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**. Deleting a design system *** ## 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. Choosing a design system when starting a new app 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 your design system from the AI chat 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, 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. Enterprise workspaces have no limit. # Managing your app data Source: https://docs.base44.com/Building-your-app/Managing-your-app-data Stay organized and power your app with easy, flexible data management. *** 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. Example data for a travel app, with tables such as Trip, TripItem, VisitedPlace, and WishlistPlace. *** ## 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.