Skip to main content

Prerequisites

Before we start building, ensure you have everything ready:
  • Tars Account - Create account if you don’t have one
  • Gmail Account - Use your support email for professional communication
Setup Time: Account creation takes 2-3 minutes. Gmail is required for all setups.

Agent workflow overview

In this guide, you’ll build an AI support Agent that answers user questions using your Knowledge Base and escalates issues to support via email.
How it works: The AI Agent receives a user’s question, searches your Knowledge Base for relevant information, provides an answer, and if more help is needed, collects user details and notifies the support team via email.

Add Knowledge sources

Your AI Agent needs knowledge to answer customer questions accurately. Let’s add your company’s information.

Step 1: Navigate to Knowledge Bases

  1. Navigate to the Knowledge Base section in your Tars dashboard.
  2. Click Add Knowledge to create a new Knowledge Base
  3. Choose your data source type (Website, PDF, CSV, or Q&A)
  4. Fill in the required fields
  5. Add your Data Resources
  6. Fetch your data
  7. Train your Knowledge Base
  8. Ready to Use - Knowledge base appears in My Knowledge Bases section
Check out our step-by-step guide on creating a Knowledge Base covering all data source types, training, and testing.
For this tutorial example, we’ll create a Knowledge Base using Tars help documentation:

Configuration

  • Knowledge Base Name: Tars Docs
  • Data Source: Website URL
  • URL: https://help.hellotars.com (Tars help documentation)
  • Settings: Use default settings for optimal results

What happens next

  1. Fetch Links - System discovers and scrapes all documentation pages
  2. Training - AI processes and indexes the content for search
  3. Ready to Use - Knowledge base appears in My Knowledge Bases section
Tars Docs knowledge Base
Knowledge Base ready! Your Agent now has the knowledge to answer customer questions accurately.

Connect tool

Now let’s connect the Gmail tool to your Agent to send email notifications.

Step 1: Navigate to Tools

  1. Navigate to the Tools section in your Tars dashboard
  2. Click Add Tools to see available integrations
  3. Search for Gmail to set up email functionality

Search for Tool

Tools dashboard showing available integrations

Configure Tool

Add Tool modal with configuration options

Tool name setup

Tool configuration form with name field

Connect tool

Connect button for tool integration

Verify your connections

Gmail tool successfully connected confirmation
For complete step-by-step instructions on connecting tools, follow our comprehensive guide:

Tools connection guide

Complete guide covering Gmail setup and tool configuration.

Quick overview

  • Gmail: Required for sending customer confirmation emails
After completing the authentication flow, you’ll be redirected back to the tool configuration page.

Connection Status

  • Connected - Tool is successfully authenticated and ready to use
  • Error - Authentication failed or connection issue
Tool-connection status
If you see an error, refresh the page and check if the tool is connected. You may need to reconnect or check your permissions.

Create your AI Agent

Now let’s build your AI Agent from scratch and configure it step by step.

Step 1: Create Agent from Scratch

  1. Navigate to the Create Agents page in your Tars dashboard:
  2. Click the Create from Scratch card
  3. Enter Agent details:
    • Name: Tars Guide AI
    • Icon: Choose or shuffle for a custom icon
  4. Click Create Agent
