Jay

Guiding AI to guaranteed, production-ready results.

Jay is a self-correcting visual ecosystem for AI-native web development. It bridges the gap between probabilistic AI outputs and deterministic engineering standards through a development-time feedback loop that validates agent actions, promotes smart code reuse, and ensures code is production-ready before deployment.

The Feedback Loop

Jay doesn't let AI guess if its code works. The framework automatically validates every output:

1. AI agents (Designer, Developer, Plugin Developer) read explicit contracts and instructions to know exactly what to build
2. Declarative output — designers generate logic-free templates (.jay-html), developers write application logic (page.ts), with strict separation between the two
3. Validation engine — jay-stack validate, tag coverage reports, TypeScript type checking, and plugin validation catch errors immediately
4. Context-rich feedback — failures point the agent back to contracts, the plugins index, and agent-kit guides so it can self-correct
5. Plugins — inject new capabilities and validation rules, making the loop smarter as the project scales

AI Agent Roles

• AI Designer — Generates declarative, logic-free visual templates (.jay-html) by mapping contract data to UI
• AI Developer — Builds full-stack application logic and data flow (page.ts) against strict contracts, without writing markup
• AI Plugin Developer — Packages reusable business logic and headless components into installable plugins
• AI DevOps — Manages deployments via the two-server architecture, pre-compiled builds, and caching infrastructure

Key Concepts

Jay is the minimal client-side runtime (~1,200 lines) — contracts, fine-grained reactivity, and secure sandboxing. Jay Stack is the full-stack framework built on top — three-phase rendering, dev server, production builds, and plugins. Most users work with Jay Stack.

The Contract

At the heart of Jay is the .jay-contract — a YAML agreement that decouples design from code. It defines the exact schema of a component: data tags, interactive elements, and variant states.

# counter.jay-contract
name: counter
tags:
  - tag: count
    dataType: number
  - tag: adderButton
    type: interactive
    elementType: HTMLButtonElement
  - tag: subtracter
    type: interactive
    elementType: HTMLButtonElement

The contract compiles to TypeScript types. The AI Designer uses it to build the UI:

<div>
  <button ref="subtracter">-</button>
  <span>{count}</span>
  <button ref="adder-button">+</button>
</div>

The AI Developer codes against the generated types — no HTML, no CSS:

import { render, CounterElementRefs } from './counter.jay-html';
import { createSignal, makeJayComponent, Props } from '@jay-framework/component';

function CounterConstructor({ initialValue }: Props<CounterProps>, refs: CounterElementRefs) {
  const [count, setCount] = createSignal(initialValue);
  refs.subtracter.onclick(() => setCount(count() - 1));
  refs.adderButton.onclick(() => setCount(count() + 1));
  return { render: () => ({ count }) };
}

export const Counter = makeJayComponent(render, CounterConstructor);

Either side can iterate independently — the designer can redesign the UI without the developer changing a line of logic.

Three-Phase Rendering

Jay Stack's full-stack framework renders in three phases for optimal performance:

1. Slow (build time / SSG) — static content, pre-rendered at build
2. Fast (request time / SSR) — per-request data, server-rendered
3. Interactive (client-side) — reactive updates in the browser

export const page = makeJayStackComponent<PageContract>()
  .withProps<PageProps>()
  .withSlowlyRender(async (props) => {
    return phaseOutput({ title: 'My Page' }, {});
  })
  .withFastRender(async (props, carryForward) => {
    return phaseOutput({ dynamicData: await fetchData() }, {});
  })
  .withInteractive((props, refs, viewState) => {
    return { render: () => ({ liveCount: count() }) };
  });

Plugins

AI agents favor reusing code over generating logic from scratch. Jay plugins are NPM packages that bundle headless components, server actions, and contracts:

• Zero-coding integration — drop complex features (storefronts, auth, CMS) into a page instantly
• Reduced risk — inherit performance, security, and SEO from battle-tested packages
• Zero trust architecture (in development) — plugin code runs in an isolated sandbox

Available Plugins

Current list — more plugins are in development.

Jay Framework (packages/plugins/)

Plugin	Package	Description
ui-kit	@jay-framework/ui-kit	Headless UI components — popover menu, scroll carousel, clipboard copy, word/letter split for text animation
gemini-agent	@jay-framework/gemini-agent-plugin	AI chat agent powered by Gemini with page automation capabilities
webmcp	@jay-framework/webmcp-plugin	Web-based MCP (Model Context Protocol) bridge
a11y-validator	@jay-framework/a11y-validator	Accessibility validation rules for jay-html pages
seo-validator	@jay-framework/seo-validator	SEO validation rules for jay-html pages

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