build strategy · agentic

Real agents, zero keys, one build.

Every mega-prompt in this archive collapses into the same shape: one or more TanStack server functions calling the auto-provisioned LOVABLE_API_KEY to drive a UCP → A2A → AP2 loop. It's the only pattern that lets a Lovable account ship a working agentic demo in one shot, inside the 5-credit budget.

Why Lovable AI as the agent brain?

Lovable auto-provisions LOVABLE_API_KEY behind an OpenAI-compatible gateway (ai.gateway.lovable.dev). One key, every frontier model — perfect for buyer, seller and merchant agents that need to reason, negotiate and emit structured JSON. Swap the model with a single string when one personality outsmarts another.

Why UCP, A2A & AP2 together?

UCP gives you the deterministic checkout payload, A2A standardises how two agents talk (intent → offer → counter → accept), and AP2 carries the signed mandate that proves the agent is allowed to spend. Together they are the smallest viable surface for agentic commerce, and they slot straight into TanStack server functions.

The pattern in code.

src/lib/agent.functions.ts — A2A negotiation step
// src/lib/agent.functions.ts — TanStack server function for an A2A negotiation step
// Built during the Creative AI & Quantum Hackathon — StreetKode Fam · Indian Krump Festival 14
import { createServerFn } from "@tanstack/react-start";
import { generateText } from "ai";
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
import { z } from "zod";

const lovable = createOpenAICompatible({
  name: "lovable",
  baseURL: "https://ai.gateway.lovable.dev/v1",
  headers: {
    "Lovable-API-Key": process.env.LOVABLE_API_KEY!,
    "X-Lovable-AIG-SDK": "vercel-ai-sdk",
  },
});

export const counterOffer = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({
    role: z.enum(["buyer", "seller"]),
    offer: z.object({ price: z.number(), sku: z.string() }),
  }).parse(d))
  .handler(async ({ data }) => {
    const { text } = await generateText({
      model: lovable("google/gemini-2.5-flash"),
      system: `You are the ${data.role} agent in an A2A negotiation. Reply ONLY with JSON {price, reasoning}.`,
      prompt: JSON.stringify(data.offer),
    });
    return JSON.parse(text);
  });
src/lib/ap2.ts — payment mandate type
// src/lib/ap2.ts — sign a payment mandate (AP2) so an agent can spend on behalf of a user
// MIME: application/vnd.ap2.mandate.payment+json
export type PaymentMandate = {
  mandate_id: string;
  principal: string;          // the user
  agent: string;              // the agent acting on their behalf
  max_amount: { value: number; currency: string };
  scope: string[];            // ["merchant:acme", "sku:hoodie-*"]
  expires_at: string;         // ISO-8601
  signature: string;          // user's signature over the canonicalised mandate
};
.env + Lovable build
# .env — Lovable auto-provisions LOVABLE_API_KEY for you
# (no copy-paste, no console hop, just enable the Lovable AI add-on in Project Settings)
LOVABLE_API_KEY=auto-provisioned

# How Lovable wires this up in one prompt:
# 1. Paste a mega-prompt from this archive.
# 2. Lovable
#    - writes a server function per agent role (buyer, seller, merchant)
#    - implements the UCP → A2A → AP2 loop and the matching client UI
#    - keeps every key on the server via process.env
# 3. Run it. Your demo is running a real agent-to-agent negotiation, signed by an AP2 mandate.

Shipping a 5-credit demo

Agentic primerBrowse 1,000 ideas