Pre-requisites

You must have a Superpowered AI account. You will need an api key and api secret in order to make requests. If you do not have an account, you can sign up for one for free here.

API keys can be created in the API Keys tab in the UI.

Installation

npm install superpowered-ai

Usage

import { SuperpoweredChatbot } from 'superpowered-ai'

<SuperpoweredChatbot
    apiKey={"YOUR_API_KEY"}
    apiSecret={"YOUR_API_SECRET"}
    headerLogo={YOUR_LOGO}
    headerText={"Superpowered AI"}
    darkMode={true}
    initialMessage={"Welcome to Superpowered AI. How can I help you?"}
    placeholderText={"Type a message..."}
    chatConfig={{
        model: "gpt-4",
        knowledgeBaseIds: [],
        systemMessage: "",
        autoQueryGuidance: "",
        targetSegmentLength: "medium",
        useRSE: true,
        responseLength: "medium",
        temperature: 0.2,
    }}
    style={{
        chatContainerMaxHeight: "90vh",
        chatContainerWidth: "575px",
        chatBubbleStyle: {backgroundColor: "#5D24D8"},
        chatBubbleIconStyle: {color: "white"},
        headerTextStyle: {color: "#5D24D8"},
        userMessageContainerStyle: {backgroundColor: "#5D24D8"},
        userMessageTextStyle: {fontFamily: "Inter", fontSize: "14px"}
    }}
    onMessageSendCallback={(payload, response, status) => console.log(payload, response, status)}
    displaySources={"link_to_source_only"}
/>

Security

DO NOT use a server-side api key. Please only use a client-side key. Depending on your application, it could also be recommended to rotate your API key and secret. You can easily delete and create new keys in the Superpowered UI.

Recommendations

While some of the parameters are not required, we highly recommend that you make use of the following in order to get the most out of your chatbot:

1. Header logo and title

• Please use your own logo and title in order to customize the chatbot to match your site.

2. System message:

• We highly recommend creating a detailed system message specific to your use case. This will result in much more relevant responses for your users. Check out our documentation for an example of how we crafted a system message for our site.

Props

For full detail about the chat configuration parameters, check out our documentation here

| Prop | Required | Type | Default | Description | | ---- | -------- | ---- | ------- | ----------- | | apiKey | Yes | string | "" | Superpowered AI API key | | apiSecret | Yes | string | "" | Superpowered AI API secret | | headerLogo | No | React.node | null | The logo (if any) you want displayed next to the title. This gets sized to 25px by 25px. We highly recommend using a suqare or circular logo. | | headerTitle | No | string | "" | The title you want displayed at the top of the chatbot | | darkMode | No | boolean | false | Use our dark theme colors | | initialMessage | No | string | "Hello, how can I help you?" | The welcome message that shows up when the chatbot is opened | | placeholderText | No | string | "Type a message" | Placeholder text in the chat input | | onMessageSendCallback | No | Function | null | Callback function for detail about the payload sent, the response from the API, and the status. This is primarily for debugging purposes, we do not recommend exposing this to your users | | displaySources | No | string | "link_to_source_only" | Options for displaying sources. This can be "all", "link_to_source_only", or "none". "all" will display sources even if they do not contain a "link_to_source", but these will not be clickable. Any source with a "link_to_source" will be clickable, and it will open that source in a new tab | | style | No | object | - | Style customization for the chatbot | | style.chatContainerMaxHeight | No | string | "90vh" | Max height for the chatbot in the opened state. Beyond this height the message container will scroll vertically. | | style.chatContainerWidth | No | string | "575px" | Width for the chatbot in the opened state | | style.chatBubbleStyle | No | React.CSSProperties | - | Custom style for the floating chat bubble (closed state) | | style.chatBubbleIconStyle | No | React.CSSProperties | - | Custom style for the icon in the floating chat bubble (closed state) | | style.headerTextStyle | No | React.CSSProperties | - | Custom style of the header text | | style.userMessageContainerStyle | No | React.CSSProperties | - | Custom style for the user message container | | style.userMessageTextStyle | No | React.CSSProperties | - | Custom style for the user message text | | chatConfig | Yes | object | - | Configuration parameters for your chatbot. Learn more about chat configuration here | | chatConfig.model | No | string | "gpt-4" | Model to use. This can either be "gpt-4" or "gpt-3.5-turbo" | | chatConfig.knowledgeBaseIds | Yes | array | [] | List of Superpowered AI knowledge base ids to give the chatbot access to | | chatConfig.systemMessage | No | string | "" | The system message lets you instruct the LLM to behave in a certain way. You can also use it to give the LLM context about what its role is. For example, “You are a customer service bot for Superpowered AI. Superpowered AI is a knowledge base as a service provider for LLM applications… You should ONLY discuss Superpowered AI’s products and politely refuse to answer unrelated questions.” Don’t be afraid to make this multiple paragraphs long with a lot of detail and examples. | | chatConfig.autoQueryGuidance | No | string | "" | When we automatically generate queries based on user input, you may want to provide some additional guidance and/or context to the system. For example, you may have some information that may not be input directly as query input, but you want the information present when generating search queries in the retrieval step. | | chatConfig.targetSegmentLength | No | string | "medium" | This parameter controls the average length of the segments that get created. For more complex tasks it usually works better to use medium to long segments. Only used when RSE is set to Yes. | | chatConfig.responseLength | No | string | "short" | Response length controls the average length of chat responses. Short is the default, which will keep responses to a few sentences or less. If you want the model to respond with as much detail as possible, which usually means using multiple paragraphs, use long. | | chatConfig.temperature | No | number | 0.1 | This controls the creativity of responses. Set this close to 0 reduce the risk of hallucinations, and closer to 1 for more creative responses. | | chatConfig.useRSE | No | boolean | true | Relevant Segment Extraction (RSE) is an optional (but strongly recommended) post-processing step that takes clusters of relevant chunks and intelligently combines them into longer sections of text that we call segments.​​ These segments provide better context to the LLM than any individual chunk can. |

Support

If you have any questions, bug reports, or product enhancement requests, please email [email protected]