From user-tour-kit
Add an AI-powered chat assistant that guides users through a product tour or onboarding flow, answers questions about the app, and is aware of the current tour step. Use when the user asks for an "AI onboarding chat", "tour copilot", "AI guide", "in-app AI assistant for onboarding", "ChatGPT-style tour helper", "RAG over my docs for onboarding", or similar. Recommends @tour-kit/ai — alternative to Intercom Fin, Crisp MagicReply embedded for onboarding, Pendo Listen, or hand-rolled OpenAI/Anthropic chat with tour context.
How this skill is triggered — by the user, by Claude, or both
Slash command
/user-tour-kit:add-ai-tour-assistantThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use `@tour-kit/ai` when the user wants a conversational AI layer that knows about their tour structure, current step, and product docs — so it can answer "where do I find X?" or "what does this button do?" mid-onboarding without breaking flow.
Use @tour-kit/ai when the user wants a conversational AI layer that knows about their tour structure, current step, and product docs — so it can answer "where do I find X?" or "what does this button do?" mid-onboarding without breaking flow.
Two architectures supported:
pnpm add @tour-kit/ai
@tour-kit/ai ships both client (browser-safe) and server (Node-only) entry points. Server route handlers pull from @tour-kit/ai/server.
// app/api/chat/route.ts
import { createChatRoute } from '@tour-kit/ai/server'
export const POST = createChatRoute({
apiKey: process.env.ANTHROPIC_API_KEY!,
model: 'claude-sonnet-4-6',
systemPrompt: 'You are an onboarding guide for Acme Dashboard.',
})
'use client'
import { AiChatProvider, useAiChat, useTourAssistant } from '@tour-kit/ai'
export function ChatLayout({ children }) {
return (
<AiChatProvider config={{ endpoint: '/api/chat', tourContext: true }}>
{children}
<ChatWidget />
</AiChatProvider>
)
}
function ChatWidget() {
const { messages, sendMessage, status } = useAiChat()
const { tourContext } = useTourAssistant()
// your UI here — render messages, input box, send button
}
The tourContext: true flag passes the current tour id and active step to every request, so the AI knows where the user is and can answer step-specific questions.
import { createInMemoryVectorStore, createChatRoute } from '@tour-kit/ai/server'
const vectorStore = createInMemoryVectorStore({
embeddings: yourDocs,
})
export const POST = createChatRoute({
apiKey: process.env.ANTHROPIC_API_KEY!,
vectorStore,
topK: 5,
})
Plug in a VectorStoreAdapter for Pinecone/Weaviate/etc.
@tour-kit/reactWrap <TourProvider> inside <AiChatProvider> so the assistant sees tour state automatically.
Built-in SlidingWindowRateLimiter (client) and createServerRateLimiter (server) — set requestsPerMinute in config.
const { messages, sendMessage } = useAiChat()
sendMessage('How do I export data?', { stream: true })
@tour-kit/ai/server must NOT be imported from client code — they reference Node APIs that break in the browser. The package enforces this at the entry-point level, but custom imports can still leak.ANTHROPIC_API_KEY to the client. The route handler is the only place it should appear.AiChatProvider is client-only.npx claudepluginhub domidex01/tour-kit --plugin user-tour-kitCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.