For more details about Agent creation methods visit Platform Tour
Create agent modal with name and description fields
Click Publish and then Preview to test your basic Agent setup.
Publishing Agent and opening preview window
You will notice that the conversation has ended after single message, this is because the flow has come out of the Agent gambit. To keep the conversation going, you need to self-loop the Agent gambit.
Connect the Agent output back to itself to allow multiple questions in one session.
Creating self-loop for continuous conversation
Click Publish and then Preview to test your Agent setup.Now you can see that the conversation is continuing and you can ask as many questions as you want.
Publishing Agent and opening preview window
Now that our Agent is is ready to answer, we should give the Agent some knowledge to answer from. For this, we will add the Knowledge gambit to the canvas. Drag the Knowledge gambit onto the canvas and select “Tars Docs” from the dropdown.
Adding Knowledge Base to canvas
The Knowledge gambit will now be added and you could see a pulsating indicator on the gambit.This shows that the Knowledge gambit
Now, we have to select the knowledge source in the Knowledge Base gambit modal. This will set the configuration for this Knowledge Base gambit with the selected, trained Knowledge Base.
Selecting Knowledge Base from dropdown
Connect the Knowledge Base output to the Agent Gambit to enable access.
Connecting Knowledge Base to Agent gambit
Publish and test by asking questions from your Knowledge Base.
Testing Agent with Knowledge Base questions
Drag the Tool gambit onto the canvas and select your configured Gmail tool.
Adding Gmail tool to canvas
Choose your connected Gmail tool from the dropdown and configure email settings.
Selecting Gmail tool from dropdown
Connect the Tool output to the Agent Gambit to enable email functionality.
Connecting Gmail tool to Agent gambit
Click on the Agent Gambit to open configuration panel and customize your Agent’s behavior.
  • Welcome message
  • Basic settings
  • Advanced settings
  • Jump logic
Welcome message is displayed when users first engage with the Agent or transition from another gambit.
  • Initiates the conversation
  • Not repeated in continuous interactions
  • Provides a friendly greeting and sets the context
Example:
Welcome to **Tars Guide AI!👋** I'm here to help you with any questions related to Tars and provide guidance. How can I assist you today?
Configure the Agent’s system prompt to define personality, answer criteria, and behavior guidelines.
  • Complete prompt
  • Prompt breakdown
Copy and paste these prompt sections into your Agent’s system prompt field:1. Introduction & role definition:
You are **Tars Guide AI**, the official representative of Tars. Your role is to provide accurate, concise, and well-structured guidance based on the official Tars helpdocs. Always maintain a professional yet friendly tone, and use **Markdown formatting** to make responses visually clear and easy to follow.
2. Personality & tone:
### **1. Personality & tone**

As Tars Guide AI, you represent the company with professionalism and clarity.  
- Keep answers short, precise, and easy to read.  
- Maintain a friendly, approachable voice while staying authoritative.  
- Use **bold text**, *italics*, bullet points, and headers for clarity.  
- Avoid unnecessary length or off-topic replies.  
3. Knowledge retrieval & response rules:
### **2. Knowledge retrieval & response rules**

- For answering questions related to Tars and its product, always use the **knowledge_retrieve** tool.  
- Provide responses only from the retrieved Knowledge Base.  
- If no relevant answer is found, politely inform the user that the information is not available in the helpdocs.  
- Responses should be concise, structured, and easy to follow.  
- Use **step-by-step formatting** only if necessary or requested.  
- Always speak as **we** (Tars company representative).  
4. Escalation donditions:
### **3. Escalation & support process**

At the end of **every response**, politely suggest:  
*"If you'd like, I can also connect you with our support team for further assistance."*  

If the user requests support:  

#### **Switch to support mode**  
- From this point, do **not** attempt to answer their queries.  
- Treat user inputs only as **support information to collect**.  

#### **Step-by-step collection**  
1. Ask for **Full Name**  
2. Then ask for **Email ID**  
3. Finally, ask for **One key question or issue**  
   - Do **not** answer this question.  

#### **Email escalation**  
Once all details are collected, prepare and send an email using the Gmail tool with this format , don't show the user input and the processing step to the user: 
5. Support email template:
{
  "recipient_email": "{{user_email}}",
  "subject": "We've received your support request – Tars Platform",
  "body": "<!DOCTYPE html>
<html>
  <body style='font-family: Arial, sans-serif; color: #333; line-height: 1.6;'>
    <div style='max-width: 600px; margin: auto; padding: 20px; border: 1px solid #eee; border-radius: 10px;'>
      <h2 style='color: #4A90E2;'>Hi {{username}},</h2>
      <p>Thank you for reaching out to the <strong>Tars Support Team</strong>. We've received your request and our team will get back to you shortly.</p>
      
      <h3 style='color: #4A90E2;'>Your Request Details:</h3>
      <ul>
        <li><strong>Name:</strong> {{username}}</li>
        <li><strong>Email:</strong> {{user_email}}</li>
        <li><strong>Issue/Question:</strong> {{user_question}}</li>
      </ul>
      
      <p>Our support specialists will review your request and respond within the next 24–48 hours.</p>
      
      <p>If you need to add more details, feel free to reply directly to this email.</p>
      
      <br/>
      <p style='color: #555;'>Best regards,<br/>Tars Support Team</p>
    </div>
  </body>
</html>",
  "is_html": true
}
6. User confirmation message:
After sending the email, politely confirm to the user:

