Scout Copilot

Introduction to Scout Copilot

The Copilot brings the powerful functionality of Scout directly to your website or application, providing an interactive assistant that enhances user experience and engagement. This guide will take you through every step of creating and launching a Scout Copilot, from setting up workflows and customizing the Copilot’s appearance to embedding it seamlessly into your web environment. Whether you’re introducing your audience to AI-driven insights or offering an interactive support tool, this guide provides everything you need to make Scout Copilot a valuable part of your digital experience.

Using Copilot Blocks in a Workflow

Each Scout Copilot is powered by a workflow which has special blocks that are specifically designed to interact with the Copilot client. Generally, this is the minimum basic workflow template you can start with:

We will continue to invest and expand into these blocks, and other programmatic ways to interact with the Copilot. However, today these are the key blocks interactions to understand:

Input Block

The Copilot sends the user’s chat message to the inputs.user_message input by default.

Copilot Thinking Block

This sends a “pending state” message to the Copilot client, giving the user context on the action being taken during that step of execution in the workflow that is generating the Scout Copilot response.

Copilot Message Block

This is similar to an LLM block. The connection to the Scout Copilot in the client is streaming, so you can send many messages in one workflow run using subsequent Copilot message blocks.

1
In your response, **add inline citations** using numbered brackets like `[1]`, `[2]`, etc., placed **immediately after the relevant sentence or phrase**. Each number should correspond to a reference that supports or provides more detail about the information stated. The **citations should appear directly after the referenced content**, ensuring clarity for the reader.
2
3
Use a logical, sequential order for the numbering:
4
5
- Start with `[1]` for the first reference, `[2]` for the second, and so on.
6
- **Include URLs directly as markdown links** within the inline citations, like this: `[1](https://example.com/relevant-source)`.
7
8
**Example:**  
9
"Edge AI enables real-time data processing at the source of data generation, reducing latency and improving performance[1](https://example.com/edge-ai-overview). It is particularly valuable in IoT environments where decisions need to be made instantly, such as in autonomous vehicles[2](https://example.com/iot-autonomous-vehicles)."
10
11
### Guidelines:
12
13
1. **Align each citation correctly** with the relevant content. Place the citation immediately after the sentence or phrase it references.
14
2. **Maintain accuracy**: Only add citations where appropriate. If no reference is required, skip the citation—do not fabricate information or sources.
15
3. **Follow the numbering strictly**: Use consecutive numbers in the order the references appear within the text.
16
4. **Use markdown syntax for URLs**: Ensure the citation appears in this format: `[1](https://example.com/relevant-source)`.
17
18
By following these instructions, your output will include well-placed, readable citations that can be easily parsed and tracked by our system.

Query Collection Block, Extract Links Block, and List of Links Block

The Query Collection Block can be used in a normal fashion. However, you can pair it with the Extract Links and List of Links blocks to include beautified citations at the end of the Copilot message block output.

To use these together, you can pass your COPILOT_MESSAGE_BLOCK_ID.output directly to the Extract Links block, which will extract and beautify any links contained in the collection query response.

Then, you pass the EXTRACT_LINK_BLOCK_ID.output to the List of Links block, and it will append the formatted list of sources to the Copilot in the client.

Creating a Copilot

You can create a Copilot from the integrations tab by clicking ”+ New Copilot.”

Once you click into a created Copilot in the Scout dashboard, you can select the workflow that powers the Copilot and customize images, colors, sizes, and text content of the Copilot.

Adding the Copilot Widget to Your Website

To incorporate the Copilot module into your application, insert the following code:

1
<scout-copilot copilot_id="YOUR_COPILOT_ID_HERE"></scout-copilot>
2
<script type="module" src="https://copilot.scoutos.com/copilot.js"></script>

After these steps, the Copilot component will be visible on your website.

Below, you’ll find descriptions of different attributes that can be applied to the Copilot component. These attributes can be added directly to the scout-copilot tag.

For instance, to conceal the Copilot, you can set the show attribute to false:

1
const chat = document.querySelector('scout-copilot');
2
chat.setAttribute('show', false);

Required Attributes

Optional Attributes

Customizing the FAB

The Copilot’s floating action button (FAB) can be customized by passing in a child HTML element with the slot attribute set to fab. For example:

1
<scout-copilot copilot_id="ID">
2
    <div
3
        slot="fab"
4
        style="
5
            background-color: white;
6
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12),
7
                        0px 1px 2px rgba(0, 0, 0, 0.24);
8
        "
9
    >
10
        <img
11
            style="width: 40px; height: 40px; margin-bottom: 5px"
12
            src="IMG_URL"
13
        />
14
        <span style="color: black; font-weight: 500">Ask AI</span>
15
    </div>
16
</scout-copilot>

In the example above, we are creating a simple FAB with a white background, a shadow, and an image and text inside. You can customize the FAB to your liking by changing the styles and content.

Embedding the Copilot

By default, the Copilot will be displayed as a floating action button (FAB) in the bottom right corner of the screen. To embed the Copilot within your website, set the embedded attribute to true. This will allow you to position the Copilot within your website’s layout wherever you see fit.

Note: When embedding the Copilot, the open, show, and show_minimize attributes will be overridden.

1
<body>
2
    <div class="container">
3
        <h1>Embedded Copilot Example</h1>
4
5
        <scout-copilot copilot_id="copilot_id" width="700px" height="500px"></scout-copilot>
6
7
        <h2>Some Content</h2>
8
        <p>
9
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
10
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
11
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
12
            commodo consequat.
13
        </p>
14
    </div>
15
16
    <script>
17
        const chat = document.querySelector('scout-copilot')
18
        chat.embedded = true
19
    </script>
