OpenClaw + Lovable: Build the App in Lovable, Run the Agent in OpenClaw

The Split

Lovable owns the surface: React and Tailwind components, Supabase auth, database scaffolding, marketing pages. OpenClaw owns the behaviour: the model call, memory that survives the session, skills and MCP tools, cron jobs, and the same agent answering on Telegram or WhatsApp for users who never open your app.

The seam between them is a single HTTPS call, because the OpenClaw gateway exposes an OpenAI-compatible endpoint.

Architecture

User browser
  ↓
Lovable-generated React app (chat UI, dashboard)
  ↓ POST /functions/v1/agent
Supabase Edge Function (holds the gateway token)
  ↓ HTTPS /v1/chat/completions
OpenClaw gateway (managed container on OpenClaw Launch)
  ↓
Skills, MCP tools, memory, cron
  ↓
Telegram / Discord / WhatsApp — the same agent, other channels

Step 1: Deploy the Agent

Deploy an OpenClaw instance from openclawlaunch.com. You get an HTTPS gateway URL and a gateway token. Keep both:

OPENCLAW_BASE_URL=https://<your-instance>.openclawlaunch.app/v1
OPENCLAW_TOKEN=oc_...

Step 2: Add an Edge Function in Lovable

Put the credentials in your Lovable project's Supabase secrets, never in frontend code, then add a function that proxies chat requests:

// supabase/functions/agent/index.ts
import { OpenAI } from "https://esm.sh/openai@4"

const client = new OpenAI({
  baseURL: Deno.env.get("OPENCLAW_BASE_URL"),
  apiKey: Deno.env.get("OPENCLAW_TOKEN"),
})

Deno.serve(async (req) => {
  const { messages } = await req.json()
  const reply = await client.chat.completions.create({
    model: "openclaw-default",
    messages,
  })
  return new Response(JSON.stringify(reply), {
    headers: { "Content-Type": "application/json" },
  })
})

The edge function exists for exactly one reason: it keeps the gateway token on the server. A token shipped to the browser is a token anyone can read and spend.

Step 3: Wire the Frontend

In the Lovable-generated chat component, call the function instead of a model API:

const res = await supabase.functions.invoke("agent", {
  body: { messages: [...history, { role: "user", content: input }] },
})
setReply(res.data.choices[0].message.content)

For streaming, set stream: true on the completion call and forward the response body straight through the edge function rather than buffering it — otherwise the UI waits for the whole answer and feels slower than the model actually is.

Step 4: Identify the User

Lovable apps ship with Supabase auth, so pass the authenticated user through to the agent rather than treating every request as anonymous:

const { data: { user } } = await supabaseClient.auth.getUser(
  req.headers.get("Authorization")?.replace("Bearer ", "") ?? ""
)
if (!user) return new Response("Unauthorized", { status: 401 })

// pass a stable session key so memory is per-user
const reply = await client.chat.completions.create({
  model: "openclaw-default",
  messages,
  user: user.id,
})

Without that check, your edge function is an open proxy to an agent you pay for.

Why Not Just Call OpenAI From Lovable?

You can, and for a pure chat demo you probably should. The reasons to put an agent behind it instead:

• Persistent memory — context that survives across sessions, which Lovable and Supabase do not give you out of the box
• Real tool use — skills and MCP servers let the agent fetch APIs, run scripts and produce files, not just emit text
• Scheduled work — cron jobs run whether or not anyone has the app open
• Multi-channel reach — the same agent answers on Telegram, Discord and WhatsApp, so your product is not confined to the browser tab
• Model portability — BYOK across Claude, GPT, Gemini, DeepSeek, GLM and more, switched from config rather than by editing code

What Lovable Stays Better At

• Generating React, Tailwind and shadcn UI from a prompt
• Supabase auth and database scaffolding
• Marketing pages and quick iteration on layout

Keep the division honest and both tools stay cheap: Lovable spend is bounded to UI iteration, and token spend sits with the agent.

Cost

Lovable bills per generation. OpenClaw Launch is $6/mo on Lite with $1/mo of AI credits included, or $20/mo on Pro with $10/mo of credits, and BYOK is supported on both if you would rather bring your own provider key. Current details on the pricing page.

Troubleshooting

401 from the gateway

The token is missing from the edge function environment or was regenerated. Supabase secrets are not hot-reloaded — redeploy the function after changing them.

CORS errors in the browser

You are calling the gateway directly from frontend code rather than through the edge function. Route it through the function, which also fixes the leaked-token problem you had at the same time.

Replies take several seconds to appear

Almost always buffering rather than model latency. Stream the response through the edge function instead of awaiting the full completion.

What's Next?

• Hermes Agent + Lovable — the same pairing with Hermes as the backend
• OpenClaw custom endpoint
• Scheduled jobs
• OpenClaw + MCP
• AI app builder guide