Create a Hello World Extension

In this chapter, we are going to create a Hello World extension step by step, available in Python, Go, and C++. Feel free to choose whichever language you prefer. So buckle up.

Prerequisites

Before diving into this chapter, you’ll need to be familiar with the basics covered earlier. Specifically, ensure you understand how to use docker compose up and are aware of the services running in the background.

1. Compose up the servers

First things first, let’s start by composing the servers. Run the following command:

If the caption says Terminal, it means you are running the command locally. If the caption says Bash, it means you are running the command in the Docker container.

>_ Terminal

docker compose up

Once the command is entered, you should see output similar to this:

>_ Terminal

....
Attaching to astra_agents_dev, astra_graph_designer, astra_playground
astra_agents_dev      | >> run graph designer server
astra_agents_dev      | cd agents && tman dev-server
astra_agents_dev      | :-)  Starting server at http://0.0.0.0:49483
astra_graph_designer  |   ▲ Next.js 14.2.4
astra_graph_designer  |   - Local:        http://localhost:3000
astra_graph_designer  |   - Network:      http://0.0.0.0:3000
astra_graph_designer  |
astra_graph_designer  |  ✓ Starting...
astra_playground      |   ▲ Next.js 14.2.4
astra_playground      |   - Local:        http://localhost:3000
astra_playground      |   - Network:      http://0.0.0.0:3000
astra_playground      |
astra_playground      |  ✓ Starting...
astra_graph_designer  |  ✓ Ready in 293ms
astra_playground      |  ✓ Ready in 293ms
...

Now, we’ve got the following services running:

• astra_agents_dev at http://0.0.0.0:49483 (the backend server)

• astra_playground at http://localhost:3000 (the frontend of TEN Agent)

• astra_graph_designer at http://localhost:3001 (the frontend of Graph Designer)

2. Enter the docker container

To work within the isolated environment, run the following command:

>_ Terminal

docker exec -it astra_agents_dev bash

3. Create the hello world extension

By running the following commands, an extension called hello_world will be created in Python, Go, or C++.

Python

>_ Bash

cd agents

tman install extension default_extension_python --template-mode --template-data package_name=hello_world --template-data class_name_prefix=HelloWorld

Go

>_ Bash

cd agents

tman install extension default_extension_go --template-mode --template-data package_name=hello_world --template-data class_name_prefix=HelloWorld

C++

>_ Bash

cd agents

tman install extension default_extension_cpp --template-mode --template-data package_name=hello_world --template-data class_name_prefix=HelloWorld

After running the command, the log will display something like this:

>_ Bash

...
Resolving packages...
:-)  Install successfully in xxx seconds
...

4. Adding API to the extension

Navigate into the hello_world directory and open manifest.json. Add the API objects with data_in and cmd_out, which we will use shortly within the Graph Designer:

./hello_world/manifest.json

{
  "type": "extension",
  "name": "hello_world",
  "version": "0.4.1",
  "language": "python",
  "dependencies": [
    {
      "type": "system",
      "name": "rte_runtime_python",
      "version": "0.4.1"
    }
  ],
  "api": {
    "data_in": [
      {
        "name": "text_data",
        "property": {
          "text": {
            "type": "string"
          },
          "is_final": {
            "type": "bool"
          }
        }
      }
    ],
    "cmd_out": [
      {
        "name": "flush"
      }
    ]
  }
}

5. Build the extension

Let's use cd /app command to go back to the root of the project, and run make build to build the extension.

>_ Bash

cd /app

make build

6. Restart the server

You don’t need to restart the server when you first build the agent. However, after making minor updates, if refreshing the page doesn’t apply the changes, you’ll need to restart the server in Docker to ensure the updates take effect.

Restart the server for astra_agents_dev

7. Verify the extension

Open http://localhost:3001 in your browser. You should see hello_world in the left menu. Drag it to the canvas, and connect it to the text_data input and flash output.

You see the green and red color indicting the possible routes of node connecting.

hello_world extension

Congratulations! You’ve successfully created your first hello_world extension, and it’s working seamlessly within the Graph Designer canvas.

8. Check the network requests

Open Chrome DevTools, navigate to the Network panel, and monitor the requests. You should see the status codes returning as 200, indicating that the changes have been successfully processed.