Cuadra AI - Connect, Train, and Deploy Your Custom AI Assistant

Quick Start

Add these lines to your HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chat</title>
  <link rel="stylesheet" href="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.css">
  <style>
    body { margin: 0; padding: 0; }
    #cuadra-chat { height: 100vh; width: 100%; }
  </style>
</head>
<body>
  <div id="cuadra-chat"></div>
  
  <script src="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>
  <script>
    CuadraUIKit.init({
      baseUrl: 'https://api.cuadra.ai',
      sessionToken: 'your-session-token',
      modelId: 'your-model-id',
      mode: 'multiChat'
    });
  </script>
</body>
</html>

Installation Options

CDN (unpkg)

<link rel="stylesheet" href="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.css">
<script src="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>

CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.css">
<script src="https://cdn.jsdelivr.net/npm/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>

Self-hosted

Download the files and host them yourself:

npm pack @cuadra-ai/uikit
tar -xzf cuadra-ai-uikit-*.tgz
# Files are in package/dist/widget/

Initialization

JavaScript API

CuadraUIKit.init({
  baseUrl: 'https://api.cuadra.ai',
  sessionToken: 'your-session-token',
  modelId: 'your-model-id',
  mode: 'multiChat',
  modelMode: 'fixed',
  theme: 'system',
  showThemeToggle: true,
  welcomeTitle: 'Welcome!',
  welcomeSubtitle: 'How can I help you today?',
  suggestions: [
    { prompt: 'How do I get started?' },
    { prompt: 'What features do you offer?' }
  ]
});

Data Attributes (Auto-initialization)

Use data attributes for simpler setup:

<div id="cuadra-chat" 
     data-base-url="https://api.cuadra.ai"
     data-session-token="your-session-token"
     data-model-id="your-model-id"
     data-mode="multiChat"
     data-theme="system"
     style="height: 100vh; width: 100%;">
</div>

<script src="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>

The widget auto-initializes when data attributes are present.

Authentication Options

Direct API (Bearer Token)

CuadraUIKit.init({
  baseUrl: 'https://api.cuadra.ai',
  sessionToken: 'your-session-token',
  modelId: 'your-model-id'
});

Proxy Mode

When your backend handles authentication:

CuadraUIKit.init({
  proxyUrl: '/api/chat',
  modelId: 'your-model-id'
});

Configuration Options

Option	Type	Default	Description
`baseUrl`	string	-	Cuadra API URL
`proxyUrl`	string	-	Proxy URL for backend auth
`sessionToken`	string	-	Bearer token
`modelId`	string	-	Model ID
`mode`	string	`'multiChat'`	`'singleChat'` or `'multiChat'`
`modelMode`	string	`'fixed'`	`'fixed'` or `'selector'`
`theme`	string	`'system'`	`'light'`, `'dark'`, or `'system'`
`showThemeToggle`	boolean	`true`	Show theme toggle button
`language`	string	-	Locale code (e.g., `'en'`, `'es'`)
`welcomeTitle`	string	-	Welcome screen title
`welcomeSubtitle`	string	-	Welcome screen subtitle
`suggestions`	array	-	Array of `{ prompt: string }`
`containerId`	string	`'cuadra-chat'`	Target container ID
`enableReasoning`	boolean	`false`	Show AI thinking process
`enableAttachments`	boolean	`false`	Enable file uploads

Dynamic Token Updates

Update the session token without re-initializing:

// Initial setup
CuadraUIKit.init({
  baseUrl: 'https://api.cuadra.ai',
  sessionToken: initialToken,
  modelId: 'your-model-id'
});

// Later, when token refreshes
CuadraUIKit.updateToken(newToken);

Full Example

Basic Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customer Support Chat</title>
  <link rel="stylesheet" href="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.css">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; }
    #cuadra-chat { 
      height: 100vh; 
      width: 100%; 
    }
  </style>
</head>
<body>
  <div id="cuadra-chat"></div>
  
  <script src="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>
  <script>
    // Get session token from your auth system
    const sessionToken = getSessionToken(); // Your implementation
    
    CuadraUIKit.init({
      baseUrl: 'https://api.cuadra.ai',
      sessionToken: sessionToken,
      modelId: 'model_abc123',
      mode: 'multiChat',
      theme: 'system',
      showThemeToggle: true,
      welcomeTitle: 'Welcome to Support',
      welcomeSubtitle: 'How can I help you today?',
      suggestions: [
        { prompt: 'How do I get started?' },
        { prompt: 'What are your pricing plans?' }
      ]
    });
  </script>
