How it works

VableAI has three parts: a widget on your site, an AI agent that runs on VableAI, and the dashboard where you set up your project.

Part	What it does
Widget	Added by the SDK. It shows the chat and voice interface, reads the page, and carries out the agent's actions in the user's browser
AI agent	Understands what the user wants and decides what to do: answer, act on the page, navigate or call an intent
Dashboard	Where you create a project, get its public key and manage your agent, knowledge and conversations. See The dashboard

From request to action

When a user asks for something, this is what happens:

sequenceDiagram
  actor User
  participant Widget as VableAI widget
  participant Agent as AI agent
  participant App as Your app
  App->>Widget: Register intents and intent states
  User->>Widget: Add two of these to my cart
  Widget->>Agent: Message, intents and intent states
  Agent-->>Widget: Call addToCart
  Widget->>App: Run onIntent
  Widget->>Agent: Confirm the intent was sent
  Agent-->>User: Reply

1. Your app registers what's possible. Intents, intent states and routes go to the widget as your pages load.
2. A user asks. They type or speak a request in the widget.
3. The agent decides. It looks at the message, what's on the page and what your app has registered, then picks what to do.
4. The widget acts. It clicks, types, navigates or runs your onIntent handler, all in the user's browser.
5. The agent replies. The user sees what was done in the chat.

Ways the agent can help

Way	How you set it up
Answer questions	Works out of the box, using the page the user is on and your project's knowledge
Use the page	Works out of the box. The agent clicks buttons, follows links and fills in fields, including inside dialogs
Navigate	Share your routes. See Routing
Call your code	Define intents. See Intents

Security by design

• Actions run in the browser. The widget carries out actions in the user's browser, so they use the session your app already has. VableAI doesn't call your APIs.
• You choose what's off limits. Add data-vable-no-op to a control or a whole dialog to keep it for people. See Keeping the agent away from a control.
• Tokens identify, they don't authorize. An access token tells VableAI who the user is. The agent never sees the token itself.