Developer Guides 5 min read

How to Add AI Calling to the App You Build in Lovable

Vistara AI Team· Vistara AI Editorial Team
October 11, 2026

The short answer: open your project in Lovable and paste the prompt from vistaraai.in/integration/lovable into the chat. Lovable adds a backend function that starts Vistara AI calls, a second function that receives each call's result by webhook, and screens to place test calls and review summaries, transcripts and recordings. Your API key goes into the project's secrets, never into the frontend.

What you end up with

  • A "Test call" form — enter a phone number and name, and the agent calls.
  • A calls list with status badges: queued, in progress, completed, failed.
  • A call detail view with the summary, the answers the agent collected, the transcript and an audio player for the recording.
  • Behind them, a backend function that starts calls and a webhook function that stores results in a voice_calls table.

Step 1: Account and API key

Sign up at app.vistaraai.in with your mobile number — new accounts get ₹150 free credit with a GSTIN (₹50 without), up to 200 calls since unanswered calls are never charged. Generate your API key on the Connect page.

Step 2: Paste the prompt into Lovable

In your Lovable project, paste the prompt into the chat. Lovable reads the whole guide, then works through the steps with you.

Step 3: Design the voice agent

Lovable asks what the agent should do — confirm orders, follow up leads, remind customers about appointments — and writes the agent's prompt with Vistara's Voice Agent Builder. Lovable can't run terminal commands, so for steps that talk to the Vistara API directly, such as creating the agent, it gives you a short command to run on your computer and asks you to paste the response back.

Step 4: Add your secrets

Lovable tells you exactly where to add three project secrets: VISTARA_API_KEY, VISTARA_AGENT_ID and VISTARA_WEBHOOK_TOKEN (a random string that protects your webhook). They stay on the server side of your app.

Step 5: Place a test call from your own app

Once the call function exists, use your app's new "Test call" form with your own number. Answer and talk to the agent like a customer would, then open the call in the detail view when the result arrives.

Step 6: Connect the webhook

The webhook URL is the public URL of your webhook function plus ?token= and your secret. Lovable saves it on the agent through the API, so every call's result lands in your app automatically.

Before you share the app

Every call is billed to your Vistara wallet, so make sure only signed-in admins — not every visitor — can trigger calls, and ask Lovable to add that check to the call function. Keep the 09:00–20:00 IST calling window in mind for real customers; test calls to your own phone work at any time.

Frequently Asked Questions

Do I need to write code?
Lovable writes the code. You answer its questions, add three secrets, and run a couple of commands it gives you while the agent is being set up.
Where does my API key go in Lovable?
Into the project's secrets, as VISTARA_API_KEY. Only the backend functions use it; it never appears in your app's frontend code.
Can my app's users trigger calls?
Yes, through the backend function — but every call uses your wallet credit, so restrict who can trigger calls, for example to signed-in admins, and validate phone numbers before calling.
How do call results show up in my Lovable app?
Vistara sends each result to your webhook function, which stores it in a voice_calls table. The calls list and detail view read from that table, so summaries, answers, transcripts and recordings appear automatically.

Related Reading