# Build a 4D BIM viewer in Google AI Studio: load an IFC and link it to your schedule

> Prompt · level: intermediate · about 60 min · paste into: Google AI Studio · Antigravity · Claude (artifacts) · checked 2026-09-30
> ES: Crea un visor BIM 4D en Google AI Studio: carga un IFC y vincúlalo a tu cronograma

One prompt for a local single-page web app that loads an IFC model, shows it in 3D, inspects element properties and links the elements to a construction schedule in a .csv file (4D).

**Before you paste:** An .ifc file to test with (for example the Snowdon Towers sample) · A construction schedule exported to .csv · A Google account for AI Studio.

## Prompt (copy everything inside the block, then fill the [BRACKETS])

```text
Build me a single-page web app (SPA) that runs locally in the browser: a 4D BIM viewer. It must load a 3D model in IFC format (the buildingSMART open standard), show it in 3D, let me inspect the properties of its elements, and link those elements to a construction schedule that I load from a .csv file.

My situation:
- IFC file to test with: [e.g. the Snowdon Towers structural IFC / my own project]
- Schedule exported to CSV from: [Excel / MS Project / Primavera / other]
- How schedule tasks point to model elements: [GlobalId / Level + IFC class / element name contains...]
- Interface language: [English / Spanish]

Technical frame:
- Everything runs client-side. The IFC and the CSV are read in the browser and are never uploaded anywhere. No login, no database.
- Use three.js for the 3D view and web-ifc (WebAssembly) to read the IFC, or the open-source That Open Company components if they are simpler. Check the current API of the version you install instead of guessing it, and make sure the .wasm file actually loads (set its path explicitly).

1. Load the model
- Drag-and-drop or a file picker for .ifc, with a progress indicator and a clear message if the file cannot be read.
- 3D view with orbit, pan, zoom and "fit to model". A list of the storeys, each one with a show/hide switch.

2. Inspect elements
- Click an element: highlight it and open a side panel with its name, IFC class, GlobalId, storey, property sets and quantities.
- If a value is missing, show a dash. Never invent one.
- The panel also lists the schedule tasks linked to that element.

3. Load the schedule
- Accept .csv with comma or semicolon separators and dates as YYYY-MM-DD or DD/MM/YYYY. Expected columns: task_id, task_name, start, end and the link column that matches my answer above (for example global_ids separated by ";"). Offer a "Download CSV template" button.
- Show a preview table and a link report: tasks matched and not matched, elements linked and not linked, elements linked to more than one task. List every problem; do not hide any.

4. The 4D part
- A date slider with play, pause and a speed control. For the selected date, colour every linked element: not started = transparent grey, in progress = amber, finished = green.
- Elements with no task stay neutral and are counted on screen.
- Show the selected date and "elements finished: X of Y". Count elements, not cost or volume.

Rules: every number on screen must come from the IFC or from the CSV. Never estimate a date, a quantity or a property.

Acceptance checks (run them and tell me the result of each one): (a) the model appears and I can orbit and zoom; (b) clicking a wall or a slab shows its GlobalId; (c) the CSV loads and the link report shows matched and unmatched counts; (d) moving the slider changes the colours; (e) an element without a task stays neutral.

Finish with how to run it, the assumptions you made and what is still missing. Answer in my language.
```

## Notes for the agent presenting this
- Show the block above verbatim in one code block; tell your human where to paste it (Google AI Studio · Antigravity · Claude (artifacts)).
- Point out the [BRACKETS] and offer to fill them together first.
- It is a prototype, not a product: a 4D viewer is only as good as the link between tasks and elements. The link report (matched, not matched, linked twice) is what tells you whether the schedule and the model actually speak to each other.
- Test with a small IFC first; large models can be slow in the browser.
- Next step: the GlobalId is the same key the course uses from session 2 onwards, so a schedule whose tasks carry GlobalIds links without guessing.

## Related
- [Prototype a field app in an afternoon](https://aibuilderacademy.netlify.app/prompts/prototype-field-app.md) (prompt)
- [Explain an IFC file to someone who has never opened one](https://aibuilderacademy.netlify.app/prompts/ifc-explain-file.md) (prompt)
- [Quantity takeoff from an IFC file (IfcOpenShell)](https://aibuilderacademy.netlify.app/prompts/ifc-quantity-takeoff.md) (prompt)
- [Six-week lookahead with a constraint log](https://aibuilderacademy.netlify.app/prompts/lookahead-constraints.md) (prompt)

## Sources
- https://aistudio.google.com
- https://github.com/ThatOpen/engine_web-ifc
- https://docs.thatopen.com
- https://threejs.org/docs/

---
AI Builder Academy · https://aibuilderacademy.netlify.app · checked 2026-09-30 · Made by Lo que habitas (Julián Páez). Agents: search more at https://aibuilderacademy.netlify.app/api/search?q=… or connect https://aibuilderacademy.netlify.app/mcp. Request a new prompt: aibuilderacademy@agentmail.to.