Documentation

Complete guide to integrating SuperIntern AI chat components into your application

Installation

⚠️Note: The SDK is currently distributed via CDN only. NPM package coming soon.

Via CDN (Recommended)

Add the following script tag to the <head> or <body> of your HTML:

<script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>

💡Tip: The CDN version exposes a global SuperIntern object that you can use to initialize components.

Embedded Chat

The Embedded Chat component is perfect for creating a dedicated AI chat experience directly on your page. You may want to add an embedded chat in places where you want to encourage the user to interact with the AI chat directly.

📌 Common Use Cases

• Deflect questions in your help center or support site
• Provide an AI chat experience on documentation sites (e.g., GitBook, ReadMe)
• Create a dedicated page for sharable chat sessions
• Embed on pages like help.domain.com or domain.com/ask-ai

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function ChatPage() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern) {
      window.SuperIntern.EmbeddedChat("#chat-container", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          environment: "production",
          agentId: "your-agent-id",
        },
        aiChatSettings: {
          aiAssistantName: "Support Assistant",
          introMessage: "👋 Hi! How can I help you today?",
        },
      });
    }
  }, [sdkLoaded]);

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <div id="chat-container" style={{ height: '600px' }} />
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

Step 1: Add the script tag to your HTML

<script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>

Step 2: Define a container element for the chat

<div style="display: flex; align-items: center; justify-content: center; height: calc(100vh - 16px);">
  <div style="max-height: 600px; height: 100%;">
    <div id="superintern-embedded-chat"></div>
  </div>
</div>

Step 3: Initialize the Embedded Chat

<script>
  window.addEventListener("load", function() {
    const config = {
      baseSettings: {
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
      },
      aiChatSettings: {
        aiAssistantName: "Support Assistant",
        introMessage: "👋 Hi! How can I help you today?",
      },
    };

    // Initialize the widget
    const chat = SuperIntern.EmbeddedChat("#superintern-embedded-chat", config);
  });
</script>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`shouldAutoFocusInput`	boolean	No	Auto focus input on mount. Defaults to true

Example: With Quick Questions

// Initialize with quick questions
SuperIntern.EmbeddedChat("#chat-container", {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    environment: "production",
    agentId: "your-agent-id",
    primaryBrandColor: "#4f46e5",
  },
  aiChatSettings: {
    aiAssistantName: "Support Bot",
    introMessage: "👋 Welcome! How can I assist you?",
    quickQuestions: [
      "How do I get started?",
      "What features are available?",
      "How do I contact support?",
    ],
  },
});

Modal Chat

The Modal Chat component displays a chat interface in a modal/dialog overlay. Perfect for providing on-demand support without taking up permanent screen space.

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function App() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern && !window.SuperIntern.ModalChat.isInitialized()) {
      window.SuperIntern.ModalChat.init({
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
        primaryBrandColor: "#4f46e5",
        theme: {
          colorMode: { type: "light" }
        }
      });
    }
  }, [sdkLoaded]);

  const handleOpenChat = () => {
    if (window.SuperIntern) {
      window.SuperIntern.ModalChat.open();
    }
  };

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <button onClick={handleOpenChat}>Open Chat</button>
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
</head>
<body>
  <button id="open-chat-btn">Open Chat</button>

  <script>
    window.addEventListener("load", function() {
      // Initialize the modal
      SuperIntern.ModalChat.init({
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
        primaryBrandColor: "#4f46e5",
      });

      // Open modal when button is clicked
      document.getElementById("open-chat-btn").addEventListener("click", function() {
        SuperIntern.ModalChat.open();
      });
    });
  </script>
</body>
</html>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`modalSettings`	object	No	Modal-specific settings (isOpen, onClose)

Chat Button

The Chat Button component provides a floating button that opens a modal chat when clicked. Perfect for customer support and help features.

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function App() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern && !window.SuperIntern.ChatButton.isInitialized()) {
      window.SuperIntern.ChatButton.init({
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
        primaryBrandColor: "#4f46e5",
        theme: {
          colorMode: { type: "light" }
        }
      });
    }
  }, [sdkLoaded]);

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      {/* The chat button will be rendered by the SDK */}
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener("load", function() {
      // Initialize the chat button
      SuperIntern.ChatButton.init({
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
        primaryBrandColor: "#4f46e5",
      });
    });
  </script>
</body>
</html>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`aiChatSettings`	object	No	AI chat configuration settings
`label`	string	No	Button label text
`style`	React.CSSProperties	No	Custom CSS styles for the button

Search Bar

The Search Bar component provides an AI-powered search interface that opens a modal chat when a query is submitted.

Quick Start (React/Next.js)

Since the SDK is not yet available on NPM, use the Script tag approach:

import { useState, useEffect } from 'react';
import Script from 'next/script';

declare global {
  interface Window {
    SuperIntern: any;
  }
}

export default function App() {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern && !window.SuperIntern.SearchBar.isInitialized()) {
      window.SuperIntern.SearchBar.init({
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
        primaryBrandColor: "#4f46e5",
        theme: {
          colorMode: { type: "light" }
        }
      });
    }
  }, [sdkLoaded]);

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      {/* The search bar will be rendered by the SDK */}
    </>
  );
}

Quick Start (HTML / Vanilla JavaScript)

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener("load", function() {
      // Initialize the search bar
      SuperIntern.SearchBar.init({
        apiKey: "YOUR_API_KEY",
        environment: "production",
        agentId: "your-agent-id",
        primaryBrandColor: "#4f46e5",
      });
    });
  </script>
</body>
</html>

Props

Prop	Type	Required	Description
`baseSettings`	object	✓ Yes	Core configuration settings
`searchSettings`	object	No	Search-specific settings (placeholder)
`aiChatSettings`	object	No	AI chat configuration settings
`style`	React.CSSProperties	No	Custom CSS styles for the search bar

Configuration Reference

Base Settings

Core configuration options that apply to all components:

Property	Type	Required	Description
`apiKey`	string	✓ Yes	Your SuperIntern API key
`environment`	"test" \| "production"	No	API environment. Defaults to "test"
`agentId`	string	No	Specific agent ID to use
`modeShortId`	string	No	Specific mode ID to use
`enableThinking`	boolean	No	Enable thinking mode. Defaults to false
`stream`	boolean	No	Enable streaming responses. Defaults to true
`primaryBrandColor`	string	No	Primary brand color (hex)
`secondaryBrandColor`	string	No	Secondary brand color (hex)
`theme`	object	No	Theme configuration (colorMode: light/dark)

AI Chat Settings

Configuration options for the AI chat behavior and appearance:

Property	Type	Description
`aiAssistantName`	string	Display name for the AI assistant
`aiAssistantDescription`	string	Subtitle or description for the assistant
`introMessage`	string	Initial greeting message
`quickQuestions`	string[]	Array of suggested questions
`showThinkingProcess`	boolean	Show thinking process UI. Defaults to true
`disclaimer`	object	Disclaimer settings (text, link)

Example: Full Configuration

const config = {
  baseSettings: {
    apiKey: "YOUR_API_KEY",
    environment: "production",
    agentId: "agent-123",
    modeShortId: "support-mode",
    enableThinking: true,
    stream: true,
    primaryBrandColor: "#4f46e5",
    secondaryBrandColor: "#ec4899",
    theme: {
      colorMode: { type: "light" }
    }
  },
  aiChatSettings: {
    aiAssistantName: "Support Bot",
    aiAssistantDescription: "Your 24/7 AI Assistant",
    introMessage: "👋 Hello! How can I help you today?",
    quickQuestions: [
      "How do I get started?",
      "What features are available?",
      "Contact support"
    ],
    showThinkingProcess: true,
    disclaimer: {
      text: "AI responses may not always be 100% accurate.",
      link: "https://example.com/disclaimer"
    }
  }
};

Chat Methods

All chat components return an instance with methods you can use to interact with the chat programmatically.

Available Methods

submitMessage(message?: string)

Programmatically sends a message in chat. If message is omitted, sends the current input value.

// Send a specific message
chat.submitMessage("Hello, I need help!");

// Send whatever is in the input field
chat.submitMessage();

updateInputMessage(message: string)

Updates the text in the chat input field without sending it.

chat.updateInputMessage("How do I reset my password?");

clearChat()

Resets the chat to its initial state, clearing all messages.

chat.clearChat();

focusInput()

Sets focus to the chat input field.

chat.focusInput();

update(config: Partial<Config>)

Updates the chat configuration after initialization. Useful for changing settings dynamically.

// Update primary color
chat.update({
  baseSettings: {
    primaryBrandColor: "#10b981"
  }
});

// Update assistant name
chat.update({
  aiChatSettings: {
    aiAssistantName: "New Assistant Name"
  }
});

Example: Dynamic Color Changer

This example shows how to change the primary color when a button is clicked:

const colors = [
  "#26D6FF",
  "#e300bd",
  "#512fc9",
  "#fde046",
  "#2ecc71",
  "#e74c3c",
  "#9b59b6",
  "#f1c40f",
];

let count = 0;

const changeColorButton = document.getElementById("change-color-button");
changeColorButton.addEventListener("click", () => {
  count++;
  chat.update({
    baseSettings: {
      primaryBrandColor: colors[count % colors.length],
    },
  });
});

