SuperInternSuperIntern

Search Bar Example

The search bar component provides a Google-like entry point for the AI assistant. It's designed to be placed prominently in hero sections, help centers, or headers.

Live Preview

onOpenChange Callback Log
Click the search bar to see callback events...
How do I get started?

Backend Configuration

You need an API key and agent id to chat for real. The SuperIntern dashboard's Web Chat page has a setup wizard that creates a website-safe key in a minute — and its Playground links come back here with everything pre-filled.

Get credentials from the dashboard

Reuse the backend session and restore cached messages after a page reload.

User Identity (optional)

Sent to the backend as visitor info for dashboard attribution

Search Settings
Feedback Settings

Appearance & Content

#4f46e5
#ec4899

Get the Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SuperIntern Search Bar</title>
    <style>
        .search-container {
            max-width: 600px;
            margin: 100px auto;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div class="search-container">
        <!-- Container for the search bar -->
        <div id="search-bar"></div>
    </div>

    <!-- SuperIntern SDK -->
    <script src="https://cdn.superintern.ai/sdk/embed.global.js"></script>
    <script>
        // Wait for the SDK to load
        document.addEventListener('DOMContentLoaded', function() {
            if (window.SuperIntern) {
                initSuperIntern();
            } else {
                window.addEventListener('load', initSuperIntern);
            }
        });

        function initSuperIntern() {
            window.SuperIntern.SearchBar('#search-bar', {
                baseSettings: {
                    apiKey: "YOUR_API_KEY",
                    agentId: "your-agent-id",
                    environment: "production",
                    primaryBrandColor: "#4f46e5",
                    secondaryBrandColor: "#ec4899",
                    theme: {
                        colorMode: { type: "light" }
                    },
                },
                searchSettings: {
                    placeholder: "How do I get started?",
                    mode: "keyword",
                    numResults: 10,
                    threshold: 1
                },
                aiChatSettings: {
                    aiAssistantName: "Assistant",
                    introMessage: "👋 Hi! I'm here to help.",
                    quickQuestions: ["What can you help with?","How do I get started?","Tell me more"],
                },
                // Optional: Control modal state externally
                modalSettings: {
                    onOpenChange: function(isOpen) {
                        console.log('Modal state changed:', isOpen);
                        // You can track modal state or sync with your app state here
                    }
                },
                style: {
                          "width": "100%",
                          "borderRadius": "9999px"
                }
            });
        }
    </script>
</body>
</html>
import { useState, useEffect, useRef } from "react";
import Script from "next/script";

export default function MyApp() {
    const [isSuperInternLoaded, setIsSuperInternLoaded] = useState(false);
    const containerRef = useRef<HTMLDivElement>(null);

    // Initialize SuperIntern when SDK is loaded
    useEffect(() => {
        if (isSuperInternLoaded && typeof window !== "undefined" && window.SuperIntern && containerRef.current) {
            window.SuperIntern.SearchBar(containerRef.current, {
                baseSettings: {
                    apiKey: "YOUR_API_KEY",
                    agentId: "your-agent-id",
                    environment: "production",
                    primaryBrandColor: "#4f46e5",
                    secondaryBrandColor: "#ec4899",
                    theme: {
                        colorMode: { type: "light" }
                    },
                },
                searchSettings: {
                    placeholder: "How do I get started?",
                    mode: "keyword",
                    numResults: 10,
                    threshold: 1
                },
                aiChatSettings: {
                    aiAssistantName: "Assistant",
                    introMessage: "👋 Hi! I'm here to help.",
                    quickQuestions: ["What can you help with?","How do I get started?","Tell me more"],
                },
                // Optional: Control modal state externally
                modalSettings: {
                    onOpenChange: (isOpen) => {
                        console.log('Modal state changed:', isOpen);
                        // You can track modal state or sync with your app state here
                    }
                },
                style: {
                          "width": "100%",
                          "borderRadius": "9999px"
                }
            });
        }
    }, [isSuperInternLoaded]);

    return (
        <>
            {/* Load the SuperIntern SDK */}
            <Script
                src="https://cdn.superintern.ai/sdk/embed.global.js"
                onLoad={() => setIsSuperInternLoaded(true)}
            />

            {/* Container for the search bar */}
            <div className="search-container" style={{ maxWidth: "600px", margin: "100px auto" }}>
                <div ref={containerRef} />
            </div>
        </>
    );
}

// TypeScript: Add type declaration for window.SuperIntern
declare global {
    interface Window {
        SuperIntern?: {
            SearchBar: (target: string | HTMLElement, config: any) => any;
        };
    }
}
Minimal Header Variant
Visual demo only — not connected to a live agent
The SearchBar accepts custom styles, making it suitable for compact spaces like headers.
My App
Search...
Usage
<!-- Container for the search bar -->
<div id="search-bar"></div>

<!-- SuperIntern SDK -->
<script src="https://cdn.superintern.ai/sdk/embed.global.js" defer></script>
<script>
  window.addEventListener("load", function () {
    SuperIntern.SearchBar("#search-bar", {
      baseSettings: {
        apiKey: "YOUR_API_KEY",       // from the SuperIntern dashboard
        agentId: "your-agent-id",     // from the SuperIntern dashboard
        environment: "production",    // "production" (default) or "test"
        primaryBrandColor: "#4f46e5",
        secondaryBrandColor: "#ec4899",
      },
      searchSettings: {
        placeholder: "How do I get started?",
      },
      aiChatSettings: {
        quickQuestions: ["Pricing", "Features", "Contact"],
      },
    });
  });
</script>