> *"Your request has been forwarded to our support team. They will get in touch with you shortly via email."*
7. Key guidelines:
### **4. Key guidelines**

* **Tone:** Friendly, professional, and concise.
* **Format:** Always use Markdown for readability.
* **Scope:** Answer only from Tars helpdocs and platform documentation.
* **Escalation:** End every response by asking if the user would like team support. If yes, follow the support process above.
Copy each section in order and paste them all together into your Agent’s system prompt field for the complete prompt.
This prompt ensures your Agent maintains consistent brand voice, provides accurate information, and handles escalations professionally.
Publish and test the complete workflow with all configurations.
  • First ask any question related to knowledge source you have added.
  • Then ask for any help or support.
  • The Agent would ask your details and send you an email with the details.
Final testing in preview window
Final testing in preview window
Agent Complete! Your Agent now has Knowledge Base integration and tool functionality.

Configure your AI Agent

Now that your Agent is created, let’s configure its metadata and advanced settings to customize its behavior, appearance, and integrations.

Navigate to Configuration

Configure the basic information and identity of your Agent.

Agent Configuration

  • Robot Avatar: Upload or select a custom avatar for your Agent (shows a robot character)
  • Title: Set the Agent’s display name (e.g., “Tars Guide AI”)
  • Description: Write a detailed description of what the Agent does
  • Subdomain: Configure a custom URL slug (default format: <slug>.hellotars.com/conv/xxxxxx the default value of slug is Agent if not configured)
  • Language: Select the primary language for the Agent (dropdown with English options)
The subdomain allows you to create a memorable URL for your Agent. Choose something that reflects your Agent’s purpose.
General settings configuration interface
Optimize your Agent’s discoverability and social media sharing.

Meta Information

  • Meta Image: Upload an image for social media previews and thumbnails
  • Meta Title: Set the page title that appears in search results (e.g., “Tars Guide AI | TARS”)

Favicon Configuration

  • Favicon: Upload a custom favicon that appears in browser tabs
    • Shows preview of how it will appear in the browser
    • Toggle to use Meta Image as favicon

Agent Description

  • Industry: Select from dropdown (e.g., “AI Agents”)
  • Use Case: Define the specific use case for your Agent
  • Description: Write a detailed description of what the Agent does
SEO settings configuration
Configure email triggers, update the email subject and add recipients.

Email Notification Configuration

  • Email Subject: Customize the subject line for notification emails (e.g., “Someone Filled: Tars Guide AI”)
  • Email ID: Set the recipient email address for notifications (supports multiple addresses separated by comma or space)
You can add multiple email addresses to receive notifications about Agent interactions.
Email notification settings
Define success metrics and integrate analytics for your Agent.

Goal Gambit configuration

  • Goal Gambits: Search and select gambits that represent successful conversation outcomes
  • Used to calculate Agent Goal Completions and Agent Conversion Rate in Data Analysis
  • Multiple gambits can be selected from the dropdown

Third party analytics

Analyze user behaviour and conversions with third party tools like Google Analytics, Google Ads & Facebook Pixel.
Google analytics configuration
  • GA4 Code: Enter your Google Analytics 4 measurement ID (format: G-XXXXXXXXX)
  • Event Tracking: Choose from dropdown options:
    • Send no events to GA
    • Send all user responses as events to GA
    • Send only Goal Gambit user responses as events to GA
