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.
<!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({
baseSettings: {
apiKey: "YOUR_API_KEY",
environment: "test",
primaryBrandColor: "#4f46e5",
secondaryBrandColor: "#ec4899",
theme: {
colorMode: { type: "light" }
}
},
searchSettings: {
placeholder: "How do I get started?"
},
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"
},
// Mount to a specific container
container: document.getElementById('search-bar')
});
}
</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({
baseSettings: {
apiKey: "YOUR_API_KEY",
environment: "test",
primaryBrandColor: "#4f46e5",
secondaryBrandColor: "#ec4899",
theme: {
colorMode: { type: "light" }
}
},
searchSettings: {
placeholder: "How do I get started?"
},
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"
},
// Mount to the container element
container: containerRef.current
});
}
}, [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: (config: any) => void;
};
}
}The SearchBar accepts custom styles, making it suitable for compact spaces like headers.
import { SearchBar } from 'superintern-web-sdk';
<SearchBar
baseSettings={{
apiKey: "YOUR_API_KEY",
primaryBrandColor: "#4f46e5",
secondaryBrandColor: "#ec4899",
}}
searchSettings={{
placeholder: "How do I get started?",
}}
aiChatSettings={{
quickQuestions: ["Pricing", "Features", "Contact"]
}}
/>