diff --git a/docs/docs/Agents/agents-tools.mdx b/docs/docs/Agents/agents-tools.mdx
index d3c269ab2751..18ccec24446b 100644
--- 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 **Playground** and instruct the agent, `Use the text analyzer on this text: "Agents really are thinking machines!"`
+5. Open the **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
index bf8cfdf1f7c6..d0d7a02ab74c 100644
--- a/docs/docs/Agents/agents.mdx
+++ b/docs/docs/Agents/agents.mdx
@@ -34,7 +34,7 @@ Make sure that the credential has permission to call the selected model.
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 **Playground**.
+ At this point, you have created a basic LLM-based chat flow that you can test in the **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.
@@ -56,7 +56,7 @@ Make sure that the credential has permission to call the selected model.
-8. Open the **Playground**, and then ask the agent, `What tools are you using to answer my questions?`
+8. Open the **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
index 67842e73f930..ecd10bd6c9bb 100644
--- 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
5. Add a file to the **Docling** component.
-6. To run the flow, click **Playground**.
+6. To run the flow, click **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
index 4de04ff6b1da..09c2c80fae77 100644
--- 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 **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 **Playground** when editing the flow in the workspace.
diff --git a/docs/docs/Flows/concepts-playground.mdx b/docs/docs/Flows/concepts-playground.mdx
index 6adf662077fd..c1b92626b65f 100644
--- 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 **Playground**.
+To run a flow in the **Playground**, open the flow, and then click **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.
+In Langflow 1.8, the **Playground** appears on the right side of the visual builder. The full screen option is still available by clicking the **Fullscreen** icon.
+
+
+
:::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
index 81aa3e85490d..aaab7a9a09ca 100644
--- a/docs/docs/Get-Started/get-started-quickstart.mdx
+++ b/docs/docs/Get-Started/get-started-quickstart.mdx
@@ -67,7 +67,7 @@ Many components can be tools for agents, including [Model Context Protocol (MCP)
If you want to use a different provider, edit the model provider, model name, and credentials accordingly.
If your preferred provider or model isn't listed, set **Model Provider** to **Connect other models**, and then connect any [language model component](/components-models#additional-language-models).
-3. To run the flow, click **Playground**.
+3. To run the flow, click **Playground**.
4. 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.
diff --git a/docs/docs/Support/release-notes.mdx b/docs/docs/Support/release-notes.mdx
index c05961ebe3dc..04423bd8e613 100644
--- a/docs/docs/Support/release-notes.mdx
+++ b/docs/docs/Support/release-notes.mdx
@@ -91,6 +91,10 @@ 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 refactor
+
+ The **Playground** now appears on the right side of the visual builder to provide a more integrated testing experience. The full screen option is still available by clicking the **Fullscreen** icon. For more information, see [Test flows in the Playground](/concepts-playground).
+
## 1.7.x
:::warning Version yanked
diff --git a/docs/docs/Tutorials/agent.mdx b/docs/docs/Tutorials/agent.mdx
index 0cc5d0bd03de..7e2a91ca245c 100644
--- 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 **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 **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
index 04faccc0525d..962768d7a221 100644
--- 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 **Playground**, and then ask the LLM a question.
+3. To verify that your API key is valid, click **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
index 600c321979aa..7e4afbfe02b7 100644
--- 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 **Playground**, and then ask the LLM `Is it safe to go hiking in the Adirondacks today?`
+3. To test the flow, click **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
-7. To test the weather MCP server, click **Playground**, and then ask the LLM `Is it safe to go hiking in the Adirondacks today?`
+7. To test the weather MCP server, click **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
index cc99d74a1bf1..b1360ec5e45f 100644
Binary files a/docs/static/img/agent-component.png and b/docs/static/img/agent-component.png differ
diff --git a/docs/static/img/agent-example-add-chat.png b/docs/static/img/agent-example-add-chat.png
index 5387fab24fc4..17c3605249e3 100644
Binary files a/docs/static/img/agent-example-add-chat.png and b/docs/static/img/agent-example-add-chat.png differ
diff --git a/docs/static/img/agent-example-add-tools.png b/docs/static/img/agent-example-add-tools.png
index a76ef843ae21..1af9913ada1c 100644
Binary files a/docs/static/img/agent-example-add-tools.png and b/docs/static/img/agent-example-add-tools.png differ
diff --git a/docs/static/img/agent-example-agent-as-tool.png b/docs/static/img/agent-example-agent-as-tool.png
index 34ba81319940..cf80a808ffcd 100644
Binary files a/docs/static/img/agent-example-agent-as-tool.png and b/docs/static/img/agent-example-agent-as-tool.png differ
diff --git a/docs/static/img/agent-example-run-flow-as-tool.png b/docs/static/img/agent-example-run-flow-as-tool.png
index 52b53be30017..2b32b07d012f 100644
Binary files a/docs/static/img/agent-example-run-flow-as-tool.png and b/docs/static/img/agent-example-run-flow-as-tool.png differ
diff --git a/docs/static/img/component-astra-db-json-tool.png b/docs/static/img/component-astra-db-json-tool.png
deleted file mode 100644
index 26c60280d69e..000000000000
Binary files a/docs/static/img/component-astra-db-json-tool.png and /dev/null differ
diff --git a/docs/static/img/component-chat-io.png b/docs/static/img/component-chat-io.png
index 52a7235070a6..66bd02321e8f 100644
Binary files a/docs/static/img/component-chat-io.png and b/docs/static/img/component-chat-io.png differ
diff --git a/docs/static/img/component-language-model.png b/docs/static/img/component-language-model.png
index aff124091ae7..99c57b5ffa17 100644
Binary files a/docs/static/img/component-language-model.png and b/docs/static/img/component-language-model.png differ
diff --git a/docs/static/img/connect-component.png b/docs/static/img/connect-component.png
index db19381e02cd..99c57b5ffa17 100644
Binary files a/docs/static/img/connect-component.png and b/docs/static/img/connect-component.png differ
diff --git a/docs/static/img/connect-data-components-to-agent.png b/docs/static/img/connect-data-components-to-agent.png
deleted file mode 100644
index ff9bb150fe52..000000000000
Binary files a/docs/static/img/connect-data-components-to-agent.png and /dev/null differ
diff --git a/docs/static/img/langflow-icon-black-transparent.svg b/docs/static/img/langflow-icon-black-transparent.svg
deleted file mode 100644
index 1c7b36c4dd67..000000000000
--- a/docs/static/img/langflow-icon-black-transparent.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/docs/static/img/langflow-logo-color-black-solid.svg b/docs/static/img/langflow-logo-color-black-solid.svg
deleted file mode 100644
index 2dae875821f9..000000000000
--- a/docs/static/img/langflow-logo-color-black-solid.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-
diff --git a/docs/static/img/langflow-logo-color-blue-bg.svg b/docs/static/img/langflow-logo-color-blue-bg.svg
deleted file mode 100644
index ef967c6bdec7..000000000000
--- a/docs/static/img/langflow-logo-color-blue-bg.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-
\ No newline at end of file
diff --git a/docs/static/img/playground-right-bar.png b/docs/static/img/playground-right-bar.png
new file mode 100644
index 000000000000..fa33f8ca6f8b
Binary files /dev/null and b/docs/static/img/playground-right-bar.png differ
diff --git a/docs/static/img/playground-with-agent.png b/docs/static/img/playground-with-agent.png
index 7382c4cdf212..786524a440b9 100644
Binary files a/docs/static/img/playground-with-agent.png and b/docs/static/img/playground-with-agent.png differ
diff --git a/docs/static/img/playground.png b/docs/static/img/playground.png
index 9d607ac5af3c..6b0a3f0ab747 100644
Binary files a/docs/static/img/playground.png and b/docs/static/img/playground.png differ
diff --git a/docs/static/img/prompt-component-with-multiple-inputs.png b/docs/static/img/prompt-component-with-multiple-inputs.png
index 29b47ae6d41a..80d61e1a7507 100644
Binary files a/docs/static/img/prompt-component-with-multiple-inputs.png and b/docs/static/img/prompt-component-with-multiple-inputs.png differ
diff --git a/docs/static/img/prompt-component.png b/docs/static/img/prompt-component.png
index 29b47ae6d41a..80d61e1a7507 100644
Binary files a/docs/static/img/prompt-component.png and b/docs/static/img/prompt-component.png differ
diff --git a/docs/static/img/quickstart-simple-agent-flow.png b/docs/static/img/quickstart-simple-agent-flow.png
index 2e5fc57006c5..448ed2732d90 100644
Binary files a/docs/static/img/quickstart-simple-agent-flow.png and b/docs/static/img/quickstart-simple-agent-flow.png differ
diff --git a/docs/static/img/quickstart-simple-agent-playground.png b/docs/static/img/quickstart-simple-agent-playground.png
index 74ae3a49af24..4e902e2240f9 100644
Binary files a/docs/static/img/quickstart-simple-agent-playground.png and b/docs/static/img/quickstart-simple-agent-playground.png differ
diff --git a/docs/static/img/select-output.png b/docs/static/img/select-output.png
index a2398f32ca67..b4c91900db37 100644
Binary files a/docs/static/img/select-output.png and b/docs/static/img/select-output.png differ
diff --git a/docs/static/img/vllm-logo-only-light.ico b/docs/static/img/vllm-logo-only-light.ico
deleted file mode 100644
index 27528ceebfff..000000000000
Binary files a/docs/static/img/vllm-logo-only-light.ico and /dev/null differ
diff --git a/docs/static/img/vllm-model-component.png b/docs/static/img/vllm-model-component.png
deleted file mode 100644
index f26f05bf60b3..000000000000
Binary files a/docs/static/img/vllm-model-component.png and /dev/null differ
diff --git a/docs/static/img/workspace-basic-prompting.png b/docs/static/img/workspace-basic-prompting.png
index d9b4325ada2d..ea6a11c8e7f8 100644
Binary files a/docs/static/img/workspace-basic-prompting.png and b/docs/static/img/workspace-basic-prompting.png differ
diff --git a/docs/static/img/workspace.png b/docs/static/img/workspace.png
index eab12987d1f2..44feadc4dc31 100644
Binary files a/docs/static/img/workspace.png and b/docs/static/img/workspace.png differ
diff --git a/src/backend/base/langflow/services/auth/utils.py b/src/backend/base/langflow/services/auth/utils.py
index 939c331a14c5..7614aa6fe57f 100644
--- a/src/backend/base/langflow/services/auth/utils.py
+++ b/src/backend/base/langflow/services/auth/utils.py
@@ -27,6 +27,12 @@
from langflow.services.database.models.user.model import User, UserRead
+_HTTP_403 = status.HTTP_403_FORBIDDEN
+
+_HTTP_401 = status.HTTP_401_UNAUTHORIZED
+
+_FORBIDDEN_ERRORS = (MissingCredentialsError, InvalidCredentialsError, InsufficientPermissionsError)
+
class OAuth2PasswordBearerCookie(OAuth2PasswordBearer):
"""Custom OAuth2 scheme that checks Authorization header first, then cookies.
@@ -145,12 +151,9 @@ def _auth_error_to_http(e: AuthenticationError) -> HTTPException:
Langflow returns 403 for missing/invalid credentials; 401 for invalid/expired tokens.
"""
- if isinstance(
- e,
- (MissingCredentialsError, InvalidCredentialsError, InsufficientPermissionsError),
- ):
- return HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail=e.message)
- return HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail=e.message)
+ if isinstance(e, _FORBIDDEN_ERRORS):
+ return HTTPException(status_code=_HTTP_403, detail=e.message)
+ return HTTPException(status_code=_HTTP_401, detail=e.message)
async def get_current_user(