> Markdown version of [/videos/100193-giving-ai-eyes-how-to-build-a-dashboard-you-can-t-see](https://www.wearedevelopers.com/videos/100193-giving-ai-eyes-how-to-build-a-dashboard-you-can-t-see). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Giving AI eyes: How to build a dashboard you can't see

Stop your LLM from generating broken, overlapping user interfaces. Learn how to build a client-side feedback loop that gives AI the spatial awareness to self-correct layout mistakes.

- **Speakers:** [Josh Hobson](https://www.wearedevelopers.com/@josh-hobson)
- **Event:** World Congress 2026 Europe
- **Published:** July 10, 2026
- **Duration:** 27:04
- **URL:** https://www.wearedevelopers.com/videos/100193-giving-ai-eyes-how-to-build-a-dashboard-you-can-t-see

## Summary

Large Language Models are remarkably proficient at generating configuration structures like JSON, yet they are completely blind to the visual interfaces they create. Left unchecked, an AI tasked with building a user interface will confidently render overlapping widgets, charts querying impossible data combinations, and visual layouts devoid of human-readable design logic. Because the final rendered interface is the actual product, relying solely on prompt engineering or server-side evaluations is insufficient for delivering a reliable, "one-shot" experience to end users.

To solve this visual blindness, developers must construct a client-side architecture that feeds continuous "sense checks" back to the model, acting effectively as frontend UI linting rules. This framework provides the AI with three critical contexts: spatial awareness, analytic reality, and visual integrity. By calculating a dashboard's design "center of mass" and measuring active grid lines, the system informs the AI of poor layouts. Furthermore, evaluating analytic reality prevents the model from deploying conflicting filters that yield empty states, while ensuring visual integrity dictates that information density is mathematically scaled to the user's available browser pixels instead of cramming thousands of data points into an unreadable chart.

Implementing this immediate browser-level feedback loop fundamentally shifts how AI-assisted interfaces operate. Frameworks like AG Studio utilize an in-browser agent harness to score these generated elements, forcing the LLM to self-correct layout distributions and data aggregations before the end user ever sees a mistake. As the industry moves toward integrating protocols like WebMCP and AG UI directly into the JavaScript runtime, equipping AI with these tangible client-side "senses" will become the standard methodology for building dynamic, user-facing analytics and reliably responsive layouts.

**Keywords:** ai-assisted interfaces, llm configuration generation, dashboard component rendering, client-side sense checks, spatial awareness modeling, ui linting rules, analytic reality evaluation, visual integrity scoring, readable data density, browser-based agent harness, WebMCP integration, AG Studio implementation, dynamic data aggregation, zero-shot ui creation, front-end llm feedback loops, visual rendering blindness

## Chapters

1. **Understanding the challenge of dashboards generated by blind AI** (00:03) — Developers tolerate faulty code generation but end users abandon applications when AI visual output algorithmically fails.
1. **Improving spatial awareness and structural layout for generated widgets** (05:15) — Providing metrics like gridline attachment and center of mass helps AI automatically fix overlapping layout structures.
1. **Verifying analytical reality and preventing empty dashboard data states** (10:26) — Exposing domain context and active filter boundaries prevents language models from generating charts with missing data.
1. **Enforcing visual integrity and readable information density limits** (13:54) — Converting data points into client-side pixel density metrics prevents unreadable charts with excessively clustered data segments.
1. **Reducing expensive language model iteration cycles for end users** (20:13) — Creating client-side visual linting rules enables reliable one-shot dashboard generation without repetitive manual prompting execution loops.
1. **Integrating embedded dashboards and future browser based agent protocols** (21:41) — Embedded UI layout libraries avoid server-side dependencies while evolving alongside emerging intelligent web standards like WebMCP.
1. **Addressing audience questions on feedback mechanisms and browser integration** (24:39) — Fine-grained quality scores guide AI UI adjustments while a dedicated browser harness processes generation tasks locally.

## Related Moments

- [Replacing complex BI dashboards with live LLM queries](https://www.wearedevelopers.com/videos/100091-3-ways-to-rebuild-the-data-stack-for-agents) (from "3 Ways to Rebuild the Data Stack for Agents")
- [Extracting AI capabilities into predictable dashboard interfaces](https://www.wearedevelopers.com/videos/100003-designing-ux-for-sre-agents-in-high-stakes-incidents) (from "Designing UX for SRE Agents in High-Stakes Incidents")
- [AI agents replacing traditional web interfaces](https://www.wearedevelopers.com/videos/1289-wad-live-22-01-2025-exploring-ai-web-development-and-accessibility-in-tech-with-stefan-judis) (from "WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis")
- [Exploring artificial intelligence as a solution for web accessibility](https://www.wearedevelopers.com/videos/1318-wearedevelopers-live-can-ai-save-accessibility-horrid-html-the-frontend-treadmill-and-more) (from "WeAreDevelopers LIVE - Can AI save Accessibility?; Horrid HTML; The Frontend Treadmill and more")
- [Transitioning from AI co-pilots to AI-native products](https://www.wearedevelopers.com/videos/100091-3-ways-to-rebuild-the-data-stack-for-agents) (from "3 Ways to Rebuild the Data Stack for Agents")
- [Evaluating AI automated captions and dynamic interface generation](https://www.wearedevelopers.com/videos/1730-wearedevelopers-live-accessibility-isn-t-magic-longevity-devrel-in-times-of-ai-and-more) (from "WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more")

## Related Articles

- [The Web We Broke (And Why AI Agents Are Paying the Price) - AgentCon Berlin](https://www.wearedevelopers.com/magazine/735-the-web-we-broke-and-why-ai-agents-are-paying-the-price-agentcon-berlin)
- [Graph and AI Trends 2026: Why Is AI Running but Not Yet Delivering?](https://www.wearedevelopers.com/magazine/680-graph-and-ai-trends-2026-why-is-ai-running-but-not-yet-delivering)
- [WWC24 Talk - Scott Hanselman - AI: Superhero or Supervillain?](https://www.wearedevelopers.com/magazine/469-wwc24-talk-scott-hanselman-ai-superhero-or-supervillain)
- [MLOps And AI Driven Development](https://www.wearedevelopers.com/magazine/82-mlops-and-ai-driven-development)

## Related Jobs

- [AI Software Engineer (Germany)](https://www.wearedevelopers.com/jobs/48317-ai-software-engineer-germany) at **Sunhat**
- [AI Operations Manager (all genders)](https://www.wearedevelopers.com/jobs/48263-ai-operations-manager-all-genders) at **envelio**
- [Data Scientist](https://www.wearedevelopers.com/jobs/ext/1351648-data-scientist) at **Almedia**
- [Staff Software Engineer, Copilot Experiences](https://www.wearedevelopers.com/jobs/ext/164361-staff-software-engineer-copilot-experiences) at **GitHub**
- [Senior AI Agent Software Engineer (Go, Python) (m/f/x)](https://www.wearedevelopers.com/jobs/48277-senior-ai-agent-software-engineer-go-python-m-f-x) at **Dynatrace**
- [AI Full Stack Engineer](https://www.wearedevelopers.com/jobs/ext/1354435-ai-full-stack-engineer) at **Almedia**