Google Ads configuration
  • Remarketing/Conversion ID: Enter your Google Ads conversion ID (format: AW-XXXXXXXXX)
  • Conversion Label: Set the conversion label for tracking
  • Google Tag Manager Code: Enter your GTM container ID (format: GTM-XXXXXXX)
Facebook configuration
  • Facebook Pixel ID: Enter your Facebook Pixel ID for tracking conversions and user behavior
Each analytics platform requires specific configuration IDs and tracking codes for proper integration.
Goal settings and analytics configuration
Enable and configure speech-to-text and text-to-speech features for voice interactions.

Text-to-speech (TTS) configuration:

  • Text-to-speech: Toggle to enable reading messages aloud in the selected voice
  • TTS Streaming: Enable for real-time audio streaming
  • Select Voice: Choose from available voice options (e.g., “Alloy”)
  • Includes audio preview functionality

Speech-to-text (STT) configuration:

  • Speech-to-Text: Toggle to enable automatic transcription to text
  • Max Voice Record Time: Set maximum recording duration (e.g., “2 Mins”)
Voice features enhance accessibility and provide a more interactive user experience for your Agent.
Voice and audio settings configuration
Configuration Complete! Your Agent is now fully configured with custom metadata and advanced settings.

Customize design and appearance

Now that your Agent is configured, let’s customize its visual design to match your brand and create an engaging user experience.

Navigate to design

Choose from pre-built themes or create custom designs for your chat interface.
  1. Click on “Agent Design” tab to access chat interface themes
  2. Browse available themes in the “Themes” section
  3. Toggle “Dark themes” to explore dark mode variations
  4. Preview each theme in real-time on the right side
  5. Select a theme that matches your brand aesthetic
Available Options:
  • Light Themes: Various color combinations for bright, clean interfaces
  • Dark Themes: Professional dark mode options for modern appeal
  • Real-time Preview: See changes instantly in the chat preview
Exploring themes and dark theme variations
Move beyond pre-built themes to create completely personalized chat experiences. The Custom design section offers advanced customization options where you can individually configure each element of your chat interface
  • from the header and message bubbles to chat backgrounds
  • giving you complete creative control over your Agent’s appearance.
  1. Click “Custom” tab to access advanced design options
  2. Explore the custom design sections for individual element control
Complete custom design overview with all elements
Customize the chat widget that appears on your website to match your brand and provide an engaging entry point for users.
  1. Click “Widget design” tab to access widget settings
  2. Configure your widget appearance and behavior
Widget design and configuration options

Widget Icon Configuration

  • Upload Custom Icon: Add your company logo or branded icon
  • Default Icons: Choose from pre-built icon options including various chat and support symbols
Default widget icon selection options
  • Icon Preview: See how your selected icon appears on the widget

Widget Appearance Settings

  • Background Color: Set the widget button background color to match your brand
  • Size: Choose widget dimensions (Small, Medium, Large) based on your website layout
  • Shape: Select between Square or Circle shape for the widget button
  • Widget Preview: Real-time preview shows how the widget will appear on your site
Widget design customization interface

Widget Position & Placement

  • Position: Choose widget placement on your website (Left or Right side)
  • Bottom Padding: Set vertical spacing between the widget and the bottom of the screen
  • Side Padding: Set horizontal spacing between the widget and the right side of the screen
Widget position options - left and right placement

Callout Message Configuration

  • Custom Message: Set personalized greeting text to engage visitors (e.g., “Hey there! I am here to help you 👋”)
  • Message Styling Options:
    • Font: Choose typography for the callout message (e.g., “Poppins”)
    • Size: Set font size for optimal readability (e.g., “14”)
    • Padding: Customize vertical and horizontal spacing around the message text
    • Message Color: Set text color for the callout bubble
    • Background: Customize callout bubble background color
Auto-display timing and sound effects are currently set to default values and will be configurable in future updates.
Widget callout message configuration

Our Widget Design Example

