TEN Designer

TEN Designer is a browser-based visual development environment that provides the graphical interface for TEN Manager. It simplifies building and debugging applications with the TEN Framework. Instead of working solely with command-line tools and configuration files, TEN Designer provides an intuitive graphical interface for creating, editing, and managing TEN applications and extensions. Following are the key benefits of the TEN Designer:

• Visual graph editing: See and modify extension connections through an interactive diagram
• Simplified dependency management: Install and manage TEN packages through a user-friendly interface
• Integrated development workflow: Build, run, and debug applications without leaving the designer
• Cloud Store integration: Browse and install extensions directly from the TEN Cloud Store
• Cross-platform support: Works on Windows, Linux, and macOS through your web browser

TEN Designer provides an accessible entry point for developers who prefer visual tools while preserving the full power and flexibility of the TEN Framework.

Before starting, ensure that you have:

• One of the following operating systems and architectures:

  • Windows: x86_64
  • Linux: x86_64
  • macOS: x86_64, arm64

• A modern web browser to access the TEN Designer interface.

Follow these steps to install and run TEN Manager

1. Open the TEN Framework releases page on GitHub.

2. Find the TEN Manager package for your OS and architecture. The package uses the naming structure tman-[OS]-release-[ARCH].zip.

3. Download the package. For example, you can download the Linux package for x64 using:

   
   

   _1

   wget https://github.com/TEN-framework/ten-framework/releases/download/0.10.10/tman-linux-release-x64.zip

   
   

4. Extract the downloaded package:

   
   

   _1

   unzip tman-linux-release-x64.zip

   
   

5. Install TEN Manager by copying the binary to your system PATH so that you can run tman commands from any directory (Optional):

   
   

   _1

   sudo cp ten_manager/bin/tman /usr/local/bin/

   
   

6. Verify the installation:

   
   

   _1

   tman --version

   
   

7. Start TEN Designer:

   
   

   _1

   tman designer

   
   

   You see output similar to:

   
   

   _1

   🏆 Starting server at http://0.0.0.0:49483

   
   
   info

   You can run tman designer from the root directory of an existing TEN app to automatically load the app in the designer. You can also start TEN Designer from any location and manually load an app later.

8. Open your browser and go to http://127.0.0.1:49483/ to access the interface.

   info

   If TEN Designer is running on a remote machine, replace 127.0.0.1 with the IP address of that machine.

The TEN Designer interface provides easy access to development tools. The upper left corner shows the following dropdown menus:

• Designer: Set preferences such as language, theme, and logs
• App: Create, load, and manage apps
• Graph: Load and manage graphs
• Extensions: Install extensions from the extensions store

The upper right corner contains the following function buttons:

• Version button (rightmost): Displays the current version and automatically checks for updates. When an update is available, an up arrow appears. Click to open the download page.
• TEN Agent button: Opens the TEN Agent page, which showcases a complete AI agent implementation built with TEN Framework
• GitHub button: Links to the TEN Framework repository where you can view source code, documentation, and submit issues
• Theme and language toggles: Switch between light and dark modes and select your preferred language

This section guides you through working with TEN apps in the TEN Designer.

To load an existing app, use the Load App button in the App menu. You see the following interface:

Use the file browser to select the app's root directory. TEN Designer automatically loads the app.

To manage loaded TEN apps, click the Manage Loaded App(s) button in the App menu. You see the following Apps Manager interface:

Use the Apps Manager dialog to perform various operations on your loaded applications:

• Unload loaded apps
• Reload specified apps
• Reload all loaded apps
• Install dependencies for specified apps
• Execute predefined scripts for specific apps

To install all dependencies for your app using the Apps Manager:

1. Open the Apps Manager interface in TEN Designer
2. Click Install All for your target application
3. Monitor the installation progress in the interface shown below:

The app's manifest.json file defines these dependencies. Following is an example of a manifest.json file:

_36

