← Home

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, skills

Step 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?

Deploy a Hermes Backend

Managed Hermes for your Lovable-generated app.

Deploy Hermes