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 prompt flow and modify that prompt for different outcomes.

## Prerequisites

- [Langflow installed and running](./install-langflow.mdx)

- [OpenAI API key](https://platform.openai.com)

<Admonition type="info">
  Langflow v1.0 alpha is also available in HuggingFace Spaces. [Clone the space
  using this
  link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true)
  to create your own Langflow workspace in minutes.
</Admonition>

## 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.

1. From the Langflow dashboard, click **New Project**.
2. Select **Basic Prompting**.
3. The **Basic Prompting** flow is created.

<ZoomableImage
  alt="Docusaurus themed image"
  sources={{
    light: "img/quickstart.png",
    dark: "img/quickstart.png",
  }}
  style={{ width: "80%", margin: "20px auto" }}
/>

This flow allows you to chat with the **OpenAI** component via a **Prompt**.
Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.`
This should be interesting...

4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, 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**.

## Run the basic prompting flow

1. Click the **Run** button.
   The **Interaction Panel** opens, where you can chat with your bot.
2. Type a 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 adding Langflow components to your flow, you can create all sorts of interesting behaviors.

Here are a couple of examples:

- [Memory chatbot](/starter-projects/memory-chatbot.mdx)
- [Blog writer](/starter-projects/blog-writer.mdx)
- [Document QA](/starter-projects/document-qa.mdx)