This guide will walk you through building a sample application powered by GPT-4. This app will suggest meals based on the ingredients you have in your refrigerator. We will use Langtail as the source of truth for the prompt, tests, logging, and metrics. Additionally, we will create a simple frontend using Next.js. Let’s begin!


Prepare your account

Let’s start by preparing your account with the necessary details for prompt creation.

  1. Navigate to Langtail. If you don’t have an account, create one for free.
  2. Create a new project and name it quickstart.

Create a prompt

Next, we will create a prompt that will act as the core of our application.

  1. Click here to open the quickstart prompt.
  2. In the top right, click “Save as…”
  3. Select your new project, rename the prompt to Quickstart, and click “Save”.
This template references a variable named selectedIngredients and iterates over it to form a bulleted list. For more on the templating syntax, see the prompt templating guide.

Try the prompt

Now, let’s try out the new prompt.

  1. Navigate to the Variables panel where you will find the selectedIngredients variable. Paste this value: ["Turkey", "Spinach", "Berries"].
  2. At the bottom of the playground, select “Send”.
  3. You should now see a response with two recipes formatted in Markdown. Feel free to adjust any model parameters or prompt templates to improve the output.

Create a basic test

Let’s create a test to verify that the prompt is working as expected.

  1. Click “Save” to save the prompt.
  2. From the navigation bar, select “Tests”.
  3. Click ”+ Add Test”.
  4. A new test will be created with our example value for selectedIngredients.
  5. Select “New Assertion”, then “contains”.
  6. In the “Title” field, write Contains additional ingredients.
  7. In the “Value” field, write **Additional Ingredients:**.
  8. Select “Save”.
  9. Click “Run” and ensure that the test passes.

Create a more complex assertion

Next, we will create an assertion that checks if exactly 2 recipes were returned.

  1. In the test you just created, select “New Assertion” and then “javascript”.
  2. Name the assertion “Has two recipes”.
  3. Paste in the following code:
    test(async ({ message, variables }) => {
      const numberOfRecipes = message.content.split("##").length - 1;
      return message.content && numberOfRecipes === 2;
  4. Select “Run” to ensure that both assertions now pass.
If you need to debug a JavaScript assertion, you can add console.log statements and click “Run” to execute the code.

Deploy the prompt

With the prompt tested, it’s time to deploy it for testing in our app.

  1. From the navigation bar, select “Playground”.
  2. Click “Save” and write a message.
  3. Select “Deploy”, then “Staging environment”.

Generate a project API key

Next, let’s generate a project API key.

  1. In the navigation bar, select the project name to go to the current project.
  2. From the left sidebar, select Secrets.
  3. Click New API Key, optionally set a name and a budget limit, then click Create.
  4. Copy the key and save it for the next step.

Integrate with the sample app

Now, let’s integrate the project API key with the sample app.

  1. Make sure that you have git and Node.js installed on your computer.
  2. Clone the quickstart repository using this command:
    git clone
  3. Open a terminal in the repository:
    cd quickstart
  4. install the packages using this command:
    npm install
  5. Open this repository in your code editor (for example, VS Code).
  6. Duplicate the .env.local.example file and rename it to .env.local.
  7. Replace the value of LANGTAIL_API_KEY with the project API key generated in the last step.
  8. If you didn’t name your prompt quickstart, modify the generate_meals.ts file with the one you used. Here’s the exact line.
  9. Start the app using this command:
    npm run dev
  10. Open the app in your browser. By default, the app is served on http://localhost:3000.
  11. Choose some ingredients and click “Find Inspiration”.
  12. If everything is set up correctly, you should see some ideas appear at the bottom of the page. This may take a few seconds.

View logs and metrics

Finally, let’s view logs and metrics.

  1. Navigate back to Langtail, go to the project view and select “Logs”.
  2. Click the latest log entry and notice all the available information. You can see the system prompt, user prompt, and direct response from the LLM. By clicking “Show more”, you can also see stats like cost.
  3. From the left sidebar, select “Metrics” to view aggregated stats.

Congratulations! You have successfully explored the core functionality of Langtail. For more helpful documentation, check the sidebar. If you have any questions, feel free to ask in our Discord community.