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 ten_agent_demo, ten_agent_dev, ten_agent_playground, ten_graph_designer
ten_agent_dev         | >> run graph designer server
ten_agent_dev         | cd agents && tman dev-server
ten_agent_dev         | :-)  Starting server at http://0.0.0.0:49483
ten_agent_demo        |   ▲ Next.js 14.2.4
ten_agent_demo        |   - Local:        http://localhost:3000
ten_agent_demo        |   - Network:      http://0.0.0.0:3000
ten_agent_demo        |
ten_agent_demo        |  ✓ Starting...
ten_agent_playground  |   ▲ Next.js 14.2.4
ten_agent_playground  |   - Local:        http://localhost:3000
ten_agent_playground  |   - Network:      http://0.0.0.0:3000
ten_agent_playground  |
ten_agent_playground  |  ✓ Starting...
ten_graph_designer    |   ▲ Next.js 14.2.4
ten_graph_designer    |   - Local:        http://localhost:3000
ten_graph_designer    |   - Network:      http://0.0.0.0:3000
ten_graph_designer    |
ten_graph_designer    |  ✓ Starting...
ten_agent_demo        |  ✓ Ready in 425ms
ten_agent_playground  |  ✓ Ready in 429ms
ten_graph_designer    |  ✓ Ready in 405ms
...

Now, we’ve got the following services running:

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

• ten_agent_playground at http://localhost:3000 (the playground of TEN Agent)

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

• ten_agent_demo at http://localhost:3002 (the frontend of TEN Agent, where the OpenAI Realtime API magic is)

2. Enter the docker container

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

>_ Terminal

docker exec -it ten_agent_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_async_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

...
  Creating manifest-lock.json...
+  Installing packages...
  [00:00:01] [########################################]      11/11      Done
                :-)  Install successfully in 20 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.3.1",
  "dependencies": [
    {
      "type": "system",
      "name": "ten_runtime_python",
      "version": "0.3.1"
    }
  ],
  "package": {
    "include": [
      "manifest.json",
      "property.json",
      "BUILD.gn",
      "**.tent",
      "**.py",
      "README.md",
      "tests/**"
    ]
  },
  "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 ten_agent_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.