@yoast/ai-insights-client

AI Insights Client

A React component library for AI-powered brand analysis and insights. This library provides a complete interface for brand analysis including setup wizard, analysis results, and settings management.

Installation

npm install ai-insights-client
# or
yarn add ai-insights-client

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

npm install react react-dom @yoast/ui-library

Note: React Router is bundled with this library to avoid version conflicts. You don't need to install it separately.

Basic Usage

Simple Embedded Component

import { AIInsightsClient } from 'ai-insights-client';
import 'ai-insights-client/dist/style.css';

function App() {
  return (
    <div className="my-app">
      <h1>My Application</h1>
      <AIInsightsClient
        routerType="memory"
        initialRoute="/"
        className="ai-insights-container"
      />
    </div>
  );
}

export default App;

With Custom Router Integration

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { AIInsightsClient } from 'ai-insights-client';
import 'ai-insights-client/dist/style.css';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/insights/*"
          element={
            <AIInsightsClient routerType="memory" initialRoute="/setup" />
          }
        />
        <Route path="/" element={<HomePage />} />
      </Routes>
    </BrowserRouter>
  );
}

Component Props

AIInsightsClient

Prop	Type	Default	Description
routerType	'browser' | 'hash' | 'memory'	'memory'	Router type to use
initialRoute	string	'/'	Initial route when using memory router
isRtl	boolean	false	Whether the UI should be rendered in RTL mode
className	string	undefined	Optional CSS class name for the root container
style	React.CSSProperties	undefined	Optional inline styles for the root container

Router Types

• memory (recommended for embedding): Uses React Router's MemoryRouter, which doesn't change the browser URL. Perfect for embedding in other applications.
• browser: Uses BrowserRouter for standalone applications with clean URLs.
• hash: Uses HashRouter for applications that need hash-based routing.

Available Routes

• / - Brand Analysis dashboard
• /setup - Setup wizard
• /setup/brand-summary - Brand summary step
• /setup/:brandId/queries - Query selection step
• /setup/:brandId/analysis - Analysis step
• /settings - Settings page
• /query-history - Query history
• /brand-list - Brand list

Advanced Usage

Using Individual Components

import {
  BrandAnalysisProvider,
  Layout,
  BrandAnalysis,
} from 'ai-insights-client';

function CustomApp() {
  return (
    <BrandAnalysisProvider>
      <Layout>
        <BrandAnalysis />
      </Layout>
    </BrandAnalysisProvider>
  );
}

Using Context Hooks

import {
  BrandAnalysisProvider,
  useBrandAnalysisData,
  useBrandAnalysisMutations,
} from 'ai-insights-client';

function CustomComponent() {
  const { brandId } = useBrandAnalysisData();
  const { setBrandId } = useBrandAnalysisMutations();

  return (
    <div>
      <h2>Current Brand ID: {brandId}</h2>
      <button onClick={() => setBrandId('new-brand-id')}>Set Brand ID</button>
    </div>
  );
}

function App() {
  return (
    <BrandAnalysisProvider>
      <CustomComponent />
    </BrandAnalysisProvider>
  );
}

Styling

The component comes with pre-built CSS that should be imported:

import 'ai-insights-client/dist/style.css';

The component uses Tailwind CSS with the yst- prefix. If you're using Tailwind in your project, you may need to configure your build to include the component's styles or import the CSS file as shown above.

TypeScript Support

This library is built with TypeScript and includes full type definitions. All components and hooks are fully typed for the best development experience.

import type { AIInsightsClientProps, BrandAnalysisData } from 'ai-insights-client';

Contributing

[Add your contributing guidelines here]

License

MIT