Generative UI engine for NDJSON streams rendered in React.
npm install drawia-coreDrawIA is a React-based engine designed to render AI-generated interfaces in real time. It consumes NDJSON streams, applies a lightweight diff engine, supports dynamic placeholders, and exposes utilities for prompts, validation, and streaming transport.
StreamParser and RendererCore.UIRegistry to register components on demand.BlockErrorBoundary, configurable placeholders, and block-level error notifications.LLMAdapter, PromptBuilder, and StreamingTransport for the AI integration layer.``
npm install drawia-core
pnpm add drawia-core
yarn add drawia-core
> Requires Node.js >= 20.19 (22.12+ recommended) to work with Vite 7.
`
import { RendererCore, defaultRegistry } from 'drawia-core'
import { LLMAdapter, StreamingTransport } from 'drawia-core'
defaultRegistry.register('card', CardComponent)
const renderer = new RendererCore()
const transport = new StreamingTransport()
transport.fromFetch(
{ url: '/api/stream-dashboard' },
{
onBlock: (block) => renderer.feed(${JSON.stringify(block)}\n),
onDone: () => renderer.finish(),
},
)
renderer.subscribe((snapshot) => {
snapshot.entries.forEach((entry) => {
const element = renderer.renderBlock(entry)
// render the element in React
})
})
`
See src/App.tsx for a full example with preconfigured placeholders and streaming simulation.
, defining components, props, and constraints.
2. Send it to your LLM and normalize the response with LLMAdapter (JSON/array/NDJSON).
3. Stream the blocks via StreamingTransport (Fetch streaming or SSE).
4. RendererCore ingests the blocks, applies diffs, and exposes React-ready snapshots.Scripts
- pnpm dev: development environment.
- pnpm build: compile TypeScript + bundle with Vite.
- pnpm lint: run ESLint.Roadmap
- Direct integrations with popular LLM APIs (OpenAI, Anthropic, etc.).
- Smart layout / adaptive grid engine.
- Visual playground for prompts and streaming demos.
- Additional connectors (REST, Supabase, DuckDB WASM).Contributing
1. Fork the repo and create a feature branch.
2. Run pnpm lint and pnpm build` before submitting PRs.