# Your First Midio App

In this guide you will learn how to set up a basic web API in Midio using several nodes from the Http package. [Create a new project](https://docs.midio.com/midio-docs/getting-started/quick-start-guide#creating-a-new-project), and let’s begin.

1. Create our API endpoint

   1. Add a new endpoint by searching for `Http Endpoint` in the [Node Palette](https://docs.midio.com/midio-docs/getting-started/quick-start-guide#adding-nodes).

   <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2F7zdKZfYqc8D1UzX5ttNp%2Fimage.png?alt=media&#x26;token=87b073b3-a9f6-42d4-be80-0579aac2b201" alt="" width="563"><figcaption></figcaption></figure></div>

   1. Configure it to handle requests to `/poem` with a query param named `query` using the following path value: `/poem?query` . Leave the other parameters at their default values.
   2. Your `Endpoint` node should look like this:

      <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2F1jh4x6sSZ6Jbd1IKAsTz%2Fimage.png?alt=media&#x26;token=024dc15c-2b2e-4cfb-a154-c37cc7608373" alt="" width="375"><figcaption></figcaption></figure></div>
2. Responding to requests

   1. Add an `Http Respond to HTTP Request`  node and hook it up to the endpoint node we added previously, in order to respond to requests. You can also add some dummy data to the `body` input if you want.

   <figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FwH2FFyoICRaOZAGno6Cc%2Fharmony-magic_-_Midio.png?alt=media&#x26;token=b2b1ab34-faa8-4ba8-8c55-1c7cae6cc49b" alt=""><figcaption></figcaption></figure>
3. Test our endpoint using `Http.Fetch`

   1. The easiest way to test out our endpoint is to click “Go to app” button in the project header, and modify that url to target our new endpoint, which will be something like:

      `https://<your-project-name>.midio.dev:<port>/poem?query=testing`&#x20;

   <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FL4JMqzwejpw4mA5ASGMN%2Fimage.png?alt=media&#x26;token=9039510f-cec1-4a3c-af2d-8351d37fa9b4" alt="" width="251"><figcaption></figcaption></figure></div>
4. Add LLM Chat Complete

   1. Add the **open-ai** package using the [package manager](https://docs.midio.com/midio-docs/package-manager).

      <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2F62Q1RQzXt8F9saoGLaWb%2Fharmony-magic_-_Midio.png?alt=media&#x26;token=c6103a3c-12ba-4c60-94a3-78b9f2650721" alt="" width="375"><figcaption><p>open the package manager</p></figcaption></figure></div>

      <figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FdmZ2kYLVzMetT7GaG0Nt%2Fharmony-magic_-_Midio.png?alt=media&#x26;token=78607c9d-8b82-4def-94e7-2fdcff1133d7" alt=""><figcaption><p>search for open-ai and install it</p></figcaption></figure>
   2. Add an instance of `OpenAI Chat Complete`.
   3. Give it a system message like: “Write a short haiku style poem based on the users request.”

   <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2F36ITM4SLsVatEEpuvuSh%2Fimage.png?alt=media&#x26;token=de1d88ca-60ea-4970-ad25-55a62b485553" alt="" width="319"><figcaption></figcaption></figure></div>
5. Provide an API key (if you received free OpenAI credits when you signed up for Midio, you can skip straight to step 5.c)
   1. [Set up an OpenAI API key](https://docs.midio.com/midio-docs/tutorial/openai-setup)

   2. Add it to Midio as a secret

      <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FrkEtAfKw9fSsRYqOsZ1O%2Fimage.png?alt=media&#x26;token=7b476ac3-da54-4872-ae1e-e7441c350aca" alt="" width="375"><figcaption><p>Open the secrets editor</p></figcaption></figure></div>

      <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FIt9SRxXLnoSQcTdlzWEc%2Fimage.png?alt=media&#x26;token=a247b9f7-53c7-4be2-ae4d-048fb7a3d478" alt="" width="375"><figcaption><p>Add a new secret</p></figcaption></figure></div>

      <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FPM2xRC43Mq4rcNQjiD0s%2Fimage.png?alt=media&#x26;token=24552776-9aae-4fb2-8f42-f41f8d1ae52b" alt="" width="283"><figcaption><p>Give the secret a name</p></figcaption></figure></div>

   3. Add an instance of `Get Environment Variable` , select our key from the dropdown menu, and connect it to the `api key` input in our `Chat Complete` node.

      <div align="left"><figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2F6yZSoyWBG5yVgd4Oo2Wo%2Fimage.png?alt=media&#x26;token=9142d530-5919-4d6e-9575-4b7a4429879d" alt="" width="375"><figcaption></figcaption></figure></div>
6. Connect the `Chat Complete` node to our endpoint.

<figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2F8dtUbYdwe7qyuxB6sY5H%2Fharmony-magic_-_Midio.png?alt=media&#x26;token=c8367276-4c27-4955-8ce1-0408c8e4693f" alt=""><figcaption></figcaption></figure>

Congratulations! You've made your first AI-driven application in Midio. You can easily experiment with it directly from Midio using the `Http Fetch`  node, like so (pick text for the response type you you're not returning an object):

<figure><img src="https://1896308808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRdFpuRAnTVYgmlCXLLou%2Fuploads%2FP8oq7Nb9rPD6AKyS0U1N%2Fharmony-magic_-_Midio.png?alt=media&#x26;token=805bd94c-0579-48f9-8cab-e5a20024c13f" alt="" width="375"><figcaption></figcaption></figure>

## Further reading

* Check our our [various guides](https://docs.midio.com/midio-docs/guides) for recipes and examples of how common tasks, like [HTTP](https://docs.midio.com/midio-docs/guides/http), [working with data](https://docs.midio.com/midio-docs/guides/working-with-data) and looping is done in Midio.
* The [reference section](https://docs.midio.com/midio-docs/reference) is a good place to look for definitive information about every aspect of Midio.
  * The [available nodes](https://docs.midio.com/midio-docs/built-in-nodes) section contains a comprehensive overview of all nodes available out of the box in Midio.
