> For the complete documentation index, see [llms.txt](https://sdk.logicdialog.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sdk.logicdialog.ai/quick-start.md).

# Quick Start

On this page we'll get you setup using the SDK to provide a simple "Hello World" reply to a users message.

In this guide we are going to setup a simple web server that can respond to requests. This web server will be triggered using the "webhook" capability within logicdialog. There are just a few steps we'll need to take to get you all setup.  These are as follows : 

1. Setting the Webhook URL settings
2. Building some content that will trigger the webhook
3. Setting up a project and creating an instance of the Webhook Client
4. Adding functionality to the project to handle specific types of request

These steps are all described below.

## Setting the webhook URL

In this example we are going to use `ngrok` to provide an internet accessible hostname. You will need to [`install ngrok`](https://ngrok.com/) first. Once installed open a command terminal and type 

{% tabs %}
{% tab title="Using ngrok" %}

```
ngrok http <server port to expose>
```

{% endtab %}
{% endtabs %}

In this case the `<server port to expose>` is going to be `8080`.

The command will start and provide to URLs, one on http and the other on https. Make a note of the `https` URL as you will need this shortly.&#x20;

Once you have the URL we'll need to add this to the settings in IA. To do this :&#x20;

1. Login to logicdialog
2. Go to Settings -> Webhook
3. Set Endpoint to the forwarding URI from `ngrok`

Please make a note of the JWT secret that is shown on the Webhook settings page. We'll use this to authenticate our requests later.

## Building Content in IA

1. Using Visual Bot Builder in logicdialog, add new Choice using plus buttons to the far left or right of the existing choices, or add to existing choice by using the plus button on said choice
2. Choose New Block and then Function Block
3. Give block a name, and pick module if applicable
4. If function has not been implemented, leave Todo field ticked, and add Temporary Text, usually a description of function implementation, and add button to simulate response. **If you want your webhook to receive an event when this block is hit by a user, "Todo" must be unchecked**
5. Pick Form from dropdown if applicable
6. Pick Handler Name, note this as it is used when adding handlers to the `WebhookClient`

We will also need to...&#x20;

1. In logicdialog go to the Forms page
2. Click add new form, and give form a descriptive title
3. Add new question, or pick one from the question bank
   1. Give descriptive title to question
   2. Write question text, to be displayed when question is asked
   3. Pick input type given to the user, followed by data type
   4. A question can also be added to the question bank from the Question Bank tab

## Creating a project and code

### Install the library

The best way to interact with our API is to use one of our official libraries:

{% tabs %}
{% tab title="Node" %}

```
# Install via NPM
npm install --save @webuildbots/webuildbots-sdk
```

{% endtab %}
{% endtabs %}

### Setting up an express server

The webhook from IA will make an HTTP request to a webserver containing your application logic. This could be a number of things, including a serverless function however in this example we are going to use `express` to host our API. We can setup `express` using the following simple bits of code.&#x20;

{% tabs %}
{% tab title="Node" %}

```javascript
import { createServer } from 'http';
import express, { Request, Response } from 'express';
import { divisionHandler } from './handler';
import { WebhookClient } from '@webuildbots/webuildbots-sdk/lib/util/webhook-client';
import dotenv from 'dotenv';

// Load Webhook Secret, this can be found in IntelAgent settings
dotenv.config();

const secret = process.env['WEBHOOK_SECRET'] || '';

// WebhookClient used to run handlers, intialised with JWT token copied previously
const whClient: WebhookClient = new WebhookClient(secret);

// Add handler to the list of handlers in the Client, name must match the functions handler-name
whClient.addHandler('division-handler', divisionHandler);

// Function to getToken from request, used to authorise request and secret
function getToken(request: Request): string {
  const token = request.headers.authorization?.split('Bearer ')[1];
  if (!token) {
    throw Error('No token found');
  }
  return token;
}

const app: express.Application = express();

// Text body-parser, as handleRequest function takes body from request as a string
// Content-type of request is plaintext, which is parsed by the handleRequest function
app.use(express.text());

// This should match the endpoint set in IntelAgent
app.post('/', async (req: Request, res: Response) => {
  // handleRequest returns a JSON object and a statusCode
  const { status, body } = await whClient.handleRequest(
    req.body,
    getToken(req)
  );
  res.status(status).send(body);
});

const server = createServer(app);
server.listen(8080);
```

{% endtab %}
{% endtabs %}

This example will allow us to `POST` data to the `/` endpoint running on port `8080`. First we create an instance of the `WebhookClient` which will allow us to handle the request and return various values back to the user. You'll notice on line `13` we construct a `handler` which will handle the `division-handler` requests. By adding this handler we can build an application that can handle different requests from different parts of the application, each one using a different name that is set in IA on a block by block level. On line `36` the webhook client will handle the request - specifically looking for a handler that matches the incoming requests handle name.&#x20;

### Make your first hander

A webhook handler is a simple function that will be called any time a block is triggered from IA. Its passed the `webhookReq` object which represents the information in the conversation, and a `responseBuilder` that helps you construct a reply to the user.&#x20;

The following example shows a simple case where one number is divided by another, and an error is thrown if this combination of numbers provides a divide by zero error. A plain text message will be sent back to the user containing the answer.&#x20;

{% tabs %}
{% tab title="Node" %}

```javascript
export const divisionHandler: WebhookHandler = async (
  webhookReq: WebhookRequest,
  responseBuilder: ResponseBuilder
): Promise<void> => {
  // read values from the form completed by the user before the call over the webhook was made
  const { value: baseNumber } = webhookReq.formValue.baseNumber;
  const { value: divisionNumber } = webhookReq.formValue.divisionNumber;

  if (divisionNumber.value === 0) {
    responseBuilder.functionFailure(failureParams);
    return;
  }

  const resultNumber = baseNumber / divisionNumber;

  responseBuilder.pushBlockPointer(resultBlock);

  const basicBB = new BasicBB()
    .addText(Languages.ENGLISH, `${resultNumber}!`)
    .pushChoice(backToMenu());

  responseBuilder
    // Add the block to the response
    .pushBlock(basicBB)
    // Reset the form values after the response is sent to the user
    .unsetFunctionForm();
};

```

{% endtab %}
{% endtabs %}

For more information please see the following pages :&#x20;

{% content-ref url="/pages/ZUZoAttTfq3tPqjBKF1z" %}
[WebhookClient](/reference/api-reference/webhookclient.md)
{% endcontent-ref %}

{% content-ref url="/pages/IlDf1AffmDN9Kzb09GRw" %}
[ResponseBuilder](/reference/api-reference/responsebuilder.md)
{% endcontent-ref %}