# The Rectangle

> A working creative space in Santa Cruz for DJ rehearsals, media production, and XR experiments, supported by an agent-ready booking website.

- Tags: Web, Agents, AI, Immersive
- Areas: [AI agents & business automation](https://dreamawakelabs.com/agents.md), [Agent-Ready Web Applications](https://dreamawakelabs.com/agent-ready-web.md), [Interactive & Physical Experiences](https://dreamawakelabs.com/experiences.md)

## What it is

The Rectangle is a creative space in Santa Cruz for DJ rehearsal, shoots, events, and lessons, and the room where we test mixed-reality games, interactive characters, and operator tools with real hardware and real people. Every inquiry it receives used to be read, sorted, entered into the CRM, and answered with a deposit request by hand.

## What we built

The system behind its website: the inquiry API, AI screening, routing, CRM sync, notifications, the owner admin, the deposit flow, and the tools browser agents call. An inquiry arrives from a site form or from a browser agent calling a WebMCP tool, is validated and saved before anything else, and is screened for spam, intent, and fit by a model that fails open, so an error never drops an inquiry.

## How it is used

Studio bookings and business projects go to separate pipelines, the CRM syncs, and the owner gets an alert. Only a person’s approval sends the deposit invoice. Payment confirms the booking, and the customer gets a calendar file.

## Evidence

What changed: Every inquiry is saved before any external call, and nothing is invoiced until a person approves.

- **Agent tools on the site**: The website offers its actions to browser agents as Agent Forge capabilities over WebMCP, with the write tool flagged consequential. ([The Rectangle website](https://rectanglespace-site.vercel.app))
- **Save-first pipeline**: An inquiry is validated and saved, then screened by a model that fails open, routed to a studio or business pipeline, synced to the CRM, and announced to the owner.
- **Approval before money**: The deposit invoice goes out only after the owner approves. The paid webhook is signed and idempotent, and the confirmation carries a calendar file.
- **The lab**: The room is used for mixed-reality, character, and operator testing with real hardware and real people.

Context: The owner admin is not shown because it holds customer data.

## Behind the experience

- [Agents & Operations](https://dreamawakelabs.com/technology#platform-agents): Tools for people and agents. Systems: [Agent Forge](https://dreamawakelabs.com/technology#agent-forge), [Agent-native web apps](https://dreamawakelabs.com/technology#web-apps)

## Our technology

- Agent Forge: Agent tools on the website, with write tools flagged consequential.
- Agent-native web apps: The Rectangle site is one of our agent-native web apps.

## Built with

Nuxt 4, TypeScript, Vercel, Neon Postgres, Drizzle ORM, Vercel AI Gateway, HubSpot, Shopify Admin API, Resend, Agent Forge, WebMCP, Vitest, PGlite

## Media

- Five visitors face a wall-sized projection of Agent City inside The Rectangle, with districts labeled Plan, Build, Test, Create, Learn, and Deploy, while a white robot with a screen reading "Ask me anything" points at the map. (Agent City fills the walls as a visitor meets a robot guide.): https://dreamawakelabs.com/work/the-rectangle/agent-city-wall.webp
- The Rectangle as a projection room: glowing characters fill three walls, projectors hang from a black truss ceiling, six visitors stand and sit among low benches lit from below, and a small white robot on a plinth gestures to a seated guest. (The room opens into a world of characters and light.): https://dreamawakelabs.com/work/the-rectangle/projection-room.webp
- The Rectangle with projection-mapped walls with mountains and a glowing character, a DJ booth with a livestream camera, and a small white robot beside the projected character (The same room set up for a DJ rehearsal and a livestream.): https://dreamawakelabs.com/work/the-rectangle/dj-rehearsal.webp
- A small white robot sits at a round table in a curved room, hands raised, talking with a warm, glowing projected woman who smiles and gestures back from the wall. (A conversation between a robot and a projected character, driven by one story.): https://dreamawakelabs.com/work/the-rectangle/character-conversation.webp
- Pipeline diagram in eleven numbered steps: inquiry from a site form or browser agent; validation with schema check, rate limit, and honeypot; saved to Postgres first; AI screening that fails open; routing to a studio or business pipeline; HubSpot sync; owner alert; a highlighted step where a person approves; Shopify deposit invoice; payment webhook; and a confirmation email with a calendar file. (Every inquiry is saved before any external call, and nothing is invoiced until a person approves.): https://dreamawakelabs.com/work/the-rectangle/pipeline.svg

## Links

- [The Rectangle website](https://rectanglespace-site.vercel.app) (Website)

## Credit

Built and run by Dream Awake Labs. Private repository. The owner admin is not shown because it holds customer data.

[All projects](https://dreamawakelabs.com/work.md)