Here’s how our customized widget looks with all the design elements applied:
  • Callout Message: “Hey there! I am here to help you 👋”
  • Font Family: Poppins for modern, clean typography
  • Font Size: 14px for optimal readability
  • Padding: 5px vertical, 5px horizontal for balanced spacing
  • Widget Position: Bottom-right with custom spacing
Final customized widget design example
Widget Design Complete! Your chat widget is now professionally designed and ready to engage visitors on your website.

Distribute your AI Agent

Now that your Agent is designed and configured, it’s time to make it available to your customers through various distribution channels.

Navigate to Distribution

Embed your Agent as a chat widget on your existing website for seamless customer support.
Website widget embed code and configuration
  1. Click “Widget” to access embed options
  2. Copy the provided JavaScript code snippet
  3. Paste the code into your website’s HTML before the closing </body> tag
  4. Configure widget behavior:
    • Enable WhatsApp Widget: Toggle this to replace your custom widget icon with a WhatsApp icon that redirects users to your configured WhatsApp number from channel settings when clicked. If you haven’t configured WhatsApp yet, set it up here.
    • URL Tracking Parameters: Set to None for no tracking or Parent Page to capture and track the URL of the page where the widget is embedded for analytics
    • Auto-open Widget: Enable to automatically open the chat window when users visit your page, providing immediate engagement
    • Hide Callout Message Bubble: Toggle the welcome message bubble visibility - disable to hide the greeting message that appears next to the widget
    • Hide Widget Button on Widget Close: Control whether the widget button remains visible after users close the chat window
    • Auto-close Widget: Set the chat window to automatically close after conversation completion.
    • Widget Background Overlay: Enable to add a semi-transparent background overlay when the widget is open, focusing user attention on the chat
Host your Agent on a custom domain for professional branding and better user experience. This option provides you with a complete HTML file that you can upload to your own platform or hosting service.
On-domain deployment with HTML download
  1. Click “On-Domain Deployment” for custom hosting options
  2. Download HTML file containing your Agent (includes complete iframe embed and styling)
  3. Upload the HTML file to your web server or hosting platform
  4. Configure your domain to point to the uploaded file
  5. Test the custom domain deployment
What’s included in the HTML file:
  • Complete Agent Embed: Full iframe integration with your Agent
  • Responsive Styling: Mobile-friendly CSS for all screen sizes
  • Optimized Loading: Proper viewport settings and performance optimization
  • Ready to Deploy: No additional configuration needed
Benefits:
  • Professional Branding: Use your own domain (e.g., support.yourcompany.com)
  • Better SEO: Improved search engine visibility
  • Custom URLs: Create memorable, branded links
  • Full Control: Complete ownership of the hosting environment
  • Platform Flexibility: Upload to any hosting service or platform
Note: On-domain deployment requires a verified domain name. Contact support for setup assistance.
Connect your Agent to WhatsApp for direct messaging with customers.
WhatsApp integration and publishing options
Prerequisites:
  1. Add WhatsApp Business Number: First, add your WhatsApp Business number in Account Settings > Channels > WhatsApp
  2. Follow Setup Guide: Use the connection guide available in your account settings to properly configure WhatsApp integration
Publishing to WhatsApp:
  1. Click “WhatsApp” from the distribution options
  2. Select your WhatsApp number from the dropdown menu
  3. Click “Publish” to connect your Agent to WhatsApp
Result: Your Agent will now be available through WhatsApp messaging, allowing customers to interact with your AI support directly via WhatsApp.Click on the TAKE ME TO WHATSAPP CAMPAIGNS to see the Agent.
Agent published on whatsapp
WhatsApp integration requires a verified WhatsApp Business number. Contact support for setup assistance.
Distribution Complete! Your Agent is now available across multiple channels and ready to engage customers 24/7.

View conversation data & debug issues

Now that your Agent is live, let’s explore how to view conversation history, track where conversations come from, and debug issues using execution logs.

Navigate to Data View

See all conversations your Agent has had with users, including complete message exchanges and timestamps.

