Lightbox Swatch Matcher

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 "Lightbox Swatch Matcher" 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 suggests Pantone codes so designers match dyes perfectly; AIsa captures your written lightbox observations.
Discipline: Fashion & Textile Design (color matching and textiles).
Recipe: AIsa Skills & Live Data (real-world signal) as the single creative surface.
Why this kernel: Designers hold multiple physical swatches under light sources, requiring hands-free realtime transcription to log subtle color shifts.

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/aisa.functions.ts` that proxies the AIsa call.
- ONE client surface (a textarea + button, or chat box, or prompt-to-canvas) wired to it.
- 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`. Nothing else.
- Keep the diff small enough to land in one build pass. If a feature is not on
  screen in the user flow below, do not build it. Cut scope before adding scope.

STACK
- TanStack Start app, the index route only.
- AIsa is the only AI dependency. All API calls live inside a `createServerFn`
  handler so `AISA_API_KEY` stays on the server.
- Client surface fits the kernel: a prompt box that returns the result.
- 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 AIsa Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

SERVER FUNCTION (src/lib/aisa.functions.ts) — AIsa Skill + LLM grounding:
```ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

/** Built during the AIsa Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const research = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ query: z.string().min(1).max(400) }).parse(d))
  .handler(async ({ data }) => {
    // 1. SKILL — pull live web/search signal for the topic.
    const sk = await fetch("https://api.aisa.one/v1/skills/aisa-tavily-search", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.AISA_API_KEY!}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ query: data.query, max_results: 6 }),
    });
    if (sk.status === 402) throw new Error("AIsa balance exhausted — top up at console.aisa.one.");
    if (!sk.ok) throw new Error(`AIsa skill failed: ${sk.status}`);
    const skill = await sk.json();

    // 2. BRAIN — frontier LLM synthesises a grounded answer for color matching and textiles.
    const chat = await fetch("https://api.aisa.one/v1/chat/completions", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.AISA_API_KEY!}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "gpt-4o-mini",
        messages: [
          { role: "system", content: `You are a research aide for color matching and textiles. ` +
              `Synthesise the supplied sources into a sourced, markdown answer ` +
              `with inline links [Title](url). Be concrete, never invent facts.` },
          { role: "user", content: `Question: ${data.query}\n\nSources JSON:\n${JSON.stringify(skill).slice(0, 6000)}` },
        ],
      }),
    });
    if (!chat.ok) throw new Error(`AIsa chat failed: ${chat.status}`);
    const j = await chat.json();
    return { answer: j.choices[0].message.content as string };
  });
```

CLIENT: search-style input + "Research" button. Render the markdown answer
(react-markdown). Pick the right skill from https://aisa.one/skills — Tavily
search, YouTube SERP, scholar, market data, perplexity research, etc.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for color matching and textiles.
2. The primary action (a search/topic box that returns citation-grade results, trend signals, or research the user can drop into the work) is one tap away; the rest of the layout supports it.
3. AIsa runs the kernel server-side, the result lands on screen, the user can retry or copy.

KEY — only ONE secret is required:
1. `AISA_API_KEY`. Sign up at https://console.aisa.one, copy the key into
   Project Settings -> Secrets. Read it only on the server via
   `process.env.AISA_API_KEY`. Never prefix with `VITE_`, never expose
   to the client. A single key unlocks chat, image, video and skills.

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

Market sizing.

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