It's in the first phase. Here is a simple guide on how to use the UI kit:
npm install @cortex-ai/ui-kit-reactimport { useCortexUIKit } from "@cortex-ai/ui-kit-react"
import { CortexChat } from "@cortex-ai/ui-kit-react/chat"
export default function App() {
const { control } = useCortexUIKit({
api: {
async getClientSecret() {
// this will be an actual fetch request to generate a client secret and then return it once client secret support is implemented (soon)
// for now just return the Cortex API key (not safe, dangerous)
return "xxx"
}
}
})
return (
<div>
<CortexChat
control={control}
options={{
agentId: "work_xxx",
theme: {
accentColor: "fuchsia"
}
}}
className="h-dvh w-[400px] rounded-2xl border border-zinc-200 dark:border-zing-800"
/>
</div>
)
}The CortexChat component accepts the following options:
| Option | Type | Required | Default | Description |
|---|---|---|---|---|
agentId |
string |
Yes | - | The agent ID to use for the chat |
theme |
object |
No | - | Theme customization options |
theme.colorScheme |
"light" | "dark" |
No | "light" |
Color scheme for the chat interface |
theme.accentColor |
"blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "sky" | "cyan" | "teal" | "gray" | "stone" |
No | "blue" |
Primary accent color for the chat interface |
theme.neutralColor |
"gray" | "zinc" | "stone" |
No | "zinc" |
Neutral color scheme for secondary UI elements |
startScreen |
object |
No | - | Start screen configuration |
startScreen.greeting |
string |
No | - | Initial greeting message shown when the chat starts |
startScreen.suggestedMessages |
SuggestedMessage[] |
No | - | Array of suggested messages to display as quick action buttons |
composer |
object |
No | - | Composer configuration |
composer.placeholder |
string |
No | "Type a message..." |
Custom placeholder text for the message input |
SuggestedMessage Type:
{
label: string; // The display label for the suggested message button
prompt: string; // The actual prompt/message to send when the button is clicked
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<cortex-chat id="my-chat"></cortex-chat>
</div>
<!-- Load Chat from UI kit -->
<script src="https://unpkg.com/@cortex-ai/ui-kit@latest/dist/cortex-chat.js"></script>
<!-- Set options -->
<script>
const myChat = document.getElementById("my-chat");
myChat.setOptions({
agentId: "work_xxx",
api: {
async getClientSecret() {
return "xxx"
}
},
theme: "fuchsia"
});
</script>
</body>
</html>