Varendo

Open source · TypeScript · With or without AI

One intent.
A view that adapts.

Describe your data. Ask a question. Varendo renders the right view for the task and the space, using your components and your rules.

Try the playground Start the quickstart

Try the local demo with synthetic data. The React starter uses the published 0.1.0 packages.

HOW IT WORKS

Describe once. Ask anything the data can answer.

  1. 1 · Describe

    Your data and what it means

    Fields, a measure, and the views you allow. Your app keeps the records and permissions.

    defineResource({
  id: 'people',
  fields: { team: { role: 'dimension' },
            joined: { role: 'time' } },
  measures: { hires: { aggregate: 'count' } },
  presentation: {
    allowedViews: ['table', 'cards', 'trend', 'bar'],
  },
});
  2. 2 · Ask

    A small typed intent

    From a button, your code, a URL, or an AI agent. It never contains HTML, code, or permissions.

    {
  "kind": "analyze",
  "resource": "people",
  "measures": [{ "id": "hires" }],
  "time": { "field": "joined", "grain": "month" }
}
  3. 3 · Adapt

    A view that fits

    Varendo validates the intent, evaluates the permitted data, and picks an allowed view.

    • browseTable, or cards on a phone
    • analyze + timeTrend chart
    • analyze + dimensionsBar chart
    • detailOne record

WORKING EXAMPLES

The same runtime for four kinds of work.

People

Browse, filter, and chart workforce data.

Table · cards · trend Products

Explore a catalog, compare items, and open validated forms.

Grid · detail · form Support

Search tickets, edit state, and confirm business actions.

Queue · editor Knowledge

Search content and move into focused reading layouts.

Results · article

FOR DEVELOPERS

Four questions, four views, one file.

The quickstart renders a table, a filtered table, a monthly trend, and a per-team bar chart from one People resource in about ten minutes. No account, backend, or model key.

React quickstartVite + React 19 Web ComponentsAny framework or none AI agentsMCP, WebMCP, or your model
src/main.tsx
const questions = {
  Everyone: { kind: 'browse', resource: 'people' },
  'Hires per month': {
    kind: 'analyze', resource: 'people',
    measures: [{ id: 'hires', revision: '1' }],
    time: { field: 'joined', grain: 'month' },
  },
};

<AeliqoRegion regionId="people" resourceId="people"
  intent={questions[question]} />

THE BOUNDARY

Agents propose. Your app decides.

  • No generated UI. An agent sends a typed intent, never HTML, code, SQL, or permissions.
  • Your rules. Data, identity, routes, and actions stay in your application.
  • Works without AI. Buttons and code use the same path; invalid requests never render.

See it adapt in your browser.

Open the playground Star on GitHub