Storyboard Bid Agent

Required key.

Add this in your Lovable project under Settings → Secrets before pasting the prompt below.

Paste into a fresh Lovable project. Make sure the key above is set first. read the build strategy →

Build "Storyboard Bid Agent" as a ONE-SHOT Lovable build. The participant has only
5 credits — this single message must produce a working demo with no follow-ups.
Single-page TanStack Start app. Cut scope ruthlessly.

CONCEPT
Lovable AI runs the agent that negotiates per-frame storyboard rates via A2A so illustrators win commercial film pre-production contracts fairly.
Discipline: Visual Art (pre-production illustration).
Recipe: Full Agentic Loop (UCP + A2A + AP2) as the single agentic surface.
Why this kernel: The Full Agentic Loop haggles per-frame pricing and revision limits A2A before locking in the studio's production checkout.

LOVABLE BUDGET (HARD CAP: ONE-SHOT, ~5 CREDITS TOTAL):
The participant has FIVE Lovable credits for the whole build. This prompt MUST
ship a working demo on the FIRST message with zero follow-ups. Engineer for that.
- ONE TanStack Start app, ONE route (`src/routes/index.tsx`). No extra pages, no auth, no nav.
- ONE TanStack server function in `src/lib/agent.functions.ts` that runs the protocol.
- ONE client surface (a textarea + button) that triggers the server fn and renders the result.
- NO database, NO Lovable Cloud, NO auth, NO file uploads, NO extra integrations.
- NO tests, NO docs pages, NO settings screens, NO theming toggles.
- Libraries: template defaults + `zod` + `ai` + `@ai-sdk/openai-compatible`. Nothing else.
- Demo-fallback contract: every code path must boot with NO secrets and return
  realistic JSON flagged `simulated: true`. Real LLM calls activate only when
  `LOVABLE_API_KEY` is present (auto in Lovable).

STACK
- TanStack Start app, the index route only.
- Agent brain: Lovable AI Gateway via the AI SDK, called from a `createServerFn` handler so the key stays server-side.
- Protocol surface: Full Agentic Loop as defined below.
- Client surface fits the kernel: a prompt box (and any minimal extra inputs) that returns the agent's output.
- Tailwind + shadcn. Editorial look: gold accent on a dark or warm-cream background,
  generous type, one strong headline, one primary action.
- Footer renders: "Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

GATEWAY HELPER (src/lib/ai-gateway.server.ts) — Lovable AI Gateway provider:
```ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export function lovableGateway(apiKey: string) {
  return createOpenAICompatible({
    name: "lovable",
    baseURL: "https://ai.gateway.lovable.dev/v1",
    headers: { "Lovable-API-Key": apiKey, "X-Lovable-AIG-SDK": "vercel-ai-sdk" },
  });
}
```
Install once: `bun add ai @ai-sdk/openai-compatible zod`.

SERVER FUNCTION (src/lib/agent.functions.ts) — Full agentic loop (UCP + A2A + AP2):
```ts
import { createServerFn } from "@tanstack/react-start";
import { generateText } from "ai";
import { z } from "zod";
import { lovableGateway } from "@/lib/ai-gateway.server";

/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const run = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ goal: z.string().min(1).max(500), cap_minor: z.number().int().positive().default(5000) }).parse(d))
  .handler(async ({ data }) => {
    const key = process.env.LOVABLE_API_KEY;
    const speak = async (role: string, ctx: string) => {
      if (!key) return `[demo ${role}] ${ctx.slice(0, 110)}`;
      const { text } = await generateText({
        model: lovableGateway(key)("google/gemini-2.5-flash"),
        prompt: `You are the ${role} in an agentic-commerce loop for pre-production illustration. ${ctx} Reply with ONE sentence.`,
      });
      return text.trim();
    };

    // 1. AP2 IntentMandate — user grants bounded authority.
    const intent = { type: "IntentMandate", goal: data.goal, max_minor: data.cap_minor, currency: "USD",
      reasoning: await speak("buyer", `Open intent for ${data.goal} with cap ${data.cap_minor}.`) };

    // 2. A2A negotiation — buyer asks seller for a quote.
    const a2a_offer = { kind: "data", mimeType: "application/vnd.ap2.mandate.intent+json", data: intent };
    const cart = { type: "CartMandate", items: [{ name: "pre-production illustration package", price_minor: Math.min(data.cap_minor, 4200) }],
      total_minor: Math.min(data.cap_minor, 4200), currency: "USD",
      reasoning: await speak("seller", `Quote cart for ${data.goal}.`) };

    // 3. UCP collapse — price is fixed; emit a signed order envelope.
    const ucp_order = { order_id: `ucp-${crypto.randomUUID()}`, items: cart.items, total_minor: cart.total_minor,
      currency: "USD", signature: { alg: "hmac-sha256", sig: "stub", keyid: "demo" } };

    // 4. AP2 PaymentMandate — settle inside the intent rails.
    const payment = { type: "PaymentMandate", cart_ref: "demo-hash", tx: "0xsimulated",
      reasoning: await speak("buyer", `Accept cart and settle within intent cap.`) };

    return {
      transcript: [
        { step: "intent",   payload: intent },
        { step: "a2a-offer", payload: a2a_offer },
        { step: "cart",     payload: cart },
        { step: "ucp",      payload: ucp_order },
        { step: "payment",  payload: payment },
      ],
      meta: { simulated: !key, kernel: "agentic-loop" },
    };
  });
```

CLIENT (in `src/routes/index.tsx`): textarea for the goal + a number input for the
spend cap + "Run full loop" button. Render the transcript as a labelled timeline:
Intent → A2A Offer → Cart → UCP Order → Payment. Each card shows the JSON and any
`reasoning` line. Flag `simulated: true` clearly when no key.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the agent does for pre-production illustration.
2. The primary action (a single 'run negotiation' button that streams the full transcript — intent, A2A bubbles, UCP order, payment mandate — into one auditable feed) is one tap away; the rest of the layout supports it.
3. The server fn runs the protocol, the result lands on screen, the user can retry, copy, or audit.

KEYS (Lovable AI first, AIsa AI fallback):
1. `LOVABLE_API_KEY` — PRIMARY agent brain. Auto-provisioned by Lovable. Used
   server-side to call Lovable AI Gateway (Gemini, Claude, GPT) for every
   reasoning step. Never expose to the client; read only via
   `process.env.LOVABLE_API_KEY`. This is the default code path.
2. `AISA_API_KEY` (OPTIONAL FALLBACK) — only set if Lovable credits are
   exhausted or a specific frontier model from https://aisa.one is required.
   The server fn should try Lovable first and fall back to AIsa only if
   `LOVABLE_API_KEY` is missing.
The demo MUST still boot with zero secrets and return realistic `simulated:true`
envelopes — that demo-fallback contract is non-negotiable (see UCP × A2A × AP2 spec).

CREDIT (must appear in UI footer AND as JSDoc on the server function):
Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14

Market sizing.

Indicative figures for hackathon pitches — refine with your own research before raising.