Course Content
Apps – Basic
0/4
Styles – AI App Builder
00:00
Building your first web app – AI App Builder
00:00
Writing a good prompt – AI App Builder
00:00
Course Exercise: Build a Custom Contact Us Page – AI App Builder
00:00
Apps – Basic

Lesson: Building Your First AI Web App

In this lesson, you will learn how to go from a blank canvas to a fully functional, custom-styled web application using the Noca AI App Builder. We will walk through setting up your workspace, applying brand styles, and using AI prompts to generate a multi-step lead capture form.

Step 1: Access the AI App Builder

  1. Log into your Noca AI dashboard.

  2. In the left-hand navigation menu, click on Apps.

  3. Select New from the dropdown options.

  4. The AI Prompt Builder interface will open, providing you with a workspace to describe the app you want to create.

💡 Pro-Tip: At the top of the interface, you will see a dropdown to select your preferred AI model. For most standard applications, we recommend leaving this as the default setting.

Step 2: Apply Your Brand Styling

Before generating your app, ensure it matches your company’s branding:

  1. Look at the bottom action panel and click on the Styling button.

  2. In the panel that appears, you can choose to design a brand-new color palette, or navigate to Styles.

  3. Select the custom brand style you created in the previous academy lesson.

  4. Click Save Changes. You will now see your custom style badge attached to the prompt box at the top of the screen.

Step 3: Write and Enhance Your Prompt

Noca AI allows you to input requirements using your voice or keyboard.

  1. (Optional) Click the Microphone icon on the right if you prefer to dictate your app requirements.

  2. Type a basic description of your target application into the prompt bar (e.g., “Build a lead capture form for Anchor Insurance.”).

  3. To achieve the best layout, click the Enhance Prompt button at the bottom.

  4. Noca AI will automatically expand your brief request into a highly detailed page structure specification. Review the text and feel free to make minor adjustments before proceeding.

📁 Have an existing workflow document? If your process is already detailed in a PDF or text document, you can click the File Upload icon next to the prompt bar. Noca AI will read the file and build out the application based on your document’s guidelines.

Step 4: Co-Create with Interactive Prompting

If your prompt leaves room for interpretation, Noca’s conversational AI will guide you through the structural design process:

  1. Click Send to start the build engine.

  2. The AI will ask clarifying questions about how you want the user experience to flow. For example, choose between a Single-page layout or a Multi-step wizard.

  3. For this exercise, select Multi-step wizard.

  4. Noca AI will begin generating the application backend, UI components, and layout. This step takes a couple of minutes to complete—perfect timing to grab a quick coffee!

Step 5: Review and Refine Your Web App

Once the builder finishes, your live web app preview will appear on the right side of the screen.

  1. Review the generated fields (e.g., name, email, contact info) to ensure they meet your data collection requirements.

  2. Check how your pre-configured brand styles have automatically mapped to the layout, buttons, and text fields.

  3. If any sections need adjustment, you do not need to write code. Simply use the built-in workspace chat on the left to ask Noca AI to add, remove, or modify components (e.g., “Add a phone number field to step one”).

Next Up…

Great job launching your very first application! In the next video, we will dive deeper into prompt engineering principles so you can learn exactly how to write high-converting, precise instructions for the AI builder.

Previous
Next