Agent Builder Quickstart

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

Next, in the modal that appears, select Get started under Agent Builder.

Writer creates a new agent for you asynchronously. Once the agent is created, you’ll see a message that the agent is ready with a link to the Agent Builder interface. Follow the Start editing link to start building your agent.

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.

Click the Page element from the UI component tree in the bottom left.

Then click the red trashcan icon on the Page’s element settings menu to delete it.

Your Component Tree should now contain a single Root element.

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

Click the first element under Blueprints Root in the Blueprint component tree in the bottom left. Here, the element is a blueprint called button@click_1.

Then click the red trashcan icon in the blueprint’s settings menu to delete it.

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.

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

Click on the Textarea component you just added to open its settings.

Set the Label to Research paper.

Under Binding, give the State element the name research_paper. This allows the blueprint to access the value of the research paper 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. Then click and drag the Dropdown input component onto the canvas.

Click on the Dropdown input component you just added to open its settings.

Set the Label to Persona.

Add the options you want to display in the dropdown. For this example, add the following options:

• Sales
• Marketing
• Product
• Engineering

Under Binding, give the State element the name persona. This allows the blueprint to access the value of the persona whenever the user updates it.

The component should now look like this:

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

Click on the Button component you just added to open its settings.

Set the Text to Summarize.

The component should now look like this:

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

Click on the Message component you just added to open its settings.

Set the Message to @{status}. This reads from the status state variable, which the blueprint sets to indicate the progress of the summarization.

The component should now look like this:

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

Click on the Text component you just added to open its settings.

Under Text, enter @{summary}. This displays the value of the summary state variable, which the blueprint sets to the summary of the research paper.

Under Use Markdown, select Yes. This allows you to use markdown formatting in the text.

The component should now look like this:

Search for the UI Trigger element in the blueprints toolkit on the left side of the page. Then click and drag the UI Trigger element onto the canvas.

Click on the UI Trigger element you just added to open its settings.

Under Component Id, select the button called Summarize.

Under Event type, select wf-click. This triggers the blueprint when the user clicks the Summarize button in the UI.

The block should now look like this:

Search for the Set state block in the blueprints toolkit on the left side of the page. Then click and drag the Set state block onto the canvas.

Click on the Set state block you just added to open its settings.

Under State element, type status.

Set the Value to % Summarizing. The % symbol indicates that the message should display a dynamic loading symbol.

The block should now look like this:

Search for the Text generation block in the blueprints toolkit on the left side of the page. Then click and drag the Text generation block onto the canvas.

Click on the Text generation block you just added to open its settings.

Enter the following under Prompt. This prompt references the research_paper and persona state variables, which you set up in the UI.

Provide a one-paragraph summary and a list of the three most important takeaways from this research paper: @{research_paper}

Provide the summary for the user persona @{persona}

Connect the previous Set state block to this Text generation block by dragging a line from the green dot on the Set state block to the Text generation block.

The block should now look like this:

Search for the Set state block in the blueprints toolkit on the left side of the page. Then click and drag the Set state block onto the canvas.

Click on the Set state block you just added to open its settings.

Under State element, type summary.

Set the Value to @{results}. The results state 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 blueprints toolkit on the left side of the page. Then click and drag the Set state block onto the canvas.

Click on the Set state block you just added to open its settings.

Under State element, type status.

Leave the Value blank. This clears the status state variable.

The block should now look like this: