Practical Guide to Appfarm AI

This guide is designed to help you navigate and use the Appfarm AI Build mode effectively, balancing conversational development (Appfarm AI) with visual drag & drop (the traditional no-code approach).

Prerequisite: You should be familiar with how Appfarm AI works. Please read all sections: Build, Ask, AI credits, and Context handling. Also, be aware of the current limitations. Also, see our Q&A section.

Building new apps

Building from scratch is about setting a solid foundation. This initial prompt is important; however, do not try to capture every possible feature and scope. Try to focus on the big picture, with clear guidance on any preference you have. If you are an experienced Appfarm developer, set the stage using Custom agent knowledge.

Appfarm AI can only build 1 app at a time. If you want to build both an end-user mobile app and an administrator desktop app, start with the biggest. Then, once completed, build the end-user mobile app using AI. Appfarm AI will reuse the data model if it fits the purpose.

The Initial Prompt

Try to focus on the big picture, with clear guidance on any preference you have.

• State your UI preferences, if any. Some examples:

  • Upload a screenshot.

  • Refer to your homepage ("Use the colours and fonts found in www.appfarm.io"). Appfarm AI has access to web search, meaning you may refer to external webpages, for example, UI inspo or integration documentation.

  • Refer to well-known apps for inspo ("Create a chat interface that looks like ChatGPT"), preferably also with a screenshot for clarity.

• Provide context and be specific. For example, what industry are you building your application for? Who are the users? What device? Instead of "Build a CRM," say "Build a mobile-friendly CRM for a construction company to track Projects, Site Leads, and Daily Logs."

• Start small: You might be tempted to upload a PDF containing the full spec of a large system. It might work, but Appfarm AI is instructed to break very large requirements down to an "MVP approach". So, letting Appfarm AI break it down for you, you might lose control of what features are prioritized. Focus on the most important user stories or requirements, and expand later.

  • "Less is more": Allowing Appfarm AI to focus on a narrow scope initially leaves more room for quality.

• Set Constraints and rules: Any constraint or rule you want to AI to follow: Mention it. Add an "Important constraints and rules" section to the end of your prompt, with a bulletized list of rules.

  • Examples:

    • What language should be used for the UI and components created

    • Integrations: Which vendor or model for AI integrations, URLs, what you want to achieve, what you want to collect, etc.

    • Dashboard: What you want the dashboard to contain (Appfarm AI is instructed to add a dashboard unless otherwise stated)

    • If you have an existing data model and want to make sure Appfarm AI reuses the correct part, name the object classes to be reused. Otherwise, it will try to reuse based on a best-effort understanding of the data model.

Adjust while the agent is working

You may perform changes while the AI is working. For example, you may make changes to the generated UI or tweak an action while Appfarm AI is continuing on other tasks.

However, if you are making changes to other apps while the AI is working, it is recommended to let Appfarm AI work in a separate browser tab and continue on your own in another. Note that all changes done by Appfarm AI are saved between each task in the tasks list, so you will not be able to see those changes (or test them) until the active task has been completed.

Test & fix

Once the task list has been completed, you should test the main functionality of your app. It is suggested to inspect the Developer tools while testing - it may reveal error messages. If an error is found, simply explain the error (or copy-paste the error message from the Developer tool) to Appfarm AI. If functionality is missing, tell it to Appfarm AI.

Examples:

• Mark the button that does not work inside Appfarm Create, and type "When clicking this button, I get this error message <paste error msg here>", or "This button is not working".

• Missing UI: Inside the view in Appfarm Create, type "Looks like you did not complete this view. Please implement the missing UI".

Continue after the initial build

Once the task list for the initial build has been completed, it is recommended to start a new thread. With a task list being sent back and forth, Appfarm AI evaluates its completeness every time.

With a new thread, you can start expanding the app with new functionality. Please see the next section.

Improve and expand app functionality

Appfarm AI is great at building from scratch. But it also provides great value in the long run, when expanding an app with more functionality, improving UI, robustness, and user feedback.

When the app is small, Appfarm AI has a full overview of all functionality and UI in the app. But once it gets bigger, Appfarm AI has only a broader overview, and collects full details of various views and actions on demand. Please read more in the Context handling section.