{

_36

"type": "app",

_36

"name": "aaa",

_36

"version": "0.8.18",

_36

"dependencies": [

_36

{

_36

"type": "system",

_36

"name": "ten_runtime",

_36

"version": "0.8.18"

_36

},

_36

{

_36

"type": "extension",

_36

"name": "ffmpeg_muxer",

_36

"version": "^0.1.0"

_36

},

_36

{

_36

"type": "extension",

_36

"name": "ffmpeg_demuxer",

_36

"version": "^0.1.0"

_36

},

_36

{

_36

"type": "extension",

_36

"name": "ffmpeg_client",

_36

"version": "^0.1.0"

_36

},

_36

{

_36

"type": "protocol",

_36

"name": "msgpack",

_36

"version": "^0.8.18"

_36

}

_36

],

_36

"scripts": {

_36

"start": "python3 tools/run_script.py start",

_36

"build": "python3 tools/run_script.py build"

_36

}

_36

}

This configuration specifies the following TEN package dependencies:

• ten_runtime: The system package of TEN Framework
• ffmpeg_demuxer: A TEN Extension package for decoding audio and video
• ffmpeg_muxer: A TEN Extension package for encoding audio and video
• ffmpeg_client: A TEN Extension package for processing audio and video using the other two ffmpeg extension packages
• msgpack: A TEN Protocol package for message serialization and deserialization using the MessagePack protocol

After installing the dependencies, TEN Manager organizes the packages in the following directory structure:

_10

├── ten_packages

_10

│ ├── extension

_10

│ │ ├── ffmpeg_client

_10

│ │ ├── ffmpeg_demuxer

_10

│ │ └── ffmpeg_muxer

_10

│ ├── protocol

_10

│ │ └── msgpack

_10

│ └── system

_10

│ ├── ffmpeg

_10

│ └── ten_runtime

Note that the ffmpeg system package appears even though it's not listed in manifest.json. TEN Manager automatically detects and installs transitive dependencies when ffmpeg_demuxer and ffmpeg_muxer require the ffmpeg package.

To install extensions from the TEN Cloud Store:

1. Click Open Extension Store in the Extensions menu
2. Search for the required extension in the store interface
3. Click Install to add the extension to your current app

After installation, the new extension appears in your current TEN app and is available for use in your graphs.

Use the Apps Manager to execute preset runtime operations on the selected app. Click the Run button in the Apps Manager to open the following interface:

In the dialog, select the preset operation to execute from the dropdown menu. The menu typically includes the following operations:

• Run App: Start the app and display output in the TEN Designer message window
• Build App: Compile the app, if required. Since TEN Framework supports multiple programming languages, compilation requirements vary by language. For example, C++ apps require compilation, while Python apps run directly without a build step.

Following is the build interface for a TEN app developed in C++:

After the build is complete, continue with the startup operation. The system displays a window showing the TEN app's runtime logs in real-time:

TEN graphs define how extensions connect and communicate within your application, providing a visual representation of your app's data flow and processing pipeline.

To load an existing TEN graph, click the Load Graph option in the Graph menu. After the graph loads, you see an interface similar to the following:

This sample graph contains three TEN extensions:

• ffmpeg_demuxer: Decodes audio and video
• ffmpeg_muxer: Encodes audio and video
• ffmpeg_client: Processes audio and video

Each TEN extension has defined inputs and outputs. For example, the ffmpeg_demuxer extension includes:

• 2 command inputs
• 1 command output
• 1 audio frame output
• 1 video frame output

Click the numbered input or output buttons on any extension to open a connection management dialog:

Use this dialog to view and manage connections between extensions in your graph.

You can organize your graph layout as follows:

1. Manual positioning: Drag extensions to desired locations
2. Automatic layout: Click Auto Layout in the Graph menu to automatically arrange all extensions

The auto-layout feature is particularly helpful when your graph becomes cluttered or after adding multiple new extensions.

Right-click any extension in the graph to open its context menu:

The context menu provides quick access to extension files and tools:

• Edit manifest.json: Edit the extension's configuration and API definitions
• Edit property.json: Modify the extension's runtime properties
• Launch terminal: Launch a terminal in the extension's root directory
• View logs: Display the extension's runtime logs and debug information
• Delete: Remove the extension from the current graph

TEN Designer has integrated documentation that allows you to view TEN Framework concepts and terminology. For example, select About App from the App dropdown menu to open the documentation window and display general information about TEN Apps and their structure.