Monday, October 23, 2023

Playing with PVA's HTTP Requests: An Introductory Tic-Tac-Toe Duel with OpenAI's GPT-4

Prompt (Expand to see prompt used)

When exploring the capabilities of PVA's new Send HTTP request feature, we decided to embark on a playful, yet instructional venture: integrating a game of Tic-Tac-Toe with OpenAI's GPT-4. While it's unlikely you'd actually deploy a game of Tic-Tac-Toe via a chatbot, this exercise offers invaluable insights into harnessing some of PVA's advanced features.

1. Setting Up AI Conversation Structure

System Prompt: Every interaction with GPT-4 starts with a system prompt that sets the context. For our game, the system prompt might be something like "You are an AI assistant helping the user play a game of Tic-Tac-Toe."

Initial User Prompt: This is the user's entry into the game. A simple "Let's Play" triggers the topic and sets the game in motion.

Continuing the Conversation: As the game progresses, user and assistant messages build upon each other. We employ PVA's "Modify items in a list" feature, which, for now, is exclusively accessible via YAML.

Prompt Example after first round

# If you're not familiar with generative AI interaction, GPT-4 doesn't have a memory or idea of "state" during a chat so you need to send the entire chat history of the system, assistant, and user messages with each API call you make. You can see in the screenshot above this history being built from within PVA. It's important to note that you pay for OpenAI usage by the number of tokens you use. Different AI models have different prices per tokens as well, so GPT-4 is more expensive than GPT-3.5-turbo for example, but GPT-4 is more capable.

2. Configuring HTTP Requests

To make our chatbot interact with GPT-4, we utilize the Send HTTP request node:

  • URL: Direct the request to OpenAI's GPT-4 endpoint.
  • HTTP Action: Use POST.
  • Headers: Insert the necessary authentication headers, including your API key (always ensure you handle API keys securely! More on this later).
  • Body: Construct the JSON body, which includes the conversation context and user messages.

PVA - HTTP Request Node
PVA - HTTP Request Properties

Configuring Response Data Type in PVA's Send HTTP Request Node

Handling response data accurately and efficiently is crucial to ensure your bot's interactions are relevant and meaningful. PVA's Send HTTP request node comes equipped with powerful features that simplify this process, especially when dealing with structured data like JSON. Here's how to set up the "Response data type" and "Save response as" options for optimal data management:

Setting up "Response data type"

  1. Select Data Type: In the Send HTTP request node, you'll find the "Response data type" option. This defines the format of the data you expect from the endpoint. For structured data, such as from RESTful APIs, "JSON" is commonly used.

  2. Use "From sample data" Feature: One of PVA's standout features is its ability to derive the schema directly from a sample response. Click on "From sample data", and a field will appear where you can paste a sample JSON response from your endpoint.

PVA - Get Schema from sample JSON

PVA - Schema from sample JSON

By providing a sample, PVA auto-generates a schema, streamlining the data extraction process for future responses. This is especially beneficial for endpoints that return complex or nested JSON structures, as it saves significant time and minimizes errors.

Configuring "Save response as"

  1. Set Response Variable Name: After defining the data type and schema, you'll need to specify where this data will be stored for future use in the bot's flow. The "Save response as" option allows you to assign a variable name to the response.

For example, if your bot is querying an endpoint for product details, you might name this variable "ProductDetails".

  1. Accessing Data: Once the data is stored in the defined variable, you can access specific attributes in subsequent nodes. For instance, if your JSON response has an attribute named "productName", you can reference it in your bot as ProductDetails.productName.

By efficiently setting up the response data type and storage variable, you're ensuring your bot can process, reference, and utilize the returned data seamlessly. Leveraging the "From sample data" feature further ensures accuracy, making your bot's interactions more dynamic and contextually relevant.

Handling Errors with PVA's Send HTTP Request Node

In any real-world application, error handling is essential, ensuring that your bot continues to function smoothly even when unforeseen issues arise. The Send HTTP request node in PVA provides built-in error handling capabilities. Here's how you can set up and handle potential errors when communicating with external services.

Setting Up Error Handling in the Node

  1. Configure "Continue on error": Within the Send HTTP request node, you'll find an option for error handling. Instead of "Raise on error", which halts the bot's operation upon encountering an error, select "Continue on error". This allows the bot to continue its process, giving you control over the subsequent actions based on the nature of the error.

  2. Set Variables for Status Code and Error Response: In addition to the response data, it's important to capture potential error details. Assign variable names for the Status Code and Error Response Body. These variables will store the HTTP status code and any error message returned by the endpoint, respectively.

PVA - HTTP Request Error Handling Properties

Implementing Conditional Error Messages

