Quick Start

Set up @tour-kit/ai in under 5 minutes: install the package, configure your AI provider, and add the chat widget to React

Installation

pnpm add @tour-kit/ai

You also need the AI SDK as a peer dependency:

pnpm add ai @ai-sdk/openai

Client Setup

Wrap your application with AiChatProvider:

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

export function App() {
  return (
    <AiChatProvider
      config={{
        endpoint: '/api/chat',
        tourContext: true,
      }}
    >
      <YourApp />
    </AiChatProvider>
  )
}

Use the useAiChat hook to build your chat UI:

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

function ChatWidget() {
  const { messages, sendMessage, status } = useAiChat()

  return (
    <div>
      <div>
        {messages.map((msg) => (
          <div key={msg.id}>
            <strong>{msg.role}:</strong> {msg.content}
          </div>
        ))}
      </div>
      <input
        placeholder="Ask a question..."
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            sendMessage({ text: e.currentTarget.value })
            e.currentTarget.value = ''
          }
        }}
      />
    </div>
  )
}

Server Setup

Create an API route handler. For Next.js:

// app/api/chat/route.ts
import { createChatRouteHandler } from '@tour-kit/ai/server'
import { openai } from '@ai-sdk/openai'

const { POST } = createChatRouteHandler({
  model: openai('gpt-4o-mini'),
  context: {
    strategy: 'context-stuffing',
    documents: [],
  },
})

export { POST }

Set your API key in .env.local:

OPENAI_API_KEY=sk-...

Next Steps

CAG Guide — Learn about context-augmented generation
RAG Guide — Set up retrieval-augmented generation
Tour Integration — Connect chat to your tours

Quick Start

Installation

Client Setup

Add a Chat Widget

Server Setup

Next Steps

On this page