Tutorial: Create a RAG chatbot

This guide shows you how to create a RAG (Retrieval-Augmented Generation) chatbot from scratch using the Wikit Semantics platform. The chatbot will be able to answer questions based on the content of your own website.

Step 1: Create the LLM App

To begin, we will create the LLM App that will host your chatbot.

1. Go to the Wikit Semantics Console.
2. In the left menu, click on LLM Apps.
3. Click on the Create an LLM app button.
4. Fill in the fields:
   • Type: Select Question/Answer Chat.
   • Name: Give your application a name (e.g., Chatbot wikit.ai).
5. Click on Create.

Step 2: Create a website connector

Now, we will configure the "crawler" that will read the content of your website.

1. On the "LLM App Details" page where you just arrived, click on the "Applications" icon (nine squares) at the top right.
2. Select Connect Console. (This opens a new tab).
3. In the list of connectors, find and click on Url Crawler.
4. Click on Install.
5. On the next screen, select the basic version Url Crawler (the first option) and click Install again.
6. Once the installation is complete, you are on the configuration page. Click on the "..." menu (Options) and select Edit.
7. In the URL list (required) field, enter the full URL of your site's homepage (e.g., https://www.wikit.ai/).
8. Scroll down the page and click on Save.
9. Go back to your list of connectors by clicking on My connectors in the left menu.
10. Click on the "..." menu of your new "Url Crawler" and select Rename.
11. Give it a clear name (e.g., wikit.ai Connector) and click on Save.
12. Click on the "..." menu again and select Activate.

Step 3: Create a data source

We will now link this connector to your Semantics Console to make it a knowledge source.

1. Go back to the Wikit Semantics Console tab.
2. In the left menu, click on Data Sources.
3. Click on the Create a data source button.
4. Fill in the fields:
   • Name: Give your source a name (e.g., wikit.ai Data Source).
   • Origin: Check the Connector option.
   • Select a connector: In the dropdown menu, choose the connector you just created (wikit.ai Connector).
5. Click on Create.

Step 4: Synchronize the connector

Your connector is ready; you now need to ask it to retrieve data from the site.

1. Go back to the Wikit Connect tab.
2. Go to My connectors and click on your wikit.ai Connector to see its details.
3. Scroll down to the Synchronization section at the bottom of the page.
4. Click on the "..." menu (Options) in this section and select Edit.
5. Enable the Activate synchronization button.
6. Configure an automatic update frequency (e.g., Weekly, Friday, 18:00).
7. Click on Save.
8. The schedule is saved, but we will launch the first synchronization manually. Click on the "..." menu of the "Synchronization" section again and select Synchronize.
9. A "Synchronization in progress" notification appears. You can track its progress in the Logs tab of this connector.
10. Once the synchronization is complete, you can check the result by returning to the Wikit Semantics Console, under Data Sources > (your source) > Documents tab. Your site's pages should appear there.

Step 5: Link the LLM App to the data source

It's time to connect your LLM App to the knowledge you just collected (the data source).

1. In the Wikit Semantics Console, go back to the LLM Apps menu.
2. Click on the "..." menu of your Chatbot wikit.ai and select Manage the LLM app.
3. Go to the Data Sources tab.
4. You will see your wikit.ai Data Source with the "Disabled" status.
5. Simply click on the toggle to activate it. It will change to "Activated" status.

Step 6: Configure web integration

Your chatbot is now functional. We will configure its appearance (the widget) to integrate it into your site. This step is done in two parts.

1. In the Wikit Semantics Console, click on Interface in the left menu.

1. Assign the main application

First, we link the LLM App to the global interface.

1. In the Customization options section, click on the "..." menu (Options) and select Edit.
2. Under LLM App, choose your Chatbot wikit.ai from the dropdown menu.
3. Click on Save.

2. Configure integration (widget)

Next, we configure the specific web widget.

1. Further down on the same page, in the Integration options section, click on the "..." menu (Options) and select Edit.
2. Check the box Use a single app in the integration.
3. Under LLM App, choose your Chatbot wikit.ai again.
4. Configure the visual options according to your preferences (e.g., Button position: Bottom right, Button size (in pixels): 48...).
5. Click on Save and view code.
6. An Integration code window appears. Click on the Copy button.

Step 7: Integrate the script into your website

You have copied a JavaScript code block. For the chatbot to appear, this code must be added to your website pages.

The exact method depends on the technology you use (WordPress, Shopify, Webflow, pure HTML/CSS, etc.). The goal is always to insert the <script> tag you copied, preferably just before the closing </body> tag of your page.

Case 1: Simple HTML site

As shown in the video, if you have a pure HTML site, open your .html files in a code editor (like VS Code) and paste the copied script just before the </body> tag.

<script type="text/javascript" src="https://..."></script>
<script>
  // ... script configuration ...
</script>
</body>
</html>

Case 2: WordPress site

Option 1 (Recommended): Use a plugin

1. Log in to your WordPress dashboard.
2. Go to Plugins > Add New.
3. Search for and install a plugin like WPCode – Insert Headers and Footers.
4. Once activated, go to Code Snippets > Header & Footer.
5. Paste the copied script into the Footer box.
6. Save changes.

Option 2 (Advanced): Modify your theme If you are comfortable with code, you can add the script to your theme's footer.php file. Caution: It is crucial to use a child theme for these modifications. If you modify the parent theme directly, your changes will be lost during the next theme update.

Case 3: Other platforms (Shopify, Webflow, etc.)

Look for the "Custom Code", "Scripts", or "Integrations" section in your platform's settings and paste the script into the area corresponding to the footer or the end of the page body.

Step 8: Test your chatbot

1. (Re)load your website. The chatbot icon should now appear where you configured it (for example, bottom right).
2. Click on the icon to open the chat window.
3. Ask a question whose answer is on your site (e.g., "Who founded Wikit and when?").
4. The chatbot will answer you using information from your site and citing the source pages it used.

---

Congratulations! You have created and deployed a complete RAG chatbot based on your own website's content.