AI-Native Semantic UI State Layer
The only UI framework where AI agents can truly understand, reason about, and interact with your interface—not just see pixels.
Turn any form into a machine-readable interface for LLM agents.
AI understands your form's semantic context and can fill fields intelligently
Most form libraries generate UI from schemas. Manifesto does that too—but that's not what makes it special.
The real question: Can your AI agent understand what your form is doing right now?
| Traditional UI | With Manifesto |
|---|---|
| AI sees DOM/pixels | AI gets semantic state |
| "There's an input field" | "This is 'email', it's required, currently invalid, depends on 'accountType'" |
| AI guesses what to do | AI knows exactly what's valid |
Manifesto exports the complete semantic context—values, rules, dependencies, validation state, available transitions—in a structure AI can reason about.
- 🧠 Semantic State Export — AI agents get full context, not just rendered output
- 📝 Schema-First — Define forms as data. Perfect for AI to generate and modify
- 🔌 Framework Agnostic — React, Vue, or bring your own
- ⚡ Reactive — Automatic dependency tracking and conditional updates
- 🔒 Secure DSL — Expression language with whitelisted operators, no
eval() - 📘 Type-Safe — Full TypeScript support
This is what makes Manifesto different from every other form library.
Traditional UIs are opaque to AI. An agent looking at a form sees:
- DOM elements or pixels
- No understanding of business rules
- No knowledge of what actions are valid
- No way to predict consequences
import { createFormRuntime } from '@manifesto-ai/engine'
import { createInteroperabilitySession } from '@manifesto-ai/ai-util'
const runtime = createFormRuntime(productView, { entitySchema: productEntity })
const session = createInteroperabilitySession({ runtime, viewSchema: productView, entitySchema: productEntity })
// Export complete semantic state
const snapshot = session.snapshot()What the AI receives:
{
"fields": {
"email": {
"value": "",
"type": "string",
"required": true,
"visible": true,
"disabled": false,
"validation": { "valid": false, "errors": ["Required field"] },
"constraints": { "pattern": "^[a-zA-Z0-9._%+-]+@..." }
},
"country": {
"value": "US",
"dependents": ["state", "zipCode"],
"options": [...]
}
},
"availableActions": ["submit", "reset", "setValue"],
"formState": { "dirty": false, "valid": false, "submitting": false }
}import { toToolDefinitions } from '@manifesto-ai/ai-util'
// Auto-generate OpenAI/Claude function calling schemas
const tools = toToolDefinitions(snapshot, { omitUnavailable: true })
// AI can now call: setValue({ field: "email", value: "user@example.com" })| Scenario | How Manifesto Helps |
|---|---|
| Auto-fill forms | AI reads field semantics, fills with contextually appropriate values |
| Form validation assistance | AI understands constraints, suggests fixes for invalid inputs |
| Guided workflows | AI knows current step, available transitions, required fields |
| Accessibility agents | AI navigates forms semantically, not by pixel coordinates |
| Testing automation | Generate test cases from semantic structure |
| Schema generation | AI creates new form schemas from natural language |
// 1. AI receives semantic snapshot
const snapshot = session.snapshot()
// 2. AI reasons about the form
// "I see 'shippingAddress' is required and empty.
// 'productType' is 'PHYSICAL', so shipping fields are visible.
// I should fill the address fields."
// 3. AI dispatches validated actions
session.dispatch({ type: 'setValue', field: 'shippingAddress', value: '123 Main St' })
// 4. Session validates before applying
// If action is invalid, it's rejected with explanation→ AI Utility Package | Full Documentation
# Core
pnpm add @manifesto-ai/schema @manifesto-ai/engine
# Choose your framework
pnpm add @manifesto-ai/react # or @manifesto-ai/vueimport { entity, field, view, section, viewField, layout } from '@manifesto-ai/schema'
// Data model
const productEntity = entity('product', 'Product', '1.0.0')
.field(field.string('name').label('Product Name').required())
.field(field.number('price').label('Price').min(0))
.field(field.enum('category', [
{ value: 'electronics', label: 'Electronics' },
{ value: 'clothing', label: 'Clothing' },
]).label('Category'))
.build()
// UI layout
const productView = view('product-form', 'Create Product', '1.0.0')
.entityRef('product')
.layout(layout.form())
.section(
section('basic')
.title('Basic Info')
.field(viewField.textInput('name', 'name'))
.field(viewField.numberInput('price', 'price'))
.field(viewField.select('category', 'category'))
)
.build()React:
import { FormRenderer } from '@manifesto-ai/react'
import '@manifesto-ai/react/styles'
<FormRenderer
schema={productView}
entitySchema={productEntity}
onSubmit={(data) => console.log(data)}
/>Vue:
<script setup>
import { FormRenderer } from '@manifesto-ai/vue'
import '@manifesto-ai/vue/styles'
</script>
<template>
<FormRenderer
:schema="productView"
:entity-schema="productEntity"
@submit="console.log"
/>
</template>Safe, array-based expressions for dynamic behavior:
// Conditional visibility
{ hidden: ['==', '$state.productType', 'DIGITAL'] }
// Complex conditions
{ disabled: ['AND',
['==', '$state.status', 'PUBLISHED'],
['!=', '$user.role', 'ADMIN']
]
}
// Reactive field updates
viewField.select('city', 'city')
.dependsOn(['country'])
.reaction(
on.change().do(
actions.setOptions('city', dataSource.api({
endpoint: '/api/cities',
params: { country: '$state.country' }
}))
)
)┌─────────────────────────────────────────────────────────────────┐
│ Schema Definition │
│ Entity Schema View Schema Action Schema │
│ (Data Model) (UI Layout) (Workflows) │
└──────────────────────────────┬──────────────────────────────────┘
▼
┌─────────────────────────────────────────────────────────────────┐
│ @manifesto-ai/engine │
│ Evaluator ─── Tracker ─── Runtime ─── Loader │
│ (Expressions) (Dependencies) (State) (Schema) │
└──────────────────────────────┬──────────────────────────────────┘
│
┌─────────────────────┼─────────────────────┐
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────────┐
│ @manifesto-ai/ │ │ @manifesto-ai/ │ │ @manifesto-ai/ │
│ react │ │ vue │ │ ai-util │
│ ─────────────── │ │ ─────────────── │ │ ─────────────────── │
│ useFormRuntime │ │ useFormRuntime │ │ Semantic Snapshot │
│ FormRenderer │ │ FormRenderer │ │ Tool Definitions │
└─────────────────┘ └─────────────────┘ └─────────────────────┘
| Package | Description |
|---|---|
@manifesto-ai/schema |
Schema types, builders, validators |
@manifesto-ai/engine |
Core runtime engine |
@manifesto-ai/ai-util |
AI interoperability utilities |
@manifesto-ai/react |
React bindings |
@manifesto-ai/vue |
Vue bindings |
Getting Started
Schema Reference
Guides
| 🎮 Playground | Edit schemas, preview forms, chat with AI |
| 📚 React Storybook | Component gallery |
| 📚 Vue Storybook | Component gallery |
Local:
pnpm playground # Interactive playground
pnpm storybook:react # React components
pnpm storybook:vue # Vue componentspnpm install # Install dependencies
pnpm build # Build all packages
pnpm test # Run testsRequirements: Node.js ≥ 20, pnpm ≥ 9
See CONTRIBUTING.md
MIT