code-docs/Overview.md
A configuration-driven web framework built on Next.js. Write YAML, get React apps.
Lowdefy lets developers build web applications using YAML/JSON configuration instead of code. Users define:
The framework compiles this config into a Next.js application at build time.
┌─────────────────────────────────────────────────────────────────────┐
│ User's YAML Config │
│ (lowdefy.yaml, pages/*.yaml, connections, requests, etc.) │
└─────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────┐
│ @lowdefy/build │
│ - Parses YAML/JSON │
│ - Validates against schema │
│ - Resolves _ref imports │
│ - Evaluates build-time operators │
│ - Generates build artifacts │
└─────────────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────┐
│ Next.js Server (runtime) │
│ ┌─────────────────────┐ ┌────────────────────────────────────┐ │
│ │ @lowdefy/api │ │ @lowdefy/client │ │
│ │ - API routes │ │ - React rendering │ │
│ │ - Request exec │ │ - Block mounting │ │
│ │ - Connection mgmt │ │ - Event handling │ │
│ │ - Auth context │ │ - @lowdefy/engine (state) │ │
│ └─────────────────────┘ │ - @lowdefy/layout (grid) │ │
│ └────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘
│
▼
Browser / End User
| Package | Role | Key Responsibility |
|---|---|---|
| lowdefy (cli) | Entry point | Commands: init, dev, build, start |
| @lowdefy/build | Compiler | YAML → build artifacts |
| @lowdefy/api | Server | API routes, request execution |
| @lowdefy/client | Client | React rendering, page context |
| @lowdefy/engine | Runtime | State management, actions |
| @lowdefy/layout | Layout | Grid system, block positioning |
| @lowdefy/operators | Logic | Operator parsing and evaluation |
Lowdefy is extensible via npm packages. Everything the user sees or interacts with comes from plugins.
| Type | What It Does | Examples |
|---|---|---|
| Blocks | UI components | Button, TextInput, Table, Chart |
| Connections | Data source configs | MongoDB, PostgreSQL, REST API |
| Operators | Logic functions | _if, _get, _sum, _date |
| Actions | Event handlers | SetState, Request, Navigate |
| Agents | AI chat providers | Anthropic, OpenAI, Google, AI Gateway |
| Auth Providers | Authentication | Google, Auth0, Credentials |
These ship with Lowdefy and don't need explicit installation:
@lowdefy/blocks-antd - Primary UI components (Ant Design based)@lowdefy/blocks-antd-x - AI chat components (AgentChat, AgentConversations)@lowdefy/blocks-basic - HTML primitives@lowdefy/operators-js - Core JavaScript operators@lowdefy/actions-core - Standard actions@lowdefy/connection-anthropic - Anthropic Claude models@lowdefy/connection-openai - OpenAI GPT models@lowdefy/connection-google - Google Gemini models@lowdefy/connection-ai-gateway - Vercel AI Gateway (multi-provider routing)@lowdefy/connection-mcp - MCP server connectionsSee Plugin System Architecture for internals.
| Phase | When | What Happens |
|---|---|---|
| Build | lowdefy build | Config parsed, validated, compiled to artifacts |
| Runtime | User visits page | Artifacts loaded, operators evaluated, requests executed |
This separation is why Lowdefy apps are fast - heavy YAML parsing happens once at deploy time.
Operators are functions prefixed with _ that make config dynamic:
# Static value
title: Welcome
# Dynamic value using operator
title:
_if:
test:
_eq:
- _state: user.role
- admin
then: Admin Dashboard
else: User Dashboard
Operators can run at:
@lowdefy/build) - for config composition@lowdefy/engine) - for UI reactivity@lowdefy/api) - for request logicEach page has isolated state managed by @lowdefy/engine:
Agents add AI chat capabilities to Lowdefy apps. Defined as a top-level agents: config key, they follow the same type + connectionId + properties pattern as requests. Agents reference connections for AI provider credentials, use API endpoints as tools, and stream responses to the AgentChat block.
See Agent System Architecture for the complete data flow.
Requests are server-side data operations:
@lowdefy/client sends to API route@lowdefy/api executes against connection| Server | Use Case |
|---|---|
server | Production Next.js server for deployments |
server-dev | Local development server with hot reload |
lowdefy/
├── packages/
│ ├── api/ # Server-side API
│ ├── build/ # Config compiler
│ ├── cli/ # CLI tool
│ ├── client/ # React client
│ ├── engine/ # State management
│ ├── layout/ # Grid layout
│ ├── operators/ # Operator framework
│ ├── plugins/ # Plugin packages
│ │ ├── actions/
│ │ ├── blocks/
│ │ ├── connections/
│ │ ├── operators/
│ │ └── plugins/
│ ├── servers/ # Server implementations
│ └── utils/ # Shared utilities
├── packages/docs/ # docs.lowdefy.com content
└── packages/website/ # lowdefy.com content