@guidekit/react

React bindings for the GuideKit SDK. Provides the GuideKitProvider, split hooks, and a Shadow DOM widget for adding an AI assistant to any React application.

Installation

npm install @guidekit/core @guidekit/react

Quick Start

import { GuideKitProvider } from '@guidekit/react';

function App() {
  return (
    <GuideKitProvider
      tokenEndpoint="/api/guidekit/token"
      agent={{ name: 'Guide', greeting: 'Hi! How can I help?' }}
      options={{ mode: 'text' }}
    >
      <YourApp />
    </GuideKitProvider>
  );
}

Hooks

import {
  useGuideKitStatus,
  useGuideKitVoice,
  useGuideKitActions,
  useGuideKitContext,
} from '@guidekit/react';

function MyComponent() {
  const { isReady, agentState } = useGuideKitStatus();
  const { isListening, startListening, stopListening, sendText } = useGuideKitVoice();
  const { highlight, scrollToSection, startTour, navigate } = useGuideKitActions();
  const { setPageContext, registerAction } = useGuideKitContext();

  return (
    <div>
      <p>Status: {agentState.status}</p>
      <button onClick={() => sendText('Help me')}>Ask</button>
    </div>
  );
}

Sub-exports

@guidekit/react/devtools

Development-only component for inspecting SDK state, events, and context.

import { GuideKitDevTools } from '@guidekit/react/devtools';

@guidekit/react/testing

Test utilities for mocking the provider in unit tests.

import { MockGuideKitProvider, simulateVoiceInput } from '@guidekit/react/testing';

Documentation

• Full documentation: guidekit-docs.vercel.app/docs
• Main README

License

MIT