With the error details captured in variables, you can add conditions to check for errors and then decide on the subsequent actions.

  1. Add a Condition: After the Send HTTP request node, insert a "Condition" node to evaluate the status of the request.

  2. Check the Status Code Variable: Set the condition to evaluate whether the Status Code variable is not equal to Blank(). This checks if there's a value (typically an error code) present.

  3. Provide Feedback to the User: If the condition evaluates to true (indicating an error), you can route the conversation flow to display a friendly message to the user. This message can be a generic error message or, for more advanced implementations, tailored responses based on specific status codes or error messages.

Sample error handling flow in our Topic


Example error message output (could be prettier) 

Incorporating such error handling mechanisms ensures a better user experience. It gives clarity when issues arise and offers users guidance on the next steps, rather than leaving them puzzled with abrupt bot failures.

3. Displaying GPT-4's Output and Capturing User Input

In our game play, once GPT-4 responds, we're taking the message from the AI and displaying it using a Question node in PVA. This allows the user to enter their choice, which is then sent back to the AI for the next turn.

PVA - Question Node

PVA - Question Example

4. Iterative Game Loop

After each move, the chatbot loops back to the Send HTTP request node, perpetuating the game cycle until a conclusion (win, lose, or draw) is reached.

Example flow in our Topic that goes back to HTTP Request step

YAML for adding messages to the prompt

PVA - Modify items in a list properties

5. Best Practices

  • Secure Your API Key: Never hard-code API keys directly in scripts or workflows. Consider using Azure Key Vault or other secure mechanisms to store and retrieve sensitive information.
  • Manage HTTP Requests Efficiently: To avoid unnecessary API costs, ensure that your HTTP requests are efficient. Design the conversation flow in a way that minimizes redundant calls to GPT-4.
  • Error Handling: Always be prepared for potential API errors or unexpected responses. Incorporate robust error handling into your chatbot's workflow.

Demo and Conclusion

Tic-Tac-Toe demo

While playing Tic-Tac-Toe with a PVA bot isn't the most productive use of your time, it showcases the depth and versatility of PVA's toolset. Remember, the Send HTTP request feature is still in preview, so always be ready for potential shifts in its behavior or capabilities. Embrace the learning curve, and enjoy the game!

Complete YAML for the Topic

Saturday, October 21, 2023

Exploring Power Virtual Agents' New (Preview) Feature: The Send HTTP Request Node

Prompt (Expand to see prompt used)

Microsoft's Power Virtual Agents (PVA) is consistently bringing forward new tools and features to empower bot developers. The latest addition, still in preview, is the "Send HTTP request" node. In the past, developers had to rely on PowerAutomate to make these HTTP requests, but this new feature simplifies the entire process. Here's an exploration into the feature, along with a couple of challenges I faced and their solutions.

Setting Up the Send HTTP Request Node

To integrate this new node, follow the steps below:

  1. Inserting the Node: Begin by clicking on the plus icon within your PVA canvas.
  2. Navigating to the Feature: Click on "Advanced" and select the "Send HTTP request" option.
  3. Configuring the Node:
    • URL: Specify the URL endpoint you want to communicate with.
    • HTTP Action: Choose the appropriate HTTP action (GET, POST, etc.).
    • Response Type and Variable Name: Define the response type (JSON, String, etc.) and assign a variable name for the response data.
    • HTTP Headers and Body Value: Add any required headers. If your request needs a body, especially for POST, PUT, etc., fill it in appropriately.
    • Error Handling: Choose between "raise on error" (which stops the bot) or "continue on error".

PVA Simple HTTP Get

Challenges and Solutions

Unexpected JSON Encoding

One peculiar issue I encountered was when attempting to POST an HTTP request using straight JSON as the body. The HTTP serializer they seem to be using (possibly the System.Text.Json.JsonSerializer.Serializer) treated the JSON output as a string, converting special characters like " to Unicode \u0022 and ' to Unicode \u0027. This causes hiccups if the receiving endpoint can't decode these Unicode characters properly.

PVA - HTTP POST with JSON content

Beeceptor.com HTTP capture

Solution: To workaround this, you can do one of the following:

  • Change the type from JSON to Formula
PVA - HTTP POST with JSON content editing formula

Beeceptor.com HTTP capture
  • Change the Body option from "JSON content" to "RAW content" and set the content type as 'application/json'.
PVA - HTTP POST with Raw content

Beeceptor.com HTTP capture

# Didn't like the original text comparing the results, had ChatGPT rewrite

Prompt (Expand to see prompt used)
When testing the adjustments and dispatching requests to Beeceptor.com, the effects on the request body were clear:

  • Utilizing the default "JSON content" option led to the encoding of special characters.
  • On the other hand, two solutions surfaced:
    1. Switching to "RAW content" preserved the original JSON structure without any undesired encoding.
    2. Keeping "JSON content" but using a formula also prevented the encoding issues.

