The web framework for AI Agents

Build production-ready web apps with AI agents. Jay combines strict code contracts, automated feedback loops, and a visual editor to guarantee bug-free code before deployment.

Get Started

npm create jay@latest

What is Jay

Engineered from the ground up for AI web development.

Jay contracts — strict separation of UI and backend logic

AI-First Contracts

Decouple UI from backend logic.

Jay uses strict .jay-contract files to separate visual templates (.jay-html) from backend code (page.ts). AI agents can completely redesign your interface without breaking underlying business logic.

Visual AIditor

Edit web apps visually by intent.

Convert screenshots or live URLs into contract-bound sites. Simply point at any element on screen, describe your change, and let the AI update production code directly.

Lighthouse scores — automated validation guardrails

Self-Correcting Loop

Automated guardrails prevent broken code.

An automated engine validates AI output across contracts, SEO, accessibility, and performance. When an agent makes a mistake, it receives targeted error feedback to self-correct instantly before deployment.

Ecosystem & Plugins

Extensible by design.
Built for zero-coding app assembly.

Jay plugins bundle pre-tested capabilities, server actions, and contracts into drop-in NPM packages.

AI GuardrailsSEO Validator

Checks jay-html templates for SEO best practices — meta tags, heading hierarchy, canonical URLs, and Open Graph data.

AI GuardrailsAccessibility Validator

Validates templates against WCAG guidelines — image alt text, ARIA roles, keyboard navigation, and semantic HTML.

AI GuardrailsDesign System Validator

Enforces DESIGN.md tokens across your CSS — colors, spacing, typography, contrast ratios, and component structure. Catches brand drift before it ships.

Wix HeadlessWix Stores & Cart

Full e-commerce stack — product catalogs, variant resolution, category browsing, and a complete cart with mini-cart drawer, line-item management, and checkout.

Wix HeadlessWix Members

OAuth authentication with login indicators, protected page guards, and callback handling. Includes server-side member operations and client-side auth state.

Wix HeadlessWix Data

Dynamic contract generation from collection schemas — automatically creates item, list, table, and card pages from your Wix CMS collections.

Wix HeadlessWix Media

Media upload, optimization validation, CDN delivery, and index generation. Ensures every image URL carries proper optimization parameters.

Wix HeadlessWix Deploy

One-click deployment to Wix infrastructure — builds entry points, uploads backend code, and deploys the full application.

Content & UIMarkdown

Three rendering modes — directory-based page generation, static inline rendering, and live dynamic updates. Includes code highlighting, mermaid-to-SVG diagrams, and automatic SEO head tags from frontmatter.

Content & UIUI Kit

Headless UI primitives — popover menus via the Popover API, scroll-snap carousels, clipboard copy with feedback, and word/letter splitting for per-character animation and styling.

Content & UIAIditor Quill

Ready-made add-menu assets and text components for the AIditor visual editor. Provides a catalog of drop-in content blocks.

AI AgentsAIditor

Visual AI-driven code editor — agents create pages, manage plugins, edit live sites, and publish. 30+ server actions covering project info, visual editing, asset management, and deployment.

AI AgentsGemini Agent

Embedded chat agent powered by Gemini with page automation and server action calling. Drops into any page as a headless component.

AI AgentsWebMCP

Automatically exposes page interactions as Model Context Protocol tools, resources, and prompts — connects your site natively to AI agents.

Core Architecture3-Phase Rendering

Slow (data change), Fast (per-request), and Interactive (client) phases split work so pages load in sub-second time with near-zero JavaScript overhead.

Core ArchitectureContract-Driven Assembly

Plugins expose typed contracts — agents and developers wire full-stack features without prop-drilling, custom glue code, or framework-specific knowledge.

Core ArchitectureAgent-Optimized Token Costs

Pre-built, tested packages replace generated boilerplate. Agents reuse established contracts instead of hallucinating integrations, cutting token usage and errors.

Core ArchitectureFile-Based Routing

Directory structure defines routes, dynamic [slug] segments, and page-level contracts. Predictable for developers, trivial for agents to extend.

Core Architecture

The Jay Feedback Loop

Guiding AI to guaranteed, production-ready results through continuous validation and strict boundaries.

Jay Feedback Loop Diagram — showing the self-correcting cycle of AI agents, declarative code, validation, and error feedback

The AI Agent (Generator)

The cycle begins with specialized AI roles (Designer, Developer, or Plugin Developer) reading the explicitly defined contracts and instructions. Because the boundaries are clear, the agent knows exactly what data it has to work with and what it needs to build.

Declarative Code & Logic (Output)

The AI outputs the code, adhering to Jay's strict separation of design and logic.

The AI Designer generates purely declarative, logic-free visual templates (.jay-html), utilizing functionality from plugins.
If custom functionality is needed, the AI Developer outputs the application logic in page.ts. This separation ensures agents can iterate on the UI without ever breaking the backend code.

Validation Engine (Gatekeeper)

Jay doesn't let the AI guess if its code works; it automatically acts as a strict inspection node. The framework evaluates the agent's output using comprehensive tools:

