> ## Documentation Index
> Fetch the complete documentation index at: https://docs.opsansa.com/llms.txt
> Use this file to discover all available pages before exploring further.

>  

# Search

<div className="mt-3 lg:mt-0 py-32 bg-black/10 text-center">
  <h1 className="text-primary white text-5xl font-bold mb-10">
    Ask a question about Opsansa
  </h1>

  <div className="w-full max-w-2xl mx-auto mb-16" id="ai-search-bar">
    <div className="relative bg-[white] dark:bg-gray-800 rounded-full border border-gray-300 dark:border-gray-700 px-5 py-3 shadow-sm cursor-pointer">
      <div className="flex items-center">
        <svg className="h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>

        <span className="ml-3 text-gray-500 dark:text-gray-400">
          Type to search the docs or ask a question...
        </span>
      </div>
    </div>
  </div>
</div>

<div>
  <h2 className="text-2xl font-semibold mb-8">Common FAQs</h2>

  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start">
        <div className="flex-shrink-0 bg-green-100 dark:bg-green-900 p-2 rounded-md">
          <svg className="h-5 w-5 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-md font-medium text-gray-900 dark:text-white text-left">Getting started</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 text-left">Find out how to get started with our service.</p>
        </div>
      </div>
    </div>

    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start">
        <div className="flex-shrink-0 bg-blue-100 dark:bg-blue-900 p-2 rounded-md">
          <svg className="h-5 w-5 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-md font-medium text-gray-900 dark:text-white text-left">Security & Privacy</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 text-left">Learn about how we protect your data.</p>
        </div>
      </div>
    </div>

    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start">
        <div className="flex-shrink-0 bg-purple-100 dark:bg-purple-900 p-2 rounded-md">
          <svg className="h-5 w-5 text-purple-600 dark:text-purple-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-md font-medium text-gray-900 dark:text-white text-left">Connecting with chatbots</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 text-left">How to connect our service with various chatbots.</p>
        </div>
      </div>
    </div>
  </div>

  <h2 className="text-2xl font-semibold mt-16 mb-8">Workflows</h2>

  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start">
        <div className="flex-shrink-0 bg-gray-100 dark:bg-gray-700 p-2 rounded-md">
          <svg className="h-5 w-5 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-md font-medium text-gray-900 dark:text-white text-left">API</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 text-left">Learn how to get started with the API and implement specific use cases.</p>
        </div>
      </div>
    </div>

    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start">
        <div className="flex-shrink-0 bg-gray-100 dark:bg-gray-700 p-2 rounded-md">
          <svg className="h-5 w-5 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-md font-medium text-gray-900 dark:text-white text-left">Integration</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 text-left">Find out how to integrate our solution with your current systems.</p>
        </div>
      </div>
    </div>

    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start">
        <div className="flex-shrink-0 bg-gray-100 dark:bg-gray-700 p-2 rounded-md">
          <svg className="h-5 w-5 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
          </svg>
        </div>

        <div className="ml-4">
          <h3 className="text-md font-medium text-gray-900 dark:text-white text-left">Settings</h3>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 text-left">Learn about settings and configuration options for optimal results.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script
  dangerouslySetInnerHTML={{
__html: `
document.addEventListener('DOMContentLoaded', function() {
// Get the search bar element
const searchBar = document.getElementById('ai-search-bar');

if (searchBar) {
// Add click event listener to the search bar
searchBar.addEventListener('click', function() {
  // Detect if user is on Mac or other platform
  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  
  // Create keyboard event to simulate Cmd+K or Ctrl+K
  const event = new KeyboardEvent('keydown', {
    key: 'k',
    code: 'KeyK',
    metaKey: isMac,  // Command key for Mac
    ctrlKey: !isMac, // Control key for Windows/Linux
    bubbles: true
  });
  
  // Dispatch the event to trigger Mintlify search
  document.dispatchEvent(event);
});
}
});
`
}}
/>