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!
1

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

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 Meal ideas, 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.
3

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

Improve the prompt

Now, let’s try to improve your prompt.
  1. Navigate to your prompt template and hit the ✨ magic button.
  2. See if the prompt seems better (it should) and select “Send”.
  3. You should now see a response, you can compare if it is better with the new prompt. If you don’t like it just discard changes at the top.
5

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. Use the ”+ Add test cases” button and generate a few more example values.
  6. Click on Assertions in the bottom and select “New Assertion”, then “contains”.
  7. In the “Title” field, write Contains additional ingredients.
  8. In the “Value” field, write **Additional Ingredients:**.
  9. Select “Save”.
  10. Click “Run” and ensure that the test passes.
6

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, go to Assertions, “Add new” 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.
7

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”.
8

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

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 https://github.com/langtail/quickstart.git
  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.
10

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, you can explore the following sections:
  • Advanced Tests: Learn more about testing prompts and assistants to ensure everything functions as expected.
  • OpenAI Proxy: If you’re interested in trying out Langtail without committing to the full workflow, using the OpenAI Proxy via the SDK is a great way to get started.
  • SDK: Discover how Langtail’s TypeScript SDK enhances OpenAI’s API client, allowing seamless integration with Langtail. Store prompts, reference them by slug and environment, and enjoy benefits like logs and metrics by routing requests through Langtail.
If you have any questions, feel free to ask in our Discord community.