What is Jamutify?

I wanted to build something that had absolutely no right to exist, but would make people smile when they saw it. Jamutify is what happens when you cross a Spotify API wrapper with an Indonesian herbal apothecary. You connect your Spotify account, it pulls your top artists and tracks, and then an AI "herbalist" (either Mbok Gem, powered by Gemini, or Mbok Sae, powered by DeepSeek) translates your music taste into a consumable Jamu recipe complete with ingredients, Indonesian names, measurements, and "sonic reasons" that explain why each herb matches your listening habits. For example: "Grounds the chaotic rhythm of Aphex Twin" as the justification for turmeric. It's ridiculous and I love it.

The recipe cards themselves are a whole production. Each one is a 9:16 apothecary label styled like vintage Indonesian medicine packaging, with double borders, aged paper textures, a QR code, and a "Sonic Herbal Apothecary" header. You can download them as 1080x1920 PNGs perfect for Instagram Stories, or share a direct link to your brew. There's also a public grid where everyone's creations show up, so you can browse what other people's music tastes taste like.

How I Built It

Jamutify runs on Next.js 16 with the App Router and React 19. Auth is handled by NextAuth with the Spotify provider, requesting only the user-top-read scope, the bare minimum to get your top artists and tracks. User profiles sync to PostgreSQL via Prisma, with the display name and avatar pulled from Spotify's API on sign-in.

The generation pipeline is where it gets interesting. When you hit "Brew Personalized Jamu," the app fetches your top 5 artists and top 5 tracks from Spotify, collects genre tags, and builds a music matrix. It SHA-256 hashes that matrix and checks PostgreSQL for a cached recipe first. If there's a hit, it returns instantly. If not, it fires off a structured JSON request to Gemini (or DeepSeek, depending on your chosen brewer) with an extensive system prompt that maps musical vibes to Jamu ingredient categories: deep bass gets earthy roots like turmeric and galangal, rock and metal get spicy ginger and black pepper, indie gets bittersweet tamarind, hyperpop gets fizzy lemongrass and soda water, and pop gets honey and pandan. Every ingredient gets a "sonicReason" linking it to a specific artist or track from your data, wrapped in HTML bold tags.

The response schema is strict: exactly 3 to 5 ingredients, calorie range formatted as "Approx. X-Y kcal," short measurement abbreviations, and safety guardrails that prevent the AI from suggesting anything non-edible. But because AI is unpredictable, the whole thing has a fallback chain: five hardcoded mock recipes for each vibe category (grounding, spicy, melancholic, fresh, sweet), plus a guest mode that works without Spotify auth.


// The core AI generation call, Gemini with structured JSON output
// and a detailed system prompt mapping music vibes to Jamu ingredients
const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
const response = await ai.models.generateContent({
  model: process.env.GEMINI_MODEL || "gemini-2.5-flash",
  contents: userPrompt,
  config: {
    systemInstruction: systemPrompt,
    responseMimeType: "application/json",
    responseSchema: {
      type: "OBJECT",
      properties: {
        recipeName: { type: "STRING" },
        vibeDescription: { type: "STRING" },
        calories: {
          type: "STRING",
          description: "Strictly format as 'Approx. <min>-<max> kcal'",
        },
        ingredients: {
          type: "ARRAY",
          minItems: 3,
          maxItems: 5,
          items: {
            type: "OBJECT",
            properties: {
              name: { type: "STRING" },
              indonesianName: { type: "STRING" },
              amount: { type: "STRING" },
              sonicReason: {
                type: "STRING",
                description: "Witty justification linking to a specific artist using HTML <b>...</b> tags",
              },
            },
            required: ["name", "indonesianName", "amount", "sonicReason"],
          },
        },
        instructions: {
          type: "ARRAY",
          minItems: 3,
          maxItems: 5,
          items: { type: "STRING" },
        },
        proTip: { type: "STRING" },
      },
      required: ["recipeName", "vibeDescription", "calories", "ingredients", "instructions", "proTip"],
    },
  },
});

The card export uses html-to-image's toPng() to render the RecipeCard component at 1080x1920, which matches Instagram Story dimensions. The card itself is a responsive 9:16 flexbox layout with a dark moss gradient background, vintage double borders, an apothecary seal overlay, and a dynamically generated QR code pointing back to the app. Everything is self-hosted on my homelab Proxmox server running Coolify, served through Cloudflare Tunnels since I'm behind CGNAT. The whole thing runs in a Docker container with a multi-stage build.

What I Learned

Structured JSON output from LLMs is great until it isn't. DeepSeek's response_format: { type: "json_object" } behaves differently from Gemini's responseSchema, so I had to build a key-normalization layer that handles snake_case, camelCase, and whatever creative naming the model decides on. I also learned that html-to-image is surprisingly finicky with custom fonts and CSS transforms, the recipe cards looked perfect on screen but the exported PNGs sometimes shifted text by a few pixels until I locked down every dimension with explicit pixel values and added a 300ms render delay before capture. The SHA-256 caching was a nice touch too: if you re-generate with the exact same music matrix and settings, you get your saved recipe back instantly instead of burning an API call. Small thing, but it makes the app feel snappy.