docs: updating wording and getting rid of graph designer section

docs/README.md

@@ -1,6 +1,6 @@
 # 🌟 Welcome to TEN
 
-Welcome to TEN! TEN stands for Transformative Extensions Network and represents the **Next-Gen AI-Agent Framework**, the **world's first truly real-time multimodal AI agent framework**.
+Welcome to TEN! TEN stands for Transformative Extensions Network, is a voice agent framework to create conversational AI.
 
 <figure><img src="https://github.com/TEN-framework/docs/raw/main/assets/gif/star_ten_w_confetti.gif" alt=""><figcaption><p>Give us a star to stay updated with TEN</p></figcaption></figure>
 

docs/ten_agent/create_a_hello_world_extension.md

@@ -39,41 +39,23 @@ docker compose up
 Once the command is entered, you should see output similar to this:
 
 <pre class="language-bash" data-title=">_ Terminal"><code class="lang-bash">....
-Attaching to ten_agent_demo, ten_agent_dev, ten_agent_playground, ten_graph_designer
-ten_agent_dev         | >> run graph designer server
+Attaching to ten_agent_dev, ten_agent_playground
 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
 ...
 </code></pre>
 
 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)
+• `ten_agent_dev` at `http://0.0.0.0:49483` (dev server)
 
+• `ten_agent_playground` at `http://localhost:3000` (TEN Agent playground)
 
 ## 2. Enter the docker container
 
@@ -129,7 +111,7 @@ After running the command, the log will display something like this:
 
 ## 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:
