diff --git a/apps/docs/app/[lang]/page.tsx b/apps/docs/app/[lang]/page.tsx index 398c751017..e91f0bfa75 100644 --- a/apps/docs/app/[lang]/page.tsx +++ b/apps/docs/app/[lang]/page.tsx @@ -1,67 +1,349 @@ import type { Metadata } from 'next'; import Link from 'next/link'; -import { ArrowRight } from 'lucide-react'; +import { ArrowRight, Check } from 'lucide-react'; +import { Bricolage_Grotesque, IBM_Plex_Mono } from 'next/font/google'; import { HomeLayout } from 'fumadocs-ui/layouts/home'; import { baseOptions, gitConfig } from '@/lib/layout.shared'; +const display = Bricolage_Grotesque({ + subsets: ['latin'], + variable: '--font-l-display', +}); + +const mono = IBM_Plex_Mono({ + weight: ['400', '500'], + subsets: ['latin'], + variable: '--font-l-mono', +}); + export const metadata: Metadata = { title: { - absolute: 'ObjectStack — a metadata protocol and TypeScript toolkit for AI-native business apps', + absolute: 'ObjectStack — AI writes the app. ObjectStack is what it writes.', }, description: - 'Describe objects, permissions, workflows, APIs, UI, and AI tools once as typed Zod metadata — ObjectStack derives the TypeScript types, REST API, client SDK, UI, and MCP tools.', + 'The open target format and runtime for AI-written business apps. Agents write compact typed metadata — often ~1% of a traditional codebase — strict TypeScript, Zod, and a validation gate catch mistakes at authoring time, and the runtime derives the database, REST API, UI, and MCP server. Your business ontology as an open protocol.', }; +const VOCABULARY: { tag: string; title: string; copy: string }[] = [ + { tag: 'object', title: 'Objects & fields', copy: 'Typed schemas with relations, validation, formulas, and files.' }, + { tag: 'permission', title: 'Permissions', copy: 'RBAC plus row- and field-level security, enforced by the runtime.' }, + { tag: 'flow', title: 'Automation', copy: 'DAG flows, record triggers, scheduled jobs, and webhooks.' }, + { tag: 'approval', title: 'Approvals', copy: 'Multi-step approval chains with queues and a full audit trail.' }, + { tag: 'view', title: 'Views', copy: 'Lists, kanban boards, calendars, gantt, galleries — declared, not coded.' }, + { tag: 'dashboard', title: 'Dashboards & reports', copy: 'Charts, aggregations, and KPIs bound to live data.' }, + { tag: 'action', title: 'Actions', copy: 'Permission-checked buttons and server operations.' }, + { tag: 'api', title: 'APIs & SDK', copy: 'Generated REST and realtime endpoints with a typed client SDK.' }, + { tag: 'mcp', title: 'AI tools', copy: 'Every object and action doubles as a governed MCP tool.' }, + { tag: 'i18n', title: 'Translations', copy: 'Labels and UI text as metadata, per locale.' }, + { tag: 'seed', title: 'Seed data', copy: 'Fixtures and demo datasets that ship with the app.' }, + { tag: 'driver', title: 'Datasources', copy: 'Postgres, MySQL, SQLite, MongoDB, or in-memory.' }, +]; + +const GATES: { title: string; copy: string }[] = [ + { title: 'Typed', copy: 'Strict TypeScript + Zod — shape errors die in the editor, seconds after the agent writes them.' }, + { title: 'Validated', copy: 'os validate rejects metadata that would fail silently at runtime — before it ships.' }, + { title: 'Reviewed', copy: 'You approve a small readable diff in the Console — not fifty thousand lines of glue.' }, + { title: 'Governed', copy: 'Permissions and audit are enforced by the runtime on every call. Even a wrong app stays inside the fence.' }, +]; + +const STEPS: { num: string; title: string; cmd: string; copy: string }[] = [ + { + num: '01', + title: 'Create a project', + cmd: 'npx create-objectstack my-app', + copy: 'A typed project skeleton — spec, seed data, and the Console already wired.', + }, + { + num: '02', + title: 'Describe the requirement', + cmd: 'claude · os validate ✓', + copy: 'Tell Claude Code what the business needs. It writes compact typed metadata, and the validation gate rejects anything that would fail silently.', + }, + { + num: '03', + title: 'Preview in the browser', + cmd: 'os dev', + copy: 'The Console renders it live — records, boards, dashboards. Requirement changed? Same loop: describe, validate, preview.', + }, +]; + +function DiffLine({ children, plain }: { children: React.ReactNode; plain?: boolean }) { + return ( +
+ + {plain ? ' ' : '+'} + + {children} +
+ ); +} + export default function HomePage() { return ( -
- - Open source · Apache-2.0 - -

- A metadata protocol and TypeScript toolkit for AI-native business apps -

-

- Describe your objects, permissions, workflows, APIs, UI, and AI tools once as typed, - version-controlled Zod metadata. ObjectStack derives the TypeScript types, REST API, - client SDK, UI, and MCP tools from that single definition. -

-
- + {/* blueprint grid backdrop */} +
+
+ + {/* ── hero ─────────────────────────────────────────────── */} +
+
+

+ Open protocol & runtime · Apache-2.0 +

+

+ AI writes the app.{' '} + + ObjectStack is what it writes. + +

+

+ The open target format and runtime for AI-written business apps. Your coding agent + writes models, UI, workflows, and permissions as compact typed metadata — often + around 1% of a traditional codebase — and strict TypeScript, Zod schemas, and a + validation gate catch its mistakes at authoring time. The runtime derives the + database, REST API, UI, and MCP server, and enforces permissions and audit on + every call. +

+
+ + Get started + + + + Documentation + + + GitHub + +
+
+ ~1% code surface + | + Typed, validated, governed + | + Self-host anywhere +
+
+ + {/* the artifact card — requirement → metadata → gate → preview */} +
+
+
+

you → claude code

+

+ “Build an expense approval app for a 50-person team.” +

+
+
+

expense.object.ts

+ {`export const Expense = ObjectSchema.create({`} + {` name: 'expense_request',`} + {` fields: {`} + {` amount: Field.currency({ required: true }),`} + {` status: Field.select({ options: [...] }),`} + {` approver: Field.lookup('sys_user'),`} + {` },`} + {`});`} +
+
+ + + os validate + + + + types · permissions · flows + + + os dev + + Console preview + +
+
+
+ one definition → tables · REST API · Console UI · MCP tools +
+
+
+ + {/* ── 01 · the loop ────────────────────────────────────── */} +
+
+ + 01 · The loop + +
+

+ From requirement to running app +

+
+ {STEPS.map((s) => ( +
+
+ {s.num} +
+
+

{s.title}

+

+ {s.cmd} +

+

{s.copy}

+
+ ))} +
+
+ + {/* ── 02 · four gates ──────────────────────────────────── */} +
+
+ + 02 · The gates + +
+

+ Four gates between the agent and production +

+
+ {GATES.map((g, i) => ( +
+

+ {String(i + 1).padStart(2, '0')} +

+

{g.title}

+

{g.copy}

+
+ ))} +
+
+ + {/* ── 03 · the vocabulary ──────────────────────────────── */} +
+
+ + 03 · The vocabulary + +
+

+ What can it actually build? +

+

+ Point an agent at an empty repo and you get a one-off codebase — every screen + hand-invented, every mistake yours to find at runtime. ObjectStack gives the agent + a vocabulary instead: typed, validated primitives for everything enterprise + software needs. The agent composes the definition; the runtime already knows how to + run it. +

+
+ {VOCABULARY.map((v) => ( +
+ + {v.tag} + +
+ {v.title} + — {v.copy} +
+
+ ))} +
+
- Get started - - + 1,600+ typed schemas + | + 5 database drivers + | + 7 framework adapters + | + MCP built-in +
- Documentation + Browse the full vocabulary in the docs + - - GitHub - -
-

- ObjectStack is the open-source developer framework.{' '} - Need the official hosted runtime with AI built in?{' '} - - Try ObjectOS - - -

-
+ + + {/* ── closing ──────────────────────────────────────────── */} +
+
+

+ Your objects, permissions, and flows are your business ontology — the definition + layer of the AI era should be an open protocol you own.{' '} + + Read why + + +

+

+ Want it governed and hosted, with Build & Ask AI built in?{' '} + + Try ObjectOS + + +

+
+
+ ); } diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index d92fe60df3..16f5cc607a 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -4,10 +4,11 @@ import type { Metadata } from 'next'; export const metadata: Metadata = { title: { - template: '%s | ObjectStack Protocol', - default: 'ObjectStack Protocol', + template: '%s | ObjectStack', + default: 'ObjectStack', }, - description: 'Documentation for the ObjectStack Protocol and runtime.', + description: + 'The open target format and runtime for AI-written business apps — agents write compact typed metadata, the runtime derives the database, API, UI, and MCP server.', icons: { icon: '/logo.svg', },