# Quick Start

Welcome to the official documentation for Lingo Blocks! We'll guide you through setup, integration, and best practices to make the most out of your experience.

To get started, [create your account](https://app.lingoblocks.com/auth).

### Create your assistant

**Create a new chatbot.** Click on “Create Chatbot” button.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FaJS2J2Gf8v71ckga7J2L%2F1_create_chatbot.png?alt=media&amp;token=b2defd17-23d4-44a9-8472-bbd9719e300e" alt=""><figcaption></figcaption></figure>

**Give your chatbot a name.** Click on the “Create” button.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FhFWL0X1vddRI0uWYMnwO%2F2_name_chatbot%20(1).png?alt=media&amp;token=61255427-a793-49c5-9e6b-5f031ebfc0cc" alt=""><figcaption></figcaption></figure>


# Edit Profile

You have full control over the identity and look of your assistant.

**Edit chatbot profile image and name.** Click to edit chatbot profile.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2F2WqZfdcUpmPgbJEfvFJj%2F3_edit_chatbot%20(1).png?alt=media&amp;token=6abb1c46-4f4e-4e22-87d2-ac18d0a4ceff" alt=""><figcaption></figcaption></figure>


# Custom Instructions

### Introduction

The "Custom Instructions" feature is a core functionality within Lingo Blocks, designed to offer users the ability to tailor the behavior of their AI chatbot or assistant. This document provides a detailed overview of the feature, its applications, and guidance on its utilization.

### Definition

**Custom Instructions** refer to specific guidelines or directives set by a user to influence the chatbot or assistant's response patterns. By establishing these instructions, the AI model can provide answers that adhere more closely to a user's requirements or desired communication style.&#x20;

### Key Features

**Persistent Memory:** Once implemented, custom instructions are retained and considered for all subsequent interactions, ensuring consistent user-chatbot experience without repetitively inputting preferences.

**Adaptable Use Cases:** Custom instructions can be applied across various domains. Whether your application targets e-commerce, education, or any other sector, the ability to guide your chatbot's responses can be invaluable.

**User-specific Tailoring:** Different users or audiences may have distinct requirements. Custom instructions allow for a refined user experience by addressing those specific needs.

### Usage Instructions

#### Setting Custom Instructions:

1. Navigate to the Custom Instructions section within the Lingo Blocks dashboard.
2. Input your specific instructions or guidelines in the provided field.
3. Save changes to ensure your chatbot or assistant incorporates these directives in future interactions.

#### Modifying or Deleting Instructions:

1. Revisit the Custom Instructions section.
2. Edit or remove the existing instructions as needed.
3. Save changes to update the chatbot's behavior.


# Actions

Learn how to create custom actions by making one or more APIs available to your AI agent.\
\
Actions allow agents to integrate external data or interact with the real-world, such as connecting agents to databases, plugging them into your emails, or making them your shopping assistant, all through APIs.

Actions are defined using the [OpenAPI specification](https://swagger.io/specification/), which is a standard for describing APIs.

### Create a new action

**Navigate to Actions in the dashboard.** Tap the + New button.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FVIchs1FBOEJF11Dv0Omv%2FScreen%20Shot%202024-02-01%20at%202.34.56%20PM.png?alt=media&amp;token=10657ebb-6e6f-4b93-888c-0cb09e48909a" alt=""><figcaption></figcaption></figure>

**Enter a valid JSON OpenAPI specification** into the Schema input.\
\
*Note:* The Authentication feature is not yet functional. This inconvenience is temporary and will become functional soon.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FMm0AXybOdjWAGDfalVsW%2FScreen%20Shot%202024-02-01%20at%202.36.16%20PM.png?alt=media&amp;token=e99591a1-8fc7-4926-85f7-161c0c038178" alt=""><figcaption></figcaption></figure>

The code block below is an OpenAPI specification example that uses the Coindesk API to get the real-time price of Bitcoin.

{% code lineNumbers="true" %}

```json
{
  "openapi": "3.0.1",
  "info": {
    "title": "CoinDesk Price Index API",
    "description": "An API that provides the current prices for various cryptocurrencies and fiat currencies.",
    "version": "1.0.0"
  },
  "servers": [
    {
      "url": "https://api.coindesk.com"
    }
  ],
  "paths": {
    "/v1/bpi/currentprice/{symbol}.json": {
      "get": {
        "summary": "Get current price for a specified currency or cryptocurrency",
        "operationId": "getCurrentPrice",
        "parameters": [
          {
            "name": "symbol",
            "in": "path",
            "required": true,
            "schema": {
              "type": "string"
            },
            "description": "The symbol for the currency or cryptocurrency to get the price for (e.g., BTC, USD, ETH)"
          }
        ],
        "responses": {
          "200": {
            "description": "Current price for the specified currency or cryptocurrency",
            "content": {
              "application/json": {
                "schema": {
                  "type": "object",
                  "properties": {
                    "time": {
                      "$ref": "#/components/schemas/Time"
                    },
                    "disclaimer": {
                      "type": "string"
                    },
                    "bpi": {
                      "type": "object",
                      "additionalProperties": {
                        "$ref": "#/components/schemas/CurrencyPrice"
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  "components": {
    "schemas": {
      "Time": {
        "type": "object",
        "properties": {
          "updated": {
            "type": "string",
            "description": "Human-readable updated time"
          },
          "updatedISO": {
            "type": "string",
            "format": "date-time",
            "description": "ISO 8601 formatted updated time"
          },
          "updateduk": {
            "type": "string",
            "description": "UK formatted updated time"
          }
        },
        "required": ["updated", "updatedISO", "updateduk"]
      },
      "CurrencyPrice": {
        "type": "object",
        "properties": {
          "code": {
            "type": "string",
            "description": "The currency or cryptocurrency code"
          },
          "rate": {
            "type": "string",
            "description": "The current rate in the specified currency or for the specified cryptocurrency"
          },
          "description": {
            "type": "string",
            "description": "Description of the currency or cryptocurrency"
          },
          "rate_float": {
            "type": "number",
            "description": "The rate as a floating-point number"
          }
        },
        "required": ["code", "rate", "description", "rate_float"]
      }
    }
  }
}
```

{% endcode %}

**Tap the Save button.**

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FBSV1MK7VIWpHcwwVRIRL%2FScreen%20Shot%202024-02-01%20at%202.36.28%20PM.png?alt=media&amp;token=a3d93801-b5bc-4bea-9b10-4f5ce7ef5687" alt=""><figcaption></figcaption></figure>

**You should now see the custom action** you just created.\
\
*Note:* If the OpenAPI specification is invalid, the action will not appear.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FzORWWnMdWY5k71PMWrog%2FScreen%20Shot%202024-02-01%20at%202.36.45%20PM.png?alt=media&amp;token=c69ff859-7d7a-4c10-83c1-37b915df3132" alt=""><figcaption></figcaption></figure>

**Test and confirm your new action works** as expected by chatting with your AI agent.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FBPugRoWrKmglYrSexEuO%2FScreen%20Shot%202024-02-01%20at%202.37.56%20PM.png?alt=media&amp;token=9ce03e9e-da64-4a3f-929b-b120956e54a6" alt=""><figcaption></figcaption></figure>

### Troubleshooting

If you need help creating a new custom action, please consider joining our [Discord community](https://discord.gg/K6tCnJtVFy) for support.


# Text

You can add plain text to your assistant's knowledge base to make custom content available during conversations. Navigate to the Lingo Block [dashboard](https://app.lingoblocks.com/auth).

### Create knowledge

**Add knowledge.** Click on the “Add Knowledge” button.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FRODgzZOecZoOZIf5O0PV%2F4_add_knowledge.png?alt=media&amp;token=659b8db8-ef7f-459c-9ce0-e7598f78a9e3" alt=""><figcaption></figcaption></figure>

**Choose your knowledge source.** Pick “Plain Text” to write text.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FkVOjiUrNAQp3j2hJza3x%2F5_choose_knowledge_source.png?alt=media&amp;token=803f186d-28b7-4c5d-b450-a3933b62478c" alt=""><figcaption></figcaption></figure>

**Enter text**. Use the Text Editor to paste and edit plain text. Click "Save" to add text to knowledge base.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FP8WHYSKLsW0rbEujuSRv%2F6_text_knowledge.png?alt=media&amp;token=8ed78c26-6e8e-43d8-9be8-f37588ff0eaa" alt=""><figcaption></figcaption></figure>

###


# Website

You can add website content to your assistant's knowledge base to make custom data available during conversations. Navigate to the Lingo Block [dashboard](https://app.lingoblocks.com/auth).

### Create knowledge

**Add knowledge.** Click on the “Add” button.&#x20;

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FfJWimUvipGpiv74wBSAX%2FScreen%20Shot%202023-09-13%20at%2011.08.59%20PM.png?alt=media&amp;token=14ff2fb2-72a5-4e2f-b467-df8bf07ca14f" alt=""><figcaption></figcaption></figure>

**Choose your knowledge source.** Pick “Website” to import content from your website.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FH7246Hak3WjgA27niALC%2FScreen%20Shot%202023-09-13%20at%2011.09.03%20PM.png?alt=media&amp;token=1cd0e200-d2e4-427b-9efc-a0292b1a1182" alt=""><figcaption></figcaption></figure>

**Domain**. When you select this option, our tool will attempt to scrape data from the entire website of the provided domain.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FNe1gIXrCDgGQXZuwKUbp%2FScreen%20Shot%202023-09-13%20at%2011.09.06%20PM.png?alt=media&amp;token=bf8fe64f-30a2-4eb9-92cc-c985d2369888" alt=""><figcaption></figcaption></figure>

**URL**. If you only need data from a specific webpage, use this option. Just paste the desired URL, and the tool will only scrape data from that page.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FqUkCdSUs6JK3n3ZZ4yJv%2FScreen%20Shot%202023-09-13%20at%2011.09.10%20PM.png?alt=media&amp;token=f033eb7d-f326-4081-83f0-caf8c85626fc" alt=""><figcaption></figcaption></figure>

**Sitemap**. This option allows you to scrape data from all URLs listed in a website’s sitemap.xml.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2Fd2n531bGGraZAnVvCU5c%2FScreen%20Shot%202023-09-13%20at%2011.09.14%20PM.png?alt=media&amp;token=046e5b60-2564-41b3-8013-6e7800783eea" alt=""><figcaption></figcaption></figure>

**Save**. Once you're satisfied with the list of URLs, click "Save" to begin the web scraping process.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FJkb9XKYS0dZ2tCTy5o3y%2FScreen%20Shot%202023-09-13%20at%2011.31.18%20PM.png?alt=media&amp;token=92446f81-5c53-4b9e-b371-9729b00d9fd7" alt=""><figcaption></figcaption></figure>

**Approximate scraping time**. 10 minutes for every 100 URLs.

###


# Chat Bubble

**Embed chatbot to website.** Copy and paste your chatbot code snippet into your website HTML file.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FM0ne4qsOmrRuVTcM07Ao%2F7_embed_code.png?alt=media&amp;token=585d1680-89f2-4f73-b9be-f4205d1e0b86" alt=""><figcaption></figcaption></figure>


# Inline Chat

**Add the Website Embed script.** Copy and paste your chatbot code snippet into your website HTML file.

<figure><img src="https://876323318-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkVKtyRXbqQ0J4M23KTWd%2Fuploads%2FM0ne4qsOmrRuVTcM07Ao%2F7_embed_code.png?alt=media&amp;token=585d1680-89f2-4f73-b9be-f4205d1e0b86" alt=""><figcaption></figcaption></figure>

**Mount the chatbot.** In order to mount the chatbot inline, add a "container" element. The chatbot component will be rendered inside the container element. The `id` must be `lingo-chatbot`.

```html
<div id="lingo-chatbot"></div>
```

Use CSS to define the height and width of the element.


# Getting Started

Introduction

Welcome to the Lingo Blocks API documentation. With our powerful and flexible API, you can seamlessly integrate the capabilities of Lingo Blocks into your platform, mobile application, or even third-party services. This page will walk you through the essential steps to get started.

#### Prerequisites

1. **Lingo Blocks Account**: Ensure you have a registered account on Lingo Blocks. If you haven't, sign up [here](https://app.lingoblocks.com/auth).


# Authentication

To authenticate with the Lingo Blocks API, you will need to make a POST request to the following endpoint:

The **base url** is `https://api.lingoblocks.com`.

#### Authentication

* **Endpoint**: `/v1/chatbot/:id/authenticate`
* **Method**: POST
* **Request Body**:
  * `accessToken`: The existing access token for the session (optional).
* **Params**:
  * `id`: Your chatbot's unique ID.
* **Response**:
  * `accessToken`: The generated or verified access token for the session.
  * Note: If an existing `accessToken` is not provided or is invalid, a new `accessToken` will be generated.


# Endpoints

Always remember to handle and display any error messages to users gracefully, and use the `accessToken` for authenticating subsequent requests to the Chatbot API after the initial authentication.

The **base url** is `https://api.lingoblocks.com`.

### **Authenticate Chatbot User**

Authenticate and obtain an access token to communicate with the chatbot.

* **Endpoint**: `/v1/chatbot/:id/authenticate`
* **Method**: POST
* **Request Body**:
  * `accessToken`: The existing access token for the session (optional).
* **Params**:
  * `id`: Your chatbot's unique ID.
* **Response**:
  * `accessToken`: The generated or verified access token for the session.
  * Note: If an existing `accessToken` is not provided or is invalid, a new `accessToken` will be generated.

### **Send a Message to Chatbot**

Send a message to the chatbot and receive its response.

* **Endpoint**: `/v1/chatbot/:id/message`
* **Method**: POST
* **Headers**:
  * `Content-Type`: application/json
* **Params**:
  * `id`: Your chatbot's unique ID.
* **Request Body**:
  * `text`: The message you want to send to the chatbot.
  * `accessToken`: The access token obtained after authentication.
* **Response**:
  * `response`: The chatbot's reply.
  * `metadata`: Additional data about the chatbot's response.

### **Get Chatbot Widget Settings**

Retrieve the settings for displaying the chatbot widget.

* **Endpoint**: `/v1/chatbot/widget/:id/settings`
* **Method**: GET
* **Headers**:
  * `Content-Type`: application/json
* **Params**:
  * `id`: Your chatbot's unique ID.
* **Query Parameters**:
  * `accessToken`: The access token obtained after authentication.
* **Response**:
  * `settings`: Object containing settings like `name` and `profilePhoto` for the chatbot widget.


# Streaming

Using WebSockets provides the ability to stream responses back to a client in order to allow partial results for certain requests. This improves the perceived responsiveness of applications and offers a better user experience.

The **WebSocket url** is `https://api.lingoblocks.com`.

### Message Streaming

Stream a message response back to a client as it's being generated.

* **WebSocket URL**: `https://api.lingoblocks.com`
* &#x20;**Requirements**:
  * `accessToken`: The existing access token for the session (see [Authentication](/docs/api/authentication)).
  * `socket.io-client`: WebSocket client library (see [npm package](https://www.npmjs.com/package/socket.io-client)).

#### Setup and Connection

1. Import `socket.io-client` to create a WebSocket connection.

```javascript
import { io } from "socket.io-client";
```

2. Initialize socket connection.

```javascript
const options = {
  transportOptions: {
    polling: {
      extraHeaders: {
        "access-token": "<access-token>"
      }
    }
  }
};

const socket = io("https://api.lingoblocks.com", options);
```

#### Receiving Messages

* Listen for messages on the `message` event.
* Filter messages by checking if the event data matches `chatbot.responseGenerated`.
* Process the streamed message data.

```javascript
socket.on("message", (eventData) => {
  if (eventData.event === "chatbot.responseGenerated") {
    console.log("Streaming message data:", eventData.data);
  }
};
```