Misleading Error with Incorrect Response Type

Another stumble was setting the Response data type. Initially, I had it set to String, even though the actual response was a JSON object. I presumed it'd simply store the entire body into the string. To my surprise, this setup caused the bot to reply with "Sorry, something went wrong. Error code: SystemError"—not very elucidating.

Solution: After some head-scratching, I tried the "from sample data" feature to set the response type. Lo and behold, the bot sprang back to action, functioning seamlessly.

Concluding Thoughts

The Send HTTP request node is a significant leap towards more streamlined bot-building in PVA. By removing the dependency on PowerAutomate for HTTP actions, this feature adds another layer of versatility and convenience. As with any new feature, there are growing pains, but solutions aren't far behind. Keep an eye out for more of our blogs diving deeper into PVA's evolving landscape.


This feature is in preview, so functionalities and behaviors may change over time.

Friday, October 20, 2023

Adding Input Parameters to Microsoft Power Virtual Agents Topics

Prompt (Expand to see prompt used)
# I thought the introduction could use more explanation of how input parameters are normally created, so here's my additional prompt
Prompt (Expand to see prompt used)

Introducing Input Parameters in PowerVirtualAgents: Beyond the Usual Route

In the world of Power Virtual Agents, creating a seamless flow for data between various topics is both an art and a science. The conventional wisdom is to employ a question node to set up an input parameter. By designating the variable to "Receive values from other topics", we can ensure the topic procures the necessary information, even directly from the user when the parameter isn't specified. It's an intuitive approach, particularly when the parameter is imperative for the conversation to progress.

However, this brings us to an interesting quandary: What happens when we're content with a default value, specifically the Blank()? What if the input parameter isn't always mandatory and we want to circumvent that additional user prompt? The answer lies in an alternative, nuanced approach that we're delving into today.

Join us as we navigate the subtleties of Power Virtual Agents, and discover how to enhance our bot's flexibility without overburdening the user.


Input parameters are a useful feature in Microsoft Power Virtual Agents that allow you to pass data when calling topics from other topics. It provides more flexibility and dynamism in shaping user experiences. Today, we'll guide you through the process of adding these parameters via YAML file editing.

Setting up a Topic with Input Parameters:

Here's how you can set it up:

  1. Create a New Blank Topic: Begin by initiating a new topic.

  2. Change Trigger Type to Redirect: Instead of the default trigger type, opt for the 'redirect' type. This allows your topic to be initiated from another topic, passing in any necessary data.

    # A Topic doesn't need to be explicitly setup with a redirect trigger in order to be called from another topic, it just ensures that the topic isn't accidentally called form a trigger phrase. Additionally you can declare input parameters on any trigger, I think, haven't tried all trigger types yet.

  3. Open Code Editor for YAML: Access the YAML editor in Power Virtual Agents to manually edit the topic definition.

  4. Paste the Example YAML into Editor:

  5. Close the Code Editor: Once you've added your input parameter, save and close the editor.

  6. Add Conditions Based on the New Input Parameter: Now, you can set conditions in your topic that react differently depending on the value of DisplayOutput.

PVA Variables window after adding Input parameter

The final YAML structure should resemble:

Calling Your New Topic with Input Parameters:


After setting up a topic with input parameters, you can call it from another topic. Here’s how:

  1. Create a New Topic: Start by creating a new topic from which you’ll call your redirect topic.

  2. Add a Trigger Phrase: Add a phrase which, when uttered by a user, will trigger this topic.

  3. Add a New Node to Redirect: Add a node in your flow that redirects to the topic with the input parameter.

  4. Click on "Add Input" and Select Your Input Parameter: From the options, select 'DisplayOutput'.

  5. Provide the Value to Pass to the Input Parameter: For our example, we’ll pass a value of 'false' to the 'DisplayOutput' parameter.

The YAML for this calling structure will look something like:

That's it! You've now successfully added input parameters to a Power Virtual Agents topic via YAML editing and called it from another topic. This provides a robust way to manage inter-topic data flow and make your bots even more interactive.

# Forgot to instruct the AI to create a section to see the bot in action, so here we go

Prompt (Expand to see prompt used)

The Bot in Action: Visualizing the Input Parameter Difference

Having dived deep into the nuts and bolts of Power Virtual Agents, the real charm is in witnessing the subtle yet impactful differences in the user experience. Let's see how the bot behaves differently based on our input parameters.

