Skip to content

Build Your First Bot

This tutorial walks you through creating a simple customer support bot that uses an LLM to answer questions. By the end, you will have a working bot you can test in the conversation simulator.

Tutorial: Build your first bot from scratch

Prerequisites

  • Access to the OmniBots Operations Portal
  • At least one AI integration configured (e.g., Anthropic, OpenAI, or Vertex AI) in Settings > Integrations

Step 1: Create a New Bot

  1. Navigate to Bots in the left sidebar.
  2. Click + New Bot.
  3. Fill in the details:
    • Name: Support Bot
    • Description: Answers customer questions using AI
    • Channel: Select Web Chat (you can add more channels later)
  4. Click Create.

You are now taken to the Bot Builder -- the visual flow editor.

imageNew Bot creation form with name, description, and channel fields filled in
Creating a new bot

Step 2: Open the Flow Builder

The bot builder opens with a default flow containing a single Start node. This is the entry point for every conversation.

TIP

Every flow must have exactly one Start node. It fires when a new conversation begins or when the bot receives its first message.

imageFlow builder canvas with default Start node and empty workspace ready for building
The flow builder canvas with the Start node

Step 3: Add an LLM Response Node

  1. Open the Nodes Panel on the left sidebar (or press N).
  2. Drag an LLM Response node onto the canvas.
  3. Connect the Start node's output handle to the LLM Response node's input handle by clicking and dragging between the ports.
  4. Click the LLM Response node to open the Config Panel on the right.
  5. Configure it:
    • Integration: Select your AI provider (e.g., Anthropic Claude)
    • System Prompt: Enter instructions for the LLM:
      You are a helpful customer support agent for Acme Corp.
      Answer questions about our products, shipping, and returns policy.
      Be concise and friendly.
    • Temperature: Leave at 0.7 (balanced between creative and deterministic)
    • Output Variable: llm_response (this is where the LLM's reply is stored)
imageLLM Response node config panel showing integration selector, system prompt textarea, and temperature slider
Configuring the LLM Response node

Step 4: Add a Send Message Node

  1. Drag a Send Message node onto the canvas below the LLM Response node.

  2. Connect the LLM Response output to the Send Message input.

  3. Click the Send Message node and configure:

    • Message Text: {{llm_response}}

    This sends the LLM's generated response back to the user.

imageSend Message node config panel with message text field showing the {{llm_response}} variable
Configuring the Send Message node

Step 5: Loop Back for Multi-Turn

To allow the conversation to continue:

  1. Connect the Send Message node's output back to the LLM Response node's input.
  2. This creates a loop: the bot responds, waits for the next user message, processes it through the LLM, and responds again.

Your flow should now look like this:

[Start] → [LLM Response] → [Send Message] → (back to LLM Response)

Step 6: Test Your Bot

  1. Click the Test button in the top toolbar (or press Ctrl+T).
  2. The Conversation Simulator opens in a side panel.
  3. Type a message like What is your return policy?
  4. You should see the LLM generate a response based on your system prompt.
imageTest panel open alongside canvas showing a chat conversation with the bot responding to a customer question
Testing the bot in the conversation simulator

WARNING

If you see an error about missing integrations, make sure you have configured an AI provider in Settings > Integrations and selected it in the LLM Response node.

Step 7: Deploy

  1. Click Save to save your flow.
  2. Navigate back to Bots and find your bot.
  3. Click the Deploy toggle to activate the bot.
  4. Copy the Widget Embed Code from the bot's settings to add it to your website.
html
<link rel="stylesheet" href="https://omnibots-widget.web.app/widget.css">
<script src="https://omnibots-widget.web.app/widget.iife.js"></script>
<script>
  window.omnibot.init({
    deploymentKey: 'your-deployment-key'
  });
</script>
imageBot list view showing the new bot with a Deploy toggle switched on and widget embed code visible
Deploying the bot and copying the embed code

Next Steps

  • Add a Knowledge Base so the bot can answer questions from your documents
  • Add Conditions to branch the conversation based on user intent
  • Set up a Handoff node to escalate to a live agent when the bot cannot help
  • Explore Variables to pass context between nodes

OmniBots AI Bot Platform