> ## Documentation Index
> Fetch the complete documentation index at: https://langtail.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting started

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!

<Steps>
  <Step title="Prepare your account">
    Let's start by preparing your account with the necessary details for prompt creation.

    1. Navigate to [Langtail](https://app.langtail.com). If you don't have an account, create one for free.

    2. Create a new project and name it `quickstart`.
  </Step>

  <Step title="Create a prompt">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/ca3hBu6aHdxqHnlL/images/quickstart/step1.mp4?fit=max&auto=format&n=ca3hBu6aHdxqHnlL&q=85&s=bf376add7cef7b8dd731d8325bffa0f0" data-path="images/quickstart/step1.mp4" />

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

    1. [Click here](https://app.langtail.com/playground?shareid=OU4Bu-sPxb) 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".

    <Note>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](/playground/templating).</Note>
  </Step>

  <Step title="Try the prompt">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/Mbrsl4ExZzKpVrPs/images/quickstart/step2.mp4?fit=max&auto=format&n=Mbrsl4ExZzKpVrPs&q=85&s=c574455b0bc6384c163e27e48792938d" data-path="images/quickstart/step2.mp4" />

    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.
  </Step>

  <Step title="Improve the prompt">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/Mbrsl4ExZzKpVrPs/images/quickstart/step3.mp4?fit=max&auto=format&n=Mbrsl4ExZzKpVrPs&q=85&s=4c0d6aaa05972c4381670b4a7572ff8e" data-path="images/quickstart/step3.mp4" />

    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.
  </Step>

  <Step title="Create a basic test">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/qf4wtI2_TA0DYEKU/images/quickstart/step4-n.mp4?fit=max&auto=format&n=qf4wtI2_TA0DYEKU&q=85&s=e7e850206b90e2660bbefc5a605d3fae" data-path="images/quickstart/step4-n.mp4" />

    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.
  </Step>

  <Step title="Create a more complex assertion">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/qf4wtI2_TA0DYEKU/images/quickstart/step5.mp4?fit=max&auto=format&n=qf4wtI2_TA0DYEKU&q=85&s=6becf114b629e6b956f6867258b60bb3" data-path="images/quickstart/step5.mp4" />

    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:

       ```javascript theme={null}
       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.

    <Note>If you need to debug a JavaScript assertion, you can add `console.log` statements and click "Run" to execute the code.</Note>
  </Step>

  <Step title="Deploy the prompt">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/qf4wtI2_TA0DYEKU/images/quickstart/step6.mp4?fit=max&auto=format&n=qf4wtI2_TA0DYEKU&q=85&s=89a675a3757ea5d404b84313aa6f710c" data-path="images/quickstart/step6.mp4" />

    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".
  </Step>

  <Step title="Generate a project API key">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/2-yxUk_vBCOTk-Pz/images/quickstart/step7.mp4?fit=max&auto=format&n=2-yxUk_vBCOTk-Pz&q=85&s=7d1b69eebb0d84aa388c2ef3fcc8fac6" data-path="images/quickstart/step7.mp4" />

    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.
  </Step>

  <Step title="Integrate with the sample app">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/H5PiV2mDAKXfBshf/images/quickstart/step8.mp4?fit=max&auto=format&n=H5PiV2mDAKXfBshf&q=85&s=720a195b2a43eee57d574cdf047f4791" data-path="images/quickstart/step8.mp4" />

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

    1. Make sure that you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node.js](https://nodejs.org/en/download) 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](https://code.visualstudio.com/download)).

    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.](https://github.com/langtail/quickstart/blob/main/pages/api/generate-meals.ts#L18-L19)

    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](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.
  </Step>

  <Step title="View logs and metrics">
    <video controls className="w-full aspect-video" src="https://mintcdn.com/langtail-64/H5PiV2mDAKXfBshf/images/quickstart/step9.mp4?fit=max&auto=format&n=H5PiV2mDAKXfBshf&q=85&s=d35ebda3f06db9cdab26beee2deee550" data-path="images/quickstart/step9.mp4" />

    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.
  </Step>
</Steps>

Congratulations! You have successfully explored the core functionality of Langtail. For more helpful documentation, you can explore the following sections:

* [Advanced Tests](/concepts-and-examples/tests/adv-tests): Learn more about testing prompts and assistants to ensure everything functions as expected.

* [OpenAI Proxy](/concepts-and-examples/proxy/integrate-sdk): 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](/concepts-and-examples/sdks/typescript): 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](https://discord.com/invite/PpNqWYdBCS).