Example: Submit Message from External Button

// HTML / Vanilla JS example
var chat = SuperIntern.EmbeddedChat("#chat", config);

document.getElementById("help-btn").addEventListener("click", function() {
  chat.submitMessage("I need help with my account");
});

// React / Next.js example (using Script tag)
import { useState, useEffect, useRef } from 'react';
import Script from 'next/script';

export default function ChatWithCustomButton() {
  const [sdkLoaded, setSdkLoaded] = useState(false);
  const chatRef = useRef(null);

  useEffect(() => {
    if (sdkLoaded && window.SuperIntern) {
      chatRef.current = window.SuperIntern.EmbeddedChat("#chat-container", {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          environment: "production",
          agentId: "your-agent-id",
        },
      });
    }
  }, [sdkLoaded]);

  const handleQuickHelp = () => {
    if (chatRef.current) {
      chatRef.current.submitMessage("I need help with my account");
    }
  };

  return (
    <>
      <Script
        src="https://cdn.superintern.ai/sdk/embed.global.js"
        onLoad={() => setSdkLoaded(true)}
      />
      <button onClick={handleQuickHelp}>Quick Help</button>
      <div id="chat-container" style={{ height: '600px' }} />
    </>
  );
}

Complete HTML Example

Here's a complete example showing how to use the SDK in a static HTML page with interactive controls:

Complete HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SuperIntern Chat Demo</title>
  
  <!-- Load the SDK -->
  <script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
  
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .chat-container {
      height: 600px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      overflow: hidden;
    }
    .controls {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
    }
    button {
      padding: 10px 20px;
      background: #4f46e5;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
    button:hover {
      background: #4338ca;
    }
  </style>
</head>
<body>
  <h1>SuperIntern Chat Demo</h1>
  
  <div class="controls">
    <button id="clear-btn">Clear Chat</button>
    <button id="focus-btn">Focus Input</button>
    <button id="send-btn">Send Test Message</button>
    <button id="color-btn">Change Color</button>
  </div>
  
  <div id="superintern-chat" class="chat-container"></div>
  
  <script>
    window.addEventListener("load", function() {
      // Configuration
      const config = {
        baseSettings: {
          apiKey: "YOUR_API_KEY",
          environment: "production",
          agentId: "your-agent-id",
          primaryBrandColor: "#4f46e5",
          stream: true,
        },
        aiChatSettings: {
          aiAssistantName: "Support Assistant",
          introMessage: "👋 Hi! How can I help you today?",
          quickQuestions: [
            "How do I get started?",
            "What features are available?",
            "Contact support"
          ],
        },
      };
      
      // Initialize chat
      var chat = SuperIntern.EmbeddedChat("#superintern-chat", config);
      
      // Button handlers
      document.getElementById("clear-btn").addEventListener("click", function() {
        chat.clearChat();
      });
      
      document.getElementById("focus-btn").addEventListener("click", function() {
        chat.focusInput();
      });
      
      document.getElementById("send-btn").addEventListener("click", function() {
        chat.submitMessage("This is a test message!");
      });
      
      var colors = ["#4f46e5", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
      var colorIndex = 0;
      
      document.getElementById("color-btn").addEventListener("click", function() {
        colorIndex = (colorIndex + 1) % colors.length;
        chat.update({
          baseSettings: {
            primaryBrandColor: colors[colorIndex]
          }
        });
      });
    });
  </script>
</body>
</html>

💡Note: When using the CDN version, all components are available under the global SuperIntern object:

SuperIntern.EmbeddedChat()
SuperIntern.ModalChat()
SuperIntern.ChatButton()
SuperIntern.SearchBar()

🎮 Try it Out!

Want to see these components in action? Check out our interactive playgrounds:

Documentation

Installation

Via CDN (Recommended)

Embedded Chat

📌 Common Use Cases

Quick Start (React/Next.js)

Quick Start (HTML / Vanilla JavaScript)

Props

Example: With Quick Questions

Chat Button

Quick Start (React/Next.js)

Quick Start (HTML / Vanilla JavaScript)

Props

Search Bar

Quick Start (React/Next.js)

Quick Start (HTML / Vanilla JavaScript)

Props

Configuration Reference

Base Settings

AI Chat Settings

Example: Full Configuration

Chat Methods

Available Methods

submitMessage(message?: string)

updateInputMessage(message: string)

clearChat()

focusInput()

update(config: Partial<Config>)

Example: Dynamic Color Changer

Example: Submit Message from External Button

Complete HTML Example

Complete HTML Example

🎮 Try it Out!

💬 Embedded Chat Playground

🪟 Modal Chat Playground

🔘 Chat Button Playground

🔍 Search Bar Playground