Zephyr

The First UI Framework Built for AI Agents

14 components. Zero runtime JS. Built-in MCP server, Agent API, and A2UI catalog.
Agents don't parse your HTML — they call typed tools.

npm GitHub Live App Demo

Agent-Native Features

No other UI framework gives agents read-write control of live UI. These aren't doc lookups — agents control your running app.

Agent API

Structured interface for AI agents to discover, inspect, and control every component on the page. 


    


    
    

      
Agent Chat Widget

      

        Drop <z-agent> into any page. Visitors type natural language, the agent controls your UI.
      

      

        
        
      

      

        Works with Anthropic and OpenAI. Direct mode for demos, proxy mode for production.
        Set data-api-key or data-endpoint on the tag.
      

    


    
    

      
MCP Server + A2UI

      

        Connect Claude Desktop, Cursor, or any MCP host. 6 typed tools for full UI control.
        A2UI catalog makes components discoverable across Google's agent ecosystem.
      

      

        
zephyr_act('#modal', 'open')

        
zephyr_get_state() → JSON snapshot

        
zephyr_describe('#select') → full spec

        
zephyr_set_state('#tab', {active: true})

        
zephyr_get_schema() → all 14 components

        
zephyr_get_prompt() → LLM context

      

      

        npx create-zephyr-framework my-app — up and running in 30 seconds.
      

    

  


  
  

    
Components

    
14 web components. CSS-driven interactions. No runtime JS after page load.

  


  

    
    

      
Accordion

      
        
          
          

            

              Uses CSS Grid with grid-template-rows transition and :has() selector.
              No JavaScript required for animation.
            

          

        
        
          
          

            

              Pure CSS animations are GPU-accelerated and don't block the main thread.
              Animations run at 60fps with zero overhead.
            

          

        
        
          
          

            

              Uses semantic HTML with proper ARIA patterns. Keyboard navigation works
              out of the box with native focus management.
            

          

        
      
    


    
    

      
Tabs

      
        

          
          
          
        

        

          View Transitions API creates smooth transitions between tab changes.
          Container queries handle responsive layouts without media queries.
        

        

          Simple declarative markup with data attributes. The framework handles
          state management, focus, and animations automatically.
        

        

          Minimal API surface. Components use custom elements with slots for
          maximum flexibility and composability.
        

      
    


    
    

      
Select

      
        
        

          
React - Library for UI

          
Vue - Progressive framework

          
Svelte - Compiler approach

          
Zephyr - Zero-JS

        

      
      

        Form-associated custom element that works with native forms.
        Styled entirely with CSS using :has().
      

    


    
    

      
Carousel

      
        

          
01

          
View Transitions API handles all slide animations with zero JavaScript configuration.

        

        

          
02

          
Supports autoplay, touch gestures, and keyboard navigation natively.

        

        

          
03

          
Container queries adapt layout based on component size, not viewport.

        

        

          
          
        

      
    


    
    

      
Dropdown

      
        
        

          Edit Profile
          Settings
          Billing
          Logout
        

      
      

        Automatic positioning and click-outside handling. CSS transitions for open/close states.
      

    


    
    

      
Modal

      
      

        Uses native <dialog> element with View Transitions for smooth
        entrance animations. Backdrop blur with no performance cost.
      


      
        
Welcome to Zephyr

        

          This modal uses the View Transitions API for smooth animations.
          The backdrop blur is pure CSS with GPU acceleration.
        

        

          
          
        

      
    

    
    

      
Combobox

      
        
        

          
JavaScript

          
TypeScript

          
Python

          
Rust

          
Go

          
Ruby

          
Swift

          
Kotlin

        

      
      

        Filterable dropdown with keyboard navigation.
        Type to filter, arrow keys to navigate, Enter to select.
      

    


    
    

      
Date Picker

      
        
      
      

        Enhanced native <input type="date"> with styled trigger
        and formatted display. Fully accessible.
      

    


    
    

      
Infinite Scroll

      
        

      
      

        Uses IntersectionObserver to load more content as you scroll.
        No external libraries needed.
      

    


    
    

      
Drag & Drop

      
        
Item 1 - Drag me

        
Item 2 - Drag me

        
Item 3 - Drag me

        
Item 4 - Drag me

      
      

        Native HTML Drag and Drop API. Dispatches sort event with new order.
      

    


    
    

      
File Upload

      
        
Drop files here or click to browse

        

      
      

        Drag-and-drop zone with progress bars.
        Uses native <input type="file"> under the hood.
      

    


    
    

      
Virtual Scroll

      
      

        Renders 10,000 rows with only ~20 DOM nodes.
        GPU-accelerated scrolling via will-change: transform.