> This page is for version v4.0.
> For other versions, use one of these documentation indexes:
> - v5.0 (default): https://humanloop.com/docs/v5/llms.txt
> - v4.0: https://humanloop.com/docs/v4/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://humanloop.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://humanloop.com/docs/_mcp/server.

> In this tutorial, you’ll use Humanloop to quickly create a GPT-4 chat app. You’ll learn how to create a Prompt, call GPT-4, and log your results. You’ll also learn how to capture feedback from your end users to evaluate and improve your model.

At the end of this tutorial, you'll have created your first GPT-4 app. You'll also have learned how to:

1. Create a Prompt
2. Use the Humanloop SDK to call Open AI GPT-4 and log your results
3. Capture feedback from your end users to evaluate and improve your model

![In this tutorial, you'll build a simple GPT-4 app that can explain a topic in the style of different experts.](/docs/_fern-img/f59b706834adac9e5a0c2ef8b9d6f84aa23190e63afe56e3f8a3307c39369682.webp)

This tutorial picks up where the [Quick Start](./quickstart) left off. If you’ve already followed the quick start you can skip to step 4 below.

## Create the Prompt

#### Account setup

#### Create a Humanloop Account

If you haven’t already, create an account or log in to Humanloop

#### Add an OpenAI API Key

If you’re the first person in your organization, you’ll need to add an API key to a model provider.

1. Go to OpenAI and [grab an API key](https://platform.openai.com/api-keys)
2. In Humanloop [Organization Settings](https://app.humanloop.com/account/api-keys) set up OpenAI as a model provider.

> **Info**
>
> Using the Prompt Editor will use your OpenAI credits in the same way that the
> OpenAI playground does. Keep your API keys for Humanloop and the model
> providers private.

## Get Started

### Create a Prompt File

When you first open Humanloop you’ll see your File navigation on the left. Click ‘**+ New**’ and create a **Prompt**.

![](/docs/_fern-img/839c05752b46bcbe68b6a4d4871b0ad54aa401b557ec69baf800c66dd6605289.webp)

In the sidebar, rename this file to "Comedian Bot" now or later.

### Create the Prompt template in the Editor

The left hand side of the screen defines your Prompt – the parameters such as model, temperature and template. The right hand side is a single chat session with this Prompt.

![](/docs/_fern-img/bd73541ed1ed343f1aa4d43d423a73cde3169db401631ffbe309e10079fd36d6.webp)

In the editor, update the system message to:

```
You are a funny comedian. Write a joke about {{topic}}.
```

![](/docs/_fern-img/6c8bf026adf4480dbfad2fe692b6a933e0de461effd0cdd94cf1c47c530370df.webp)

This message forms the chat template. It has an input slot called `topic` (surrounded by two curly brackets) for an input value that is provided each time you call this Prompt.

On the right hand side of the page, you’ll now see a box in the **Inputs** section for `topic`.

1. Add a value for `topic` e.g. music, jogging, whatever
2. Click **Run** in the bottom right of the page

This will call OpenAI’s model and return the assistant response. Feel free to try other values, the model is *very* funny.

You now have a first version of your prompt that you can use.

### Save your first version of this Prompt

1. Click the **Save** button at the top of the editor
2. Enter **Initial Comedian Setup** in the version name field
3. Enter **Prompt for making (not so) funny jokes!** in the description field
4. Click **Save**

![](/docs/_fern-img/3ee06b7926a5ce932cd2b90e4b00f8d450cce378137f10278df5c02ae227d9a2.webp)

### View the logs

Under the Prompt File, click ‘Logs’ to view all the generations from this Prompt

Click on a row to see the details of what version of the Prompt generated it. From here you can give feedback to that generation, see performance metrics, open up this example in the Editor, or add this log to a Dataset.

![](/docs/_fern-img/3154bf4ca107872314e9353d516687b4d692370a60087d5bb33f9df4ec6693d7.webp)

## Call the Prompt in an app

Now that you’ve found a good prompt and settings, you’re ready to build the "Learn anything from anyone" app! We’ve written some code to get you started — follow the instructions below to download the code and run the app.

![When you run the app, this is what you should see.](/docs/_fern-img/f59b706834adac9e5a0c2ef8b9d6f84aa23190e63afe56e3f8a3307c39369682.webp)

### Setup

If you don’t have Python 3 installed, [install it from here](https://www.python.org/downloads/). Then download the code by cloning [this repository](https://github.com/humanloop/humanloop-tutorial-python) in your terminal:

**`Python Tutorial`**

```Text Python Tutorial
git clone git@github.com:humanloop/humanloop-tutorial-python.git
```

If you prefer not to use git, you can alternatively download the code using [this zip file](https://github.com/humanloop/humanloop-tutorial-python/archive/refs/heads/main.zip).

In your terminal, navigate into the project directory and make a copy of the example environment variables file.

**`Bash`**

```Text Bash
cd humanloop-tutorial-python
cp .example.env .env
```

Copy your [Humanloop API key](https://app.humanloop.com/account/settings) and set it as `HUMANLOOP_API_KEY` in your newly created .env file. Copy your [OpenAI API key](https://beta.openai.com/account/api-keys) and set it as the `OPENAI_API_KEY`.

### Run the app

Run the following commands in your terminal in the project directory to install the dependencies and run the app.

```
python -m venv venv
. venv/bin/activate
pip install -r requirements.txt
flask run
```

Open [http://localhost:5000](http://localhost:5000) in your browser and you should see the app. If you type in the name of an expert, e.g "Aristotle", and a topic that they're famous for, e.g "ethics", the app will try to generate an explanation in their style.

Press the thumbs-up or thumbs-down buttons to register your feedback on whether the generation is any good.

Try a few more questions. Perhaps change the name of the expert and keep the topic fixed.

## View the data on Humanloop

Now that you have a working app you can use Humanloop to measure and improve performance. Go back to the Humanloop app and go to your project named "learn-anything".

On the ***Models*** dashboard you'll be able to see how many data points have flowed through the app as well as how much feedback you've received. Click on your model in the table at the bottom of the page.

![](/docs/_fern-img/f051a7058de11d0865b7f8aecc58d203ff8eb0d2a0b580c00b3a624d39d2d965.webp)

Click ***View data*** in the top right. Here you should be able to see each of your generations as well as the feedback that's been logged against them. You can also add your own internal feedback by clicking on a datapoint in the table and using the feedback buttons.

## Understand the code

Open up the file `app.py` in the "openai-quickstart-python" folder. There are a few key code snippets that will let you understand how the app works.

Between lines 30 and 41 you'll see the following code.

```python
expert = request.form["Expert"]
topic = request.form["Topic"]

# hl.complete automatically logs the data to your project.
complete_response = humanloop.complete_deployed(
  project="learn-anything",
  inputs={"expert": expert, "topic": topic},
  provider_api_keys={"openai": OPENAI_API_KEY}
)

data_id = complete_response.data[0].id
result = complete_response.data[0].output
```

On line 34 you can see the call to `humanloop.complete_deployed` which takes the project name and project inputs as variables. `humanloop.complete_deployed` calls GPT-4 and also automatically logs your data to the Humanloop app.

In addition to returning the result of your model on line 39, you also get back a `data_id` which can be used for recording feedback about your generations.

On line 51 of `app.py`, you can see an example of logging feedback to Humanloop.

```python
# Send feedback to Humanloop
humanloop.feedback(type="rating", value="good", data_id=data_id)
```

The call to `humanloop.feedback` uses the `data_id` returned above to associate a piece of positive feedback with that generation.

In this app there are two feedback groups `rating` (which can be `good` or `bad`) and `actions`, which here is the copy button and also indicates positive feedback from the user.

## Add a new model config

If you experiment a bit, you might find that the model isn't initially that good. The answers are often too short or not in the style of the expert being asked. We can try to improve this by experimenting with other prompts.

1. Click on your model on the model dashboard and then in the top right, click ***Editor***

   ![](/docs/_fern-img/bd8f28031a6bf37b8df9406ca8c0d2aea926dec0379b98472f186f3f56138100.webp)

2. Edit the prompt template to try and improve the prompt. Try changing the maximum number of tokens using the ***Max tokens*** slider, or the wording of the prompt.

   ![](/docs/_fern-img/73a7c9af7e27c464d2902746e001f8ba384b6c9784bd059faac6fead29c517a2.webp)

Here are some prompt ideas to try out. Which ones work better?

**`Transcript from lecture`**

````Text Transcript from lecture
{{ expert }} recently gave a lecture on {{ topic }}. Here is a transcript of the
most interesting section: ``` ```Text ELI10 If {{ expert }} explained {{
  topic,
}} to a 10 year old, they would likely say: ``` ``` Write an essay in the style
of {{ expert }} on {{ topic }}
````

3. Click ***Save*** to add the new model to your project. Add it to the "learn-anything" project.

   ![](/docs/_fern-img/da4709c4cb120a0c09ae0f9c3717d5d1739219f93bf494b5626b351103791e03.webp)

4. Go to your project dashboard. At the top left of the page, click menu of "production" environment card. Within that click the button ***Change deployment*** and set a new model config as active; calls to `humanloop.complete_deployed` will now use this new model. Now go back to the app and see the effect!

![](/docs/_fern-img/5354af10652707dfa8369ee58a42f21ea154dc6461569f6a47dfb44927be3147.webp)

## Congratulations!

And that’s it! You should now have a full understanding of how to go from creating a Prompt in Humanloop to a deployed and functioning app. You've learned how to create prompt templates, capture user feedback and deploy a new models.

If you want to learn how to improve your model by running experiments or finetuning check out our guides below.