diff --git a/en/ai/getting-started.md b/en/ai/getting-started.md index 80d8c18..2a3e79f 100644 --- a/en/ai/getting-started.md +++ b/en/ai/getting-started.md @@ -1,261 +1,105 @@ --- -title: Getting Started with App Builder AI -_description: If you can imagine it, App Builder AI will create it. Automate mundane, repetitive tasks and enable your development team to focus on custom functionality, delivering real apps, real fast. -_keywords: App Builder AI, Infragistics, Ignite UI +title: Getting Started with App Builder AI +_description: App Builder’s AI Chat capabilities help you build multi-view apps, generate data, themes, and more using natural language. +_keywords: App Builder AI, AI Chat, Infragistics, Ignite UI, AI Generation --- # Getting Started with App Builder AI -This guide covers the newly introduced AI-powered content generation in App Builder. +App Builder’s AI Chat capabilities will help you build multi-view apps with navigation. Easily iterate on existing UIs in context without disrupting other parts of your app. Upload images or screenshots to create complete UIs with custom themes. -AI capabilities are currently available only as a **Preview** and are not yet with a finalized design. These AI features are still being polished and are intended for gathering feedback. As such, they may not be fully refined and may evolve based on user input. You can access the **Preview** functionalities here: https://preview.appbuilder.dev/ +The AI Chat panel is your central hub for all AI-powered generation and assistance within App Builder. -## View Generation + -The generative AI-powered view generation in App Builder provides a powerful alternative to traditional layout pickers. By leveraging free-text user prompts and multiple prompt patterns, users can generate highly customized views that are automatically transformed into fully functional applications. This approach not only accelerates the creation of App Views but also simplifies UI design, making interface generation accessible to users with varying levels of technical expertise. +## Key Capabilities - -

Login screen

+### 1. End-to-End Application & UI Generation -### Prompt-Based Generation +The AI functionality can now generate full applications from natural language, including multi-page structures, viewports, navigation, and themes. It builds complete screens like dashboards, landing pages, product lists, and e-commerce or login/register screens. All output is created using Ignite UI’s enterprise-grade components for consistent, high-quality UI. -**Step 1**: Enter a free-text prompt into the GenAI Dialog. + -**Step 2**: View the generated result in the **Preview** section. +### 2. Smarter Commands and Structured Execution -**Step 3**: Apply an action using the plus button in the Preview section: +A powerful command engine that ensures accuracy and consistency. -- **Add Content** – Appends the content to the end of the current view. -- **Create New View** – Adds the newly generated content to a separate View page. -- **Replace Content** – Replaces the selected component in the current view with the generated output. Simply select a section/layout/component that you want to transform into something else, and open the GenAI Dialog again, place your prompt and click on the Add button -> Replace Content option. +- **CREATE**: apps, views, components, themes, viewports, data sources, images. +- **UPDATE**: modify components, themes, images, and properties. +- **DELETE**: remove elements safely from the canvas (views & themes excluded). -**Example of replacing an element with an input of type "search," specifying a placeholder value and a width of 200px:** +The process includes previews, step-by-step execution, and clear diagnostics when errors occur. - -

Replace Content Example

+### 3. AI Understands & Generates Real, Working Data -Users can iteratively generate and refine views using various context menu options. The behavior depends on the **current view state** and **selected components**: +It understands and generates real, working data from natural text descriptions. It creates data sources automatically, generates JSON, detects schemas, and binds data to components without manual setup. It also maps fields, creates variables, and configures bindings intelligently, ensuring everything works out of the box. -| Context | No components selected | Layout container selected | Non-container components selected | -| ------------------- | ----------------------------------------- | ----------------------------------------------- | --------------------------------------------------- | -| **Add Content** | Appends content at the end of the view | Appends content to the selected container | Inserts content before the first selected component | -| **Replace Content** | Fully replaces the current view’s content | Fully replaces the selected container’s content | Replaces all selected components | -| **Create New View** | Creates a **new master view** | Creates a **new master view** | Creates a **new master view** | - -> [!NOTE] -> **Undo/Redo** is supported for **Add** and **Replace** actions but **not** for creating new views. -> **Child views can be created** when a view container is involved in the generated content. -> Users can refine both **AI-generated** and **manually created** views iteratively. + - +### 5. Image-to-Application Generation -### Example Use Cases +You can generate full applications from uploaded images thanks to the AI’s context-aware interpretation. It can also create images from prompts and automatically place them into the design where needed. This makes both visual exploration and final UI production faster and more intuitive. -#### Example 1: Login Screen + -Prompt: + -``` -Create a detailed login screen -``` +## Multi-Mode AI Chat - -

