langflow-ai · mendonk · Feb 10, 2026 · Feb 6, 2026 · Feb 6, 2026 · Feb 6, 2026
diff --git a/docs/docs/Agents/agents-tools.mdx b/docs/docs/Agents/agents-tools.mdx
@@ -151,7 +151,7 @@ An agent can use [custom components](/components-custom-components) as tools.
 
 3. Enable **Tool Mode** in the custom component.
 4. Connect the custom component's tool output to the **Agent** component's **Tools** input.
-5. Open the <Icon name="Play" aria-hidden="true" /> **Playground** and instruct the agent, `Use the text analyzer on this text: "Agents really are thinking machines!"`
+5. Open the <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground** and instruct the agent, `Use the text analyzer on this text: "Agents really are thinking machines!"`
 
     Based on your instruction, the agent should call the `analyze_text` action and return the result.
     For example:

diff --git a/docs/docs/Agents/agents.mdx b/docs/docs/Agents/agents.mdx
@@ -27,7 +27,7 @@ If your preferred model isn't listed, make sure it's enabled in the **Models** c
 For more information, see [Agent component parameters](#agent-component-parameters).
 5. Add [**Chat Input** and **Chat Output** components](/chat-input-and-output) to your flow, and then connect them to the **Agent** component.
 
-    At this point, you have created a basic LLM-based chat flow that you can test in the <Icon name="Play" aria-hidden="true" /> **Playground**.
+    At this point, you have created a basic LLM-based chat flow that you can test in the <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground**.
     However, this flow only chats with the LLM.
     To enhance this flow and make it truly agentic, add some tools, as explained in the next steps.
 
@@ -49,7 +49,7 @@ For more information, see [Agent component parameters](#agent-component-paramete
 
     ![A more complex agent chat flow where three components are connected to the Agent component as tools](/img/agent-example-add-tools.png)
 
-8. Open the <Icon name="Play" aria-hidden="true" /> **Playground**, and then ask the agent, `What tools are you using to answer my questions?`
+8. Open the <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground**, and then ask the agent, `What tools are you using to answer my questions?`
 
     The agent should respond with a list of the connected tools.
     It may also include built-in tools.

diff --git a/docs/docs/Components/bundles-docling.mdx b/docs/docs/Components/bundles-docling.mdx
@@ -53,7 +53,7 @@ This example demonstrates how to use Docling components to split a PDF in a flow
     ![Docling and ExportDoclingDocument extracting and splitting text to vector database](/img/integrations-docling-split-text.png)
 
 5. Add a file to the **Docling** component.
-6. To run the flow, click <Icon name="Play" aria-hidden="true"/> **Playground**.
+6. To run the flow, click <Icon name="PanelRightOpen" aria-hidden="true"/> **Playground**.
 
     The chunked document is loaded as vectors into your vector database.
 

diff --git a/docs/docs/Flows/concepts-overview.mdx b/docs/docs/Flows/concepts-overview.mdx
@@ -48,7 +48,7 @@ Use these shortcuts, gestures, and functionality to navigate the workspace:
 
 If your flow has a **Chat Input** component, you can use the **Playground** to run your flow, chat with your flow, view inputs and outputs, and modify the LLM's memories to tune the flow's responses in real time.
 
-To try this for yourself, create a flow based on the **Basic Prompting** template, and then click <Icon name="Play" aria-hidden="true"/> **Playground** when editing the flow in the workspace.
+To try this for yourself, create a flow based on the **Basic Prompting** template, and then click <Icon name="PanelRightOpen" aria-hidden="true"/> **Playground** when editing the flow in the workspace.
 
 ![Playground](/img/playground.png)
 

diff --git a/docs/docs/Flows/concepts-playground.mdx b/docs/docs/Flows/concepts-playground.mdx
@@ -16,9 +16,13 @@ The **Playground** allows you to quickly iterate over your flow's logic and beha
 
 ## Run a flow in the Playground
 
-To run a flow in the **Playground**, open the flow, and then click <Icon name="Play" aria-hidden="true"/> **Playground**.
+To run a flow in the **Playground**, open the flow, and then click <Icon name="PanelRightOpen" aria-hidden="true"/> **Playground**.
 Then, if your flow has a [**Chat Input** component](/chat-input-and-output), enter a prompt or [use voice mode](/concepts-voice-mode) to trigger the flow and start a chat session.
 
+To expand the **Playground** view, click <Icon name="Fullscreen" aria-hidden="true"/> **Fullscreen** within the **Playground** panel.
+
+![The Langflow visual builder with the Playground active](/img/playground-right-bar.png)
+
 :::tip
 If there is no message input field in the **Playground**, make sure your flow has a **Chat Input** component that is connected, directly or indirectly, to the **Input** port of a **Language Model** or **Agent** component.
 

diff --git a/docs/docs/Get-Started/get-started-quickstart.mdx b/docs/docs/Get-Started/get-started-quickstart.mdx
@@ -74,10 +74,9 @@ Many components can be tools for agents, including [Model Context Protocol (MCP)
     * Edit Langflow's global <Icon name="BrainCog" aria-hidden="true" /> **Models** configuration. These providers and models are part of Langflow's core functionality. Use the **Ollama** provider to connect to any model hosted on a local or remote Ollama instance.
     * Use any [additional language model component](/components-models#additional-language-models), including your own custom components. In the **Agent** component, set the **Language Model** field to **Connect other models**, and then attach your preferred component.
 
+4. To run the flow, click <Icon name="PanelRightOpen" aria-hidden="true"/> **Playground**.
     </details>
 
-4. To run the flow, click <Icon name="Play" aria-hidden="true"/> **Playground**.
-
 5. To test the **Calculator** tool, ask the agent a simple math question, such as `I want to add 4 and 4.`
 To help you test and evaluate your flows, the **Playground** shows the agent's reasoning process as it analyzes the prompt, selects a tool, and then uses the tool to generate a response.
 In this case, a math question causes the agent to select the **Calculator** tool and use an action like `evaluate_expression`.

diff --git a/docs/docs/Support/release-notes.mdx b/docs/docs/Support/release-notes.mdx
@@ -96,9 +96,13 @@ For all changes, see the [Changelog](https://github.com/langflow-ai/langflow/rel
 
     You can now use [global variables](/configuration-global-variables) in MCP server header values to securely store and reference sensitive values. For more information, see [Use global variables in MCP server headers](/mcp-client#use-global-variables-in-mcp-server-headers).
 
+- Playground moved
+
+    Moved the <Icon name="PanelRightOpen" aria-hidden="true"/> **Playground** to the right side of the visual builder for a more integrated testing experience. For the original full screen view, click <Icon name="Fullscreen" aria-hidden="true"/> **Fullscreen** within the **Playground** panel. For more information, see [Test flows in the Playground](/concepts-playground).
+
 - More configuration options for JWT-based session authentication
 
-    Langflow offers additional configuration options for JWT algorithms, including support for RS256/RS512 algorithms, configurable keys, and token lifetimes. For more information, see [JWT authentication](/jwt-authentication).
+    Langflow 1.8 offers additional configuration options for JWT algorithms, including support for RS256/RS512 algorithms, configurable keys, and token lifetimes. For more information, see [JWT authentication](/jwt-authentication).
 
 ## 1.7.x
 

diff --git a/docs/docs/Tutorials/agent.mdx b/docs/docs/Tutorials/agent.mdx
@@ -39,7 +39,7 @@ When connected to an **Agent** component as tools, the agent has the option to u
 
     If you want to use a different provider or model, edit the **Model Provider**, **Model Name**, and **API Key** fields accordingly.
 
-7. To test the flow, click <Icon name="Play" aria-hidden="true" /> **Playground**, and then ask the LLM a question, such as `Recommend 3 used items for carol.davis@example.com, based on previous orders.`
+7. To test the flow, click <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground**, and then ask the LLM a question, such as `Recommend 3 used items for carol.davis@example.com, based on previous orders.`
 
     Given the example prompt, the LLM would respond with recommendations and web links for items based on previous orders in `customer_orders.csv`.
 

diff --git a/docs/docs/Tutorials/chat-with-files.mdx b/docs/docs/Tutorials/chat-with-files.mdx
@@ -30,7 +30,7 @@ The following steps modify the **Basic Prompting** template to accept file input
 
     If you want to use a different provider or model, edit the **Model Provider**, **Model Name**, and **API Key** fields accordingly.
 
-3. To verify that your API key is valid, click <Icon name="Play" aria-hidden="true" /> **Playground**, and then ask the LLM a question.
+3. To verify that your API key is valid, click <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground**, and then ask the LLM a question.
 The LLM should respond according to the specifications in the **Prompt Template** component's **Template** field.
 
 4. Exit the **Playground**, and then modify the **Prompt Template** component to accept file input in addition to chat input.

diff --git a/docs/docs/Tutorials/mcp-tutorial.mdx b/docs/docs/Tutorials/mcp-tutorial.mdx
@@ -40,7 +40,7 @@ This tutorial uses an OpenAI LLM. If you want to use a different provider, you n
 
     If you want to use a different provider or model, edit the **Model Provider**, **Model Name**, and **API Key** fields accordingly.
 
-3. To test the flow, click <Icon name="Play" aria-hidden="true" /> **Playground**, and then ask the LLM `Is it safe to go hiking in the Adirondacks today?`
+3. To test the flow, click <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground**, and then ask the LLM `Is it safe to go hiking in the Adirondacks today?`
 
     This query demonstrates how an LLM, by itself, might not have access to information or functions designed to address specialized queries. In this example, the default OpenAI model provides a vague response, although the agent does know the current date by using its internal `get_current_date` function.
 
@@ -146,7 +146,7 @@ You need one **MCP Tools** component for each MCP server that you want your flow
 
     ![An Agent component connected to an MCP weather server](/img/tutorial-mcp-weather.png)
 
-7. To test the weather MCP server, click <Icon name="Play" aria-hidden="true" /> **Playground**, and then ask the LLM `Is it safe to go hiking in the Adirondacks today?`
+7. To test the weather MCP server, click <Icon name="PanelRightOpen" aria-hidden="true" /> **Playground**, and then ask the LLM `Is it safe to go hiking in the Adirondacks today?`
 
     The **Playground** shows you the agent's logic as it analyzes the request and select tools to use.
 

diff --git a/docs/static/img/agent-component.png b/docs/static/img/agent-component.png
diff --git a/docs/static/img/agent-example-add-chat.png b/docs/static/img/agent-example-add-chat.png
diff --git a/docs/static/img/agent-example-add-tools.png b/docs/static/img/agent-example-add-tools.png
diff --git a/docs/static/img/agent-example-agent-as-tool.png b/docs/static/img/agent-example-agent-as-tool.png
diff --git a/docs/static/img/agent-example-run-flow-as-tool.png b/docs/static/img/agent-example-run-flow-as-tool.png
diff --git a/docs/static/img/component-astra-db-json-tool.png b/docs/static/img/component-astra-db-json-tool.png
diff --git a/docs/static/img/component-chat-io.png b/docs/static/img/component-chat-io.png
diff --git a/docs/static/img/component-language-model.png b/docs/static/img/component-language-model.png
diff --git a/docs/static/img/connect-component.png b/docs/static/img/connect-component.png
diff --git a/docs/static/img/connect-data-components-to-agent.png b/docs/static/img/connect-data-components-to-agent.png
diff --git a/docs/static/img/langflow-icon-black-transparent.svg b/docs/static/img/langflow-icon-black-transparent.svg