What you can see

  • Conversation List: All user sessions listed chronologically with timestamps
  • Conversation ID: Unique identifier for each session (#1, #2, #3, etc.)
  • Complete Messages: Full conversation between user and Agent
  • Timestamps: Exact date and time when each conversation occurred

How to use

  • Click any conversation to view the complete message exchange
  • See what users asked and how your Agent responded
  • Review conversation flow to understand user interactions
Conversation history overview with detailed interaction logs
See where your conversations are coming from and get user details for each interaction.Hover the Details button on any conversation to see:
Detailed conversation metadata showing user information and analytics

Conversation source information

  • IP Address: User’s location (e.g., 185.183.33.218)
  • Device Type: What device they used (Desktop, Mobile, Tablet)
  • Visited From: The URL where the conversation started
  • Referred From: What page or site led them to your Agent
  • Interaction Time: Exact timestamp when they started chatting

Why this matters

  • Track Traffic Sources: See which pages or sites send you the most users
  • Device Usage: Know if users prefer mobile or desktop
  • User Journey: Understand how people find and use your Agent
View conversations from specific time periods to find what you’re looking for.

How to filter by date

  1. Click the date range selector in the top-right corner
  2. Select custom dates using the calendar picker
  3. View conversations from your selected time period

Useful for

  • Weekly Reviews: Check last week’s user interactions
  • Monthly Analysis: Review a full month of conversations
Date range filter with calendar selection for analytics
See exactly how your Agent processed each conversation to debug issues and understand what happened behind the scenes.

How to view Execution Logs

  1. Click the Gambit Execution Log tab for any conversation
  2. Select which gambit to examine (Agent, Knowledge, Tools) from the dropdown
  3. View the Input data that was sent to the gambit
  4. View the Output data that the gambit produced

What input shows you

  • User’s Message: What the user actually typed
  • Previous Context: Earlier messages in the conversation
  • System Settings: How your Agent was configured for this interaction
Gambit execution logs showing input data and processing details

What output shows you

  • Agent’s Response: The exact response your Agent generated
  • Tool Actions: If your Agent sent emails or used other tools
  • Knowledge Used: What information your Agent found and used
  • Success/Errors: Whether everything worked correctly or if there were issues
Gambit execution logs showing output data and response generation

Understanding the three execution stages

Each gambit execution goes through three distinct stages that you can examine:1. User Interaction Stage
  • Purpose: Displays information to the user and collects user inputs
  • What you see: The messages shown to users and any input they provided
  • Debug use: Check if users saw the right information and provided expected inputs
2. Post Stage
  • Purpose: Does the main processing work of the gambit
  • What you see: Internal processing, data transformations, external API calls, and core functionality execution
  • Debug use: See exactly how the gambit processed inputs and what operations it performed
3. Jump Stage
  • Purpose: Defines which gambit to move to next in the conversation flow
  • What you see: The logic that determines the next step in the workflow
  • Debug use: Understand why the conversation moved to a specific gambit or direction
Three stages of gambit execution: User Interaction, Post Stage, and Jump Stage

Why this helps you debug

  • Find problems: See exactly which stage failed and why
  • Check processing: Verify if the gambit’s main functionality worked correctly in the Post Stage
  • Understand flow: See why the conversation moved to specific gambits in the Jump Stage
  • Fix issues: Identify whether problems are in user interaction, core processing, or flow logic
Data View Complete! You now know how to view conversation history, track where conversations come from, and debug issues using execution logs.

Congratulations! 🎉

You’ve successfully built a complete AI support Agent with: Knowledge Base Integration - Added Tars Docs Knowledge Base for accurate responses
Tool Integration - Connected Gmail for automated email confirmations
Agent Configuration - Built a self-looping Agent with custom prompts and settings
Professional Design - Customized appearance, branding, and user interface
Smart Escalation - Configured support flow with email collection and handoff
Data Monitoring - Set up conversation tracking and debugging capabilities
Need Help? Check out our Video Tutorials or join our Community Forum for additional guidance and support from other users.
I