Login screen

- -AI Output - Angular template: - -```html -
-

Login

-

Enter your username and password to log in.

-
- - - - Username - - - - - Password - - Remember me - - Forgot password? - Create an account -
-
-``` - - -

Login screen with Blazor code

- -#### Example 2: Car-service View +The AI chat now performs intent classification, it determines whether your prompt aims to generate content (e.g., create or edit a component) or seeks product-related help. -Prompt: +- **Analyze Mode (Submit)**: Detects user intent and routes the request (support vs. generate). +- **Generate Mode (Generate)**: Creates applications, views, layouts, components, themes, and data. +- **Support Mode (Ask)**: Answers questions based on documentation and help content. -``` -Design a booking screen for an auto-service shop app that allows customers to schedule common car services. The screen should include sections for vehicle selection, available services, appointment scheduling, and a booking summary. Users first select their car make, model, and year from dropdown menus. Then, they choose a service from a grid of six cards, each displaying the service name, price, description, and a "Select" button. Next, they pick a date from a calendar and select an available time slot from a grid of eight buttons. Finally, the booking summary lists the selected services and provides "Confirm Booking" and "Cancel" buttons. The layout should follow a structured column and row format, ensuring a seamless flow from vehicle selection to appointment confirmation. -``` +This enhancement allows App Builder to respond contextually, switching seamlessly between content generation and in-app support. - -

Auto-service Shop

- -AI Output - Angular template: - -```html -
-

- Vehicle Selection -

- - - Toyota - - - Honda - - - Ford - - - Select your car's make - - - - Corolla - - - Civic - - - Mustang - - - Select your car's model - -``` - -And here is the App Preview: - - -

Auto-service Shop Preview

- -### Useful Patterns for More Precise Results - -> [!NOTE] -> Consider these patterns as recommendations; you can always use regular prompt descriptions phrasing. - -#### Pattern 1: Combined Layout and Component Prompts - -For more structured outputs that combine layout and detailed component configurations, users can specify an overall screen design with multiple sections. For instance: - -``` -A login screen with: -row layout - col layout - title: Login - text: Please enter your email and password to sign in - form: - input: email - input: password - switch: remember me - button: login - row layout - text: Don't have an account? - link: sign up - image -``` - -Result: - - -

Login screen

- -#### Prompt 2 - -Structured equivalent prompt - -``` -Generate a view with this layout: -nav bar -horizontal group - nav drawer (isOpen=true, pin=true) - 5 items - vertical group - title (color=red) - horizontal group - 4 cards with media + -``` - -Result: - - -

Complex View

- -## Additional AI Features - - - -### Image Generation - -**Steps:** - -1. Open the **AIGen** dialog and navigate to the **Image** tab. -2. Enter a prompt describing the image or use an **Example Prompt**. -3. Once satisfied with the result, click **Add** to save it to your **Image Library**. -You can now start using it within your project. +## Rich Conversational Experience - -

Image generation

+The conversational workspace provides a flexible, interactive environment for building apps. -### Data Source Generation +- **Chat Component**: The Ignite UI Chat Component supports text, speech-to-text, and both image generation and uploads. +- **Session Management**: Sessions can be renamed, searched, pinned, or removed, helping you stay organized throughout long workflows. +- **Pinned Chat History**: Lets you quickly revisit important sessions. +- **Image Uploads**: Effortless thanks to support for drag-and-drop, paste, or traditional selection copy->paste. +- **Guidance**: The AI provides helpful follow-up suggestions, prompts, and recommends next steps as you build. Every action comes with command previews, execution progress, and actionable error explanations. When something needs refinement, retry options make the process easy and forgiving. -**Steps:** + -1. Open the **AIGen** dialog and navigate to the **Data** tab. -2. Enter a prompt describing the data you need. -3. Click the **Example Prompt** button for inspiration. -4. Click **Add** to create a new data source or append it to an existing one. +### Speech-to-Text - -

