Getting started

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.

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

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.

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.

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.

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.

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

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.

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.

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.