> ## 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.

# Quickstart

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>;
};

<LwTemplate />

This quickstart explains how to create an embeddable AI agent.
Agent Studio provides a simple interface for quickly creating an intelligent agent that can answer customer questions right inside your website.

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>

Here's how it works:

<Steps>
  <Step title="Define your use case">
    What business goals will this agent help you meet?
    In what context will customers encounter this agent?
    What types of questions do your customers ask?

    Knowing the answers to these questions helps you choose the right type of agent and the right content to train it for maximum effectiveness.
  </Step>

  <Step title="Format your training data">
    Agent Studio reads data directly from a GCS bucket, not from Fusion.

    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"]}
    ```
  </Step>

  <Step title="Select an agent from the Agent Studio library">
    Your library includes one or more pre-built agent templates, depending on your Lucidworks subscription.
    Navigate to the Agent Studio Library screen and click the agent that's best suited for your use case.

    You can [contact Lucidworks](mailto:support@lucidworks.com) if you need additional agent templates for the evolving needs of your business.
  </Step>

  <Step title="Configure your agent">
    Agent Studio guides you through some simple setup steps to connect your agent to your data.
    You can also configure options that help train your agent to provide the most helpful answers for your customers, such as the industry domain and the AI model to use.

    When you finish configuring your agent, Lucidworks AI needs some time to perform the initial training that fully enables it.
    While training is in progress, you can update your website code as explained in the final step below.

    You can also preview and test your agent right inside Agent Studio.
    Click the **Agents** tab, and then select the agent you want to preview or test. The Agent Details display. The **Agent Preview** section lets you test the agent to determine if the responses accurately reflect the information on your website.

    <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>
  </Step>

  <Step title="Embed the agent code on your site">
    Now you're ready to embed the agent where your customers will see it.
    Click **Get Agent Code** to get ready-to-use code snippets that you can copy and paste into your site code:

    * Copy the `<script>` code snippet and paste it into the `<head>` of your web page.

          <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/script-tag.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=18840f271293f8dc96405c587ea01950" alt="Script tag example" width="1626" height="682" data-path="assets/images/lw-platform/ai-agent-studio/script-tag.png" />

      <Note>Your exact code snippet will be unique to your custom agent.</Note>

    * Copy the `<lw-template>` snippet and paste it into the `<body>` of your web page where you want the agent to appear.

          <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/component-markup.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=40a34304e272b8b8dc2ce580e6c784f0" alt="Component markup example" width="1620" height="610" data-path="assets/images/lw-platform/ai-agent-studio/component-markup.png" />

          <Note>
            You'll need to modify this snippet to [include a product ID](/docs/lw-platform/lw-agent-studio/overview#options-to-obtain-the-product-id).
          </Note>

    * Copy the CSS snippet and paste it into your site's stylesheet. You can modify it to control the look of your agent.

          <img src="https://mintcdn.com/lucidworks/MyaJz9oMpKsO3BEa/assets/images/lw-platform/ai-agent-studio/css.png?fit=max&auto=format&n=MyaJz9oMpKsO3BEa&q=85&s=a605036bd5b2c7232d1abc2e9f671a03" alt="Component markup example" width="1620" height="386" data-path="assets/images/lw-platform/ai-agent-studio/css.png" />

    Once you've tested the embedded agent in your development environment, you're ready to launch it into production where it can begin driving conversions and revenue.
  </Step>
</Steps>