Data source Generation

+Interacting with AI is even more intuitive with speech-to-text support. Click the microphone button in the prompt area, speak your instructions, and watch them transcribe directly into the text field, perfect for hands-free workflow or rapid idea capture. -## Give Us Feedback + -Use the **Send Feedback** form to share your suggestions, report issues, or describe challenges you experience. +## Contextual Editing & Live Design Controls - -

Give Us Feedback

+There is deep integration between the AI Chat and the Design Surface for even easier interaction. + +- **Contextual Popup**: You can click any UI element to modify it through AI contextual popup. +- **Component Indicator**: Shows what’s selected at all times. +- **Real-time Feedback**: Real-time feedback via the Design-Area Processing Indicator keeps you informed during generation or updates. + + + +## AI-Driven "Create New App" Dialog + +Start your project with the AI-Driven "Create New App" dialog, featuring a richer prompt gallery with prompt cards for a personalized experience, improved filtering, and discovery. + + ## Additional Resources
- [App Builder Interface Overview](../interface-overview.md) -- [Single Page and Navigation](../single-page-apps-and-navigation.md) - [App Builder Components](../indigo-design-app-builder-components.md) -- [Flex Layouts](../flex-layouts/flex-layouts.md) -- [Running Desktop App](../running-desktop-app.md) - [Generating an App](../generate-app/generate-app-overview.md) -- [Indigo.Design Getting Started]({environment:infragisticsBaseUrl}/products/indigo-design/help/getting-started) diff --git a/en/images/ai/Replace content with AI.gif b/en/images/ai/Replace content with AI.gif deleted file mode 100644 index 83aef75..0000000 Binary files a/en/images/ai/Replace content with AI.gif and /dev/null differ diff --git a/en/images/ai/add-my-profile-icon-1.gif b/en/images/ai/add-my-profile-icon-1.gif new file mode 100644 index 0000000..3791d8b Binary files /dev/null and b/en/images/ai/add-my-profile-icon-1.gif differ diff --git a/en/images/ai/complex-page-example-preview.png b/en/images/ai/complex-page-example-preview.png deleted file mode 100644 index 484f758..0000000 Binary files a/en/images/ai/complex-page-example-preview.png and /dev/null differ diff --git a/en/images/ai/complex-page-example.png b/en/images/ai/complex-page-example.png deleted file mode 100644 index 98fd00a..0000000 Binary files a/en/images/ai/complex-page-example.png and /dev/null differ diff --git a/en/images/ai/content-generation-options.png b/en/images/ai/content-generation-options.png deleted file mode 100644 index ee392a6..0000000 Binary files a/en/images/ai/content-generation-options.png and /dev/null differ diff --git a/en/images/ai/data-source-generation.png b/en/images/ai/data-source-generation.png deleted file mode 100644 index 59918b9..0000000 Binary files a/en/images/ai/data-source-generation.png and /dev/null differ diff --git a/en/images/ai/entry-blog-gif.gif b/en/images/ai/entry-blog-gif.gif new file mode 100644 index 0000000..d6e2857 Binary files /dev/null and b/en/images/ai/entry-blog-gif.gif differ diff --git a/en/images/ai/gallery-view.gif b/en/images/ai/gallery-view.gif new file mode 100644 index 0000000..eaeb5d0 Binary files /dev/null and b/en/images/ai/gallery-view.gif differ diff --git a/en/images/ai/gen-from-image-preview.png b/en/images/ai/gen-from-image-preview.png deleted file mode 100644 index f95d961..0000000 Binary files a/en/images/ai/gen-from-image-preview.png and /dev/null differ diff --git a/en/images/ai/gen-from-image.png b/en/images/ai/gen-from-image.png deleted file mode 100644 index cc63abe..0000000 Binary files a/en/images/ai/gen-from-image.png and /dev/null differ diff --git a/en/images/ai/image-10-1536x729.png b/en/images/ai/image-10-1536x729.png new file mode 100644 index 0000000..2d0c46c Binary files /dev/null and b/en/images/ai/image-10-1536x729.png differ diff --git a/en/images/ai/image-11-1536x729.png b/en/images/ai/image-11-1536x729.png new file mode 100644 index 0000000..ebbe0b8 Binary files /dev/null and b/en/images/ai/image-11-1536x729.png differ diff --git a/en/images/ai/image-13.png b/en/images/ai/image-13.png new file mode 100644 index 0000000..96ab3cb Binary files /dev/null and b/en/images/ai/image-13.png differ diff --git a/en/images/ai/image-15-1536x729.png b/en/images/ai/image-15-1536x729.png new file mode 100644 index 0000000..68e7b9d Binary files /dev/null and b/en/images/ai/image-15-1536x729.png differ diff --git a/en/images/ai/image-16-1536x729.png b/en/images/ai/image-16-1536x729.png new file mode 100644 index 0000000..781524f Binary files /dev/null and b/en/images/ai/image-16-1536x729.png differ diff --git a/en/images/ai/image-17-1536x729.png b/en/images/ai/image-17-1536x729.png new file mode 100644 index 0000000..8be07c5 Binary files /dev/null and b/en/images/ai/image-17-1536x729.png differ diff --git a/en/images/ai/image-9-1536x729.png b/en/images/ai/image-9-1536x729.png new file mode 100644 index 0000000..08ba004 Binary files /dev/null and b/en/images/ai/image-9-1536x729.png differ diff --git a/en/images/ai/image-generation.png b/en/images/ai/image-generation.png deleted file mode 100644 index 35f2b9e..0000000 Binary files a/en/images/ai/image-generation.png and /dev/null differ diff --git a/en/images/ai/login-screen-canvas.png b/en/images/ai/login-screen-canvas.png deleted file mode 100644 index c7da4a6..0000000 Binary files a/en/images/ai/login-screen-canvas.png and /dev/null differ diff --git a/en/images/ai/login-screen-preview-blazor.png b/en/images/ai/login-screen-preview-blazor.png deleted file mode 100644 index f79b3ad..0000000 Binary files a/en/images/ai/login-screen-preview-blazor.png and /dev/null differ diff --git a/en/images/ai/login-screen-preview.png b/en/images/ai/login-screen-preview.png deleted file mode 100644 index e8c11c3..0000000 Binary files a/en/images/ai/login-screen-preview.png and /dev/null differ diff --git a/en/images/ai/login-screen.png b/en/images/ai/login-screen.png deleted file mode 100644 index 7b88405..0000000 Binary files a/en/images/ai/login-screen.png and /dev/null differ diff --git a/en/images/ai/prompt-1.png b/en/images/ai/prompt-1.png deleted file mode 100644 index 0ad239a..0000000 Binary files a/en/images/ai/prompt-1.png and /dev/null differ diff --git a/en/images/ai/prompt-2.png b/en/images/ai/prompt-2.png deleted file mode 100644 index 0e08314..0000000 Binary files a/en/images/ai/prompt-2.png and /dev/null differ diff --git a/en/images/ai/send-feedback.png b/en/images/ai/send-feedback.png deleted file mode 100644 index b49e541..0000000 Binary files a/en/images/ai/send-feedback.png and /dev/null differ diff --git a/en/images/ai/speech-to-text.gif b/en/images/ai/speech-to-text.gif new file mode 100644 index 0000000..001a5f8 Binary files /dev/null and b/en/images/ai/speech-to-text.gif differ diff --git a/en/images/ai/theme-generation.png b/en/images/ai/theme-generation.png deleted file mode 100644 index 5979bab..0000000 Binary files a/en/images/ai/theme-generation.png and /dev/null differ