Getting Started

Start here if you are new to VibeFlui.

VibeFlui renders application UI from a typed schema. A typical page has three small pieces:

• a schema file that describes resource, table, form, actions, and feedback
• an optional registry file for runtime functions and custom components
• a React page that renders FluiKit

Reading order

1. Introduction
2. Installation
3. Basic Setup
4. Simplest Example
5. AI Token Benchmark

What you build first

The first working page renders a users table from static data:

app/users/page.tsx

<FluiKit schema={usersSchema} data={users} />

From there, add a registry when the schema needs custom renderers, action handlers, validators, transformers, options, permissions, messages, hooks, or events.

Next steps

• Learn the full schema shape in Schema.
• Learn registry keys in Registry.
• See full examples in Examples.
• Compare manual React and VibeFlui prompt size in AI Token Benchmark.