langflow/docs/docs/getting-started/quickstart.mdx
2024-06-24 08:26:48 -07:00

79 lines
3.1 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";
# ⚡️ Quickstart
This guide demonstrates how to build a basic flow and modify the prompt for different outcomes.
## Prerequisites
- [Python >=3.10](https://www.python.org/downloads/release/python-3100/) and [pip](https://pypi.org/project/pip/) or [pipx](https://pipx.pypa.io/stable/installation/)
- [Langflow installed and running](./install-langflow)
- [OpenAI API key](https://platform.openai.com)
## Hello World - Basic Prompting
Let's start with a Prompt component to instruct an OpenAI Model.
Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks. By submitting natural language requests in a prompt to an LLM, you can obtain answers, generate text, and solve problems.
<br />
1. From the Langflow dashboard, click **New Project**.
2. Select **Basic Prompting**.
<br />
<ZoomableImage
alt="Quickstart Guide Screenshot"
sources={{
light: "img/quickstart.png",
dark: "img/quickstart.png",
}}
style={{ width: "80%", margin: "20px auto" }}
/>
This flow allows you to chat with the **OpenAI** model by using a **Prompt** to send instructions.
Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.`
This should be interesting...
To use the **OpenAI** component, you have two options for providing your OpenAI API Key: directly passing it to the component or creating an environment variable. For better security and manageability, creating an environment variable is recommended. Here's how to set it up:
In the **OpenAI API Key** field, click the **Globe** button to access environment variables, and then click **Add New Variable**.
1. In the **Variable Name** field, enter `openai_api_key`.
2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
3. Click **Save Variable**.
By creating an environment variable, you keep your API key secure and make it easier to manage across different components or projects.
## Run the basic prompting flow
1. Click the **Playground** button. This where you can interact with your bot.
2. Type any message and press Enter.
And... Ahoy! 🏴‍☠️
The bot responds in a piratical manner!
## Modify the prompt for a different result
1. To modify your prompt results, in the **Prompt** template, click the **Template** field.
The **Edit Prompt** window opens.
2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
3. Run the basic prompting flow again.
The response will be markedly different.
## Next steps
Well done! You've built your first prompt in Langflow. 🎉
By dragging Langflow components to your workspace, you can create all sorts of interesting behaviors. Here are a couple of examples:
- [Memory Chatbot](/starter-projects/memory-chatbot)
- [Blog Writer](/starter-projects/blog-writer)
- [Document QA](/starter-projects/document-qa)