Inspiration Real estate agents are drowning in data but starving for direction. We watched the Lofty demo and noticed something: the platform already knows everything — which lead is hottest, which transaction is at risk, whose birthday is Friday — but it still makes the agent figure all of that out themselves every single morning by scanning 8 different widget panels. The question that drove us wasn't "how do we add AI to Lofty?" It was "what if Lofty's AI had already done the work before the agent even opened the app?" That's the gap we wanted to close. What it does Lofty AI Morning Briefing replaces the traditional dashboard with an AI-native workspace that acts first. When an agent logs in, instead of a wall of widgets, they see:
A natural language briefing generated by Claude that has already analyzed their entire pipeline and tells them exactly what to do today — by name, by score, by urgency A prioritized task engine with 4 ranked actions, each with embedded one-click execution (draft call script, birthday message, transaction action plan, listing re-engagement strategy) — all generated inline by Claude without navigating away An AI Agent Activity Summary showing what the AI completed overnight, what it's monitoring, and what it's planning next — making the AI's work visible and trustworthy Pipeline charts (lead funnel, listing engagement, lead score trends) that are linked to actions, not just decorative A command palette (press /) for instant navigation across the entire platform
The core interaction: AI speaks first. Agent reacts. Every recommended action is one click away. How we built it We built the entire prototype as a single-file HTML/CSS/JS application with no framework dependencies, intentionally keeping it lightweight and portable for demo purposes. Stack:
Vanilla HTML, CSS, JavaScript — no build tools, runs in any browser Claude API (claude-sonnet-4-20250514) powers three live AI layers: the morning briefing generation, inline action content (call scripts, strategies, messages), and the ask-anything chat panel Chart.js (via CDN) for the three pipeline charts Realistic hardcoded agent data modeled directly from Lofty's own demo data (James/Sarah, Rob Adam, Brandon Allen, the Via Montalvo transaction, etc.) Claude itself was used throughout the entire build process — strategy, design decisions, code generation, and this writeup
The architecture is intentionally simple: on login, the app passes the agent's structured pipeline data to Claude with a system prompt, Claude returns a natural language briefing, and it types out character by character. Every subsequent action button triggers a new focused Claude call with a role-specific system prompt (call script writer, transaction advisor, listing strategist). Challenges we ran into Making AI feel embedded, not bolted on. The first version had a glowing AI orb, floating cards, and a big chat box front and center. It looked like an AI demo site, not a real product. We scrapped it and rebuilt with a tighter visual language — smaller fonts, muted colors, 1px borders, no glow effects — until it felt like a tool professionals actually use daily. Trust through transparency. Agents are skeptical of AI making decisions for them. We solved this by making the AI's reasoning visible on every action card ("Facebook Ads leads at score 88 convert 2× faster within 72 hours") and by keeping the agent in control — AI recommends, agent decides. The "AI-native" vs "AI feature" distinction. It's easy to just add a chatbot to an existing dashboard and call it AI-native. The real challenge was flipping the interaction model entirely — making the AI initiate rather than respond. The Morning Briefing entry point was the only option where that was structurally true. Accomplishments that we're proud of
Built a fully functional, Claude-powered prototype in a single hackathon session The AI briefing, action generation, and chat are all live — not mocked The demo works in offline/fallback mode with pre-written responses so it never fails during a presentation The design went through two complete rebuilds to get to something that genuinely looks like a real product Every design decision maps directly to a specific user problem — nothing is decorative
What we learned The hardest part of AI-native product design isn't the AI — it's the UX. Getting Claude to write a good briefing took one prompt. Getting the interface to feel like the AI was genuinely working for you rather than just answering questions took much longer. We also learned that trust is the real product. Agents won't hand over their pipeline to AI unless they can see what it did, why it did it, and override it easily. Every design decision in the right panel — the overnight activity log, the "Why this?" reasoning, the suggested next moves — exists to answer the question: "Can I trust this?" What's next for Lofty AI
Real Lofty AOS integration — connect to the actual Agentic AI Operating System instead of simulated data, so the briefing reflects live pipeline state One-tap execution — "Call Rob Adam" initiates a VoIP call and auto-logs it when complete, without leaving the briefing Adaptive prioritization — the AI learns agent behavior over time ("you always call first in the morning, you respond better to seller leads") and re-ranks accordingly Team briefing mode — for team leaders, a morning briefing that summarizes the entire team's pipeline, flags at-risk deals, and surfaces which agents need support Closing the loop — after each completed action, the AI updates its overnight summary so the agent can see their progress in real time
The metric that would tell us this is working: agents who use the Morning Briefing complete their first high-priority action before 9 AM, consistently, without thinking about what to do first.
Built With
HTML5, CSS3, JavaScript (vanilla) Claude API — claude-sonnet-4-20250514 (Anthropic) Chart.js Google Fonts (Inter, JetBrains Mono) Claude (for strategy, design iteration, code generation, and copywriting throughout the build)
Log in or sign up for Devpost to join the conversation.