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.
Usage
<body>
<superpowered-chatbot
api-key=""
api-secret=""
dark-mode="true"
header-logo="YOUR_LOGO.png"
header-title="Superpowered AI"
placeholder-text="Type a message..."
initial-message="Welcome to Superpowered AI. How can I help you?"
chat-config-knowledge-base-ids="kb-id-1, kb-id-id2"
chat-config-model="gpt-4"
chat-config-system-message=""
chat-config-response-length="medium"
chat-bubble-color=""
chat-bubble-size=""
chat-container-width="600px"
chat-container-max-height="90vh"
font-family="Arial"
>
</superpowered-chatbot>
</body>
<script src="https://unpkg.com/superpowered-chatbot@latest/dist/superpowered-chatbot.min.js"></script>// Define the callback function
function handleMessageSent(data) {
console.log('payload', data["payload"]);
console.log('resData', data["resData"]);
console.log('status', data["status"]);
}
// Wait for the DOM to load
document.addEventListener('DOMContentLoaded', () => {
const observer = new MutationObserver((mutations, obs) => {
const chatbot = document.querySelector('superpowered-chatbot');
if (chatbot) {
chatbot.onMessageSendCallback = handleMessageSent;
obs.disconnect(); // Stop observing once we have what we need
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});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:
- Header logo and title
- Please use your own logo and title in order to customize the chatbot to match your site.
- 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 |
|---|---|---|---|---|
| api-key | Yes | string | "" | Superpowered AI API key |
| api-secret | Yes | string | "" | Superpowered AI API secret |
| header-logo | No | string | 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. |
| header-title | No | string | "" | The title you want displayed at the top of the chatbot |
| dark-mode | No | string (boolean) | "false" | "true" or "false". "true" will use our dark theme colors |
| initial-message | No | string | "Hello, how can I help you?" | The welcome message that shows up when the chatbot is opened |
| placeholder-text | 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 MUST be defined after the DOM has loaded. This is primarily for debugging purposes, we do not recommend exposing this to your users |
| display-sources | 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 |
| chat-container-max-height | No | string | "90vh" | Max height for the chatbot in the opened state. Beyond this height the message container will scroll vertically. |
| chat-container-width | No | string | "600px" | Width for the chatbot in the opened state |
| chat-bubble-color | No | string | Superpowered blue | Color for the floating chat bubble (closed state) |
| chat-bubble-size | No | string | "70px" | Height and width of the floating chat bubble (closed state) |
| chat-bubble-icon | No | string | Message icon | Custom message icon for the floating chat bubble (closed state) |
| chat-bubble-icon-size | No | string | "28px" | Size of the icon floating chat bubble (closed state) |
| chat-config-model | No | string | "gpt-4" | Model to use. This can either be "gpt-4" or "gpt-3.5-turbo" |
| chat-config-knowledge-base-ids | Yes | string | "" | List of Superpowered AI knowledge base ids to give the chatbot access to. These must be defined as comma separated values ("id1, id2, ...") |
| chat-config-system-message | 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. |
| chat-config-auto-query-guidance | 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. |
| chat-config-target-segment-length | 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. |
| chat-config-response-length | 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. |
| chat-config-temperature | No | string (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. |
| chat-config-use-rse | No | string (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. |
| send-message-on-enter | No | string (boolean) | "true" | "true" or "false" to determine whether the Return key sends a message. When set to "false", the Return key will create a new line. When set to "true", a new line is created with Shift + Return |
| font-family | No | string | "Arial" | Name for a custom font family. If this is used, you must import the font the in head tag. This font family will be applied everywhere in the Chatbot |
Support
If you have any questions, bug reports, or product enhancement requests, please email nick@superpowered.ai