Building AI-First Interfaces for Real Estate at Desk AI

Real estate is one of those industries where a single transaction involves dozens of documents, multiple parties, and weeks of back-and-forth. At Desk AI, we set out to automate the most painful parts of that process — and I was responsible for building the frontend that made it all feel effortless.

The Problem

Brokerages handling 50,000+ transactions a year were drowning in paperwork. Purchase & Sale Agreements (PSAs), Confidential Disclosure Agreements (CDAs), commission structures, signing workflows — all managed through a patchwork of tools. The goal was to build an AI-powered platform that could read, fill, and manage these documents automatically through a conversational interface.

Architecture Decisions

We built the app as a React 19 SPA with Vite, using TanStack Router for type-safe routing and a layered state management approach:

  • URQL for GraphQL operations with automatic codegen — the schema was our source of truth, and we regenerated types continuously as the backend evolved.
  • TanStack Query for server state that didn't fit the GraphQL model (REST endpoints for file operations, PDF generation).
  • Jotai for ephemeral client state — form drafts, UI toggles, and the real-time editing state that needed to be shared across deeply nested component trees without prop drilling.

This three-layer approach let us keep each concern isolated. GraphQL for structured data, REST for files, atoms for UI state.

Conversational AI Interfaces

The core experience was a chat-like interface where agents could interact with AI to analyze documents, extract key terms, and auto-fill agreements. The challenge wasn't just rendering streamed responses — it was maintaining context across a conversation that could reference specific clauses in a 40-page PSA.

We used streaming responses with incremental rendering, so the UI felt responsive even when the AI was processing complex documents. The state management here was tricky: each message could trigger mutations on the underlying transaction data, which needed to sync back to the review tables and document viewers in real time.

Document Analysis and PDF Workflows

A significant portion of the work involved building a document management layer on top of PDFSlick and pdfjs. Agents needed to:

  • View combined PSA documents or drill into individual sub-documents
  • Upload files and see them reflected immediately without page refreshes
  • Handle multi-party signing workflows where different parties fill different sections

We eventually migrated all file operations from S3-key-based access to ID-based endpoints — a refactor that touched every file-related component in the app but made the system significantly more robust and easier to reason about.

Review Tables and Transaction Management

The transaction review interface was essentially a spreadsheet-like experience showing hundreds of active deals with sticky columns, dynamic widths, and real-time status updates. Built with TanStack Table, it needed to handle complex filtering (hiding verified transactions, showing closed deals in volume projections) while keeping the UI snappy.

One of the trickier problems was scroll detection — knowing when a user had scrolled the table to load more data, while keeping the address column pinned. Small details, but they compound into the difference between a tool agents tolerate and one they actually enjoy using.

What I Learned

Building for real estate taught me that domain complexity beats technical complexity every time. The hardest problems weren't about React performance or state management patterns — they were about understanding the nuances of a PSA signing workflow, or why a commission field needs to support both check and Stripe simultaneously.

The AI layer added another dimension: designing interfaces that feel collaborative rather than robotic. The best AI UX isn't about showing off the model — it's about getting out of the way and letting people do their jobs faster.