feat: demo/playground doc

docs/SUMMARY.md

@@ -13,6 +13,10 @@
 * [Create a Hello World Extension](ten_agent/create_a_hello_world_extension.md)
 * [Setup VSCode Inside Container](ten_agent/setting_up_vscode_for_development_inside_container.md)
 * [How does interrupt work in TEN-Agent](ten_agent/how_does_interrupt_work.md)
+* [Demo](ten_agent/demo/quickstart.md)
+* [Playground](ten_agent/playground/quickstart.md)
+  * [Configure Modules](ten_agent/playground/configure_modules.md)
+  * [Configure Properties](ten_agent/playground/configure_properties.md)
 * [Create an Extension with Predefined Type](ten_agent/create_an_extension_with_predefined_type/overview.md)
   * [LLM Extension](ten_agent/create_an_extension_with_predefined_type/type_llm_extension.md)
   * [LLM Tool Extension](ten_agent/create_an_extension_with_predefined_type/type_llm_tool_extension.md)

docs/ten_agent/demo/quickstart.md

@@ -0,0 +1,34 @@
+# Run TEN-Agent Demo
+
+This guide will help you to run the TEN-Agent demo. The demo is a web-based interface that allows you to interact with the TEN-Agent. The orchestration of demo site is fixed and cannot be changed.
+
+## Run demo from pre-built Docker image
+
+The easiest way to run the demo is to use the pre-built Docker image. The image contains the latest version of the TEN-Agent and the demo. The project docker compose file already contains the pre-built image, so you can start by following the steps in [getting started guide](https://doc.theten.ai/ten-agent/getting_started).
+
+After you successfully setup, you will need to run an additional command to switch graph folder to demo folder,
+
+```bash
+task use AGENT=agents/exmaples/demo
+```
+
+Once finished, you can access the demo by opening the browser and navigating to `http://localhost:3002`.
+
+## Run demo from source code
+
+If you want to run the demo from the source code, start a new terminal, change to the folder where you cloned TEN-Agent project, follow below steps:
+
+```bash
+# Change to the demo directory
+cd demo
+
+# Install dependencies
+pnpm install
+
+# Start the demo
+pnpm dev
+```
+
+Once the demo is started, you can access it by opening the browser and navigating to `http://localhost:3001`.
+
+> **Note:** The demo depends on the golang web server (located in `server` directory). The web server will start when you run `task run` command in the container after you follow the steps in the [getting started guide](https://doc.theten.ai/ten-agent/getting_started).

docs/ten_agent/playground/configure_modules.md

@@ -0,0 +1,50 @@
+# Configure Modules in Playground
+
+This guide will help you to configure modules in the TEN-Agent Playground.
+
+## Configure Modules
+
+1. Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
+2. Select a graph type (e.g. Voice Agent, Realtime Agent).
+3. Click on the Button to the right of the graph selection to open the module selection.
+4. Depending on the graph type, you can select available modules from the dropdown list.
+5. Click on `Save Change` to apply the module to the graph.
+6. If you see the success toast, the module is successfully applied to the graph.
+
+## Available Modules
+
+The following module types are available for the TEN-Agent Playground:
+
+### Speech Recognition (STT)
+
+The Speech Recognition module converts spoken language into text.
+
+### Text-to-Speech (TTS)
+
+The Text-to-Speech module converts text into spoken language.
+
+### Large Language Model (LLM)
+
+The Large Language Model module generates text based on the input text with influence.
+
+### Voide to Voice Model (V2V)
+
+The Voice to Voice Model module generates voice based on the input voice with influence.
+
+### Tool (TOOL)
+
+The Tool module provides a set of tools for the agent to use. The tools can be binded to `LLM` module or `V2V` module.
+
+## Bind Tool Modules
+
+You can bind tool modules to `LLM` or `V2V` modules in the TEN-Agent Playground.
+Tool can provide additional capabilities to the agent, such as weather check, news update, etc. You can also write your own tool extension if needed.
+
+1. Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
+2. Select a graph type (e.g. Voice Agent, Realtime Agent).
+3. Click on the Button to the right of the graph selection to open the module selection.
+4. Depending on the graph type, you will see `LLM` or `V2V` module in the Module Picker.
+5. Click on the button to the right of the module to open the tool selection.
+6. Select a tool available to bind to the module.
+7. Click on `Save Change` to apply the tool to the module.
+8. If you see the success toast, the tool is successfully applied to the module.

docs/ten_agent/playground/configure_properties.md

@@ -0,0 +1,27 @@
+# Configure Properties in Playground
+
+This guide will help you to configure properties in the TEN-Agent Playground.
+
+## Configure Properties
+
+1. Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
+2. Select a graph type (e.g. Voice Agent, Realtime Agent).
+3. Click on the Button to the right of the graph selection to open the property configuration.
+4. From the dropdown list, you can find all extension nodes used in the graph.
+5. Choose an extension node to configure its properties. e.g. stt / llm / tts / v2v / tool.
+6. You will see a list of properties that can be configured for the selected extension node.
+7. You can change the value of the property by clicking on the input field or switch (if it's a boolean)
+8. Click on `Save Change` to apply the property to the extension node.
+9. If you see the success toast, the property is successfully applied to the extension node.
+
+## Add more properties
+
+Some properties are defined in the extension node, while does not currently has a value. These properties will not be shown in the property configuration. You can add more properties by following the steps below:
+
+1. In the propety list drawer, click on the `Add Property` button.
+2. A new drawer will be opened with a dropdown list of available properties.
+3. Select a property from the dropdown list.
+4. Click on `Add` to add the property to the extension node.
+5. Configure the value of the property.
+6. Click on `Save Change` to apply the property to the extension node.
+7. If you see the success toast, the property is successfully applied to the extension node.

docs/ten_agent/playground/quickstart.md

@@ -0,0 +1,28 @@
+# Run TEN-Agent Playground
+
+This guide will help you to run the TEN-Agent Playground. The playground is a web-based interface that allows you to interact with the TEN-Agent. You can replace modules, change configurations, and test the agent's behavior in a controlled environment.
+
+## Run playground from pre-built Docker image
+
+The easiest way to run the playground is to use the pre-built Docker image. The image contains the latest version of the TEN-Agent and the playground. The project docker compose file already contains the pre-built image, so you can start by following the steps in [getting started guide](https://doc.theten.ai/ten-agent/getting_started).
+
+Once finished, you can access the playground by opening the browser and navigating to `http://localhost:3000`.
+
+## Run playground from source code
+
+If you want to run the playground from the source code, start a new terminal, change to the folder where you cloned TEN-Agent project, follow below steps:
+
+```bash
+# Change to the playground directory
+cd playground
+
+# Install dependencies
+pnpm install
+
+# Start the playground
+pnpm dev
+```
+
+Once the playground is started, you can access it by opening the browser and navigating to `http://localhost:3001`.
+
+> **Note:** The playground depends on the golang web server (located in `server` directory) and ten-dev-server (provided by ten framework cli). The ten-dev-server is by default provided when you start with `docker compose up -d` command. The web server will start when you run `task run` command in the container after you follow the steps in the [getting started guide](https://doc.theten.ai/ten-agent/getting_started).