Scenario: We've set up two distinct triggers to test our bot's response based on the DisplayOutput parameter.

  1. Testing "Redirect with Output"

    User Interaction: The user types in, "Test redirect with output."

    Bot's Response:

    Hello from RedirectTopic
    

    Here, our bot provides feedback upon redirection. The DisplayOutput parameter is presumably set to 'true', prompting the bot to display the message.

  2. Testing "Silent Redirect"

    User Interaction: The user enters, "Test silent redirect."

    Bot's Response:

    [No message displayed]
    

    In this interaction, the bot stays silent after redirection. This indicates that our DisplayOutput parameter is set to 'false', instructing the bot not to display any message post-redirect.


Analyzing the Outcomes:

This real-time experiment showcases the agility of our bot, driven by input parameters. While the distinction might seem minor, it has profound implications for user experience:

  • User Clarity: The explicit "Hello from RedirectTopic" message can be reassuring for users, indicating that the bot has processed their request.
  • Efficiency: The silent redirect, on the other hand, is swift and efficient, especially for tasks that need no extraneous feedback.

Engaging with the bot using these two triggers vividly brings out the underlying mechanism we've set up. It's a testament to how fine-tuned control over bot responses can lead to varied and tailored user experiences.


In essence, this hands-on interaction underlines the beauty of Power Virtual Agents: the platform’s capability to cater to diverse user needs, all governed by a simple parameter change in the background.

Sunday, October 15, 2023

Boosting Website Interactivity with Power Virtual Agents (PVA)

Prompt (Expand to see prompt used)

In the ever-evolving landscape of AI-driven web experiences, Microsoft's Power Virtual Agents (PVA) is taking the lead, pushing the boundaries of what's possible. Imagine a user landing on your website, curious about logging in, exploring products, or even customizing a piece of furniture. With PVA, these interactions go beyond mere text-based responses. Instead, they become dynamic engagements, driving visual highlights and actions on the web page. Let's delve into this exciting confluence of PVA and web development.

Setting Up PVA Topics

For the scope of this tutorial, let's consider a user might ask:

  1. How do I login?
  2. What chairs do you sell?
  3. What are your customers saying?
  4. How do I design my own couch?

Now, instead of just sending back a text message, PVA, through configured topics, can send an event with a JSON payload. This payload, containing special instructions, can direct the website to perform certain actions.

Interacting via JavaScript

The heart of this interaction lies in the JavaScript, especially within the window.onload function, as this is where the PVA bot is initialized and set to handle incoming events. Let's dissect this:

  1. Bot Initialization: The bot endpoint is fetched, and the PVA bot is rendered onto the website.
  2. Handling Events: As soon as the bot connection is established (DIRECT_LINE/CONNECT_FULFILLED), it dispatches an event to start the conversation. When the bot sends back an event (DIRECT_LINE/INCOMING_ACTIVITY), the corresponding action, whether it's highlighting an element or adding to cart, is executed.

A Glimpse into PVA's YAML Configuration

But how does the PVA bot know what event to send? The answer lies in the topic configuration. Take a look at the YAML for the "Login" topic:

Upon the query "How do I login?", PVA sends back an EventActivity named ShowElement to highlight the login element on the website.

Interactive Experience in Action


Witness this seamless interaction for yourself. Dive into the full demo here. And if you're keen on getting hands-on, the complete code repository awaits you here.

In Conclusion

The integration of Power Virtual Agents with websites represents a leap in interactive web experiences. With PVA at the helm, every website visit becomes a dynamic, engaging journey, making AI-driven interactivity not just a luxury but the new norm.

Saturday, October 14, 2023

Welcome to the Future of Blogging: An AI-Powered Adventure!

Prompt (Expand to see prompt used)

Hello and welcome, dear readers!

I'm thrilled to introduce you to this cutting-edge endeavor. Our blog is a little different from what you might be used to. It's authored by none other than ChatGPT, an advanced AI model designed by OpenAI. Yes, you read that right! The words you're consuming right now are crafted not by a human, but by an intricate web of algorithms and data.

Transparency is Key

As we embark on this journey, transparency remains a core principle. To maintain this:

  • Every prompt or question that is fed to ChatGPT will be displayed with a blue background.

  • The AI-generated response (like the one you're reading) will be showcased with a white background.

This color-coding is to ensure that you, our valued readers, can easily differentiate between human-input prompts and AI outputs.

We Want to Hear from YOU!

Your involvement doesn't stop at mere reading. We actively seek your ideas, feedback, and even prompts! This platform isn't just about AI showcasing its writing abilities; it's also a space for collaboration, learning, and exploration.

What topics interest you? Which questions burn in your mind? Challenge ChatGPT, and let's uncover the answers together.


Here's to the fusion of human curiosity and AI capabilities! Dive in, and let's craft a future brimming with knowledge and innovation.

Wednesday, August 30, 2023