Now that we have been able to deploy a couple of template AI-Agents, let's connect our AI-Agent to a 3rd party API through HTTP request. We will use the OpenAI AI-Agent Contract for this example.
View the example code here. The code is based on the guide on how to build an agent from the OpenAI Cookbook.
Overview
In this tutorial, you will learn how to create an agent with 2 functions to enable function calling for your agent. The 2 functions we will implement are:
getLocation() - Get the current location (latitude, longitude) based on the IP of the worker node if no location is described in the user prompt.
getWeatherData(latitude, longitude) - Get the current weather data based on the latitude and longitude retrieved from getLocation().
These two functions will be described for your agent to understand the purpose of the functions. Then we will set the system prompt for the agent with:
You are a helpful assistant. Only use the functions you have been provided with.
Getting Started
Prepare
Clone git repo or use degit to get the source code.
In this step, we will create our 2 functions getLocation() and getWeatherData(latitude, longitude) then we will describe our functions for the agent to understand how to use the functions.
Go to your src/index.ts file, your initial file should look like the following.
For the getLocation() function, we will need to call an API to get the location based on https://ipapi.co/. Traditionally, devs will not have access to the internet, but with Phala's AI-Agent Contracts, devs now can make async HTTP calls to bring more data for fine tuning their agents.
The implementation is simple and we will add this following code.
For our OpenAI agent to understand the purpose of these functions, we need to describe them using a specific schema. We'll create an array called tools that contains one object per function. Each object will have two keys: type, function, and the function key has three subkeys: name, description, and parameters.
consttools= [ { type:"function", function: { name:"getCurrentWeather", description:"Get the current weather in a given location", parameters: { type:"object", properties: { latitude: { type:"string", }, longitude: { type:"string", }, }, required: ["longitude","latitude"], }, } }, { type:"function", function: { name:"getLocation", description:"Get the user's location based on their IP address", parameters: { type:"object", properties: {}, }, } },];constavailableTools= { getCurrentWeather, getLocation,};
Add Agent Functionality
Setup Messages for Agent
We need to define a messages array. This will keep track of all of the messages back and forth between our app and OpenAI. Here we create a type MessageInfo that will be the fields that may be included in the messages array.
The first object in the array should always have the role property set to "system", which tells OpenAI that this is how we want it to behave.
typeMessageInfo= { role:any, content:any, name?:any,}constmessages:MessageInfo[] = [ { role:"system", content:`You are a helpful assistant. Only use the functions you have been provided with.`, },];
Create Agent Function For User Input
We are now ready to build the logic of our app, which lives in the agent function. It is asynchronous and takes one argument: the userInput.
We start by pushing the userInput to the messages array. This time, we set the role to "user", so that OpenAI knows that this is the input from the user.
Next, we'll send a request to the Chat completions endpoint via the chat.completions.create() method in the Node SDK. This method takes a configuration object as an argument. In it, we'll specify three properties:
model - Decides which AI model we want to use (in our case, GPT-4).
messages - The entire history of messages between the user and the AI up until this point.
tools - A list of tools the model may call. Currently, only functions are supported as a tool., we'll we use the tools array we created earlier.
Turn OpenAI Agent Response into Functions
Now that we have the name of the function as a string, we'll need to translate that into a function call. To help us with that, we'll gather both of our functions in an object called availableTools:
This is handy because we'll be able to access the getLocation function via bracket notation and the string we got back from OpenAI, like this: availableTools["getLocation"].
We're also grabbing ahold of any arguments OpenAI wants us to pass into the function: message.tool_calls[0].function.arguments. However, we won't need any arguments for this first function call.
If we run the code again with the same input ("Where am I located right now?"), we'll see that functionResponse is an object filled with location about where the user is located right now. In my case, that is Oslo, Norway.
We'll add this data to a new item in the messages array, where we also specify the name of the function we called.
messages.push({ role:"function", name: functionName, content:`The result of the last function was this: ${JSON.stringify( functionResponse )} `,});
Notice that the role is set to "function". This tells OpenAI that the content parameter contains the result of the function call and not the input from the user.
At this point, we need to send a new request to OpenAI with this updated messages array. However, we don’t want to hard code a new function call, as our agent might need to go back and forth between itself and GPT several times until it has found the final answer for the user.
This can be solved in several different ways, e.g. recursion, a while-loop, or a for-loop. We'll use a good old for-loop for the sake of simplicity.
Creating The Loop
At the top of the agent function, we'll create a loop that lets us run the entire procedure up to five times.
If we get back finish_reason: "tool_calls" from GPT, we'll just push the result of the function call to the messages array and jump to the next iteration of the loop, triggering a new request.
If we get finish_reason: "stop" back, then GPT has found a suitable answer, so we'll return the function and cancel the loop.
for (let i =0; i <5; i++) {constresponse=awaitopenai.chat.completions.create({ model:"gpt-4", messages: messages, tools: tools, });const { finish_reason,message } =response.choices[0];if (finish_reason ==="tool_calls"&&message.tool_calls) {constfunctionName=message.tool_calls[0].function.name;constfunctionToCall= availableTools[functionName];constfunctionArgs=JSON.parse(message.tool_calls[0].function.arguments);constfunctionArgsArr=Object.values(functionArgs);constfunctionResponse=awaitfunctionToCall.apply(null, functionArgsArr);messages.push({ role:"function", name: functionName, content:` The result of the last function was this: ${JSON.stringify( functionResponse )} `, }); } elseif (finish_reason ==="stop") {messages.push(message);returnmessage.content; }}return "The maximum number of iterations has been met without a suitable answer. Please try again with a more specific input.";
If we don't see a finish_reason: "stop" within our five iterations, we'll return a message saying we couldn’t find a suitable answer.
Update GET() and POST()
Now we need to call our agent(openai, userInput) in our GET and POST calls that will pass in a users prompt that can be accessed in the chatQuery property. The code change is minimial and our functions look like the following.
Now that we have the code implemented to interact with APIs and call the functions, let's test the code locally. You will need to setup your .env file with your OpenAI API Key.
Create .env file and add your OpenAI API Key
cp .env.local .env
In .env file replace YOUR_OPENAI_KEY with your API Key
OPENAI_API_KEY="YOUR_OPENAI_KEY"
Build your Agent
npm run build
Test your Agent locally
npm run test
Expected output:
INPUT: {"method":"GET","path":"/ipfs/QmVHbLYhhYA5z6yKpQr4JWr3D54EhbSsh7e7BFAAyrkkMf","queries":{"chatQuery":["Please suggest some activities based on my location and the weather."]},"secret":{"openaiApiKey":"OPENAI-KEY"},"headers":{}}
GETRESULT:{status:200,body:'\n'+' <!DOCTYPE html>\n'+' <html lang="en">\n'+' <head>\n'+' <meta charset="utf-8" />\n'+' <title>AI-Agent Contract Demo UI</title>\n'+' </head>\n'+' <body>\n'+' <div align="center">\n'+ ' <p>"OpenAI AI-Agent Contract hosted on <a href="https://github.com/Phala-Network/ai-agent-template-openai">Phala Network</a>, a DePIN infrastructure for hosting AI-Agents."</p>\n' +
' <img src="https://i.imgur.com/8B3igON.png" width="600" alt="AI-Agent Contract" />\n'+ ' <p>Based on your location in Dallas, Texas, and the current weather, here are some activities you might enjoy:\n' +
'\n'+ '1. Walk in the Klyde Warren Park: The weather seems mild and suitable for outdoor activities. You could enjoy a walk or picnic at the Klyde Warren Park. \n' +
'\n'+ '2. Visit the Dallas Museum of Art: If you prefer an indoor activity, the Dallas Museum of Art is a great option to explore some incredible art pieces.\n' +
'\n'+ "3. Explore the Dallas Farmers Market: It's the perfect place to find local produce and unique handmade items while enjoying the pleasant weather.\n" +
'\n'+ '4. Dallas World Aquarium: An excellent indoor option for a humid day. Look at different species of aquatic and terrestrial animals in the beautiful Dallas World Aquarium.\n' +
'\n'+ 'Always remember to check any COVID-19 precautions or restrictions before visiting these public places. Enjoy your time in Dallas!</p>\n' +
' </div>\n'+' </body>\n'+' </html>',headers:{'Content-Type':'text/html; charset=UTF-8','Access-Control-Allow-Origin':'*' }}INPUT: {"method":"POST","path":"/ipfs/QmVHbLYhhYA5z6yKpQr4JWr3D54EhbSsh7e7BFAAyrkkMf","queries":{"chatQuery":["What are some activities based in London today?"]},"secret":{"openaiApiKey":"OPENAI-KEY"},"headers":{},"body":"{\"untrustedData\":{\"fid\":2,\"url\":\"https://fcpolls.com/polls/1\",\"messageHash\":\"0xd2b1ddc6c88e865a33cb1a565e0058d757042974\",\"timestamp\":1706243218,\"network\":1,\"buttonIndex\":2,\"castId\":{\"fid\":226,\"hash\":\"0xa48dd46161d8e57725f5e26e34ec19c13ff7f3b9\"}},\"trustedData\":{\"messageBytes\":\"d2b1ddc6c88e865a33cb1a565e0058d757042974...\"}}"}
POSTRESULT:{status:200,body:'\n'+' <!DOCTYPE html>\n'+' <html lang="en">\n'+' <head>\n'+' <meta charset="utf-8" />\n'+' <title>AI-Agent Contract Demo UI</title>\n'+' </head>\n'+' <body>\n'+' <div align="center">\n'+ ' <p>"OpenAI AI-Agent Contract hosted on <a href="https://github.com/Phala-Network/ai-agent-template-openai">Phala Network</a>, a DePIN infrastructure for hosting AI-Agents."</p>\n' +
' <img src="https://i.imgur.com/8B3igON.png" width="600" alt="AI-Agent Contract" />\n'+ ' <p>Based on the current weather in London, which seems to be cool, here are some suggestions on activities you might consider:\n' +
'\n'+ "1. Visit the British Museum: One of the world's oldest museums, it houses a vast collection of world art and artefacts, and it's absolutely free to visit.\n" +
'\n'+ '2. Explore the Natural History Museum: Another indoor activity, this museum offers a range of varied and large-scale exhibitions. \n' +
'\n'+'3. Explore Covent Garden: Discover a variety of unique shops, cafes, and event spaces.\n'+'\n'+ "4. Take in a West End Show: The weather seems perfect for catching a performance at one of London's many theatres.\n" +
'\n'+'5. Tour the Tate Modern: Home to an incredible collection of modern and contemporary art.\n'+'\n'+'6. Visit the Tower of London: Explore this historic castle located on the north bank of the River Thames.\n'+'\n'+ 'Remember to check any local restrictions or entry requirements due to COVID-19, and stay safe. Enjoy exploring London!\n' +
'</p>\n'+' </div>\n'+' </body>\n'+' </html>',headers:{'Content-Type':'text/html; charset=UTF-8','Access-Control-Allow-Origin':'*' }}
Publish & Interact with Agent
With our test passing and everything working as expected, now we can build and publish our agent code to IPFS. Then we will set our secrets and access our deployed agent via the Phala Gateway at https://frames.phatfn.xyz/ipfs/<cid>?key=<key_id>&chatQuery=<chat_query>.
Upload your compiled AI-Agent code to IPFS.
npmrunpublish
Upon a successful upload, the command should show the URL to access your AI-Agent.
Successfully linked your account to this device
- Uploading file to IPFS. This may take a while depending on file sizes.
✔ Successfully uploaded file to IPFS.
✔ Files stored at the following IPFS URI: ipfs://QmRZe6yKPpWWkTgkcuc71JT8cACnXHsiiS8CFhdWeHaa6d
✔ Open this link to view your upload: https://bafybeibp43wskf3n6hecranyyrsmhsfmwp47ai6n3basbiijxfjrprr2oi.ipfs.cf-ipfs.com/
AI-Agent deployed at: https://frames.phatfn.xyz/ipfs/QmRZe6yKPpWWkTgkcuc71JT8cACnXHsiiS8CFhdWeHaa6d
Make sure to add your secrets to ensure your AI-Agent works properly.
Add Secret
The steps to add a secret is simple. We will add the OpenAI API Key in this example by creating a secret JSON object with the openaiApiKey:
{"openApiKey":"<OPENAI_API_KEY>"}
Then in your frame code, you will be able to access the secret key via req.secret object:
Note: Before continuing, make sure to publish your compiled AI-Agent JS code, so you can add secrets to the CID.
Open terminal Use curl to POST your secrets to https://frames.phatfn.xyz/vaults. Replace IPFS_CID with the CID to the compile JS code in IPFS, and replace <OPENAI_API_KEY> with your OpenAI API key.
The API returns a token and a key. The key is the id of your secret. It can be used to specify which secret you are going to pass to your frame. The token can be used by the developer to access the raw secret. You should never leak the token.
To verify the secret, run the following command where key and token are replaced with the values from adding your secret to the vault.
Now that your agent is deployed, you can access the agent through a curl request or insert the url with the key and chatQuery defined. Here is an example of the code from the tutorial we just walked through.