</body>
</html>

Embedded in Existing Page

<!-- Add to your existing page -->
<div id="chat-container" style="width: 400px; height: 600px; position: fixed; bottom: 20px; right: 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.15);">
  <div id="cuadra-chat" style="height: 100%; width: 100%;"></div>
</div>

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

With Proxy Backend

<div id="cuadra-chat" style="height: 100vh;"></div>

<script src="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>
<script>
  CuadraUIKit.init({
    proxyUrl: '/api/chat',
    modelId: 'model_abc123',
    mode: 'multiChat'
  });
</script>

Styling & Customization

Container Sizing

The widget fills its container. Control size via the container:

<!-- Full page -->
<div id="cuadra-chat" style="height: 100vh; width: 100%;"></div>

<!-- Fixed size -->
<div id="cuadra-chat" style="height: 600px; width: 400px;"></div>

<!-- Responsive -->
<div id="cuadra-chat" style="height: 80vh; max-width: 800px; margin: 0 auto;"></div>

Custom Styling

Override CSS variables:

<style>
  #cuadra-chat {
    --cuadra-primary: #6366F1;
    --cuadra-background: #fafafa;
    --cuadra-border-radius: 12px;
  }
</style>

WordPress Integration

Add to your theme’s footer.php or use a custom HTML block:

<!-- In footer.php before </body> -->
<div id="cuadra-chat" style="position: fixed; bottom: 20px; right: 20px; width: 380px; height: 500px; z-index: 9999;"></div>
<link rel="stylesheet" href="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.css">
<script src="https://unpkg.com/@cuadra-ai/uikit@latest/dist/widget/cuadra-uikit.umd.js"></script>
<script>
  CuadraUIKit.init({
    proxyUrl: '<?php echo admin_url("admin-ajax.php"); ?>?action=cuadra_chat',
    modelId: 'your-model-id',
    mode: 'singleChat'
  });
</script>

Troubleshooting

Check the container exists: document.getElementById('cuadra-chat')
Ensure CSS is loaded before the script
Check browser console for errors
Verify container has explicit height

Authentication Errors

Check session token is valid
Verify API key has correct permissions
Use browser Network tab to inspect requests

Styling Issues

Ensure CSS file is loaded
Check for CSS conflicts with your site
Use browser DevTools to inspect elements

Next Steps

React Components

Use native React components for more control

API Reference

Build custom chat implementations

Getting Started

API Reference

Guides

Billing

UIKit Widget

Quick Start

Installation Options

CDN (unpkg)

CDN (jsDelivr)

Self-hosted

Initialization

JavaScript API

Data Attributes (Auto-initialization)

Authentication Options

Direct API (Bearer Token)

Proxy Mode

Configuration Options

Dynamic Token Updates

Full Example

Basic Implementation

Embedded in Existing Page

With Proxy Backend

Styling & Customization

Container Sizing

Custom Styling

WordPress Integration

Troubleshooting

Widget Not Appearing

Authentication Errors

Styling Issues

Next Steps

React Components

API Reference

​Quick Start

​Installation Options

​CDN (unpkg)

​CDN (jsDelivr)

​Self-hosted

​Initialization

​JavaScript API

​Data Attributes (Auto-initialization)

​Authentication Options

​Direct API (Bearer Token)

​Proxy Mode

​Configuration Options

​Dynamic Token Updates

​Full Example

​Basic Implementation

​Embedded in Existing Page

​With Proxy Backend

​Styling & Customization

​Container Sizing

​Custom Styling

​WordPress Integration

​Troubleshooting

​Widget Not Appearing

​Authentication Errors

​Styling Issues

​Next Steps

React Components

API Reference

Quick Start

Installation Options

CDN (unpkg)

CDN (jsDelivr)

Self-hosted

Initialization

JavaScript API

Data Attributes (Auto-initialization)

Authentication Options

Direct API (Bearer Token)

Proxy Mode

Configuration Options

Dynamic Token Updates

Full Example

Basic Implementation

Embedded in Existing Page

With Proxy Backend

Styling & Customization

Container Sizing

Custom Styling

WordPress Integration

Troubleshooting

Widget Not Appearing

Authentication Errors

Styling Issues

Next Steps