> ## Documentation Index
> Fetch the complete documentation index at: https://chatbase.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Build Your First AI Agent

> Create, train, and deploy your first AI agent in under 5 minutes, and get it live on your website

## Overview

In just a few minutes, you'll have a working AI agent answering questions about your business and engaging with your website visitors. Here's what we'll do:

<Steps>
  <Step title="Create & Train Your AI Agent">
    Set up a new AI agent and train it using your website or documents
  </Step>

  <Step title="Test & Optimize">
    Use the Playground to test responses and fine-tune performance
  </Step>

  <Step title="Deploy to your Website">
    Add your AI agent to your website with a simple embed code
  </Step>
</Steps>

<Tip>
  **Estimated time:** 5 minutes from start to finish
</Tip>

## Before you start

<Info>
  You'll need an active Chatbase account to follow this guide. [Sign up here](https://www.chatbase.co/auth/signup) if you haven't already.
</Info>

## Step 1: Create & train your AI agent

### Navigate to your dashboard

After signing into your Chatbase account, go to your main dashboard. Click the **New AI Agent** button to get started.

<Frame>
  <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/workspace/images/manage/team-manage-create-chatbot.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=fbece8ababbaada3030abbe2fceaea40" alt="The New AI Agent button on the Chatbase dashboard" width="2332" height="1482" data-path="user-guides/workspace/images/manage/team-manage-create-chatbot.png" />
</Frame>

### Choose your training data

Your AI agent needs information to learn from. You can train it using various data sources:

<Tabs>
  <Tab title="Files">
    **Upload your documents**

    Train your AI agent on your documents.

    **Best for:** Business documents, manuals, FAQs, product information, etc.

    <Frame>
      <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-files.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=a426e9199fd9618a142556c5dbaa7c6a" alt="Data sources page with the Add Files dialog open" width="2528" height="1500" data-path="user-guides/quick-start/images/first-agent/your-first-agent-files.png" />
    </Frame>
  </Tab>

  <Tab title="Text snippets">
    **Direct text input**

    Paste your content directly into the platform. Useful for specific information or custom training content.

    **Best for:** Specific information or custom training content

    <Frame>
      <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-text.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=a6e0040919bf64230016a0c4b9001c74" alt="Data sources page with the Add Text dialog open" width="2528" height="1500" data-path="user-guides/quick-start/images/first-agent/your-first-agent-text.png" />
    </Frame>
  </Tab>

  <Tab title="Website">
    **Crawl your website**

    Our crawlers will discover and learn from all your pages.

    **Best for:** Your entire website or sitemap

    <Info>
      Our intelligent crawlers will explore your website and all linked pages for training. After crawling completes, you'll see all discovered pages and the total character count available for training.
    </Info>

    <Frame>
      <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-website.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=69054d4a36068fdcd7a8298b89ccc109" alt="Data sources page with the Add website dialog open" width="2528" height="1500" data-path="user-guides/quick-start/images/first-agent/your-first-agent-website.png" />
    </Frame>
  </Tab>

  <Tab title="Q&A">
    **Add your own Q\&A**

    Add your own Q\&A to your AI agent. This is useful for specific questions and answers that you want your AI agent to know.

    **Best for:** Specific questions and answers

    <Frame>
      <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-q&a.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=c2b9b25d51c19b3085ee246256980a92" alt="Data sources page with the Add Q&A's dialog open" width="2528" height="1500" data-path="user-guides/quick-start/images/first-agent/your-first-agent-q&a.png" />
    </Frame>
  </Tab>

  <Tab title="Notion">
    **Connect your Notion workspace**

    Connect your Notion workspace to your AI agent. This is useful for your entire knowledge base.

    **Best for:** Teams using Notion

    <Tip>
      To connect your Notion workspace, you'll need to click **Import** to authorize the connection and select the specific pages you want to include.
    </Tip>

    <Frame>
      <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-notion.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=c162a1ac2acdef1ea4759ee92dd5a48e" alt="Data sources page with the Add Notion Pages dialog open" width="2528" height="1496" data-path="user-guides/quick-start/images/first-agent/your-first-agent-notion.png" />
    </Frame>
  </Tab>
</Tabs>

### Review & start training

Click **Create Agent** to begin the training process.

<Check>
  Training typically takes 2-5 minutes depending on the amount of data. You can proceed to the next step while training completes.
</Check>

<Info>
  **Storage limit:** Different plans have different storage limits for training data. Check your plan if you hit any limits.
</Info>

## Step 2: Test & optimize your AI agent

### Access your instructions

After training your AI agent, go to **Build > Instructions** to refine its behavior. Use the **Compare** button to test your changes side by side against the current version before saving them.

<Frame>
  <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/getting-started-9.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=483a29f3e175db838a921f5f698eb6ad" alt="Playground interface showing chat testing area" width="2528" height="1496" data-path="user-guides/quick-start/images/first-agent/getting-started-9.png" />
</Frame>

### Fine-tune settings

<Tabs>
  <Tab title="AI Model">
    **Test responses with different models**

    <Steps>
      <Step title="Test with different models">
        Ask the same questions to different models and compare:

        * **Response quality and accuracy**
        * **Response time and speed**
        * **Tone and personality**
        * **Handling of edge cases**
      </Step>

      <Step title="Make your decision">
        Based on the comparison, select the model that best fits your specific use case and brand voice.
      </Step>
    </Steps>

    <Tip>
      For detailed model comparisons and advanced testing strategies, see the [Compare area](/docs/user-guides/chatbot/build#compare-area) and the [models comparison](/docs/user-guides/chatbot/models-comparison) page.
    </Tip>
  </Tab>

  <Tab title="Instructions">
    Define how your AI agent should behave and respond to users. These instructions shape your AI agent's personality, tone, and approach to conversations.

    **How to write effective instructions:**

    * Define the AI agent tone (professional, friendly, casual, etc.)
    * Define the AI agent role (lead collection, support, sales, etc.)
    * Set clear boundaries about what topics to discuss or avoid
    * Define your brand voice and personality
    * Add specific words to be used by the AI agent
    * Define the languages the AI agent will use to respond with (usually the same language as the user)
    * Add any other instruction you would like your AI agent to know

    <Tip>
      For a full worked example you can copy and customize, see [Best Practices](/docs/user-guides/quick-start/best-practices#refine-the-ai-agents-instructions).
    </Tip>
  </Tab>

  <Tab title="Temperature">
    Controls response creativity:

    * **Low (0.1-0.3)**: Consistent, factual responses
    * **Medium (0.4-0.7)**: Balanced creativity
    * **High (0.8-1.0)**: More creative, varied responses
  </Tab>
</Tabs>

## Step 3: Deploy to your website

### Navigate to the Channels section

Once you're satisfied with your AI agent's responses, it's time to make it live. Navigate to the **Channels** tab in the sidebar, and click **Setup** on the **Chat bubble** card to access your AI agent's script.

<Info>
  **Disabled vs Enabled:** Disabled AI agents are only accessible to workspace members. Enabled AI agents can be embedded on websites and accessed by anyone with the link.
</Info>

### Choose your deployment method

Chatbase offers multiple deployment methods including chat bubble, help page, and integrations with Email, Phone, WhatsApp, Facebook Messenger, Instagram, Shopify, and other platforms.

In this guide we'll use the **Chat bubble** option, as it's the most common. Click **Manage** under the chat bubble, then select **Deploy** to access your embed script.

<Frame>
  <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-deploy.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=e9cef186392627ee90bd0d35cce113f6" alt="chat widget embed tab" width="2528" height="1496" data-path="user-guides/quick-start/images/first-agent/your-first-agent-deploy.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/chatbase/xPpOvQF2MdeELnmI/user-guides/quick-start/images/first-agent/your-first-agent-script.png?fit=max&auto=format&n=xPpOvQF2MdeELnmI&q=85&s=fd16a076dcbe0e3ca30960d2058f1283" alt="JavaScript embed code ready to copy" width="2528" height="1496" data-path="user-guides/quick-start/images/first-agent/your-first-agent-script.png" />
</Frame>

<Tabs>
  <Tab title="Website widget (Recommended)">
    **Perfect for most websites**

    Adds a floating chat icon that users can click to start conversations. Non-intrusive and mobile-friendly.

    **Pros:**

    * Can use advanced features like [identity verification](/docs/developer-guides/identity-verification)
    * Doesn't interfere with your site's design
    * Users can minimize and maximize as needed
    * Works well on mobile devices
    * Familiar UX pattern

    **Best for:** Business websites, blogs, e-commerce stores
  </Tab>

  <Tab title="Website iframe">
    **For dedicated chat sections**

    Embeds the full chat interface directly into your page layout. Always visible and ready for interaction.

    **Pros:**

    * Always visible to users
    * More prominent than the chat bubble
    * Good for dedicated support pages
    * Customizable dimensions

    **Best for:** Support pages, help centers, dedicated chat sections
  </Tab>
</Tabs>

### Add code to your website

<Steps>
  <Step title="Locate your site's HTML">
    Find where you can add JavaScript code to your website. This is usually in the `<head>` section or before the closing `</body>` tag.

    <Tip>
      **For fast loading:** Place the script just before the closing `</body>` tag so your page content loads first, then the chat widget appears.

      **For immediate availability:** Place the script in the `<head>` section to load the chat widget as early as possible, though this may slightly delay your page's initial render.
    </Tip>
  </Step>

  <Step title="Paste the code">
    Copy and paste the embed script into your website's HTML. If you're using a CMS like WordPress, there's usually a "Custom HTML" or "Scripts" section.
  </Step>

  <Step title="Save and publish">
    Save your changes and publish your website updates.
  </Step>
</Steps>

<Tip>
  Using a site builder? There's a step-by-step guide for [WordPress](/docs/user-guides/integrations/wordpress), [Webflow](/docs/user-guides/integrations/webflow), [Wix](/docs/user-guides/integrations/wix), [Weebly](/docs/user-guides/integrations/weebly), [Framer](/docs/user-guides/integrations/framer), [Bubble](/docs/user-guides/integrations/bubble), and [Vercel](/docs/user-guides/integrations/vercel).
</Tip>

### Verify installation

Visit your website and look for the chat bubble. Click it to test the integration.

<Frame>
  <img src="https://mintcdn.com/chatbase/Zkg12EbnhYTJTGwv/user-guides/quick-start/images/first-agent/getting-started-15.png?fit=max&auto=format&n=Zkg12EbnhYTJTGwv&q=85&s=8bf5143597fd867a31589184368c8063" alt="Live AI Agent chat bubble on a website" width="3040" height="1888" data-path="user-guides/quick-start/images/first-agent/getting-started-15.png" />
</Frame>

<Check>
  **Success!** Your AI agent is now live and ready to help your website visitors.
</Check>

<Tip>
  Need more control over your widget? See the [Developer Guides](/docs/developer-guides/overview) for the JavaScript embed, [widget control options](/docs/developer-guides/chat-bubble-control), and advanced features like [client-side custom actions](/docs/developer-guides/client-side-custom-actions) and [event listeners](/docs/developer-guides/chatbot-event-listeners).
</Tip>

### Customize appearance (optional)

Want to match your brand? See the guide to [chat bubble display settings](/docs/user-guides/chatbot/channels#chat-bubble-display).

<AccordionGroup>
  <Accordion title="Branding Options">
    * Upload custom chat bubble icon
    * Change bubble colors to match your brand
    * Customize welcome messages
    * Set initial questions users can click
  </Accordion>

  <Accordion title="Behavior Settings">
    * Auto-open chat after delay
    * Collect user feedback
  </Accordion>
</AccordionGroup>

## Next steps

You've created, trained, tested, and deployed your first AI agent. From here:

<CardGroup cols={2}>
  <Card title="Best Practices" icon="star" href="/docs/user-guides/quick-start/best-practices">
    Proven ways to improve your AI agent's answers: instructions, data sources, and the right model.
  </Card>

  <Card title="Actions" icon="bolt" href="/docs/user-guides/chatbot/actions/actions-overview">
    Add escalations, lead capture, appointment booking, and more.
  </Card>

  <Card title="Integrations" icon="puzzle-piece" href="/docs/user-guides/integrations/integrations-overview">
    Connect your AI agent to messaging channels and business tools.
  </Card>

  <Card title="Analytics" icon="chart-line" href="/docs/user-guides/chatbot/analytics">
    Track conversations and optimize your AI agent's performance.
  </Card>
</CardGroup>

<Info>
  **Need help?** Visit our [Help Center](https://www.chatbase.co/help) or check the [FAQ](/docs/faq/faq) for common questions.
</Info>
