React UI Kit

npm install @cuadra-ai/uikit

import { CuadraChat } from '@cuadra-ai/uikit';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <CuadraChat
        connection={{
          baseUrl: "https://api.cuadra.ai",
          sessionToken: "your-session-token"
        }}
        chat={{ modelId: "your-model-id" }}
      />
    </div>
  );
}

<CuadraChat
  connection={{ baseUrl: "https://api.cuadra.ai", sessionToken: token }}
  chat={{ modelId: "model_abc" }}
  ui={{
    welcomeTitle: "How can I help?",
    suggestions: [
      { prompt: "What can you do?" },
      { prompt: "Show me examples" }
    ]
  }}
/>

<CuadraChat
  connection={{ baseUrl: "https://api.cuadra.ai", sessionToken: token }}
  chat={{ modelMode: "selector" }}
  callbacks={{ onModelChange: (id) => console.log('Model:', id) }}
/>

<CuadraChat
  connection={{ proxyUrl: "/api/chat" }}
  chat={{ modelId: "model_abc" }}
/>

import { CuadraChat, CuadraChatProvider, useCuadraChat } from '@cuadra-ai/uikit';

function SendButton() {
  const { controls, isReady } = useCuadraChat();
  return (
    <button onClick={() => controls?.sendMessage('Hello!')} disabled={!isReady}>
      Send
    </button>
  );
}

function App() {
  return (
    <CuadraChatProvider>
      <SendButton />
      <CuadraChat connection={{...}} chat={{...}} />
    </CuadraChatProvider>
  );
}

:root {
  --cuadra-primary: #6366f1;
  --cuadra-background: #ffffff;
  --cuadra-text: #1f2937;
}

[data-theme="dark"] {
  --cuadra-primary: #818cf8;
  --cuadra-background: #111827;
  --cuadra-text: #f9fafb;
}

<div id="cuadra-chat" style="height: 100vh;"></div>
<link rel="stylesheet" href="https://unpkg.com/@cuadra-ai/uikit/dist/widget/cuadra-uikit.css">
<script src="https://unpkg.com/@cuadra-ai/uikit/dist/widget/cuadra-uikit.umd.js"></script>
<script>
  CuadraUIKit.init({
    baseUrl: 'https://api.cuadra.ai',
    sessionToken: 'your-token',
    modelId: 'your-model-id'
  });
</script>

const CuadraChat = dynamic(() => import('@cuadra-ai/uikit').then(m => m.CuadraChat), { ssr: false });