69 lines
2.7 KiB
Text
69 lines
2.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
|
||
|
||
<Admonition type="warning" title="warning">
|
||
This page may contain outdated information. It will be updated as soon as possible.
|
||
</Admonition>
|
||
|
||
<Admonition type="info">
|
||
From the **My Collection** page, click the Playground button in one of your flow cards.
|
||
It will directly open up a window with that project's Playground, without even showing the flow (this also works for flows hosted on the Langflow Store!).
|
||
</Admonition>
|
||
|
||
The **Playground** is a dynamic interface designed for real-time interaction with agents, allowing users to access and manage memories and monitor the inputs and outputs. Here, users can directly prototype and experiment with their configured components or AI models, making adjustments and observing different outcomes in real-time.
|
||
|
||
It even works for flows hosted on the Langflow store!
|
||
|
||
As long as you have a flow properly working, you can interact with 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: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||
/>
|
||
|
||
2. Chat with your bot as you normally would, all without having to open the editor.
|
||
|
||
<div
|
||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||
>
|
||
<ReactPlayer playing controls url="/videos/langflow_playground.mp4" />
|
||
</div>
|
||
|
||
## Playground I/O
|
||
|
||
The Playground's window arrangement changes depending on what components are being used.
|
||
|
||
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
|
||
- Data 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).
|
||
|
||
## Memory Management
|
||
|
||
When you send a message, under **Memories**, you can view a table of previous interactions for this session.
|
||
|
||
Langflow allows every chat message to be stored, and a single flow can have multiple memory sessions. This enables you to create multiple “memories” for agents to store and recall specific information as needed.
|
||
|
||
You can edit and remove previous messages to inspect and validate a model’s response behavior.
|
||
|
||
For more information, see [Memories](./memories).
|