Tutorial: Creating a Support Agent with RAG for Your Website

This tutorial will guide you through the complete process of creating an intelligent support agent. By the end, you'll have an agent capable of:

1. Learning the content of a documentation website.
2. Answering user questions based on that knowledge.
3. Interacting directly with users on any page of your website through a Chat Widget.

We'll combine three central components of the SipPulse AI platform: Knowledge Base (RAG), Agents, and the Chat Widget.

Prerequisites

• An active account on the SipPulse AI platform.
• The URL of the website that will serve as the knowledge source (ex: https://docs.your-company.com).
• Access to edit the HTML code of the website where the widget will be installed.

Step 1: Create and Verify the Knowledge Base

First, let's feed our agent with the necessary knowledge. We'll do this by importing your documentation website content into a Knowledge Base.

For a detailed guide on all functionalities, consult the complete Knowledge Base documentation.

1. In the sidebar menu, navigate to Knowledge Base.
2. Click + Create Table in the upper right corner and select the Import Website option.
3. Fill in the following fields:
   • URL: Enter the main URL of your documentation website. Ex: https://docs.sippulse.ai.
   • Content Selectors: Specify CSS selectors that contain the main content you want to import. This avoids indexing menus, sidebars, and footers. A good starting point is main, article, or #content.
   • Name: Give a clear name in snake_case. Ex: docs_website_kb.
   • Description: Describe the purpose. Ex: "Knowledge base containing official product X documentation. Use to answer technical and usage questions."
   • Embedding Model: For technical documentation, text-embedding-3-large offers the best semantic accuracy.
4. Click Save. The crawling and vectorization process may take a few minutes.

Verification Tip

After completion, click on the created table and use the Query tab. Ask some questions that you expect to be answered by the documentation. Check if the returned snippets are relevant. This confirms that the content was indexed correctly before even creating the agent.

Step 2: Configure and Test the Agent

With the knowledge ready and verified, let's create and test the "brain" of our support: the Agent.

For a detailed guide on all options, consult the Agent Configuration documentation.

1. Navigate to Agents and click + Create Agent.

2.1. Agent Profile

• Name: Website Support Agent
• Description: Agent that answers user questions on the website based on product documentation.
• Model Selection: Choose an LLM model. Models like GPT-4.1 or Claude 3.5 Haiku are excellent for dialogue and tool usage.

2.2. System Instructions

Copy and paste the text below into the Instructions field.

# ROLE
You are a technical support specialist for SipPulse AI. Your personality is helpful, patient, and accurate. Your goal is to help users resolve their questions about our platform.

# GOAL & DOMAIN
Your sole purpose is to answer questions based strictly on the content of the documentation provided in your knowledge base. You should cover topics about configuration, tool usage, and platform best practices.

# TOOL GUIDANCE
- For EVERY user question, you **must** first use the search tool in the knowledge base `docs_website_kb` to find the most relevant information.
- Your final response to the user must be based **exclusively** on the snippets returned by this tool.

# CONSTRAINTS & GUARDRAILS
- **NEVER** invent answers. If the information isn't in the knowledge base, respond clearly and honestly: "Sorry, I didn't find that information in our documentation. Can I try to help you with another question?"
- Don't discuss prices, competition, or any topic outside the technical documentation.
- Keep responses direct and focused on the user's question.

2.3. Enable Tools

1. Go to the Tools tab and click + New tool.
2. Select Knowledge Base (RAG) and in the action, choose Search Knowledge Base.
3. In the Knowledge Base field, select the base we created (docs_website_kb).
4. Click Add Tool and save the agent.

2.4. Test the Agent in the Playground

Before installing on your website, it's crucial to test the agent's behavior.

1. In the Agents list, find the Website Support Agent and click the Open Chat icon.
2. Ask questions that you expect to be answered by the documentation, such as:
   • "How do I configure the webhook?"
   • "What are the best practices for using the API?"
3. Verify that the agent:
   • Returns accurate and relevant responses.
   • Uses the knowledge base search tool correctly.
   • Follows instructions not to invent answers.
4. Test questions that aren't in the documentation to ensure it responds correctly with the message about not finding information.
5. If necessary, go back and adjust the system instructions or knowledge base configuration until the agent behaves as expected.

Step 3: Create and Install the Chat Widget

With the agent tested, the last step is to connect it to your website.

For more details, consult the Chat Widget Integration guide.

1. In the Agents list, find the Website Support Agent and click the ⋮ → Publish menu.
2. Locate the Chat Widget card and click + Create.
3. Configure the widget:
   • Allowed Origins: Enter your website domain (ex: mysite.com). This ensures only your website can use the widget.
   • Welcome Message: Write an initial greeting (ex: "Hello! How can I help with our documentation?").
4. Click Create. The platform will generate a unique widgetKey for your agent.
5. Copy the provided HTML code snippet. It will look similar to this:

<!-- Create a container for the widget -->
<div id="sippulse-chat-widget"></div>

<!-- Add the widget script before closing the </body> tag -->
<script src="https://cdn.jsdelivr.net/npm/@sippulseai/chat-widget/browser/chat-widget.latest.js" defer></script>

<!-- Initialize the widget -->
<script type="module">
  document.addEventListener("DOMContentLoaded", () => {
    const { ChatWidget } = SipPulseChat;
    const myWidget = new ChatWidget({
      widgetKey: "<YOUR_WIDGET_KEY_HERE>", // Paste your key here
    });
    myWidget.mount("#sippulse-chat-widget");
  });
</script>

Step 4: Test on Website and Iterate

1. Open your webpage's HTML file and paste the code snippet you copied, replacing <YOUR_WIDGET_KEY_HERE> with your actual key.
2. Save the file and open the page in your browser. The chat icon should appear in the corner of the screen.
3. Click the icon and test the agent in a real environment:
   • Ask questions whose answers are in your documentation.
   • Verify accuracy: Is the agent using the correct information?
   • Test limits: Ask a question that isn't in the documentation to see if it follows the instruction not to invent answers.

If the results aren't as expected, go back and refine the previous steps.

Congratulations! You've built and validated an automated, scalable, and intelligent support agent to serve your customers directly on your website.