Skip to main content

​
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

OptionTypeDefaultDescription
baseUrlstring-Cuadra API URL
proxyUrlstring-Proxy URL for backend auth
sessionTokenstring-Bearer token
modelIdstring-Model ID
modestring'multiChat''singleChat' or 'multiChat'
modelModestring'fixed''fixed' or 'selector'
themestring'system''light', 'dark', or 'system'
showThemeTogglebooleantrueShow theme toggle button
languagestring-Locale code (e.g., 'en', 'es')
welcomeTitlestring-Welcome screen title
welcomeSubtitlestring-Welcome screen subtitle
suggestionsarray-Array of { prompt: string }
containerIdstring'cuadra-chat'Target container ID
enableReasoningbooleanfalseShow AI thinking process
enableAttachmentsbooleanfalseEnable 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

​
Widget Not Appearing

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

​
Authentication Errors

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

​
Styling Issues

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

​
Next Steps

React Components

Use native React components for more control

API Reference

Build custom chat implementations