# Bygga: A Vibe-Coded, Open-Source 3D IKEA Assembly Guide That Reads Instructions Out Loud

> Source: <https://themenonlab.blog/blog/bygga-3d-ikea-assembly-guide-open-source/>
> Published: 2026-10-30 00:00:00+00:00

# Bygga: A Vibe-Coded, Open-Source 3D IKEA Assembly Guide That Reads Instructions Out Loud

A screenshot made the rounds this week: a browser window walking someone through hanging the doors on an IKEA BRIMNES wardrobe — step 13 of 16, rendered in clean 3D line art, with a “Grab a second person, it’s heavy” warning and a voice button in the corner. The caption: *someone vibe-coded an immersive 3D IKEA furniture assembler and open-sourced it.*

It’s real, and it’s genuinely clever. The project is [**Bygga**](https://www.usebygga.com), built by **Hassan El Mghari** ([Nutlope](https://github.com/Nutlope/bygga)) of Together AI. (The viral screenshot was a repost — credit goes to the original author.)

## What It Does

Type the name or article number on an IKEA box — `KALLAX`, `MALM`, `BRIMNES` — and Bygga renders every assembly step in 3D, drawn like the paper manual, and reads it out loud. It currently covers **1,171 IKEA products** across **2,180 sizes** in the UK and US ranges.

The nice part: it’s hands-free. You’re on the floor with an Allen key and a pile of cam locks — you don’t want to keep tapping a screen with sawdust on your fingers. Bygga listens for “next” through an echo-cancelled mic and advances the step for you.

## The Engineering Is the Interesting Bit

This isn’t a wrapper around a slow image model generating each panel on demand. The architecture is deliberately offline-first:

- **A three.js line-art stage** (`src/engine` ) plus a**parametric plan generator** (`src/lib/plan` ) draw all 1,171 products*offline* , built from IKEA’s public listings. No render API in the hot path.
- **Voice with no key required:** 1,476**pre-recorded Kokoro clips** play instantly.**Whisper** (on Together AI) handles listening for spoken commands.
- **AI extras are opt-in, on your own key:** Together AI (via each visitor’s own key) drafts products not yet in the catalog, does photo lookup, and powers a help chat that answers*with drawings* of the exact panel, fitting, or step.
- **Works offline:** a service worker means an opened guide keeps working with no signal — exactly when you need it, in a spare room with bad Wi-Fi.
- **Share cards and A4 print** are drawn by the same engine, so a printed guide matches the on-screen one.

Stack: Next.js 16 (App Router, Cache Components), React 19, TypeScript, plain CSS with Motion, **no UI kit**. There’s even a test harness — `npm run voice:check` replays 283 recorded listening runs, and `npm run ikea:check` tests every catalog row.

## Why It Matters

Two reasons this is more than a cute demo.

First, it’s a **great example of the “offline-generated, AI-optional” pattern**. The expensive, flaky part (an LLM or image model) is pushed to the edges — drafting unknown products, photo lookup, help chat — while the core experience is deterministic, fast, and free. That’s the right way to build AI-flavored tools that don’t fall over or run up a bill.

Second, it’s a **respectful** scrape job. Bygga deliberately doesn’t mirror IKEA’s PDF manuals — every guide is generated, and each cover links back to the official manual on ikea.com. (IKEA and its product names are Inter IKEA Systems B.V. trademarks; the project isn’t affiliated.)

## Try It

- **Live:**[usebygga.com](https://www.usebygga.com) — type`BISSA` or`BRIMNES`
- **Source (MIT):**[github.com/Nutlope/bygga](https://github.com/Nutlope/bygga)
- **Run locally:**`git clone` ,`npm install` ,`npm run dev` , open`localhost:3000`
- **AI parts:** copy`.env.example` , set`TOGETHER_API_KEY` , paste the dev mock key into the app’s key box

A furniture manual that draws itself in 3D and reads itself aloud — assembled, fittingly, one generated step at a time.
