55 lines
1.7 KiB
Text
55 lines
1.7 KiB
Text
import ThemedImage from "@theme/ThemedImage";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
|
import ReactPlayer from "react-player";
|
|
import Admonition from "@theme/Admonition";
|
|
|
|
# Playground
|
|
|
|
In Langflow 1.0 alpha, the **Playground** replaces the **Interaction Panel**.
|
|
|
|
The **Playground** provides an interface for interacting with flows without opening them in the flow editor.
|
|
|
|
It even works for flows hosted on the Langflow store!
|
|
|
|
As long as you have a flow's environment variables set, you can run it by clicking the **Playground** button.
|
|
|
|
1. From your **Collections** page, click the **Playground** in one of your flows.
|
|
The **Playground** window opens.
|
|
|
|
<ZoomableImage
|
|
alt="Docusaurus themed image"
|
|
sources={{
|
|
light: useBaseUrl("img/playground-chat.png"),
|
|
dark: useBaseUrl("img/playground-chat.png"),
|
|
}}
|
|
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
|
|
/>
|
|
|
|
2. Chat with your bot as you normally would, all without having to open the editor.
|
|
|
|
## Video
|
|
|
|
<div
|
|
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
|
>
|
|
<ReactPlayer playing controls url="/videos/langflow_playground.mp4" />
|
|
</div>
|
|
|
|
## Playground I/O
|
|
|
|
The Playground's appearance changes depending on what components are in your canvas.
|
|
|
|
Adding or removing any of the below components modifies your Playground so you can monitor the inputs and outputs.
|
|
|
|
* Chat Input
|
|
* Text Input
|
|
* Chat Output
|
|
* Text Output
|
|
* Records Output
|
|
* Inspect Memory
|
|
|
|
You can also select **Options** > **Logs** to see your flow's logs.
|
|
|
|
For more information, see [Inputs and Outputs](../components/inputs-and-outputs.mdx).
|
|
|