Skip to main content

Installation

Install the UI SDK package for your framework along with the required Search SDK.

React​

npm install @seekora-ai/ui-sdk-react @seekora-ai/search-sdk

Vue 3​

npm install @seekora-ai/ui-sdk-vue @seekora-ai/search-sdk

Angular​

npm install @seekora-ai/ui-sdk-angular @seekora-ai/search-sdk

Vanilla JavaScript​

npm install @seekora-ai/ui-sdk-vanilla @seekora-ai/search-sdk

Peer Dependencies​

The UI SDK requires the Search SDK as a peer dependency:

PackageRequired Version
@seekora-ai/search-sdk^0.1.0

Framework Requirements​

FrameworkMinimum Version
React16.8+ (hooks support)
Vue3.0+
Angular14+

CDN Usage​

For browser usage without a build step:

<!-- Search SDK -->
<script src="https://cdn.seekora.ai/sdk/seekora-sdk.min.js"></script>

<!-- UI SDK (React) -->
<script src="https://cdn.seekora.ai/ui-sdk/seekora-ui-sdk-react.min.js"></script>

<!-- Or Vanilla JS -->
<script src="https://cdn.seekora.ai/ui-sdk/seekora-ui-sdk-vanilla.min.js"></script>

CDN with React​

<!DOCTYPE html>
<html>
<head>
  <title>Seekora Search</title>
</head>
<body>
  <div id="root"></div>
  
  <!-- React -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  
  <!-- Seekora SDKs -->
  <script src="https://cdn.seekora.ai/sdk/seekora-sdk.min.js"></script>
  <script src="https://cdn.seekora.ai/ui-sdk/seekora-ui-sdk-react.min.js"></script>
  
  <script>
    const { SeekoraClient } = window.SeekoraSDK;
    const { SearchProvider, SearchBar, SearchResults } = window.SeekoraUIReact;
    
    const client = new SeekoraClient({
      storeId: 'your-store-id',
      readSecret: 'your-read-secret',
    });
    
    const App = () => {
      return React.createElement(SearchProvider, { client },
        React.createElement(SearchBar),
        React.createElement(SearchResults)
      );
    };
    
    ReactDOM.createRoot(document.getElementById('root')).render(
      React.createElement(App)
    );
  </script>
</body>
</html>

TypeScript Support​

All packages include TypeScript definitions. No additional @types packages required.

import { 
  SearchProvider, 
  SearchBar, 
  SearchResults,
  SearchBarProps,
  SearchResultsProps,
  Theme
} from '@seekora-ai/ui-sdk-react';

CSS Styles​

The UI SDK includes default styles. Import them in your application:

// React
import '@seekora-ai/ui-sdk-react/dist/styles.css';

// Vue
import '@seekora-ai/ui-sdk-vue/dist/styles.css';

// Angular - add to angular.json styles array
// "styles": ["node_modules/@seekora-ai/ui-sdk-angular/dist/styles.css"]

Or use your own styles with the theming system.

Next Steps​