20
</body>

In the example above, the Copilot is embedded within the .container div and it is given a width of 700px and a height of 500px.

Using Initial Activities

The initial_activities property allows you to set up the initial state of the Copilot chat by preloading messages and actions when the Copilot is initialized. This feature is useful for customizing the user’s first interaction with the Copilot, such as displaying a welcome message or suggesting common queries.

You can pass initial_activities to the Copilot component via JavaScript after it has loaded. The initial_activities is an array of activity objects that define messages or actions to be displayed in the chat interface.

Here is an example of how to set initial_activities:

1
<scout-copilot copilot_id="YOUR_COPILOT_ID_HERE"></scout-copilot>
2
<script type="module" src="https://copilot.scoutos.com/copilot.js"></script>
3
<script>
4
  const copilot = document.querySelector('scout-copilot');
5
  copilot.initial_activities = [
6
    {
7
      activity_type: 'llm.chat.message',
8
      img_url: 'https://example.com/assistant-avatar.jpg',
9
      role: 'assistant',
10
      content: 'How can I assist you today?',
11
    },
12
    {
13
      activity_type: 'action_list',
14
      header: 'Suggestions',
15
      items: [
16
        {
17
          action_item_type: 'suggested_query',
18
          img_url: 'https://example.com/icon1.svg',
19
          title: 'What is Scout?',
20
          query: 'What is Scout?',
21
        },
22
        {
23
          action_item_type: 'link',
24
          img_url: 'https://example.com/icon2.png',
25
          title: 'Join our Community',
26
          url: 'https://community.example.com',
27
        },
28
        {
29
          action_item_type: 'link',
30
          img_url: 'https://example.com/icon3.svg',
31
          title: 'Contact Support',
32
          url: 'mailto:support@example.com',
33
        },
34
      ],
35
    },
36
  ];
37
</script>

In this example, the Copilot will display an assistant message saying “How can I assist you today?” followed by a list of suggested actions, such as common queries or links to resources.

Activity Types

The initial_activities array can include the following activity types:

• llm.chat.message: Represents a chat message from the assistant or user.

  • role: The role of the message sender, either 'assistant' or 'user'.
  • content: The text content of the message.
  • img_url: (Optional) URL of the avatar image for the message sender.

• action_list: Displays a list of actionable items to the user.

  • header: The header text for the action list.
  • items: An array of action items.

Action Item Types

Within an action_list, the items array can include the following action item types:

• suggested_query: A suggested question or command that the user can click to send to the assistant.

  • title: The display text for the suggestion.
  • query: The query text that will be sent to the assistant when clicked.
  • img_url: (Optional) URL of an icon to display alongside the suggestion.

• link: A link to an external resource.

  • title: The display text for the link.
  • url: The URL to navigate to when clicked.
  • img_url: (Optional) URL of an icon to display alongside the link.

By customizing initial_activities, you can tailor the initial user experience of the Copilot to better suit your application’s needs.

Implementing the Copilot in React

If you are building your application using React and Next.js, you can integrate the Copilot component seamlessly. Below is an example of how to implement the Copilot in a React application using TypeScript.

1
// CopilotScript.tsx
2
3
'use client';
4
5
import React from 'react';
6
import Script from 'next/script';
7
8
const CopilotScript: React.FC = () => {
9
  return (
10
    <>
11
      <scout-copilot copilot_id="YOUR_COPILOT_ID_HERE"></scout-copilot>
12
      <Script
13
        type="module"
14
        src="https://copilot.scoutos.com/copilot.js"
15
        onLoad={() => {
16
          const copilot = document.querySelector('scout-copilot') as HTMLElement & {
17
            initial_activities?: Record<string, unknown>[];
18
          };
19
20
          if (copilot) {
21
            copilot.initial_activities = [
22
              {
23
                activity_type: 'llm.chat.message',
24
                img_url: 'https://example.com/assistant-avatar.jpg',
25
                role: 'assistant',
26
                content: 'How can I help you?',
27
              },
28
              {
29
                activity_type: 'action_list',
30
                header: 'Suggestions',
31
                items: [
32
                  {
33
                    action_item_type: 'suggested_query',
34
                    img_url: 'https://example.com/icon1.svg',
35
                    title: 'What is Scout?',
36
                    query: 'What is Scout?',
37
                  },
38
                  {
39
                    action_item_type: 'link',
40
                    img_url: 'https://example.com/icon2.png',
41
                    title: 'Join Scout Slack',
42
                    url: 'https://studio.scoutos.com/slack',
43
                  },
44
                  {
45
                    action_item_type: 'link',
46
                    img_url: 'https://example.com/icon3.svg',
47
                    title: 'Talk to a Scout Engineer',
48
                    url: 'mailto:support@scoutos.com',
49
                  },
50
                ],
51
              },
52
            ];
53
          }
54
        }}
55
      />
56
    </>
57
  );
58
};
59
60
export default CopilotScript;

In this example:

• We include 'use client'; at the top to indicate that this is a client-side component in Next.js.
• We import Script from 'next/script' to load the external Copilot script.
• We render the <scout-copilot> element within the component.
• We use the onLoad prop of the Script component to set the initial_activities after the script has loaded.
• We cast the scout-copilot element to include the initial_activities property.

To use this component in your application, simply import and include it in your JSX:

1
import React from 'react';
2
import CopilotScript from './CopilotScript';
3
4
const App: React.FC = () => {
5
  return (
6
    <div>
7
      {/* Your application content */}
8
      <CopilotScript />
9
    </div>
10
  );
11
};
12
13
export default App;

Note: Ensure that your project is configured to support custom HTML elements in JSX. You may need to adjust your TypeScript configuration or include custom type definitions.