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

# Agent Studio

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

Agent Studio lets you create and implement AI-powered virtual agents for your website. The agents are pre-built, highly customizable AI solutions that cover a wide array of use cases such as a product question and answer chatbot or conversational agents that respond to multiple questions from a user in a single session.

Agent Studio agents can be implemented to improve customer experiences with your website and enhance organizational goals for B2B, B2C, and knowledge management industries.

Virtual agents provide the following benefits:

* Available 24/7 for inquiries from customers all over the world and respond with accurate, standardized information tailored to those customer queries.

* Handle high volumes of customer inquiries, which lessens wait times for customers who choose to call and reduces the number of live customer interactions. These factors allow your personnel to resolve more complex customer issues, which in turn, helps shorten the timeframe to complete purchase transactions or obtain the information your organization provides.

For examples about how the virtual agents can be used in your organization, see the section about the [Library of available agents](#library-of-available-agents).

<LwTemplate />

## Agent configuration overview

Agent Studio is hosted on Lucidworks Platform and is easily configured and implemented. You create an agent by choosing from a [library of prebuilt agents](#library-of-available-agents), and then select from a list of generative AI models, industry options, and datasources, all hosted in the cloud. Then, you complete the implementation by placing a small script and HTML markup on your site, based on when you want the virtual agent to load.

<Note>
  Agent Studio does not support custom large language model (LLM) training.
</Note>

## Library of available agents

The following is a list of available agent types you can select to create custom virtual agents.

* **[Product Q\&A](#product-q\&a-agent)**: Generates frequently asked questions to simplify and enhance user understanding of documents or products.

* **[Conversational Q\&A](#conversational-q\&a-agent)**: Assesses natural language user queries for a product and generates accurate, real-time answers grounded in that product's own documentation, such as datasheets, manuals, specifications, and other supporting PDF technical content.

* **[Conversational Q\&A FAQ](#conversational-q\&a-faq-agent)**: Provides the same functions as the conversational Q\&A agent, but also generates a series of frequently asked questions.

<iframe src="https://app.supademo.com/embed/cmords7yg44fdw9dophsneqci?embed_v=2&utm_source=embed" title="Conversational Q&A FAQ agent example" className="w-full h-96 rounded-xl" loading="lazy" />

## Agent use cases and configuration

This section provides detailed information about each agent type.

For a video walkthrough of the setup steps for a new agent, click **Get Started** below.

<Frame title="Create an embeddable agent using Agent Studio">
  <iframe src="https://app.supademo.com/embed/cmosvfabg011w1j0jmgtg1uza?embed_v=2&utm_source=embed" loading="lazy" className="w-full aspect-video rounded-xl" allow="clipboard-write" allowFullScreen />
</Frame>

### Product Q\&A agent

Based on your industry, the Agent Studio **Product Q\&A** agent generates an interactive question and answer solution that provides information from your website about products you offer or information your organization provides.

<Accordion title="Use case examples">
  The following examples describe how you can use an Agent Studio Product Q\&A agent.

  <Tabs>
    <Tab title="B2B">
      If you are a B2B organization that provides industrial technology components and a computer server manufacturer queries about fiber optic connectors, the agent displays questions that a customer may have about a specific fiber optic connector on its product detail page, based on the information ingested about that product in the datasource from documents such as instruction manuals and specification files. These questions could relate to bandwidth capabilities, equipment compatibility, and warranty terms. The customer can then select the question to view the answer without reading multiple documents to find the answer.
    </Tab>

    <Tab title="B2C">
      If you are a B2C organization that provides skin care products, the agent displays questions that a customer may have about a specific skin care product on its product detail page, based on the information ingested about that product in the datasource from documents such as ingredient lists and benefits of using that product. These questions could relate to whether that product is vegan or suitable for daily use. The customer can then select the question and view the answer, increasing customer confidence and the likelihood of a purchase.
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="Set up the agent datasource">
  To implement an agent, you must first set up a datasource for the agent.

  Agent Studio ingests client datasource information stored in a datasource outside of Lucidworks Platform and uses that data in a specified model. You must enter the datasource details where your data is stored when you create an agent.

  Agent Studio requires Google Cloud Storage (GCS) buckets as a datasource.
  If your organization has not created a GCS bucket to use as a datasource, you need to create one.
  For detailed information, see [Create a GCS bucket](https://cloud.google.com/storage/docs/creating-buckets).

  Your data must be in JSONL *and* PDF format.

  In a JSONL file, each line is a complete JSON expression representing a single document, as in the example below:

  ```json wrap theme={"dark"}
  {"name": "Puffy Winter Jacket", "product_id": "7a45q835", "description": "This classic down-filled jacket provides maximum insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
  {"name": "Extra Puffy Winter Jacket", "product_id": "9b82c222", "description": "This classic down-filled jacket provides even more insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
  ```

  All fields are required. Each `product_id` must be unique. JSONL lines are not separated by commas. Enter multiple PDF files as an array of strings. If a document does not have an associated PDF file, a blank PDF file is accepted.
</Accordion>

<Accordion title="Create the agent">
  To create an Agent Studio agent:

  1. From the **Agent Studio** screen, select **Agents** and click **+ Create New**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-prod-qna-name-select-agent.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=d5f22c69667c20bc606d54779cf7a4a3" alt="Create a custom agent" width="2224" height="1244" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-prod-qna-name-select-agent.png" />
       </Frame>

  2. Enter a descriptive **Name** for the agent, select an [agent type](#library-of-available-agents), and then click **Next**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-prod-qna-create-agent-domain-model.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=272f9893ff62370ce54c7a82c84ee03d" alt="Select an industry domain and model" width="2120" height="1240" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-prod-qna-create-agent-domain-model.png" />
       </Frame>

  3. From the **Industry Domain** list, select the industry that best matches your business.

  4. In the **Tasks** field, select the AI model to execute for that agent. The recommended model is selected by default because it is deemed to be the most relevant based on the industry selection, but you can select a different model. Click **Next**.

  5. On the **Select a data connector** screen, click the connector and then click **Next**. For example, select **GCS Bucket**.

  6. On the **Configure GCS bucket to import data** screen, fill out all required fields.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-create-agent-gcs-bucket.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=a7a011d209a6519f93b07efa27fe50d7" alt="GCS bucket configuration" width="1322" height="686" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-create-agent-gcs-bucket.png" />
       </Frame>

     * In the **Name** field, enter the name of your datasource as you want it to display in Lucidworks Platform.
     * In the **Processing Region** field, select the region for Lucidworks to process your data. This is not necessarily the region you created your GCS bucket in. The default value is `us-southcarolina`.
     * In the **Bucket Name** field, enter the name of your GCS bucket as it displays in GCS.
     * In the **Service Account JSON Key** field, enter your Google Cloud Platform (GCP) key in JSON format to allow access to your GCS bucket.

  7. Click **Verify Connection** to verify the connection to the GCS bucket.

  <Note>
    You can add multiple GCS buckets to the agent to expand the information the model uses for responses. To add another GCS bucket, click **Add New** on the Configure GCS bucket screen. If multiple GCS buckets exist and you want to remove a specific GCS bucket from your agent, select that bucket and click **Remove**.
  </Note>

  8. When you’ve successfully created the agent, select **Get Agent Code** to [implement the agent](#agent-studio-agent-implementation). Click **Exit** and verify the agent displays on the Agents screen of Agent Studio.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-select-preview-or-get-agent-code.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=fa7c34cf15be1dd441426fd5eaab6924" alt="Get Agent Code" width="1296" height="683" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-select-preview-or-get-agent-code.png" />
       </Frame>

  <Note>
    You can also click [**Preview Agent** to test the agent](#preview-and-test-an-agent) after it is configured.
  </Note>
</Accordion>

<Warning>
  Major changes to an agent, such as updating the model or changing data sources, will generate a new `template-id`. While the old `template-id` remains functional, it may not reflect the results of your changes. Update your frontend code with the new `template-id` from the agent's Details tab to ensure you're using the latest configuration.
</Warning>

To implement and manage the agent, follow the instructions in the following sections:

* [Agent Studio agent implementation](#agent-studio-agent-implementation)

* [Additional agent management tasks](#additional-agent-management-tasks)

### Conversational Q\&A agent

The Agent Studio **Conversational Q\&A** agent is an AI-powered chat agent that lives on your organization's product detail pages. Customers can ask natural-language questions about a product, and the agent responds with accurate, real-time answers grounded in that product's own documentation, such as datasheets, manuals, specifications, and other supporting PDF technical content.

<Accordion title="Use case examples">
  The following examples describe how you can use an Agent Studio Conversational Q\&A agent.

  <Tabs>
    <Tab title="B2B">
      If you are a B2B organization that provides computer components for enterprise organizations, your customers may ask questions about the specifications and compatibility documents for your products prior to purchase. The Conversational Q\&A agent can interpret user questions, analyze the documentation, and quickly provide accurate, factually-based answers. Any follow-up questions are answered based on the information on your site.

      This saves your customers time-consuming and difficult research to obtain the information they need to help make a purchasing decision. This agent enhances customer satisfaction, increases the potential for conversions, and improves the long-term relationship between your customers and your organization.
    </Tab>

    <Tab title="B2C">
      The Conversational Q\&A agent is most effective for B2C organizations that offer products with complex documentation such as technical specifications and requirements. For example, a customer asks about the installation and warranty for an uninterruptible power supply for their office computer. The agent interprets the user's questions and returns relevant, concise information derived from the documents on your site. As the customer enters additional questions, the agent responds with answers to those inquiries. This enhances the potential for sales, and minimizes customer support calls or product returns.
    </Tab>

    <Tab title="Knowledge management">
      The Conversational Q\&A agent excels at knowledge management use cases, helping employees and stakeholders quickly surface institutional knowledge from internal documentation, policies, and procedures. For example, an HR team member asks about the company's parental leave policy and accrual rules. Instead of searching through multiple documents, the agent interprets the question and returns a clear, accurate summary drawn from official HR documentation. As the employee asks follow-up questions such as eligibility criteria or how to submit a request, the agent continues the conversation with contextually relevant answers. This reduces time spent searching for information and keeps teams aligned on internal processes.
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="Set up the agent datasource">
  To implement an agent, you must first set up a datasource for the agent.

  Agent Studio ingests client datasource information stored in a datasource outside of Lucidworks Platform and uses that data in a specified model. You must enter the datasource details where your data is stored when you create an agent.

  Agent Studio requires Google Cloud Storage (GCS) buckets as a datasource.
  If your organization has not created a GCS bucket to use as a datasource, you need to create one.
  For detailed information, see [Create a GCS bucket](https://cloud.google.com/storage/docs/creating-buckets).

  Your data must be in JSONL *and* PDF format.

  In a JSONL file, each line is a complete JSON expression representing a single document, as in the example below:

  ```json wrap theme={"dark"}
  {"name": "Puffy Winter Jacket", "product_id": "7a45q835", "description": "This classic down-filled jacket provides maximum insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
  {"name": "Extra Puffy Winter Jacket", "product_id": "9b82c222", "description": "This classic down-filled jacket provides even more insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
  ```

  All fields are required. Each `product_id` must be unique. JSONL lines are not separated by commas. Enter multiple PDF files as an array of strings. If a document does not have an associated PDF file, a blank PDF file is accepted.
</Accordion>

<Accordion title="Create the agent">
  To create an Agent Studio agent:

  1. From the **Agent Studio** screen, select **Agents** and click **+ Create New**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-qna-name-select-agent.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=eebd5386b880170223fa66a5106d58c7" alt="Create a custom agent" width="1385" height="686" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-qna-name-select-agent.png" />
       </Frame>

  2. Enter a descriptive **Name** for the agent, select an [agent type](#library-of-available-agents), and then click **Next**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-qna-select-domain-model.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=fa48cf2f1cda5824b3b854affdc8769c" alt="Select an industry domain and model" width="1268" height="692" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-qna-select-domain-model.png" />
       </Frame>

  3. From the **Industry Domain** list, select the industry that best matches your business.

  4. In the **Tasks** field, select the AI model to execute for that agent. The recommended model is selected by default because it is deemed to be the most relevant based on the industry selection, but you can select a different model. Click **Next**.

  5. On the **Select a data connector** screen, click the connector and then click **Next**. For example, select **GCS Bucket**.

  6. On the **Configure GCS bucket to import data** screen, fill out all required fields.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-create-agent-gcs-bucket.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=a7a011d209a6519f93b07efa27fe50d7" alt="GCS bucket configuration" width="1322" height="686" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-create-agent-gcs-bucket.png" />
       </Frame>

     * In the **Name** field, enter the name of your datasource as you want it to display in Lucidworks Platform.
     * In the **Processing Region** field, select the region for Lucidworks to process your data. This is not necessarily the region you created your GCS bucket in. The default value is `us-southcarolina`.
     * In the **Bucket Name** field, enter the name of your GCS bucket as it displays in GCS.
     * In the **Service Account JSON Key** field, enter your Google Cloud Platform (GCP) key in JSON format to allow access to your GCS bucket.

  7. Click **Verify Connection** to verify the connection to the GCS bucket.

  <Note>
    You can add multiple GCS buckets to the agent to expand the information the model uses for responses. To add another GCS bucket, click **Add New** on the Configure GCS bucket screen. If multiple GCS buckets exist and you want to remove a specific GCS bucket from your agent, select that bucket and click **Remove**.
  </Note>

  8. When you’ve successfully created the agent, select **Get Agent Code** to [implement the agent](#agent-studio-agent-implementation). Click **Exit** and verify the agent displays on the Agents screen of Agent Studio.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-select-preview-or-get-agent-code.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=fa7c34cf15be1dd441426fd5eaab6924" alt="Get Agent Code" width="1296" height="683" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-select-preview-or-get-agent-code.png" />
       </Frame>

  <Note>
    You can also click [**Preview Agent** to test the agent](#preview-and-test-an-agent) after it is configured.
  </Note>
</Accordion>

<Warning>
  Major changes to an agent, such as updating the model or changing data sources, will generate a new `template-id`. While the old `template-id` remains functional, it may not reflect the results of your changes. Update your frontend code with the new `template-id` from the agent's Details tab to ensure you're using the latest configuration.
</Warning>

To implement and manage the agent, follow the instructions in the following sections:

* [Agent Studio agent implementation](#agent-studio-agent-implementation)

* [Additional agent management tasks](#additional-agent-management-tasks)

### Conversational Q\&A FAQ agent

The Agent Studio **Conversational Q\&A FAQ** agent provides the following information:

* **Answers to initial and follow-up user queries.** The agent assesses user queries and then analyzes product information, specifications, and other documents on your site to generate standardized, accurate, content-based answers. If the user enters additional questions, the agent continues the conversation and responds based on your site's information.

* **Frequently asked questions.** The agent generates a series of frequently asked questions that the current user is most likely to ask. This gives the user more information about their query, which can help minimize customer support calls and product returns.

<Accordion title="Use case examples">
  The following examples describe how you can use an Agent Studio Conversational Q\&A FAQ agent.

  <Tabs>
    <Tab title="B2B">
      If you are a B2B organization that provides computer components for enterprise organizations, your customers may ask questions about the specifications and compatibility documents for your products prior to purchase. The Conversational Q\&A FAQ agent can interpret user questions, analyze the documentation, and quickly provide accurate, factually-based answers. The agent responds to any follow-up queries to continue the conversation, providing standardized answers based on your site's documentation.

      In addition, the agent predicts and surfaces several relevant questions based on the product content itself, which may provide information the current user might not have thought to ask. This gives the user more information to understand the product, and helps minimize customer support calls and product returns.

      This agent saves your customers time-consuming and difficult research to obtain the information they need to help make a purchasing decision. This agent enhances customer satisfaction, increases the potential for conversions, and improves the long-term relationship between your customers and your organization.
    </Tab>

    <Tab title="B2C">
      If you are a B2C organization that sells exercise equipment, a customer could ask about a specific treadmill. The agent reviews product information and provides answers to the user query. If the customer enters additional questions about price, payment options, and delivery options, the agent responds with fact-based answers from the information on your site.

      The agent may also provide a list of frequently asked questions about financing options, assembly instructions, and recommended assemblers.

      This conversation and section of frequently asked questions can help the customer make the choice that is best for them, which increases customer satisfaction and minimizes support interactions and product returns.
    </Tab>

    <Tab title="Knowledge management">
      If your organization wants to provide human resource documents such as sick leave policies or code of conduct requirements, the agent can answer employee questions in natural language and surface the most relevant content from those documents. It also generates frequently asked questions based on the available documentation, helping employees self-serve before reaching out to HR. This reduces the burden on HR teams and ensures employees consistently receive accurate, policy-aligned answers.
    </Tab>
  </Tabs>
</Accordion>

<Accordion title="Set up the agent datasource">
  To implement an agent, you must first set up a datasource for the agent.

  Agent Studio ingests client datasource information stored in a datasource outside of Lucidworks Platform and uses that data in a specified model. You must enter the datasource details where your data is stored when you create an agent.

  Agent Studio requires Google Cloud Storage (GCS) buckets as a datasource.
  If your organization has not created a GCS bucket to use as a datasource, you need to create one.
  For detailed information, see [Create a GCS bucket](https://cloud.google.com/storage/docs/creating-buckets).

  Your data must be in JSONL *and* PDF format.

  In a JSONL file, each line is a complete JSON expression representing a single document, as in the example below:

  ```json wrap theme={"dark"}
  {"name": "Puffy Winter Jacket", "product_id": "7a45q835", "description": "This classic down-filled jacket provides maximum insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
  {"name": "Extra Puffy Winter Jacket", "product_id": "9b82c222", "description": "This classic down-filled jacket provides even more insulation combined with lightweight comfort.", "documents": ["https://storage.googleapis.com/my-storage/puffy-winter-jacket.pdf"]}
  ```

  All fields are required. Each `product_id` must be unique. JSONL lines are not separated by commas. Enter multiple PDF files as an array of strings. If a document does not have an associated PDF file, a blank PDF file is accepted.
</Accordion>

<Accordion title="Create the agent">
  To create an Agent Studio agent:

  1. From the **Agent Studio** screen, select **Agents** and click **+ Create New**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-name-select-agent.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=fd9a7fc3545606f415f14c2b240e4203" alt="Create a custom agent" width="2188" height="1266" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-name-select-agent.png" />
       </Frame>

  2. Enter a descriptive **Name** for the agent, select an [agent type](#library-of-available-agents), and then click **Next**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-domain-create-agent-domain-model.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=d436646ba5acff5743223896245031e4" alt="Select an industry domain and model" width="1714" height="1254" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-domain-create-agent-domain-model.png" />
       </Frame>

  3. From the **Industry Domain** list, select the industry that best matches your business.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-create-agent-domain-model1.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=3a18c268ccadbc1a5a8f82295c233517" alt="Select an industry domain and model" width="2242" height="1270" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-create-agent-domain-model1.png" />
       </Frame>

  4. In the **Tasks** field, select the AI model to execute for the **Q\&A Generation** (FAQ) feature of the agent. The recommended model is selected by default because it is deemed to be the most relevant based on the industry selection, but you can select a different model.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-create-agent-domain-model2.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=6606175940b3517f372c5d0d809cb7dd" alt="Select an industry domain and model" width="2204" height="1272" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-conv-faq-create-agent-domain-model2.png" />
       </Frame>

  5. In the **Tasks** field, select the AI model to execute for the **Conversation Generation** (conversational Q\&A) feature of the agent. The recommended model is selected by default because it is deemed to be the most relevant based on the industry selection, but you can select a different model. Click **Next**.

  6. On the **Select a data connector** screen, click the connector and then click **Next**. For example, select **GCS Bucket**.

  7. On the **Configure GCS bucket to import data** screen, fill out all required fields.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-create-agent-gcs-bucket.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=a7a011d209a6519f93b07efa27fe50d7" alt="GCS bucket configuration" width="1322" height="686" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-create-agent-gcs-bucket.png" />
       </Frame>

     * In the **Name** field, enter the name of your datasource as you want it to display in Lucidworks Platform.
     * In the **Processing Region** field, select the region for Lucidworks to process your data. This is not necessarily the region you created your GCS bucket in. The default value is `us-southcarolina`.
     * In the **Bucket Name** field, enter the name of your GCS bucket as it displays in GCS.
     * In the **Service Account JSON Key** field, enter your Google Cloud Platform (GCP) key in JSON format to allow access to your GCS bucket.

  8. Click **Verify Connection** to verify the connection to the GCS bucket.

  <Note>
    You can add multiple GCS buckets to the agent to expand the information the model uses for responses. To add another GCS bucket, click **Add New** on the Configure GCS bucket screen. If multiple GCS buckets exist and you want to remove a specific GCS bucket from your agent, select that bucket and click **Remove**.
  </Note>

  9. When you’ve successfully created the agent, select **Get Agent Code** to [implement the agent](#agent-studio-agent-implementation). Click **Exit** and verify the agent displays on the Agents screen of Agent Studio.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-select-preview-or-get-agent-code.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=fa7c34cf15be1dd441426fd5eaab6924" alt="Get Agent Code" width="1296" height="683" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-select-preview-or-get-agent-code.png" />
       </Frame>

  <Note>
    You can also click [**Preview Agent** to test the agent](#preview-and-test-an-agent) after it is configured.
  </Note>
</Accordion>

<Warning>
  Major changes to an agent, such as updating the model or changing data sources, will generate a new `template-id`. While the old `template-id` remains functional, it may not reflect the results of your changes. Update your frontend code with the new `template-id` from the agent's Details tab to ensure you're using the latest configuration.
</Warning>

To implement and manage the agent, follow the instructions in the following sections:

* [Agent Studio agent implementation](#agent-studio-agent-implementation)

* [Additional agent management tasks](#additional-agent-management-tasks)

## Agent Studio agent implementation

<Note>
  The script, component markup, and CSS code for customization may be different based on the agent type you create. Please copy the information in the Agent Details section for each specific agent you create.
</Note>

After creating your agent, you can access the code you need to implement the virtual agent on your website.

There are two considerations when implementing the virtual agent:

* Where you [place the script and HTML snippet](#options-to-obtain-the-script) that enables the option to display the virtual agent
* How the virtual agent [obtains the product ID](#options-to-obtain-the-product-id) so it provides accurate information

The following sections describe the options to place the script, obtain the product ID, and format the agent.

<Accordion title="Options to obtain the script">
  To implement the agent on your site, obtain the script and HTML snippet from Lucidworks Platform.

  To add the script to your website, complete the following steps:

  1. Navigate to Agent Studio, click **Agents**, and then click the agent you want to implement.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-my-agents.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=f4b2feb15bb1ed6c37c4ad857d780863" alt="Agent Studio Agents screen" width="2328" height="1228" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-my-agents.png" />
       </Frame>
  2. In the **Agent Details** section, scroll to the **Agent Code** section, and in the **Add the Script Tag** area, click **Copy**.

       <Frame>
         <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-implement-markup-attribute.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=1242f69e5a73f29b11cd8b7cf715e5e6" alt="Implement agent using Markup Attribute" width="1690" height="892" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-implement-markup-attribute.png" />
       </Frame>
  3. Paste the script into the `<head>` or `<body>` section of your website’s HTML code.

  You have two options for placing the script: in the `<head>` or `<body>` of your HTML. The location of the script determines when it will load. For best performance, place the script in the `<head>` of your website’s HTML. If you place the script in the `<head>` of your website’s HTML, the script loads before your entire HTML page body loads, along with any other scripts your `<head>` may contain. The agent still only displays on the individual pages where you have also placed the HTML markup snippet in the `<body>`.

  The following example shows how to include the script in the `<head>`. It includes one option for the HTML snippet to obtain the product ID, which is described in [options to obtain the product ID](#options-to-obtain-the-product-id):

  ```html theme={"dark"}
  <head>
  	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
      	src="$PATH_TO/dist/springboard/springboard.esm.js">
  	</script>
  </head>

  <body>
  	<lw-template template-id="12345" product-id="1234">
  	</lw-template>
  </body>
  ```

  You may also place the script in the `<body>` of your website’s HTML. If you place the script in the `<body>` of specific pages, the script loads only on the pages that contain the script, but the script loads after all the other scripts in your `<head>`. Even in this case, the agent only displays if you have also placed the HTML markup snippet on that page’s `<body>`. However, the order that you place the script and HTML markup snippet relative to other items on your page can affect the order in which other page elements load. For this reason, this placement is not the recommended one.

  The following example shows how to include the script in the `<body>`. It includes one option for the HTML snippet to obtain the product ID, which is described in [options to obtain the product ID](#options-to-obtain-the-product-id):

  ```html theme={"dark"}
  <head>
  </head>

  <body>
  	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
      	src="$PATH_TO/dist/springboard/springboard.esm.js">
  	</script>

  	<lw-template template-id="12345" product-id="1234">
  	</lw-template>
  </body>
  ```

  No matter where you place the script, the `<lw-template>` HTML snippet must be present in the `<body>` of a page in order for the agent to display.

  <Note>
    To use the Signals beacon on the same page as your agent, you need additional script configuration.
    See [Configure the beacon with Agent Studio or UI Studio](/docs/lw-platform/lw-analytics/signals/signals-beacon#configure-the-beacon-with-agent-studio-or-ui-studio).
  </Note>
</Accordion>

<Accordion title="Options to obtain the product ID">
  The Product Q\&A, Conversational Q\&A, and Conversational Q\&A FAQ agents let your customers ask questions about a specific product. The agents know the exact product by obtaining the product’s unique ID. The product ID is included in the HTML snippet that you add to the `<body>` of your webpage. There are three ways the agents obtain the product ID.

  <Accordion title="Implement agent using Automatic Extraction through a URL query parameter">
    This method is suitable when the product ID is consistently found in the page URL as a query parameter, or when you want to avoid manually injecting it into an HTML snippet.

    Use this method in combination with the [option you chose to obtain the script](#options-to-obtain-the-script).

    After you place the script in either the `<head>` or `<body>` section:

    1. Scroll to the **Add Component Markup** section and the in **Automatic Extraction** area, click **Copy** to copy the HTML snippet.
    2. Paste the `<lw-template>` HTML snippet in the `<body>` of every page where you want the virtual agent to display.
    3. In the **Specify the Product ID** section, enter the **URL Query Parameters** value for the `product-id`. For example, if your URL is `https://www.example.com/sale?q=solvents&product=1234` and your product ID is 1234, enter `product`.
    4. Verify the agent displays on the appropriate pages of your website.
    5. Test the agent again by entering various queries to determine if the agent returns appropriate responses.
  </Accordion>

  <Accordion title="Implement agent using Automatic Extraction through a CSS selector">
    You would use this method if, for example, the product ID is not in the URL, or at least not in the query parameter. Or if you do not want to inject the product ID into an HTML snippet. You might also use this method if the product ID is already built into the page through CSS selectors and you know how to isolate it.

    Use this method in combination with the [option you chose to obtain the script](#options-to-obtain-the-script).

    <Note>You must be able to extract the exact product ID through CSS selectors. For example, if the product ID is 1234, then you must be able to extract `1234` from your CSS selectors without any additional text, such as `product-id: 1234`.</Note>

    After you place the script in either the `<head>` or `<body>` section:

    1. Scroll to the **Add Component Markup** section and the in **Automatic Extraction** area, click **Copy** to copy the HTML snippet.
    2. Paste the `<lw-template>` HTML snippet in the `<body>` of every page where you want the virtual agent to display.
    3. In the **Specify the Product ID** section, enter the **CSS Selector** elements of the CSS rule that contains the `product_id`. The following example uses `.product .product-name @data-value` that extracts a product ID of 1234.

       ```html theme={"dark"}
       <head>
       	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
           	src="$PATH_TO/dist/springboard/springboard.esm.js">
       	</script>
       </head>

       <body>
       	<div class="product">
           	<div class="product-name" data-value="1234">
               	Product Name
           	</div>
       	</div>

       	<lw-template template-id="12345">
       	</lw-template>
       </body>
       ```
    4. Verify the agent displays on the appropriate pages of your website.
    5. Test the agent again by entering various queries to determine if the agent returns appropriate responses.
  </Accordion>

  <Accordion title="Implement agent using Markup Attribute">
    This option is primarily used if the product ID exists in the product detail page but is not made available in either the HTML or as a query parameter. Even when the agent cannot easily retrieve the product ID, it can be injected dynamically via markup.

    Use this method in combination with the [option you chose to obtain the script](#options-to-obtain-the-script).

    After you place the script in either the `<head>` or `<body>` section:

    1. Scroll to the **Add Component Markup** section and the **Markup Attribute** area, click **Copy** to copy the HTML snippet.
    2. Paste the `<lw-template>` HTML snippet in the `<body>` of every page where you want the virtual agent to display. The example code sample uses `https://www.example.com/sale/1234` and `product-id` in the snippet. If your `product-id` attribute name is different than what is copied in the snippet, manually change the name of your attribute.

       ```html theme={"dark"}
       <head>
       	<script type="module" id="lw-ui-lib" embed-token="YOUR_EMBED_TOKEN"
           	src="$PATH_TO/dist/springboard/springboard.esm.js">
       	</script>
       </head>

       <body>
       	<lw-template template-id="12345" product-id="1234">
       	</lw-template>
       </body>
       ```
    3. Verify the agent displays on the appropriate pages of your website.
    4. Test the agent again by entering various queries to determine if the agent returns appropriate responses.
  </Accordion>
</Accordion>

<Accordion title="CSS for layout customization">
  The agent details screen also contains a code block for CSS customization. You can use this code block to customize the appearance of the agent so it matches your website’s existing layout.

  The following code sample displays some custom styling options for the agent. Based on the agent type, the styling options may vary.

  <Note>All agent customizations must be contained within the `.lw-template` properties.</Note>

  ```css theme={"dark"}
  /* Custom styling for the agent template */
    .lw-template {
      /* Container dimensions */
      min-height: 300px;
      max-height: 800px;
      min-width: 300px;
      max-width: 600px;

      /* Optional styling examples: */
      --qna-font-family: Arial, sans-serif;
      --qna-container-border-radius: 10px;
      --qna-header-font-size: 32px;
      --qna-header-icon-color: #a19eff;
      --qna-answer-bubble-bg-color: #add8e6;
    }
  ```
</Accordion>

## Additional agent management tasks

<Accordion title="Preview and test an agent">
  This option lets you preview and test an agent to determine if its responses accurately reflect the information from your website and datasource before you implement it.

  Navigate to Agent Studio, click the **Agents** tab, and then select the agent you want to preview or test.

  <Frame>
    <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/ai-agent-studio-my-agents.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=f4b2feb15bb1ed6c37c4ad857d780863" alt="Agent Studio Agents screen" width="2328" height="1228" data-path="assets/images/lw-platform/ai-agent-studio/ai-agent-studio-my-agents.png" />
  </Frame>

  When you select an existing agent, the Agent Details display the following sections:

  * **Agent Information** such as name, type, and model for the agent.

  * **Agent Preview** to test the agent to determine if the responses accurately reflect the information on your website.

  * **Agent Code** to embed the agent into your web page.

  Enter information in the **Agent Preview** section to test the response for the agent.
</Accordion>

<Accordion title="Edit an agent">
  To make changes to the agent:

  1. Navigate to Agent Studio, click **Agents**, hold the pointer over the agent you want to change, and click the pencil icon.
  2. Enter the changes to each of the screens, clicking **Next** to advance to the next screen, and then click **Exit** at the final screen to save the changes.
  3. Verify the changes by testing the agent using the steps in the [Agent Preview](#preview-and-test-an-agent) section. If necessary, you can refine the agent until you determine that the returned responses are accurate and optimized.
</Accordion>

<Accordion title="Delete an agent">
  If you no longer want to use an agent, you can delete it. To delete an agent:

  1. Navigate to Agent Studio, click **Agents**, hold the pointer over the agent you want to change, and then click the trash can icon.
  2. Confirm the deletion and then review the Agents screen and verify that the agent no longer displays.

  <Warning>Deleting an agent is permanent. If you want to use a deleted agent, you must add it again as a new agent.</Warning>
</Accordion>
