Using App Spaces to build a chat agent with OpenAI’s Node.js SDK

Did you know that OpenAI has an SDK for Node.js?

Well maybe you did, but I certainly didn’t. Whenever someone talks about any type of AI-based application, they're almost always talking about Python. So, it was a welcome surprise for me to discover it since I'm way more familiar with Node than Python.

 

I decided to give the Node SDK a go just to see how well it works and stumbled upon a great cookbook tutorial by OpenAI. I took most of the code from that sample as-is, wrote a static front-end chat client for it, and then wired it up as a sample space called “Activity Planner Agent” that you can easily deploy in App Spaces.  The only prerequisite is that you’ll need an OpenAI API key, which we’ll walk through below.

 

And if you’re interested in seeing the code for the sample space, check it out here.

 

 

 

First, what is App Spaces?

App Spaces is a new experience which is designed to simplify the process of building end-to-end applications in Azure. Here’s how it stands out:

 

1. Visual Design Interface: App Spaces provides a simple interface that helps you visualize your architecture, making it easier to build and manage your applications end-to-end.
2. Automatically chooses the best service to host your code: One of the biggest challenges in building applications is deciding which services to use. App Spaces removes this complexity by analyzing your code and choosing for you.
3. Simple but doesn’t box you in: While App Spaces removes unnecessary complexity for you, it still gives your application the room to grow for when you inevitably get the point where you’ll need more of the advanced features that Azure has to offer.

 

Learn more about App Spaces here

 

Getting started

 

The simplest way to get started is to just deploy the sample space called “Activity Planner Agent” from here.  After deploying, you can click on the link “Open app in browser” on your Static app component.

 

 

 

After loading for the first time, the agent will walk you through a few simple steps to get your own OpenAI API key and add it to your app.

 

 

 

After generating your OpenAI API key and adding it to your backend app component, your settings should look something like this:

 

 

 

And that’s it!  Now you can run your fully functional chatbot which specializes in helping you to plan activities based on your location and weather.  Go ahead and reload the page which has your chat bot UI in it.

 

 

 

Okay great it’s basically just another chat bot.  So what?

Yes, everyone is building chat bots these days, but this sample is more than just a passthrough interface for ChatGPT.  It uses the function calling feature of OpenAI to allow your agent to enhance what your model is capable of.  The cookbook which this is built upon will go into way more detail about this, but here’s a simplification of how this all works.

 

Initialization

To start, we initialize a chat completions session like so:

 

  const response = await openAi.chat.completions.create({
    model: "gpt-4",
    messages: messages,
    tools: tools,
  });

 

 

1. Model – In this case we’re using the GPT-4 model.
2. Messages – In the beginning, this only has the system message which sets the “persona” of what you want the model to take.  In this case we set this to “You are a helpful assistant. Only use the functions you have been provided with.”
3. Tools – This is the really cool part which adds the function calling capability.  You basically tell it what functions you can run for in order to get more information.  In our case we pass the metadata for 2 functions, getLocation and getCurrentWeather.  If the model needs any information about the your location or the weather for a specific location, it will ask you to run these functions and return their results.

 

Respond to a question

To illustrate how function calling works, I drew up a quick diagram.  Basically when you ask a question, we send over the question with all of the tools at our disposal to OpenAI.  OpenAI needs more context about our location, so it asks for your location (getLocation).  Then it needs more context about the weather (getCurrentWeather), so it asks for the weather in your location.  Once it has all that information, it can give you a list of activities that might be interesting for your situation.

 

 

To get an idea of the information being passed back and forth to the completions API, I also added a toggle which lets you visualize the conversation a bit better (Note: I purposely censored some of the output just in case)

 

 

Putting it all together with App Spaces

So, we’ve talked about the easy way to deploy this sample space, and a bit about how you could build an AI agent on App Spaces, but now you might be thinking: “Well anyone can deploy a pre-configured template.  But how would I do this from scratch!?”  Well, the surprising thing is that with App Spaces, putting it all together from scratch isn’t much more difficult.  Here’s the steps you need to take:

 

1. Fork this repo - https://github.com/azure-template-resources/chatbot-react-nodejs
2. Create a new App Space – Click here and choose to deploy from “GitHub repository”
3. Create your static front-end: Login to GitHub and choose your forked repository.  Make sure to select the “/client” folder to start.  Then hit deploy.
4. Create your backend app: Click on “Add component” and choose the same repository but this time select the “/server” folder.  Then hit deploy.
5. Secure your connection between components: Click on the “link” icon and complete the connection.

 

And that’s it!  From here you would be in the exact same position as you would be if you had gone the simple route of deploying the sample space from the beginning of this post.  Hopefully now you’ll have a better idea of the types of applications you can build with App Spaces and how easy it is to piece each component together to form your end-to-end application.

 

To continue your App Spaces journey, here’s a few posts you may be interested in checking out:

 

• Building a full-stack app with Google Authentication – Learn how simple it is to lock down your app with authentication and authorization
• Take your intelligent app to the next level and learn How to build a Retrieval-augmented generation (RAG) app on App Spaces
• Application logging with App Spaces – Learn how App Spaces simplifies application logging in Azure