Guide
Hermes Agent + Lovable: Build the App in Lovable, Run the Agent in Hermes
Lovable (lovable.dev) generates full React + Supabase apps from natural language prompts. Hermes Agent is a terminal-grade agent backend with tool calls, memory, and multi-channel hooks. They're complementary, not competing. This guide shows how to wire them.
What Each Tool Is For
- Lovable — generate a frontend (React + Tailwind + shadcn/ui) and a Supabase-backed schema in minutes. Best at app scaffolds, dashboards, marketing pages.
- Hermes Agent — an LLM agent runtime with tool calls, MCP servers, persistent workspace memory, and channel adapters (Telegram, Discord, WhatsApp, web chat).
Lovable doesn't do tool-calling agents. Hermes doesn't generate React. Use Lovable to build the surface, expose Hermes via API for the agent surface, glue them together.
Architecture
User browser
↓
Lovable-generated React app (chat UI, dashboard)
↓ POST /api/agent
Lovable Edge Function (Supabase)
↓ HTTPS /v1/chat/completions
Hermes Agent (OpenClaw Launch managed container)
↓
Tool calls → MCP servers, file system, skillsStep 1: Deploy Hermes
From Hermes Hosting, deploy a Hermes instance. You'll get an OpenAI-compatible HTTPS endpoint and a gateway token.
HERMES_BASE_URL=https://hermes-<port>.openclawlaunch.app/v1
HERMES_TOKEN=hk_...Step 2: Add the Endpoint to Lovable
In your Lovable project's Supabase secrets, add the env vars above. Then create an Edge Function:
// supabase/functions/agent/index.ts
import { OpenAI } from "https://esm.sh/openai@4"
const client = new OpenAI({
baseURL: Deno.env.get("HERMES_BASE_URL"),
apiKey: Deno.env.get("HERMES_TOKEN"),
})
Deno.serve(async (req) => {
const { messages } = await req.json()
const reply = await client.chat.completions.create({
model: "hermes-default",
messages,
})
return new Response(JSON.stringify(reply), { headers: { "Content-Type": "application/json" } })
})Step 3: Wire the Frontend
In the Lovable-generated chat component, point the fetch call at /functions/v1/agent:
const res = await supabase.functions.invoke("agent", {
body: { messages: [...history, { role: "user", content: input }] },
})
setReply(res.data.choices[0].message.content)Why Run Hermes Instead of Letting Lovable Call OpenAI Directly?
- Persistent workspace memory across sessions (Lovable + Supabase don't have this out of the box)
- Skills / tool calls / MCP servers — Hermes can drive shells, fetch APIs, generate files
- Multi-channel reach — the same Hermes container also drives Telegram / Discord / WhatsApp users, not just web
- BYOK for any provider, not just OpenAI
What Lovable Stays Better At
- Generating the React/Tailwind/shadcn UI from a prompt
- Supabase auth + database scaffolding
- Marketing-page rendering
Cost Note
Lovable charges per generation. Hermes on OpenClaw Launch is $3 first month, $6/mo after, with your own LLM keys (BYOK). The split keeps the Lovable bill bounded to UI iteration time, not LLM tokens.
What's Next?
- Hermes Agent CLI — talk to Hermes from your terminal directly
- Hermes Agent BYOK — pick your LLM provider
- Hermes Agent Skills — give the agent tools to call
- Compare — alternative agent frameworks side by side