Merge pull request #4572 from divyaamunugama/ai-features

[Asgardeo] Add docs for branding AI and Login Flow AI

en/asgardeo/docs/guides/authentication/ai-loginflow.md

@@ -0,0 +1,38 @@
+# Login Flow AI
+
+!!! note
+    The AI Login Flow Generation feature is currently in the **Beta** stage. We are actively working to enhance its capabilities.
+
+AI-powered login flow generation simplifies the setup of authentication sequences in Asgardeo by using an AI-driven approach. This tool allows users to efficiently create tailored authentication sequences without needing in-depth knowledge of the underlying authenticators or scripting languages.
+
+## Generate login flows with Login Flow AI
+
+To generate your login flow with LoginFlow AI:
+
+1. On the Asgardeo Console, go to **Applications**.
+
+2. Select your application and go to its **Login Flow** tab.
+
+3. Click **Try Login Flow AI**.
+
+    ![LoginFlow AI button]({{base_path}}/assets/img/guides/ai-loginflow-try.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+4. Enter the login scenario you want to configure and press enter.
+
+    !!! note
+        If you wish to add connections to your login sequence, make sure to [set up the required connection]({{base_path}}/guides/authentication/#manage-connections). Only existing connections can be incorporated into the login flow.
+
+    ![LoginFLow AI input]({{base_path}}/assets/img/guides//ai-loginflow-input.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+    The system will analyze the input and generate the appropriate authentication sequence.
+
+## Customize the generated authentication sequence
+
+The AI system processes your input and provides an authentication sequence, you can further customize the authentication sequence by:
+
+- Adding or removing authenticators as needed.
+- Modifying the suggested steps.
+
+## Apply Login Flow
+
+Once you've reviewed and customized the generated login flow, click **Update** to apply it to your application.

en/asgardeo/docs/guides/branding/ai-branding.md

@@ -0,0 +1,50 @@
+# Branding AI
+
+!!! note
+    The AI Branding feature is currently in the **Beta** stage. We are actively working to enhance its capabilities.
+
+AI-powered branding simplifies the process of creating a cohesive branding theme by using AI to analyze your website's existing visual elements. This innovative service automates the identification and application of design elements such as colors, fonts, and button styles, ensuring brand consistency and reducing manual effort.
+
+By leveraging AI Branding, you can ensure that your the user prompted pages not only look great but also align perfectly with your brand's identity.
+
+## Generate branding with Branding AI
+
+To generate branding using Branding AI:
+
+1. On the Asgardeo Console, go to **Branding** > **Styles & Text**.
+
+2. Click on **Try Branding AI**.
+
+    ![AI Branding button]({{base_path}}/assets/img/guides/branding/ai-branding-try.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+3. Enter the website URL you'd like to use as the basis for branding.
+
+    ![AI Branding URL input]({{base_path}}/assets/img/guides/branding/ai-branding-input.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+4. Press enter to automate branding for your organization based on the website you provided.
+
+    The system will then process the website and start generating the branding theme.
+
+    ![AI Branding generating]({{base_path}}/assets/img/guides/branding/ai-branding-generating.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+## Review and customize generated branding
+
+Once Branding AI processes your website, you'll find the branding **Design** tab populated with recommendations for the following **Theme Preferences**:
+
+- Color palette derived from your website.
+- Fonts and typography styles.
+- Button styles and other UI elements.
+
+![AI Branding output]({{base_path}}/assets/img/guides/branding/ai-branding-output.png){: width="700" style="display: block; margin: 0; border: 0.3px solid lightgrey;"}
+
+You can further customize these branding guidelines by:
+
+- Adjusting the color schemes to match your brand identity.
+- Choosing alternative fonts that reflect your brand's personality.
+- Modifying UI element styles to align with your brand's aesthetic.
+
+By reviewing and customizing the generated branding, you can ensure that it perfectly aligns with your organization's unique identity and enhances your brand presence across all Asgardeo interfaces.
+
+## Apply branding
+
+Once you've reviewed and customized the generated branding to your satisfaction, click **Save & Publish** to apply it across your organization's user interfaces.

en/asgardeo/mkdocs.yml

@@ -198,6 +198,7 @@ nav:
               - MFA based on advanced conditions (using WSO2 Choreo): guides/authentication/conditional-auth/add-authentications-based-on-api-calls.md
             - Add passkey progressive enrollment: guides/authentication/conditional-auth/passkey-progressive-enrollment-based-template.md
             - Write a custom authentication script: guides/authentication/conditional-auth/write-your-first-script.md
+          - Login Flow AI: guides/authentication/ai-loginflow.md
           - Configure OIDC flows:
             - Configure OIDC flows: guides/authentication/oidc/index.md
             - Discover OIDC endpoints: guides/authentication/oidc/discover-oidc-configs.md
@@ -220,6 +221,7 @@ nav:
       - Branding:
         - Branding: guides/branding/index.md
         - Configure UI branding: guides/branding/configure-ui-branding.md
+        - Branding AI: guides/branding/ai-branding.md
         - Configure custom domains: guides/branding/configure-custom-domains.md
         - Customize email templates: guides/branding/customize-email-templates.md
         - Localization in Asgardeo: references/localization-in-asgardeo.md