Javascript

To add AI assistant to your existing Vanialla JS Code

Add this to your head tag

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@sugar-ai/copilot-one-js@latest/dist/js/copilot-one.min.js"
  async
></script>

Add this inside your HTML body

<!-- Adding copilot one container to your webiste  -->
<a id="copilot-one" data-copilot-id="<copilotId>" href="https://sugarai.dev"></a>
<script>
  window.saiData = window.saiData || [];

  function saiAsync() {
    saiData.push(arguments);
  }

  # Add config
  // Get this config from your Copilot
  saiAsync("setConfig", {
    copilotId: "<copilotId>",
    server: {
      endpoint: "https://play.sugarcaneai.dev/api",
      token: "<token>",
    },

    ...
    ...
    ...
  })
</script>

Additionally register your functions. Follow the example below of addTodo function

saiAsync(
  "register",
  "addTodo",
  {
    name: "addTodo",
    description: "Add a new todo",
    parameters: [
      {
        name: "task",
        type: "string",
        description: "Task description",
        required: true,
      },
    ],
  },
  addTodo
);

Add the assistants to the pages you want to
- Voice Assistant
- Text Assistant
Add the Voice assistant to the pages you want to. If you want to enable it on all the pages, add it to common section.
saiAsync("addAssistant", "<elementId>", "VoiceAssistant", { id: '<ID>', position: "bottom-center", ..... ..... ..... });
This will show a mic button on the bottom center of the page. Test it out if you talk with it. This Assistant have no registered actions
Add the Text assistant to the pages you want to. If you want to enable it on all the pages, add it to common section.
saiAsync("addAssistant", "<elementId>", "TextAssistant", { id: '<ID>', position: "bottom-center", ..... ..... ..... });
This will show a Chat button on the bottom center of the page. Test it out if you talk with it. This Assistant have no registered actions
Test The AI Assistant on your App

Go ahead and press the Mic button shown in the Voice Assistant component to interact with the AI Assistant.

You should be able to invoke registered actions like “Add a todo item”.
Refine Prompt

Go to Copilot > Select Copilot > Linked Packages

Update, Version, Test & Deploy the prompt

Javascript

Test The AI Assistant on your App

Refine Prompt