+Navigate into the `hello_world` directory and open manifest.json. Add the API objects with `data_in` and `cmd_out`:
 
 <pre class="language-json" data-title="./hello_world/manifest.json"><code class="lang-json">{
   "type": "extension",
@@ -185,7 +167,7 @@ Let's use `cd /app` command to go back to the root of the project, and run `make
 ```bash
 cd /app
 
-make build
+task use
 ```
 
 {% endcode %}
@@ -196,12 +178,6 @@ You don’t need to restart the server when you first build the agent. However,
 
 <figure><img src="../assets/gif/docker_restart_server.gif" alt=""><figcaption><p>Restart the server for ten_agent_dev</p></figcaption></figure>
 
-## 7. Verify the extension&#x20;
-
-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.&#x20;
-
-<figure><img src="../assets/gif/hello_world_python.gif" alt=""><figcaption><p>hello_world extension</p></figcaption></figure>
+## 7. Verify the extension
 
-Congratulations! You’ve successfully created your first `hello_world` extension, and it’s working seamlessly within the Graph Designer canvas.
+Congratulations! You’ve successfully created your first `hello_world` extension.

docs/ten_agent/customize_your_agent.md

@@ -15,15 +15,23 @@ layout:
 # Customize your agent
 
 
-## Using the power of TEN Graph Designer(Beta)
+## Using Playground
 
-<figure><img src="../assets/gif/graph_designer.gif" alt=""><figcaption></figcaption></figure>
+<figure><img src="https://github.com/TEN-framework/docs/blob/main/assets/gif/module-example.gif?raw=true" alt=""><figcaption></figcaption></figure>
 
-TEN Graph Designer is a powerful tool that allows you to customize the behavior and responses of the TEN Agent without needing to write code. This approach is recommended for its ease of use.
+Once you have the playground running at [ localhost:3000 ](http://localhost:3000), you can customize your agent through three simple steps:
 
-In the canvas, you can design your flow by dragging and dropping nodes and connecting them with lines.
+1. Graph Type Selection
+   - Choose between Voice Agent, Realtime Agent, or other types
 
-Since the TEN Graph Designer is in Beta now, there are some limitations. For example, the graph you are working on needs to match the graph you are testing with. Otherwise, the changes you make will not be reflected in the results.
+2. Module Selection
+   - Pick a module that matches your chosen graph type
+
+3. Extension Configuration
+   - Select extensions and configure their API keys
+   - Adjust settings as needed
+
+The playground provides an intuitive interface to connect these components without coding.
 
 ## Changing the code yourself
 

docs/ten_agent/faqs.md

@@ -11,7 +11,7 @@ To fix this:
 
 {% code title=">_ Terminal" %}
 ```bash
-git config --global core.autocrlf true
+git config --global core.autocrlf false
 ```
 {% endcode %}
 

docs/ten_agent/getting_started.md

@@ -14,16 +14,16 @@ layout:
 
 # Quickstart
 
-In this chapter, we’ll build the TEN Agent together. For additional help, check out the YouTube video tutorial at the end.
+In this chapter, let's build the TEN Agent playground together.
 
 ## Prerequisites
 
 {% tabs %}
 {% tab title="API Keys" %}
 
-* Agora App ID and App Certificate([read here on how](https://docs.agora.io/en/video-calling/get-started/manage-agora-account?platform=web))
-* Azure [speech-to-text](https://azure.microsoft.com/en-us/products/ai-services/speech-to-text) and [text-to-speech](https://azure.microsoft.com/en-us/products/ai-services/text-to-speech) API keys
+* Agora [ App ID ](https://docs.agora.io/en/video-calling/get-started/manage-agora-account?platform=web#create-an-agora-project) and [ App Certificate ](https://docs.agora.io/en/video-calling/get-started/manage-agora-account?platform=web#create-an-agora-project)(free minutes every month)
 * [OpenAI](https://openai.com/index/openai-api/) API key
+* Azure [speech-to-text](https://azure.microsoft.com/en-us/products/ai-services/speech-to-text) and [text-to-speech](https://azure.microsoft.com/en-us/products/ai-services/text-to-speech) API keys
 {% endtab %}
 
 {% tab title="Installations" %}
@@ -51,7 +51,7 @@ You will need to uncheck "Use Rosetta for x86\_64/amd64 emulation on Apple Silic
 
 **1. Prepare config files**
 
-In the root of the project, use `cd` command to create \`.env\` file from example . It will be used to store information for \`docker compose\` later.
+In the root of the project, use `cd` command to create \`.env\` file from example.
 
 {% code title=">_ Terminal" %}
 
@@ -61,28 +61,15 @@ cp ./.env.example ./.env
 
 {% endcode %}
 
-**2. Setup API keys & Environment variables in .env file**
+**2. Setup Agora App ID and App Certificate in   .env file**
 
-Open the `.env` file and fill in the keys and regions. This is also where you can choose to use any different extensions:
+Open the `.env` file and fill in Agora App ID and App Certificate.These will be used to connect to Agora RTC extension.
 
 {% code title=".env" %}
 
 ```bash
-# Agora App ID and App Certificate
 AGORA_APP_ID=
-# Certificate is only required when enabled within Agora.io account
 AGORA_APP_CERTIFICATE=
-
-# Azure STT key and region
-AZURE_STT_KEY=
-AZURE_STT_REGION=
-
-# Azure TTS key and region
-AZURE_TTS_KEY=
-AZURE_TTS_REGION=
-
-# OpenAI API key
-OPENAI_API_KEY=
 ```
 
 {% endcode %}
@@ -94,52 +81,57 @@ In the same directory, run the `docker` command to compose containers:
 {% code title=">_ Terminal" %}
 
 ```bash
-docker compose up
+docker compose up -d
 ```
 
 {% endcode %}
 
-**4. Build TEN Agent** 
+**4. Enter container**
 
-Open up a separate terminal window, build the agent and start the server:
+Use the following command to enter the container:
 
 {% code title=">_ Bash" %}
 
 ```bash
 docker exec -it ten_agent_dev bash
-task use
 ```
 
 {% endcode %}
 
-**5. Start the server**
+**5. Build the agent**
 
-Now the server is running at port: 8080.
+Use the following command to build the agent:
 
 {% code title=">_ Bash" %}
 
 ```bash
-task run
+task use
 ```
 
 {% endcode %}
 
-## **Finish and verify your agent**
+**6. Start the web server**
 
-You can open [localhost:3001](https://localhost:3001/) in browser to use your graph designer. Simultaneously, open another tab at [localhost:3000](https://localhost:3000/) to see the customized voice agent up and running.
+Use the following command to start the web server:
 
-Now you have the power of the Graph Designer at your fingertips to perform the magic of agent customization yourself. 🎉
+{% code title=">_ Bash" %}
+
+```bash
+task run
+```
+
+{% endcode %}
 
-**Graph designer**
 
-TEN Graph Designer (beta), a tool that requires zero coding knowledge and makes the experience of creating agentic applications smoother.
+**9. Edit playground settings**
 
-<figure><img src="../assets/gif/graph_designer.gif" alt=""><figcaption><p>Graph Designer</p></figcaption></figure>
+Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
+ 1. Select a graph type (e.g. Voice Agent, Realtime Agent)
+ 2. Choose a corresponding module
+ 3. Select an extension and configure its API key settings
 
-## Video tutorials
+![Module Example](https://github.com/TEN-framework/docs/blob/main/assets/gif/module-example.gif?raw=true)
 
-English:
-<https://www.youtube.com/watch?t=1s&v=_AZ3RedzvRg>
+## TEN Agent Components
 
-中文:
-<https://www.youtube.com/watch?v=MbqF4c2Myrw>
+![Components Diagram](https://github.com/TEN-framework/docs/blob/main/assets/jpg/diagram.jpg?raw=true)