jay-stack validate: Checks for parsing and contract matching errors.
Tag Coverage Report: Analyzes the HTML tree to tell the AI exactly which contract tags were used, which were missed, and if any required tags were omitted.
TypeScript Compiler (TSC): Validates the backend logic against the auto-generated, phase-specific .d.ts types.
Plugin Validation: Ensures consistency between plugin.yaml configurations and component properties.

Errors + Agent-Kit References (Feedback)

If the code fails validation, the system doesn't just output a generic error. It provides an explicit path forward by pointing the agent directly back to the Agent-Kit's ground truth, referencing materialized contracts, the plugins-index.yaml, and specific Agent-Kit guides so the AI can self-correct with exact context.

THE .JAY-CONTRACT

Independent Iteration. Absolute Fidelity.

At the heart of Jay is the .jay-contract, a strict, declarative agreement that allows AI agents to work together without stepping on each other's toes.

Strong typing generated from the contract.
The Designer agent creates Jay HTML files.
The Developer or Plugin Developer agents code the components.
Independent iteration — redesign UI without rewriting backend logic.

ContractJay HTMLTypesComponent
props:
  - name: text
    kind: required
tags:
  - tag: text
    type: data
    dataType: string
    phase: fast+interactive
  - tag: copied
    type: data
    dataType: boolean
    phase: fast+interactive
  - tag: copyBtn
    type: interactive
    elementType: HTMLButtonElement
<!-- nested headless component -->
<jay:clipboard-copy text="...">
  <div class="copy-row">
    <div class="copy-url">
      the text tag renders here
    </div>
    <button ref="copyBtn">
      <span if="!copied">Copy Link</span>
      <span if="copied">Copied!</span>
    </button>
  </div>
</jay:clipboard-copy>
export interface ClipboardCopyViewState 
    text: string;
    copied: boolean;
export interface ClipboardCopyRefs 
    copyBtn: HTMLElementProxy<ClipboardCopyViewState, HTMLButtonElement>;
export interface ClipboardCopyProps 
    text?: string;
export const clipboardCopy = makeJayStackComponent<ClipboardCopyContract>()
    .withProps<ClipboardCopyProps>()
    .withFastRender(async (props) =>
        phaseOutput( text: props.text ?? '', copied: false , ),
    )
    .withInteractive(function ClipboardCopy(props, refs) 
        const [copied, setCopied] = createSignal(false);
        refs.copyBtn.onclick(async () => 
            await navigator.clipboard.writeText(props.text());
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
        );
        return  render: () => ( text: props.text(), copied: copied() ) ;
    );

Defined Agent Roles

Each agent within Jay is fine-tuned for specialized operations in the stack.

Designer

Generates purely declarative, logic-free visual templates by mapping contract data directly to the UI, turning visual references into working designs.

Developer

Builds the full-stack application logic and data flow required to satisfy the strict contracts, completely unburdened from writing HTML or CSS.

Plugin Developer

Packages extensible, reusable business logic and headless components into installable plugins.

DevOps

Manages the deployment lifecycle, overseeing the Two-Server Architecture and caching infrastructure for lightning-fast, zero-downtime updates.

Ecosystem

Plugins

Why force AI to hallucinate complex business logic from scratch? Just like human developers, AI agents favor reusing code.

Reusing battle-tested, pre-packaged capabilities reduces bugs, token costs, and maintenance overhead while improving accuracy and performance. Jay enables this through Plugins - installable NPM packages bundling headless components, server actions, and explicit data contracts.

Zero-Coding Integration: AI agents can drop complex features into a project instantly. The Designer simply maps plugin data contracts directly to the visual UI.
Reducing Non-Functional Risk: Reusing established plugins means your project inherits optimal performance, robust security, and built-in SEO capabilities.
Zero Trust Architecture: Jay executes plugin code safely in an isolated sandbox, ensuring external components can never access the host site's main DOM or secure cookies.

Real-World Value

Claude as a Visual Editor

The Jay AIditor transforms AI interaction into an intuitive "point and shoot" visual experience. Without any complex side-panels or manual selections, you simply point at an element and let the AI execute updates directly on the application / website code.

Near-Perfect Performance

measured on the Jay Onsko Template

Jay is engineered from the ground up to ensure every site ships with minimal bundle sizes, lightning-fast load times, and top-tier Lighthouse scores out of the box.

3-Phase Rendering Pipeline: Strict separation of design and logic yields minimal bundle sizes and smooth 60 FPS performance for flawless SEO.
Automated Guardrails: Built-in AI feedback loops continuously monitor code generation, automatically catching common performance traps and heavy assets before deployment.
Wix Media Optimization (provided by wix-media plugin): Automatic image formatting, responsive sizing, CDN and asset optimization ensure ultra-fast media delivery.

Radically Lower Costs & Maintenance

By reusing secure, pre-packaged code, AI agents avoid re-implementing core logic. This eliminates bugs, security flaws, and performance drops while drastically cutting token costs and maintenance overhead.

Zero-Coding App Assembly

Agents instantly build full-stack apps by dropping in battle-tested Jay Plugins (NPM packages). They map data contracts directly to the visual UI—no manual wiring, prop-drilling, or coding required.

Start Building the AI-Native Web