Skip to content

Commit f8d7830

Browse files
authored
Merge pull request #50 from rdulmina/main
Add gif and update steps in agent QSG
2 parents 97a90ad + be29f6b commit f8d7830

File tree

7 files changed

+35
-23
lines changed

7 files changed

+35
-23
lines changed
Loading
Loading
Loading

en/docs/quick-start-guides/deploy-your-first-ai-agent.md

+33-21
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,12 @@ In this guide, you will:
2121
3. Read and accept the privacy policy and terms of use and click **Create**.
2222
3. VSCode: [Install VSCode](https://code.visualstudio.com/download) if you don't have it installed already.
2323

24-
<!-- Todo finalize the names and structure -->
2524
## Step 1: Attach a Git repository
2625
1. Go to [https://console.devant.dev/new](https://console.devant.dev/new) and sign in. This opens the new integration page.
2726
2. On the new integration page, click **Attach a Git Repository**.
2827

2928
!!! tip
30-
If you're using a public Git repository, you can skip ahead to sub-step 9. Click **Use a Third-Party Public Git Repository** and enter the repository URL.
29+
If you're using a public Git repository, you can skip ahead to sub-step 8. Click **Use a Third-Party Public Git Repository** and enter the repository URL.
3130

3231
3. Click **Authorize with GitHub** to connect Devant to your GitHub account. If you haven't connected your GitHub repository to Devant, authorize the WSO2 cloud app with your GitHub account [WSO2 Cloud App](https://github.com/marketplace/choreo-apps).
3332
4. Under the **Organization** dropdown click **+ Add**. This redirects you to the **Install WSO2 Cloud App** page.
@@ -57,15 +56,18 @@ This redirects you to the overview page of the AI Agent. Now, let's develop the
5756

5857
## Step 3: Set up Ballerina Integrator for the first time
5958
1. Click the Ballerina Integrator icon on the sidebar.
60-
<a href="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-icon.png"><img src="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-icon.png" alt="Ballerina Integrator Icon" width="80%"></a>
59+
60+
<a href="{{base_path}}/assets/img/get-started/bi-icon.png"><img src="{{base_path}}/assets/img/get-started/bi-icon.png" alt="Ballerina Integrator Icon" width="80%"></a>
61+
6162
2. Click **`Set Up Ballerina Integrator`**. The setup wizard installs and configures the [Ballerina](https://ballerina.io/) distribution required for the Ballerina Integrator.
6263
3. Click **`Restart VS Code`** to complete the setup.
63-
<a href="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-setup.gif"><img src="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-setup.gif" alt="Ballerina Integrator Setup" width="80%"></a>
64+
65+
<a href="{{base_path}}/assets/img/get-started/bi-setup.gif"><img src="{{base_path}}/assets/img/get-started/bi-setup.gif" alt="Ballerina Integrator Setup" width="80%"></a>
6466

6567
## Step 4: Develop AI Agent in VSCode
66-
1. Go to the Overview page of the integration you have created and click **Develop in Ballerina Integrator**. This will clone your project and open in Ballerina Integrator.
68+
1. Go to the Overview page of the integration you have created and click **Develop in Ballerina Integrator**. This will clone your project and open it in Ballerina Integrator.
6769
2. In the Ballerina Integrator design view, click **Add Artifact**.
68-
3. Select **AI Chat Agent** from the Constructs menu. Since **AI Agent** has been chosen from the Devant console, other options are disabled.
70+
3. Select **AI Chat Agent** from the Constructs menu. Choosing the **AI Agent** from the Devant console disables the other options.
6971
4. Provide the name of the Agent as `MathTutor` and click **Create**. This directs you to the AI Chat Agent diagram view.
7072
5. Click the OpenAI icon in the diagram view to configure the LLM model, and add the following configurables:
7173

@@ -78,17 +80,26 @@ This redirects you to the overview page of the AI Agent. Now, let's develop the
7880
| **Deployment ID** | `deploymentId` |
7981
| **Service URL** | `serviceUrl` |
8082

81-
6. Click on save in order to save the configurations.
82-
7. From the left side panel, create a new function. Name it as `mult`.
83-
8. Create two `decimal` parameters, `a` and `b` as the **Function parameters**.
83+
6. Click **Save**.
84+
85+
<a href="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/initialize-agent.gif"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/initialize-agent.gif" alt="Initialize AI Agent" width="80%"></a>
86+
87+
7. From the left side panel, click **+** on the **Functions** to create a new function. Name it as `mult`.
88+
8. Click **+ Add Parameter** and add two `decimal` parameters, `a` and `b`.
8489
9. Set the **Return Type** as `decimal` and click **Create**.
85-
10. Click the plus icon after the **Start** node to open the node panel.
90+
10. Now, let's create the function return logic. Click the plus icon after the **Start** node to open the node panel.
8691
11. Select **Return** and enter the **Expression** as `a * b`.
87-
12. In the Agent box, click the plus icon to create a tool and click the **+ Create New Tool** on the right panel.
88-
13. Select the `mult` function you just created under **Current Integrations**.
89-
14. Provide the **Tool Name** as `getMult` and click **Save Tool**.
90-
15. Click the agent box and enter `Math Tutor` as the role and enter the instructions as ***"You are a school tutor assistant. Provide answers to students' questions so they can compare their answers. Use the tools when there is query related to math".*** Then click on save.
91-
16. From the left side panel, click **Configurations**, and add the following configurables,
92+
12. Click the source icon `(<\>)` in the top right corner to view the source code of the function.
93+
13. Add the `isolated` keyword before the function definition to make it an isolated function.
94+
95+
<a href="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/add-function.gif"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/add-function.gif" alt="Initialize AI Agent" width="80%"></a>
96+
97+
14. Now, let's add the `mult` function as a tool to the AI Agent. Click `mathTutor` under **Entry Points** on the left navigation. This brings up the AI Agent diagram view.
98+
15. In the Agent box, click the plus icon to create a tool and click **+ Create New Tool** on the right panel.
99+
16. Select the `mult` function you just created under **Current Integrations**.
100+
17. Provide the **Tool Name** as `getMult` and click **Save Tool**.
101+
18. Click the agent box and enter `Math Tutor` as the role and enter the instructions as `"You are a school tutor assistant. Provide answers to students' questions so they can compare their answers. Use the tools when there is query related to math".` Then click **Save**.
102+
19. From the left side panel, click **+** on the **Configurations**, and add the following configurables,
92103

93104
| Variable | Type |
94105
|---------------------|------------|
@@ -97,25 +108,26 @@ This redirects you to the overview page of the AI Agent. Now, let's develop the
97108
| `deploymentId` | `string` |
98109
| `serviceUrl` | `string` |
99110

100-
## Step 5: Push to Devant <!-- Todo Update this if this is supported by the Ballerina Integrator extension itself -->
111+
<a href="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/add-tool.gif"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/add-tool.gif" alt="Add as a Tool" width="80%"></a>
112+
113+
## Step 5: Push to Devant
101114
1. Click the **Source Control** icon on the sidebar.
102115
2. Click **+** to stage all changes.
103116
3. Add an appropriate commit message and commit.
104117
4. Click **Sync Changes** to push the changes to remote.
105-
5. Go back to the **Design** view using the back arrow on the top left coner.
118+
5. Go back to the **Design** view using the back arrow in the top left corner.
106119
6. From the right side panel, click the **View in Devant** to view this integration in Devant.
107120

108-
## Step 6: Test and Consume AI Agent
121+
## Step 6: Test AI Agent
109122
1. Once you push the changes, the overview page of the Devant AI Agent will automatically refresh and show you the **Latest Commit** and automatically builds and shows the **Build Status**.
110123

111124
!!! note
112125
The build process may take some time. Once complete, the build status changes to **Success**. You can see the Build History by clicking **Build** in the left navigation.
113126

114127
2. Once the **Build Status** shows `Build completed`, it will be automatically deployed into the development card.
115-
3. Send a prompt to test your Math Tutor agent, such as `What is 2343282 * 392011`. Even though typically LLMs are bad at large multiplication, this agent has tool support to give an accurate answer.
128+
3. Send the prompt `What is 2343282 * 392011` to test your Math Tutor agent. Even though typically LLMs are bad at large multiplication, this agent has tool support to give an accurate answer.
116129

117130
<a href="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/test-agent-in-devant.gif"><img src="{{base_path}}/assets/img/get-started/deploy-your-first-ai-agent/test-agent-in-devant.gif" alt="Ballerina Integrator Icon" width="80%"></a>
118131

119-
4. After successfully testing, you can promote your AI Agent to production by clicking **Promote** button.
120-
132+
4. After successfully testing, you can promote your AI Agent to production by clicking the **Promote** button.
121133
5. Once deployed to production, you can access your AI Agent through the API endpoints and embed it in your applications.

en/docs/quick-start-guides/schedule-your-first-automation.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@ This redirects you to the overview page of the automation. Now, let's design the
5757
## Step 3: Set up Ballerina Integrator for the first time
5858
1. Click the Ballerina Integrator icon on the sidebar.
5959

60-
<a href="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-icon.png"><img src="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-icon.png" alt="Ballerina Integrator Icon" width="80%"></a>
60+
<a href="{{base_path}}/assets/img/get-started/bi-icon.png"><img src="{{base_path}}/assets/img/get-started/bi-icon.png" alt="Ballerina Integrator Icon" width="80%"></a>
6161

6262
2. Click **`Set Up Ballerina Integrator`**. The setup wizard installs and configures the [Ballerina](https://ballerina.io/) distribution required for the Ballerina Integrator.
6363
3. Click **`Restart VS Code`** to complete the setup.
6464

65-
<a href="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-setup.gif"><img src="{{base_path}}/assets/img/get-started/schedule-your-first-automation/bi-setup.gif" alt="Ballerina Integrator Setup" width="80%"></a>
65+
<a href="{{base_path}}/assets/img/get-started/bi-setup.gif"><img src="{{base_path}}/assets/img/get-started/bi-setup.gif" alt="Ballerina Integrator Setup" width="80%"></a>
6666

6767
## Step 4: Develop automation in VSCode
6868
1. Go to the Overview page of the integration you have created and click **Develop in Ballerina Integrator**. This will clone your project and open in Ballerina Integrator.

0 commit comments

Comments
 (0)