@ada-core/assistant-sdk NPM

`@ada-core/assistant-sdk`

This package provides a set of tools to help you build your own ADA Assistant.

How it works

This package provides components to build an ADA Assistant.
It also includes server actions to interact with the assistant.
It accepts the assistant ID and ADA API key to interact with the assistant.

Installation

npmp add @ada-core/assistant-sdk

Basic Usage

The SDK provides a set of components to build an ADA Assistant. Here is an example of how to use the SDK to build an assistant.

Step 1: Initialize the provider

import { AssistantProvider } from '@ada-core/assistant-sdk';

const App = () => {
  return (
    <AssistantProvider assistantId="assistant-id" apiKey="ada-api-key">
      <MyChat />
    </AssistantProvider>
  );
};

Step 2: Use the assistant components

import { Assistant, Chat, Message } from '@ada-core/assistant-sdk';

const MyChat = () => {
  return (
      <Chat
        assistantId="asst_0uRuhfE70R5zIiPQoF7X2hIs"
      >
        <Welcome />
        <Messages />
        <Prompt />
      </Chat>
  );
};

Components

AssistantProvider

The AssistantProvider component is used to initialize the assistant. It accepts the assistant ID and ADA API key as props.

import { AssistantProvider } from '@ada-core/assistant-sdk';

const App = () => {
  return (
    <AssistantProvider assistantId="assistant-id" apiKey="ada-api-key">
      <MyChat />
    </AssistantProvider>
  );
};

Chat

The Chat component is used to render the chat interface. It accepts the assistant ID as a prop.

For the Chat component, you can also provide widgets. The widgets prop is an array of components that will be rendered for specific actions.

import { Chat } from '@ada-core/assistant-sdk';

const MyChat = () => {
  return (
    <Chat
      assistantId="asst_0uRuhfE70R5zIiPQoF7X2hIs"
    >
        ...
    </Chat>
  );
};

Welcome

The Welcome component is used to render the welcome message. You can define suggestions to display to the user and override the content of the welcome message.

import { Welcome, SuggestionItem } from '@ada-core/assistant-sdk';

const suggestions: SuggestionItem[] = [
    {
        title: "Exercises to improve ball reception",
        prompt: "Can you suggest some exercises to improve ball reception?",
    },
    {
        title: "Training program",
        prompt: "Can you suggest a training program for me?",
    }
]

const MyWelcome = () => {
  return (
    <Welcome suggestions={suggestions}>
        <img src="/images/my-logo.png" />
        <p>Welcome to my assistant</p>
    </Welcome>
  );
};

Messages

The Messages component is used to render the messages exchanged with the assistant. Is has to be used inside the Chat component.

import { Messages } from '@ada-core/assistant-sdk';

const MyMessages = () => {
  return (
    <Messages />
  );
};

Prompt

The Prompt component is used to render the prompt to send a message to the assistant. It accepts a placeholder prop to define the placeholder text of the input.

import { Prompt } from '@ada-core/assistant-sdk';

const MyPrompt = () => {
  return (
    <Prompt placeholder="Type your message here" />
  );
};

Widgets

You can create your own widgets to render specific actions. Each assistant provides a set of actions that can be used to create widgets.

To create a widget, you need to create a component that will render the action. The component will receive the action as a prop.

"use client";

import { makeWidgetUI } from "@ada-core/assistant-sdk";

export const ExerciseWidgetUI = makeWidgetUI<any, any>({
    toolName: "exercise_program",
    render: ({ args, result, status }: any) => {
        return (
            <div>
                <h2>Exercise Program</h2>
                <ul>
                    {result.exercises.map((exercise: any) => (
                        <li key={exercise.id}>{exercise.name}</li>
                    ))}
                </ul>
            </div>
        );
    },
});

Then, you can use the widget in the Chat component.

import { Chat } from '@ada-core/assistant-sdk';

const MyChat = () => {
  return (
    <Chat
      assistantId="asst_0uRuhfE70R5zIiPQoF7X2hIs"
      widgets={[ExerciseWidgetUI]}
    >
        ...
    </Chat>
  );
};