Here are some tips and examples on how to work with Appfarm AI to iterate and expand an existing app. Learning these principles might help you achieve your goal faster and spend fewer AI credits.

• Reference Existing Work: The AI learns from your current app, both with regard to look-and-feel and naming conventions.

  • Example: "Create a new view for 'Invoices' that looks similar to the 'Customers' view, and with similar CRUD functionality and details drawer.

• Be even more precise than in the initial app prompt.

  • Example: Instead of "Build a company register", try "I want to expand this app with a Company register. Add a view for listing, adding, editing and deleting Companies. Add a menu item for navigation. Also, I want to be able to set the Company property when adding or editing Projects, and to see it listed in the projects table."

• Let the Appfarm AI know what you want to achieve when implementing functionality.

  • Example: If you add vague prompts like "Implement AI functionality in this app", it will analyze your app and might suggest or implement (=spending credits) something you did not sign up for. Instead, try "I want the following AI functionality: The user should be able to upload an image of a paper-based form, and prefill all form fields in the checklist view".

• Show the location where you want to build the functionality. AI knows your current view or the current action. If you intend to build something in a view, navigate to that view and launch the prompt from there. It will both help the AI understand where you want the implementation to be done (if it is a narrow task) and also use fewer credits/implementation time (Appfarm AI has all metadata of the current view and does not need to fetch it first). Examples:

  • "Build empty-state functionality into this view".

  • "For this button, implement an action for downloading an order summary PDF".

• Let Appfarm AI know if you only want suggestions. Appfarm AI is instructed to analyze the intent. However, it is eager to solve the problem and build. State "Give me a plan for..." or "Do not build, only give advice" and review suggestions before prompting "OK, build this for me" etc.

  • PS: If you want strictly informative answers and suggestions, you should use the Ask mode.

• Let Appfarm AI know if you want to use code. The agents are instructed to always prefer the Appfarm building blocks and to use Coded Component or Run Code when it better fits the purpose, or Appfarm Create has no building block for it. However, you might help it by stating "Use Coded Component ..." if you know the end result requires code (e.g., "Build a Tetris game using coded component").

• Provide details when debugging: Add as much context as possible when you need help correcting errors, and be precise: "The app is not working" could instead be "This action is not working, nothing happens when I click the button. Can you analyze and fix it?"

• Use Appfarm AI for writing documentation: You can instruct Appfarm AI to write documentation drafts for you, or e.g., to give you information relevant for a GDPR report ("describe all GDPR releated data in my data model").

Agent Focus: Design

When using the Build mode, you can add Agent Focus. When using Design focus, you are talking to the design sub-agent directly. Be aware that this agent only knows UI and can not connect very well to data, nor can it build actions (except simple navigation). However, it is extremely good at building beautiful designs (including conditional styles), and can manipulate the theme (adding colours, etc).

Some tips:

• Use the Design focus to build the initial design, and then switch to normal agent mode to finish the job (connecting to data, adding functionality).

• If you have specific requirements on the look-and-feel, let the agent know. Example: "Make this page look like a modern SaaS dashboard using cards, KPIs at the top, and a clean sans-serif aesthetic."

Combining visual drag & drop with conversational AI

The best appfarm developers use a hybrid approach. Don't feel you have to choose one or the other.

• Use the AI for:

  • High-volume work. Creating more or less standard views, setting up standard "Create/Edit/Delete" logic, tables, and detail panes.

  • Dashboards and statistics.

  • Build new UI (at least for the initial design), or improve existing.

  • Build data models. As an expert developer, you may want to start with the data model before you build the app.

  • Clear, targeted functionality. Having a functional spec, you may implement function-by-function using AI, and adjust visually as you go.

  • All code-related tasks (functions, coded component, run code)

  • All integrations. Be specific about where you want to integrate and what you want to send/receive.

  • Debugging and error correction.

  • Support you when writing documentation or compliance reports.

• Use visual building for:

  • Fine-tuning UI placement, adjusting padding/margins, and final "sanity checks" of the data bindings and filters.

  • Finalizing complex iterative structures. Appfarm AI may not always do multilevel UI iterations that well.

  • Performance optimization (e.g, filters on large data sources).

  • Services and other areas that are described in the Current limitations section.