Tour Integration

Connect AI chat to active tour state: context-aware assistance that knows the current step, tour progress, and user actions

The useTourAssistant hook connects the AI chat to your active tours, giving the assistant real-time awareness of tour state, progress, and step content.

Basic Usage

import { useTourAssistant } from '@tour-kit/ai'

function TourChat() {
  const { tourContext, sendMessage, messages, askAboutStep, askForHelp } = useTourAssistant()

  return (
    <div>
      {tourContext.activeTour && (
        <p>
          Step {tourContext.activeTour.currentStep + 1} of {tourContext.activeTour.totalSteps}
          {' — '}{tourContext.activeStep?.title}
        </p>
      )}

      {messages.map((msg) => (
        <div key={msg.id}>{msg.content}</div>
      ))}

      <button onClick={askAboutStep}>Ask about this step</button>
      <button onClick={() => askForHelp('navigation')}>Help with navigation</button>
      <button onClick={() => sendMessage({ text: 'What should I do next?' })}>
        Ask for help
      </button>
    </div>
  )
}

How It Works

useTourAssistant reads the current tour state from @tour-kit/react providers
Tour context (steps, progress, current step) is assembled automatically
Context is included with each message sent to the AI
The assistant can reference specific steps, suggest next actions, and explain UI elements

Context Assembly

The assembleTourContext function gathers tour information:

import { assembleTourContext } from '@tour-kit/ai'

const context = assembleTourContext({
  isActive: true,
  tourId: 'onboarding',
  tour: { id: 'onboarding', name: 'Onboarding Tour', steps: [] },
  currentStepIndex: 2,
  totalSteps: 5,
  currentStep: { id: 'step-3', title: 'Add your team', content: 'Invite team members.' },
  completedTours: [],
})

Combining with CAG

For the best experience with small tours, combine useTourAssistant with CAG:

<AiChatProvider
  config={{
    endpoint: '/api/chat',
    tourContext: true,
  }}
>
  <TourChat />
</AiChatProvider>

Combining with RAG

For large documentation sites, use RAG alongside tour context:

<AiChatProvider
  config={{
    endpoint: '/api/chat',
    tourContext: true,
  }}
>
  <TourChat />
</AiChatProvider>

The tour context is always sent as structured metadata, while RAG handles the documentation search.