Skip to main content
AI guided tours

​
What is Eventop?

Eventop is a drop-in SDK that adds AI-guided tours to your React or Next.js app. Wrap any element with <EventopTarget> — the AI handles the rest. When a user types what they need in the chat bubble, the SDK figures out which features are relevant, navigates to the right pages, and walks them through step by step. No changes to your existing components. Works with any component library. 
<EventopTarget id="export" name="Export Design" description="Download as PNG or SVG">
  <Button onClick={handleExport}>Export</Button>
</EventopTarget>

Quickstart

Up and running in 3 steps

React Setup

Full setup guide for React Router apps

Next.js Setup

Full setup guide for App Router and Pages Router

API Reference

Props, hooks, and methods

​
How it works

1

Create a server endpoint

Proxy the AI call from your backend so API keys never reach the browser.
2

Add the provider

Wrap your app with <EventopAIProvider> and pass your server route and router function.
3

Wrap your features

Add <EventopTarget> around any UI element you want the AI to be able to guide users to.
The chat bubble appears automatically. Users type what they want, and the tour runs — including navigating between pages when needed.

​
Key features

Tours navigate between pages automatically. Before starting, the chat panel tells users which pages will be visited. No manual navigation code needed.
Use <EventopStep> to break complex interactions into sequential steps. Steps can live in completely different components — they self-assemble by index.
Block a tour from advancing until the user correctly completes a form action. Use stepComplete() and stepFail() from the useEventopAI hook.
Customize colors, radius, and fonts with theme tokens. Supports light, dark, and auto modes.
<EventopTarget> wraps anything — <div>, shadcn, MUI, Radix, or your own components. You never modify the component itself.