AWS App Studio is in preview and is subject to change.
Tutorial: Generate an app using AI
App Studio contains generative AI features throughout the service to help speed up application building. In this tutorial, you'll learn how to generate an app using AI by describing your app using natural language. Using AI to generate an app is a great way to start building, as many of the app's resources are created for you and it's typically much easier to start building from a generated app with existing resources than starting from an empty app.
Note
You can view the
Build enterprise-grade applications with natural language using AWS App Studio (preview)
When an app is generated with AI, the app is created with the following resources that are tailored to the app you described:
Pages and components: Components are the building blocks of your application's user interface. They represent visual elements like tables, forms, buttons, and more. Each component has its own set of properties and can be customized to fit your specific requirements. Components are contained in pages.
Automations: Automations are used to define the logic and workflows that govern how your application behaves. Automations can create, update, read, or delete rows in a data table or objects in an Amazon S3 bucket, or handle tasks like data validation, notifications, or integrations with other systems.
Entities: Data is the information that powers your application. The generated app will create entities, similar to tables, that represent the different types of data you need to store and work with, such as customers, products, or orders. You can connect these data models to a variety of data sources, including AWS services and external APIs, using App Studio's connectors.
Contents
Prerequisites
Before you get started, review and complete the following prequisites:
Access to AWS App Studio.
Optional: Review AWS App Studio concepts to familiarize yourself with important App Studio concepts.
Step 1: Create an application
The first step in generating an app is to describe the app you want to create to the AI assistant in App Studio. You can review the application that will be generated, and iterate as desired before generating.
To generate your app using AI
Log in to App Studio.
Navigate to the builder hub and choose + Create app.
Choose Generate an app with AI.
In the App name field, provide a name for your app.
In the Select data sources dialog box, choose Skip.
You can start defining the app you want to generate by describing it in the text box, or by choosing Customize on a sample prompt. Once you describe your app, App Studio will generate the app requirements and details for you to review. This includes use cases, user flows, and data models.
Use the text box to iterate your app as needed, until you are satisfied with the requirements and details.
Once you're ready to generate your app and start building, choose Generate app.
Optionally, you can view a short video that details how to navigate around your new app.
Choose Edit app to enter the application studio for your app.
Step 2: Explore your new application
In the application studio, you'll find the following resources:
A canvas that you use to view or edit your application. The canvas changes depending on the resource that is selected.
Navigation tabs at the top of the canvas. The tabs are described in the following list:
Pages: Where you use pages and components to design the UI of your app.
Automations: Where you use actions in automations to define the business logic of your app.
Data: Where you define entities, their fields, sample data, and data actions to define the data models of your app.
App settings: Where you define settings for your app, including app roles, which are used to define role-based visibility of pages for your end users.
A left-side navigation menu, which contains resources based on which tab you're viewing.
A right-side menu that lists resources and properties for selected resources in the Pages and Automations tabs.
A debug console that displays warnings and errors at the bottom of the builder. There may be errors present in your generated app. This is likely due to automations that require a configured connector to perform actions, such as sending an email with Amazon Simple Email Service.
An Ask AI chat window to get contextual help from the AI builder assistant.
Let's take a closer look at the Pages, Automations, and Data tabs.
Explore pages and components
In the Pages tab, you'll find pages and their components that were generated for you.
Each page represents a screen of your application's user interface (UI) that your users will interact with. Within these pages, you can find various components such as tables, forms, buttons, and more to create the desired layout and functionality.
Take some time to view the pages and their components by using the left-side navigation menu. When you select a page or component, you can choose Properties in the right-
Explore automations and actions
In the Automations tab, you'll find automations and their actions that were generated for you.
Automations define the business logic of your app, such as creating, viewing, updating, or deleting data entries, sending emails, or even invoking APIs or Lambda functions.
Take some time to view the automations by using the left-side navigation menu. When you choose an automation, you can view its properties in the right-side Properties menu. An automation contains the following resources:
Automations are made up of individual actions, which are the building blocks of your app's business logic. You can view the actions of an automation in the left-side navigation menu, or in the canvas of a selected automation. When you select an action, you can view its properties in the right-side Properties menu.
Automation parameters are how data is passed into an automation. Parameters act as placeholders that are replaced with actual values when the automation is run, allowing you to use the same automation with different inputs each time.
Automation output is where you configure the result of an automation. By default, an automation has no output, so to use an automation's result in components or other automations, you must define them here.
For more information, see Automations concepts.
Explore data with entities
In the Data tab, you'll find entities that were generated for you.
Entities represent tables that hold your application's data, similar to tables in a database. Instead of connecting your application's user interface (UI) and automations directly to data sources, they connect to entities first. Entities act as a middle-person between your actual data source and your App Studio app, providing a single place to manage and access your data.
Take some time to view the entities that were generated by choosing them from the left-side navigation menu to see the following details:
In the Configuration tab, you'll find the entity name, and its fields, which represent the columns of your entity.
In the Data actions tab, you'll find the data actions generated with your entity. Components and automations can use data actions to fetch data from your entity.
In the Sample data tab, you'll find sample data which can be used to test your app in the Development environment, which does not communicate with external services. For more information about environments, see Application environments.
In the Connection tab, you'll see information about the external data sources that the entity is connected to. App Studio provides a managed data storage solution that uses a DynamoDB table. For more information, see Managed data entities in AWS App Studio.
Step 3: Preview your application
You can preview applications in App Studio to see how they will appear to users and also test its functionality by using it and checking logs in a debug panel.
The application preview environment does not support displaying live data or the connection with external resources with connectors, such as data sources. Instead, you can use sample data and mocked output to test functionality.
To preview your app for testing
In the top-right corner of the app builder, choose Preview.
Interact with the pages of your app.
Next steps
Now that you've created your first app, here are some next steps:
If you haven't, read the Build enterprise-grade applications with natural language using AWS App Studio (preview)
blog post for another getting started walkthrough that includes images. Apps use connectors to send and receive data or communicate with external services, both AWS services and third-party services. It's necessary to learn more about connectors and how to configure them to build apps. Note that you must have the Admin role to manage connectors. Check out Connect App Studio to other services with connectors to learn more.
To learn more about previewing, publishing, and eventually sharing your app to end users, check out Previewing, publishing, and sharing applications.
Keep exploring and updating the app you generated for some hands-on experience.
Check out the Builder documentation to learn more about building apps. Specifically, the following topics might be useful to explore:
