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

# Quickstart Guide

> Step-by-step guide to building your first AI agent with BotCircuits and integrating it into your website.

## Building Your First AI agent

Welcome to the **BotCircuits Quickstart Guide**! In this guide, we'll walk you through the steps to create your first AI-powered agent from scratch. Whether you're building a text-based or voice-based agent, this guide will help you set everything up quickly and efficiently.

> **Note:** Voice-based AI agents are available only on the **Growth Plan** or higher. If you're building a voice agent, make sure you're on the appropriate plan to access this feature.

***

## 9 simple steps to build your first AI agent

<Step stepNumber="1">
  <Accordion title="Creating a New Agent">
    After signing in to the BotCircuits platform, you'll land on the [Home Page](https://platform.botcircuits.com/agents). To begin, click the **New Agent** button.
  </Accordion>
</Step>

<Step stepNumber="2">
  <Accordion title="Naming and Describing Your Agent">
    You'll be prompted to provide a **Name** and **Description** for your new agent. This is for your internal use only, helping you identify the agent within your dashboard.

    * **Name**: Choose a name that reflects the agent's purpose (e.g., "AI Support" or "AI Reservation Agent").

    * **Description**: Add a brief description to remind yourself of the agent's function.

    This information is not used by the AI and is purely for organizational purposes.
  </Accordion>
</Step>

<Step stepNumber="3">
  <Accordion title="Designing the User Journey">
    Once you've created your agent, you'll be redirected to the **Journey Editor**. The journey represents the series of steps required to achieve a desired outcome. For example, a "Reserve a Table" journey might involve asking questions, checking availability via API calls, and confirming the reservation.

    By default, you will start with a **Default Journey**, which includes a basic welcome message. From here, you can add another journey by clicking the **+** button.

    * **Journey Title**: Provide a descriptive title that captures the essence of the journey (e.g., "Reservation Process").

    * **AI Description**: Add a description that explains both the purpose of the journey and when it should be triggered, providing clarity to the AI model about the journey's function.
  </Accordion>
</Step>

<Step stepNumber="4">
  <Accordion title="Customizing the Journey Steps">
    In the **Canvas Editor**, you can drag and drop components to build out the steps of your journey. This visual editor makes it easy to map out the flow of your agent's interactions.

    * **Components**: Add interactions like API calls, question prompts, card components, and more.

    * For detailed information on each component, refer to [Component Documentation](/journey-components).
  </Accordion>
</Step>

<Step stepNumber="5">
  <Accordion title="Integrating Knowledge Bases">
    Enhance your agent's capabilities by integrating knowledge bases. Go to **Content > Knowledge Base** and upload documents such as PDFs, CSVs, or DOCX files. This allows your agent to reference specific information from these documents during conversations.

    * **Supported Formats**: PDF, CSV, DOCX

    * **Use Case Example**: Upload product manuals or FAQ documents to provide contextual answers to customer queries.
  </Accordion>
</Step>

<Step stepNumber="6">
  <Accordion title="Customizing Web Chat Appearance">
    Now it's time to customize your agent's appearance and preview it in action. Click on **Channels** in the side navigation bar, then select **Web Chat**. Here, you can adjust the appearance of your chat widget to match your branding.

    * **Preview**: View how your agent will appear on your website and interact with users.
  </Accordion>
</Step>

<Step stepNumber="7">
  <Accordion title="Publishing Your Changes">
    Once you’ve completed building and configuring your AI agent, it’s time to publish your changes. In the top-right corner of the platform, you'll see the **Publish** button. Clicking this will deploy your updates to the production environment, making them live for your users.

    * **Tip:** Ensure you thoroughly test your agent before publishing to avoid any issues in the live environment.
  </Accordion>
</Step>

<Step stepNumber="8">
  <Accordion title="Embedding the Chat Widget">
    After publishing, it's time to integrate the agent into your website. Navigate to the **Web Chat** page, where you’ll find the code snippet needed to embed the chat widget.

    * **Instructions**: Copy and paste the provided code snippet into your web application’s HTML. This will enable the BotCircuits chat widget on your site, allowing users to interact with your AI agent.

    * **Further Customization**: For detailed information on publishing to other channels or customizing the chat experience, refer to our [Channels Documentation](/channels).
  </Accordion>
</Step>

***

## Next Steps

Congratulations! You've successfully built your first AI agent with BotCircuits. From here, you can continue refining your agent by adding more journeys, customizing interactions, and scaling up your capabilities with additional features.

If you have any questions or need support, feel free to reach out to us at [hello@botcircuits.com](mailto:hello@botcircuits.com). We're here to help!

Happy building with BotCircuits!