GlassKit UI

Product Introduction

1. Definition: GlassKit UI is an open-source (MIT licensed) React component library and spatial focus engine specifically engineered for building web applications for the Meta Ray-Ban Display and other smart glasses with a 600x600 pixel lens. It provides 44 ready-to-use components and a complete development toolkit, including an AI agent skill, an MCP server, and an llms.txt file.
2. Core Value Proposition: GlassKit UI exists to solve the unique UI/UX challenges of glanceable, in-lens computing. It provides developers and AI agents with the foundational building blocks—tuned for a small, high-density display and spatial input—to rapidly create performant, visually sharp applications without reinventing the wheel for wearable interfaces.

Main Features

1. 44 Specialized HUD Components: The library delivers a comprehensive suite of 44 React components pre-optimized for heads-up display (HUD) jobs. This includes readouts, lists, timers, communications panels, launch screens, and a unique set of world-anchored components like DirectionArrow, Compass, and Pin. Each component is engineered with premium surfaces and contrast tuned specifically for the 600x600 lens to ensure clarity and prevent the washed-out blur common when adapting generic UI to small displays.
2. Spatial Focus Engine: This is the core navigation technology of GlassKit UI. It implements an intelligent focus system that responds to Arrow key inputs and the Meta Ray-Ban's Neural Band. The engine calculates and moves a focus ring to the nearest logical target, functioning as a superset of Meta's native .focusable attribute. The same code runs identically on a development desktop and on the physical glasses, ensuring predictable behavior during development and deployment.
3. Vendor-Style Source Ownership (No Lock-In): Following the shadcn/UI philosophy, GlassKit UI employs a "vendor the source" model. Using the @glasskit-ui/cli tool, developers can add any component's source code directly into their project. This code becomes a permanent, editable part of their codebase. There are no black boxes, no runtime dependencies, and no lock-in; the SDK hooks, viewport utilities, and focus engine are installed via npm, but the components themselves are owned by the developer.

Problems Solved

1. Pain Point: Traditional UI frameworks (like standard Tailwind or Material UI) are not optimized for the unique constraints of smart glasses displays, leading to poor readability, ineffective navigation, and complex development cycles. Developers lack a dedicated, high-level toolkit for building glanceable, spatially-aware interfaces for devices like the Meta Ray-Ban Display.
2. Target Audience: The primary users are React Developers building applications for wearables, AI Agent Builders creating interfaces for models to interact with through displays, and Smart Glasses Application Developers seeking a high-performance, domain-specific UI foundation.
3. Use Cases: GlassKit UI is essential for developing in-lens fitness trackers with real-time readouts, navigation aids with compass and direction arrows, notification dashboards, communication apps for quick glances, and any application where information must be consumed rapidly on a 600x600 spatial display. It's also critical for AI agent frameworks that need to render UI responses directly onto a user's glasses.

Unique Advantages

1. Differentiation: Unlike generic component libraries (e.g., Bootstrap, Material UI) or even UI frameworks built for mobile, GlassKit UI is purpose-built from the ground up for the Meta Ray-Ban Display's 600x600 lens and Neural Band input. Its focus engine handles spatial navigation in a way no standard web library can, and its components are pre-tuned for the optical realities of a heads-up display.
2. Key Innovation: The Spatial Focus Engine is the key innovation. It doesn't just style elements; it provides the entire logic for non-touch, directional navigation within a confined visual space. Combined with the AI-first tooling (MCP server, llms.txt), it uniquely bridges the gap between human-developed UI components and automated, agent-driven interface generation for wearable contexts.

Frequently Asked Questions (FAQ)

1. How is GlassKit UI different from using a standard UI library like shadcn/ui for my glasses app? GlassKit UI is specifically engineered for the 600x600 pixel lens and spatial input of the Meta Ray-Ban Display. While it follows the same open-source, source-vendoring model as shadcn/ui, its 44 components are pre-built for heads-up display (HUD) jobs with optimized contrast and size. Most importantly, it includes a dedicated Spatial Focus Engine that handles arrow key and Neural Band navigation, a critical feature for non-touch wearable interfaces that standard libraries do not provide.
2. Can I use GlassKit UI components for other devices besides Meta Ray-Ban Display? The components and focus engine are built with a 600x600 lens as the target viewport. While they could be adapted for other small, glanceable displays (like other smart glasses or certain wearables), they are not optimized for general-purpose web or mobile use. The core value is in solving the specific problems of the in-lens display environment.
3. How does the AI agent integration work, and what is the MCP server? GlassKit UI includes an llms.txt file that helps large language models (like Claude) understand the component library to generate accurate code. The MCP (Model Context Protocol) server allows AI coding assistants (like Cursor) to directly query the GlassKit UI knowledge base and component specs, enabling them to build correct interfaces for the glasses context without manual explanation.
4. What does "vendor the source" mean, and what are the installation steps? "Vendor the source" means you copy the React component code into your own project, making it yours to maintain and modify without external dependencies at runtime. The process is: 1) Install the SDK via npm for the core hooks and engine. 2) Use the CLI command npx @glasskit-ui/cli add [component] (e.g., add button) to copy the source code for specific components into your project directory.
5. Is GlassKit UI only for new projects, or can it be integrated into an existing React application? You can integrate GlassKit UI into an existing React project. Because it is based on standard React and you vendor the source code, there are no complex dependency conflicts. You can start by adding a few components (like a readout or timer) to enhance your existing app for a glasses display viewport.