# Create your first API: "Hello World!"

To create an API, follow the steps.

* To go to the API section, click “API” under the “APIs and Integration” menu on the left-side panel.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4apimenu.png>" %}

* To create an API, click the \[+ API] button to create a new API.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4addapi.png>" %}

* By default, the “Details” tab is selected. To label the API:&#x20;
  1. Name the API "gettingstartedHelloWorld".&#x20;
  2. To select the API method, click on the “API Method” drop-down list. For this exercise, select the API method “GET”.&#x20;
  3. Optionally add a description for the API.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwnamedetails.png>" %}

* Add the API group name "gettingstarted". ([See the steps here](https://docs.langstack.com/welcome/get-started/learn-langstack/api-group-name#how-to-select-or-create-an-api-group))&#x20;

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwgrpname.png>" %}

&#x20;

* The API URL is generated.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwurl.png>" %}

* In the “Inputs & outputs” tab, a “Response body” is created by default with the response object "defaultResponseJsonBody".

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwrespbody1.png>" %}

* To define the response object, expand the Response body and add the sample JSON {"message":"string"}.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwrespbody2.png>" %}

* To define the Actions, go to Code tab. An Action box is already created by default.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwactionbox.png>" %}

* In the "Code" tab of the Action box, an Action "API respond" is already added by default with Response body selected as "defaultResponseJsonBody".

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwapirespond.png>" %}

* To add a new Action, click (+).

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwapirespondplus.png>" %}

* Drag the new Action upward to place it above API Respond.\
  (Any Action after API Respond is not executed.)

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwapirespondnewact.png>" %}

* Define the new Action as follows:

  1. Select Action as "Update variable".
  2. Select Source as Response>defaultResponseJsonBody>message. It is displayed as Response.defaultResponseJsonBody.message.
  3. Enter Value as "Hello World!" (without quotes) and hit Enter. The text will be enclosed in a bubble.

  <figure><img src="https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwuvrespmsg.png" alt=""><figcaption></figcaption></figure>
* To save the API click the \[Save] button.

<figure><img src="https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4hwsaveapi.png" alt=""><figcaption></figcaption></figure>

* To publish the API, click the \[Publish] button.

<figure><img src="https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4publishapi.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The created API must first be published in order to be visible to an API gateway.
{% endhint %}

* Once the API is published, the default API gateway can be added; go to the “Details” tab. \
  Add an API gateway "gettingstartedHelloWorld".  (if unsure how to add an API gateway, [see steps here](https://docs.langstack.com/welcome/get-started/learn-langstack/basics-and-essentials/how-to-work-with-an-api-gateway).)

![](https://2351945889-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVoxOh7gdjWdmqooFdYBY%2Fuploads%2FONw2t3fieekZraTNio8z%2FHelloWorldAPIGateway.png?alt=media\&token=2726428e-af99-4896-b63f-20c74fbefa4a)

* Click the \[Save] button again.
* To make the API publicly available, it must be enabled. Toggle the “Disabled” button and it will change to “Enabled”.

{% embed url="<https://media.langstack.com/documentation/media/images/code/training_manual/chapter_4/ch4enableapi.png>" %}

* Use the created URL to see how the API works by pasting it into the browser. The text "Hello World!" will be displayed.

![](https://2351945889-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVoxOh7gdjWdmqooFdYBY%2Fuploads%2FNOQgiLtC61umfJsIEnxr%2FhelloWorldinBrowser.png?alt=media\&token=2d1b0781-6f26-4173-8a99-04c81ecdd622)