Agents that answer with apps.

Live demo

Ask for a plan. Watch the cards appear.

Pick a prompt. The agent streams a reply, then generates cards one by one into the feed. Tick the checklist, use the form, and open “Spec” on any card to see the data the agent emitted.

This is a scripted demo. No AI model runs and nothing is sent over the network: every reply, card and number is written into arco.js and played back. The card specs are illustrative, shaped after the kosmic-app-cards prototype types. Numbers and places are made up.

Components

Cards an agent can generate

Nine block types have a schema in the kosmic-app-cards prototype. Each one below is drawn from its own spec by the same small renderer the demo uses, in Arco dark tokens. The type names are the real ones.

• weatherCard prototype

  The only block with a React component in kosmic-app-cards: current conditions and a forecast, with 14 condition names. Source: src/blocks/WeatherCard.

• taskCard, statCard, calendarCard, musicPlayerCard, codeBlock, terminalBlock, textBlock, formBlock prototype

  Each has a type and a Zod schema. taskCard and statCard also have a registry entry with a prompt description and an example, but their renderer there is a placeholder that returns nothing. The cards above are this page's own CSS drawings of those specs.

• StatCards, CalendarSchedule, MediaCards prototype

  The Tier 2 block names in the Arco docs for the Kosmos shell, next to tool result panels. They run through OpenUI Lang today; the chat library has cards, charts, forms, tabs and follow-ups.

Sources: kosmic-app-cards src/types/blocks.ts, src/registry/*.ts; docs.kosmos.computer reference/component-tiers and guide/generative-blocks; Kosmos docs/rich-content-widgets-plan.md. The sources show no table block.

Generation

How agents generate UI

The agent never writes HTML or CSS. It emits data for blocks it was told about, the data is checked, and a renderer turns it into a card. Tokens do the rest, so every card looks like it belongs. This is the flow in the Arco docs.

1. 1

   Prompt prototype

   The allowed vocabulary is generated for the target surface. In kosmic-app-cards, generateSystemPrompt() builds it from the registry. In the Kosmos prototype the prompts are still hand-maintained files.

2. 2

   Emit available

   The agent streams OpenUI Lang in an openui-lang fence, or returns block JSON. Fences render while streaming in the Kosmos chat.

3. 3

   Validate prototype

   Zod schemas check and repair output (safeValidateBlock). The Kosmos chat path has no render-time validation yet.

4. 4

   Render prototype

   Each node resolves through a registry to a component: KosmicSurface in the cards library, AssistantBlock and AppSurface in Kosmos.

5. 5

   Persist prototype

   Ephemeral blocks stay in the chat. A durable one becomes an app through app_create.

import { KosmicSurface } from '@kosmos/app-cards';
import '@kosmos/app-cards/styles';

const schema = {
  id: 'weather-surface',
  blocks: [{
    id: 'weather-sf',
    type: 'weatherCard',
    location: 'San Francisco',
    current: { temp: 72, condition: 'sunny' },
  }],
};

<KosmicSurface schema={schema} />

defineBlock({
  type: "statCards",
  schema: z.object({ /* ... */ }),
  description: "Grid of KPI stat cards...",
  adaptivity: {
    inputProfiles: ["pointer", "touch"],
    minWidth: 220,
    idealColumns: { compact: 1, medium: 2, expanded: 4 },
    onCompact: "stack",
  },
  examples: [ /* golden samples */ ],
  render: (props) => <StatCards {...props} />,
});

Sources: docs.kosmos.computer guide/generative-blocks, reference/block-registry and reference/standards-map; kosmic-app-cards src/index.ts, src/registry/registry.ts; Kosmos docs/rich-content-widgets-plan.md (verified 5 Jul 2026 in that file). Arco says it defines the generative UI language, component vocabulary and tokens, and adopts MCP, ACP and JSON Schema.

Libraries and SDK

What is in the box

Arco is organised in four tiers. Names are from the Kosmos prototype repository and the docs.

• Tier 0: Tokens prototype

  CSS custom properties --arco-*, switched with html[data-theme]. Installed apps get them as --os-*.

  src/styles/tokens.css

• Tier 1: Primitives prototype

  Button, Input, Switch, Badge, Chip, EmptyState, plus Avatar and PasswordInput in the folder. BEM classes such as .arco-btn--primary. Agents never generate these directly.

  src/components/ui/

• Patterns prototype

  MasterDetail, Section with FormRow and FormActions, SettingsLayout, ModuleDashboard, NavSidebar, ListItem, PreviewPane and more.

  src/components/patterns/

• Tier 2: Blocks prototype

  Data-driven composites the AI assembles: StatCards, CalendarSchedule, MediaCards. Chat blocks in the repo: AgentTodoCard, AgentActionBlock, AgentThoughtBlock, AgentStatusLine, TurnMeter.

  src/components/agent-blocks/

• Tier 3: Containers prototype

  AppShell slots, WindowFrame, MobileShell, AppSurface (generated reactive app host) and GeneratedSurface (inline chat host).

  src/os/, src/apps/appview/

• Block registry planned

  The defineBlock contract above, with Zod validation, generated prompts and a Design System workspace as living catalogue.

  docs: reference/block-registry

• @kosmos/app-cards prototype

  A separate package for cards in agent conversations: KosmicSurface, a registry, nine Zod schemas, --kosmic-* tokens, one finished block. MIT in its package.json. Its OpenHands extension scaffold is not built.

  kosmic-app-cards (one commit)

• Kosmos SDK available

  @kosmos-computer/sdk and @kosmos-computer/types, MIT. Streams typed AgentEvents from a Kosmos environment, including os_ui events that the shell draws with Arco. Whether it is on npm was not checked.

  kosmos-sdk, docs: sdk/*

• App Bridge SDK prototype

  For third-party apps running inside the shell, talking to it by postMessage.

  packages/app-sdk in Kosmos

• OpenUI Lang available

  The renderer Arco uses today: @openuidev/lang-core, react-lang and react-ui, third-party packages the Kosmos prototype depends on.

  docs: guide/generative-blocks

Licences: the SDK is MIT; the Kosmos and docs repositories have no licence file in the archive. Kosmos and Arco are separate things: Kosmos is the OS, Arco is the library inside it.

Design tokens

One set of tokens, dark and light

Every shell and Arco surface reads --arco-* variables, never raw hex in new code. These swatches are the values from tokens.css (dark) and the archive's style catalogue (light). The accent is #7c9dff in dark.

.my-panel {
  background: var(--arco-bg-surface);
  color: var(--arco-text-primary);
  border: 1px solid var(--arco-border);
  border-radius: var(--arco-radius-m);
  padding: var(--arco-space-l);
}

Sources: Kosmos src/styles/tokens.css; docs: guide/design-tokens; archive docs/kosmos-computer-archive.md.

Sources: Kosmos src/os/* (WindowFrame.tsx, Dock.tsx, MobileShell.tsx, pinnedApps.ts), docs: reference/component-tiers.

Get started

Get started

npm install
npm run setup   # first run
npm run dev     # shell :4610 + API :4600

npm install @kosmos-computer/sdk

import { KosmosClient } from "@kosmos-computer/sdk";

const kosmos = new KosmosClient({
  baseUrl: process.env.KOSMOS_URL!,
  token: process.env.KOSMOS_TOKEN!,
});
await kosmos.ping();
const result = await kosmos.chat.complete({
  message: "What can you help me with?",
  mode: "ask",
});