Getting Started
The only open-source component library built from the ground up for AI interfaces — with cognitive psychology baked in. MIT licensed, forever free.
What makes Cognivo different?
Every component library gives you buttons, inputs, and modals. Cognivo gives you that plus three layers that don't exist anywhere else:
89 AI-Native Components
Chat interfaces, streaming text, thinking indicators, confidence sliders, agent cards, reasoning trees, evaluation scorecards, workflow builders — purpose-built for AI-first products. Not adapted from generic components. Designed from scratch for LLM outputs, streaming responses, and human-AI interaction patterns.
Streaming Generative UI
AI models don't return finished pages — they stream tokens. Cognivo parses streaming JSON from any LLM and renders live components in real-time. Your AI doesn't just generate text. It generates interactive interfaces: charts, tables, forms, dashboards — as the tokens arrive.
184 Cognitive Biases
Every design decision triggers cognitive biases. Anchoring affects how users perceive prices. Loss aversion drives urgency. Social proof drives adoption. Cognivo is the first design system that maps these biases to components, audits your interfaces for psychological impact, and flags when you cross from persuasion into manipulation.
Installation
Install what you need. All packages work independently or together.
AI Client + Components (most common)
pnpm add @cognivo/core @cognivo/adapter-openai @cognivo/components @cognivo/tokensComponents only
pnpm add @cognivo/components @cognivo/tokensCognitive bias advisor
pnpm add @cognivo/design-advisorStreaming generative UI
pnpm add @cognivo/gen-ui @cognivo/gen-ui-litAdvanced Packages
Cognivo ships 15 packages. Beyond the core set above, these are optional add-ons for SSR, theming, telemetry, LLM tooling, and linting.
| Package | Install | Description |
|---|---|---|
@cognivo/ssr | pnpm add @cognivo/ssr | Server-side render Cognivo components via @lit-labs/ssr. Eliminates FOUC. Learn more |
@cognivo/theme-generator | npx cognivo-theme "warm ocean professional" | CLI + SDK that turns descriptions into token overrides. Learn more |
@cognivo/analytics | pnpm add @cognivo/analytics | Opt-in component telemetry. Captures events from 243 known Cognivo event types. Privacy-first defaults. Learn more |
@cognivo/mcp-server | pnpm add @cognivo/mcp-server | Model Context Protocol server for Claude / Cursor / Windsurf. 12 tools for component, token, pattern, and bias lookup. Learn more |
@cognivo/eslint-plugin | pnpm add -D @cognivo/eslint-plugin | Blocks raw hex, rgba(), fake tokens, and transition: all in component CSS. Learn more |
@cognivo/adapter-openai | pnpm add @cognivo/adapter-openai | Structured-output adapter for generating UI via OpenAI. |
@cognivo/claude-code-skill | pnpm add @cognivo/claude-code-skill | Installs a Cognivo-aware skill into ~/.claude/skills/. Activates with /cognivo. Learn more |
@cognivo/gen-ui | pnpm add @cognivo/gen-ui | Zod schemas + parser for LLM-generated UI trees. |
@cognivo/gen-ui-lit | pnpm add @cognivo/gen-ui-lit | Lit renderer for generative UI trees. |
@cognivo/core | pnpm add @cognivo/core | Framework-agnostic AI client interface. Learn more |
See Packages for detailed docs on each of the add-ons above.
Quick Start: 3 minutes to your first AI interface
Step 1 — Create an AI client
import { ContextBuilder, AiIntent } from '@cognivo/core';
import { OpenAiClient } from '@cognivo/adapter-openai';
const client = new OpenAiClient({ apiKey: process.env.OPENAI_API_KEY });
const context = new ContextBuilder()
.withDataset([{ revenue: 50000, month: 'Jan' }, { revenue: 62000, month: 'Feb' }])
.withIntent(AiIntent.Summarize)
.build();
const result = await client.run(context);Step 2 — Render with components
import '@cognivo/components';
// These just work — no framework required
// <ai-chat></ai-chat>
// <ai-thinking text="Analyzing..."></ai-thinking>
// <ai-result-panel title="Q4 Analysis" confidence="91"></ai-result-panel>
// <cg-button variant="primary">Get Started</cg-button>Step 3 — Stream generative UI (optional)
import { cognivoLibrary, createStreamingParser } from '@cognivo/gen-ui';
import { LitRenderer } from '@cognivo/gen-ui-lit';
const renderer = new LitRenderer(cognivoLibrary);
const parser = createStreamingParser(cognivoLibrary.toJSONSchema());
// AI generates live UI as tokens stream in
for await (const token of llmStream) {
const result = parser.push(token);
if (result.root) renderer.render(result, container);
}Step 4 — Audit with cognitive biases (optional)
import { queryBiases, recommendBiases } from '@cognivo/design-advisor';
// What biases matter for this pricing page?
const biases = queryBiases({ tags: ['pricing', 'conversion'] });
// → Anchoring, Decoy Effect, Loss Aversion, Price-Quality Inference
// Get actionable recommendations
const recs = recommendBiases({
page: 'pricing',
goals: ['increase conversion'],
});Dark Mode
All 184 components and 1,800+ tokens support dark mode. One attribute:
<html data-theme="dark">All --cg-* tokens automatically adapt. Zero additional configuration.