# Add an AI agent to the app you built in Lovable

To add an AI agent to an app you built in Lovable, connect the project to GitHub from Lovable, clone the repository to your computer and open it in Claude Code or Cursor. There, run `npx @vatio-ai/skills` and then `/vatio-init`: your coding agent reads the app, asks what the code doesn't answer and pushes a preview of the agent for you to try. If your users sign in with Supabase, which Lovable Cloud is built on, your coding agent adds an Edge Function that signs a token saying who it is, and the chat widget works on Lovable's preview and published addresses as soon as it is in. Vatio runs the conversations, nothing reaches your users until you approve it, and you keep building in Lovable, which stays in sync through GitHub.

## Two steps: try it from any chat, then build it into the app

**Step 1 works from any chat and needs no code or GitHub.** Add the remote MCP server `https://vatio.ai/mcp` as a connector in Claude, ChatGPT or Cursor, sign in with a Vatio account and ask for the agent. It is created in a preview to try; nothing reaches your users until it is published ([MCP](https://vatio.ai/docs/mcp), [Deployments](https://vatio.ai/docs/deployments)).

**Step 2 builds the agent into the app's code and needs the project on your computer.** Lovable's code gets there through GitHub (next section). In the project, run `npx @vatio-ai/skills`, then `/vatio-init` (in Cursor or Codex, ask it to use vatio-init), then ask your coding agent to add the web widget, and `/vatio-improve` daily.

The agent configuration stays with your app's code. Vatio runs the conversations and provides the inbox, human handoff and tests for the mistakes you report. Your backend enforces each user's access to data. You decide what the agent may do and approve every publication; Vatio has one preview and one live environment per workspace.

## Get your project into Claude Code or Cursor

The agent is built where your code is, so the first step of step 2 is getting Lovable's code onto your computer, in a way that keeps syncing:

1. In your Lovable project, open **Project settings → Git → GitHub**, or the **+** button next to the chat input, then **Project → GitHub**.
2. If the workspace has no GitHub connection yet, a workspace owner or admin clicks **Add account** and then **Install & Authorize** in the GitHub window.
3. Click **Connect** next to the account. Lovable creates a new private repository and starts a two-way sync on its default branch, usually `main`.
4. Copy a clone URL from the same page, clone the repository and open the folder in Claude Code or Cursor. You need Node.js 20 or newer.

Before you clone, let any Lovable edit in progress finish and check that the sync status says Lovable and GitHub are in sync. **Download codebase** gives you a `.zip`, but nothing you change in it gets back to Lovable, so use GitHub.

A clone has your code, not a separate backend. In a Lovable Cloud project, the repository's `.env` points at the same backend your published app uses, so anything you create while testing is real data. Use a test account.

## Start in your project

```text
npx @vatio-ai/skills
/vatio-init
```

Run the first line in a terminal in the cloned project and the second in Claude Code. In Cursor or Codex, ask it to use vatio-init. You can say what you want after the command:

```text
/vatio-init an agent for our signed-in customers: answer from our help pages and look up their own orders
```

The first time vatio-init pushes the agent, your browser opens to sign in with email, Google or GitHub; signing in creates your Vatio account.

## What vatio-init finds in a Lovable project

vatio-init first looks for a `vatio.yml` in the repository. If there is one, the agent already exists and it works on that one instead of starting another. Then it reads the app: what it does and for whom, what an agent could call, how your users sign in, and the pages and policies it could use as knowledge. In a Lovable project that usually means:

- **Supabase.** Lovable generates `src/integrations/supabase/client.ts`, and a Lovable Cloud project keeps its backend's address in `.env`. The signing Edge Function goes beside them.
- **Your data and backend code.** Tables, Edge Functions under `supabase/functions/` and database functions. A tool calls an Edge Function with the signed-in user's Vatio token, and the function reads only that user's rows.
- **Your pages.** Help text, pricing, policies: what can become knowledge entries.

It tells you what it found and what it recommends before writing anything, then asks what the code can't answer: what the agent may do, what it must never say or promise, and when a person takes over. What your coding agent writes lives in your repository, where you can review it, for example a private tool:

```yaml
# tools/my_orders.yml
description: The signed-in customer's recent orders.
when_to_use: They ask about their own orders.
access: private
request:
  method: GET
  base_url: https://<ref>.supabase.co
  path: /functions/v1/my-orders
  headers:
    Authorization: Bearer $auth.token
respond:
  data:
    orders: "$"
```

## Your users, signed in

**If your users sign in with Supabase**, through Lovable Cloud or your own Supabase project, add an Edge Function that reads the user's Supabase session and signs a short token with the key from `vatio auth --new-key`; the app hands it to the widget. Keep the private key as a Supabase secret and `identity.pub` in the repository. Tools call your other Edge Functions with that token, and they read the rows of `$auth.subject`. Mechanics are in [Authentication](https://vatio.ai/docs/authentication/).

A private tool forwards the user's token to your function, which keeps the service-role key to itself. A private tool also can't take a user id as a parameter: the deploy fails if one tries, because the model fills parameters and could be talked into someone else's id.

**If your app signs users in another way**, your backend signs the same short-lived token (RS256, with `sub`, `aud` set to your workspace slug and `exp`; `name`, `email`, `phone_number` and `metadata` are optional), for instance in a server route. The private key goes into your backend's secrets, never into a `VITE_` variable, which Lovable includes in the code it sends to the browser. See [Authentication](https://vatio.ai/docs/authentication/).

## Put the agent in your app

Ask your coding agent to add the [web widget](https://vatio.ai/docs/channels/widget). In a React app it installs `@vatio-ai/widget` and mounts it in an effect:

```js
import { useEffect } from "react";
import { mountVatioWidget } from "@vatio-ai/widget";

useEffect(() => {
  const widget = mountVatioWidget({ workspace: "acme", token: "vatpub_..." });
  return widget.unmount;
}, []);
```

The `vatpub_` key is made for page source. Every publishable key accepts any `https` subdomain of `lovable.app` and `lovableproject.com`, Lovable's preview and published addresses, without listing them. When your app moves to a custom domain, add that domain to the key: your coding agent runs `vatio keys origins`, or you add it under **Settings → API keys** in the inbox. Origins live on the key, not in `vatio.yml`. A page on an origin the token doesn't accept gets `origin_not_allowed`, and the browser console names the origin to add.

Use preview's key while you try the agent, and switch to a live key when you publish. To build your own chat screen instead, use the [browser SDK](https://vatio.ai/docs/sdk/).

If the app uses Supabase Auth, ask your coding agent to follow [Supabase apps](https://vatio.ai/docs/guides/ai-agent-for-supabase-apps) and the [identity contract](https://vatio.ai/docs/authentication/). Try the agent as a real signed-in user and verify that it cannot retrieve another user's data.

## Keep building in Lovable

Commit `vatio.yml`, `tools/`, the knowledge and the widget code, and push to the synced branch, or to a feature branch you merge into it. Lovable pulls commits on the synced branch. Then tell Lovable what changed, for example: "I added a Vatio chat widget and a vatio.yml outside Lovable. Keep them when making further edits."

- **Protect the agent's files.** Lovable can edit any code in a later request. Add a line to **Project settings → Knowledge** such as "vatio.yml, tools/ and knowledge/ belong to the Vatio agent; don't change them."
- **Don't rewrite the synced branch.** No force-push, rebase or squash of commits already on it; to undo, add a commit that reverts.
- **Deploy what Lovable doesn't.** Lovable doesn't deploy a changed Edge Function from a synced commit. If your coding agent changed one, ask Lovable in the project chat to deploy it.
- **Pull before you work.** Before running vatio-init or `/vatio-improve` again, pull, so your clone has what Lovable built since.

If a Lovable change renames a table or function a tool calls, that tool's calls start failing. `vatio tools --env live` shows each tool's errors, with what your backend answered.

## Try it, then publish

vatio-init gives you a link to the inbox, with **Try the agent** open, where you try the preview on WhatsApp, Instagram or a web chat. The web chat is a visitor who isn't signed in, so it only reaches public tools. To try what a signed-in user gets, open your app in Lovable's preview with the preview's widget in it, sign in as a test user and ask:

1. **About their own data.** "Where is my last order?" should come from your database.
2. **About someone else's.** Asking for another person's orders by name or email should find nothing.
3. **For a person.** After "I want to talk to someone", the agent should call the tool your coding agent wrote to alert your team, with a link to the conversation, and say it is checking with a colleague. Your reply from the inbox takes the conversation over ([Hand off to a person](https://vatio.ai/docs/handoff)).

Each reply in the inbox shows the tool calls behind it, with what your backend answered. When it does what you want, tell your coding agent to publish. Then switch the widget to a live key and publish your app in Lovable with **Publish changes**.

## After launch

Your team reads conversations in the inbox. On a wrong reply, **Report this reply** asks what should have happened, and that note becomes a test.

Once a day, pull and run `/vatio-improve` in your clone. Your coding agent reads every open report, fixes the cause where it lives (instructions, knowledge, a tool or your backend) and pushes it to preview. Vatio replays the reported cases against preview, and you review the results and approve the update. A case that passes on live and fails on preview blocks publication unless you override it with `--force`. A daily email brings the command when new reports arrive. See [Improve your AI agent](https://vatio.ai/docs/improve).

## Decide what you want to operate

If you keep the agent inside the app, include conversation history, supervision, identity, access controls and update testing in your maintenance plan. With Vatio, your coding agent builds the agent and Vatio operates the conversation runtime. Choose by trying the workflow with your own users' questions.

The same agent can also answer on WhatsApp and Instagram, which are added channels ([Pricing](https://vatio.ai/pricing)).

## Sources

Checked on 14 October 2026.

- [Lovable: Sync your project with GitHub](https://docs.lovable.dev/integrations/github)
- [Lovable: Git sync overview](https://docs.lovable.dev/integrations/git-sync-overview)
- [Lovable: Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [Lovable: Knowledge](https://docs.lovable.dev/features/knowledge)
- [Lovable: Publish your project](https://docs.lovable.dev/features/publish)

## Frequently asked questions

### How do I add an AI agent to an app I built with Lovable?

To try it first, add the remote MCP server https://vatio.ai/mcp as a connector in Claude, ChatGPT or Cursor, sign in with a Vatio account and ask for the agent; it is created in a preview and nothing reaches your users until published. To build it into the app's code, connect the project to GitHub from Lovable, clone the repository and open it in Claude Code or Cursor. Run npx @vatio-ai/skills in the project, then /vatio-init in Claude Code (in Cursor, ask it to use vatio-init). Your coding agent reads the app, asks what the code can't answer and pushes a preview of the agent for you to try. Vatio runs the conversations, and nothing reaches your users until you approve it.

### Can the agent know which user of my Lovable app it is talking to?

Yes. Your backend signs a short-lived token for whoever is signed in; with Supabase, which Lovable Cloud is built on, that is an Edge Function that reads the Supabase session, and your coding agent can add it. The chat widget passes the token to Vatio.

### Do I have to add Lovable's addresses to the widget's key?

No. Every Vatio publishable key accepts any https subdomain of lovable.app and lovableproject.com, Lovable's preview and published addresses, without listing them. When your app moves to a custom domain, add that domain to the key, from your coding agent or under Settings → API keys in the Vatio inbox.

### Can I keep building in Lovable after adding a Vatio agent?

Yes. Lovable's GitHub sync works both ways on one branch, so what your coding agent pushes from your computer appears in Lovable, and what Lovable builds appears in the repository. Keep vatio.yml, the tools and the knowledge in the repository, and ask Lovable in its project knowledge to leave them alone.

### Does publishing the agent also publish my Lovable app?

No, they are two separate publishes. Once people talk to your agent, a change to it goes live when you approve it in Vatio; before that, every push is live already. Changes to your app's code, such as the widget, reach your users when you publish in Lovable. Pushing to GitHub never publishes a Lovable app on its own.

## Related guides

- [Choosing how to build your app's agent](https://vatio.ai/docs/guides/vatio-vs-frameworks-and-no-code): Your own backend, a visual builder or Vatio from your coding agent.
- [Connect your backend](https://vatio.ai/docs/tools): Give the agent your API as tools, and let signed-in users reach their own data with a token your backend signs.
- [An AI chat for your web app or site](https://vatio.ai/docs/guides/ai-chat-widget-for-your-website): One script tag puts the agent in your web app or site, themed to your brand and able to recognize signed-in users.
- [Your daily improvement routine](https://vatio.ai/docs/improve): Report mistakes in the inbox, /vatio-improve has your coding agent fix them, and you approve the update.