Agent Builder Quickstart

Click the Build an agent button in the top right corner of the page.

In the modal that appears, select New Agent to create a new agent from scratch.

Once the agent is created, a new tab will open in your browser with the Agent Builder interface.

You can get to the Agent Builder interface any time by going to the AI Studio homepage and selecting the agent you created.

You’ll see the Configure Deployment page when you select the agent. To get to the edit interface, click the Edit button in the top right corner.

Navigate to the Interface view. Then select the Interface Layers section in the left sidebar.

Click the top Page component from the UI component tree.

Then click the three vertical dots on the Page’s settings menu to find the Delete option.

Your Component Tree should now contain a single Root component.

Click Add page at the bottom of the component tree to create a new blank page.

Navigate to the Blueprints view. Then select the Blueprints Layers section in the left sidebar.

Click the first component under Blueprints Root. Here, the component is a blueprint called BUTTON@CLICK_1.

Then click the three vertical dots on the blueprint’s settings menu to find the Delete option.

Your blueprint’s component tree should now be empty.

Click Add blueprint at the bottom of the component tree to create a new blank blueprint.

Make sure you are in the Interface view. Then open the Add block section in the left sidebar and search for the Textarea Input component in the component library.

Click and drag the Textarea Input component onto the canvas.

Click the Textarea component you just added to edit its settings. Update the following settings:

• Label: Meeting notes
• Placeholder: Paste your meeting notes here.
• State element under Binding: meeting_notes. This allows the blueprint to access the meeting notes content whenever the user updates it.

The component should now look like this:

Search for the Dropdown Input component in the component library on the left side of the page.

Click and drag the Dropdown Input component onto the canvas.

Click the Dropdown Input component you just added to edit its settings. Update the following settings:

• Label: Summary format
• Options: Add the options you want to display in the dropdown. For this example, add the following options, with the key and the value both set to the option name.
  • Executive brief
  • Action items only
  • Full summary
  • Key decisions
• State element under Binding: summary_format. This allows the blueprint to access the selected format whenever the user changes it.

The component should now look like this:

Search for the Button component in the block library on the left side of the page. Then click and drag the Button component onto the canvas.

Click the Button component you just added to open its settings. Update the following settings:

• Text: Generate summary

The component should now look like this:

Search for the Message component in the block library. Then click and drag the Message component onto the canvas.

Click the Message component you just added to edit its settings. Update the following settings:

• Message: @{status}. This reads from the status state variable, which the blueprint will set to indicate the progress of the summarization.

The component should now look like this:

Search for the Text component in the block library on the left side of the page. Then click and drag the Text component onto the canvas.

Click the Text component you just added to edit its settings. Update the following settings:

• Text: @{summary}. This displays the value of the summary state variable, which the blueprint sets to the meeting summary.
• Use Markdown: Select Yes. This allows you to use markdown formatting in the text.

The component should now look like this:

Make sure you are in the Blueprints view. Then open the Add block section in the left sidebar and search for the UI trigger block in the blueprints toolkit.

Click and drag the UI trigger block onto the canvas.

Click the UI trigger block you just added to edit its settings. Update the following settings:

• Component ID: Select the button component (it should show as Generate summary)
• Event type: wf-click. This triggers the blueprint when the user clicks the Generate summary button in the UI.

The block should now look like this:

Search for the Set state block. Then click and drag the Set state block onto the canvas.

Connect the Set state block to the UI trigger block by dragging a line from the green dot on the UI trigger block to the Set state block. This tells the blueprint to execute the Set state block after the UI Trigger completes.

Click the Set state block you just added to edit its settings. Update the following settings:

• State element: status
• Value: % Generating summary. The % symbol indicates that the message should display a dynamic loading symbol.

The Message component in the UI displays the loading message when this block is executed.

The block should now look like this:

Search for the Text generation block in the block library. Then click and drag the Text generation block onto the canvas.

Connect the previous Set state block to this Text generation block. Drag a line from the green dot on the Set state block to the Text generation block. This tells the blueprint to execute the Text generation block after the Set state block completes successfully.

Click the Text generation block you just added to edit its settings. Update the following settings:

• Prompt: Enter the following prompt. This prompt references the meeting_notes and summary_format state variables, which you set up in the UI. It instructs the agent to summarize the meeting notes and defines the different formats.

Summarize these meeting notes based on the requested format:

Meeting Notes: @{meeting_notes}
Format: @{summary_format}

Guidelines for each format:
- Executive brief: Create a concise 2-3 sentence overview focusing on high-level outcomes and decisions for leadership
- Action items only: List only the specific action items, who is responsible, and deadlines
- Full summary: Provide a comprehensive summary including discussion points, decisions, action items, and next steps
- Key decisions: Focus specifically on decisions made during the meeting and their implications

Format the output appropriately for the selected format type.

The block should now look like this:

Search for the Set state block in the block library. Then click and drag the Set state block onto the canvas.

Connect the new Set state block to the Text generation block. Drag a line from the green dot on the Text generation block to the new Set state block. This tells the blueprint to execute the new block after the Text generation block completes successfully.

Click the Set state block you just added to edit its settings. Update the following settings:

• State element: summary
• Value: @{result}. The result environment variable is the output of the previous Text generation block.

The block should now look like this:

Search for the Set state block in the block library. Then click and drag the Set state block onto the canvas.

Connect the new Set state block to the previous Set state block. Drag a line from the green dot on the previous Set state block to the new Set state block. This tells the blueprint to execute the new block after the previous block completes successfully.

Click the Set state block you just added to edit its settings. Update the following settings:

• State element: status
• Value: Leave the Value blank. This clears the status state variable.

The block should now look like this: