DrawIA — Generative UI Engine for LLMs

DrawIA 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.

Features

• Progressive NDJSON rendering powered by StreamParser and RendererCore.
• Structural diff engine with deterministic hashing and prop change summaries.
• UIRegistry to register components on demand.
• BlockErrorBoundary, configurable placeholders, and block-level error notifications.
• LLMAdapter, PromptBuilder, and StreamingTransport for the AI integration layer.

Installation

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.

Quick Start

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.

Recommended Flow

1. Craft a prompt using PromptBuilder, 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.
3. Document your changes clearly and include examples or screenshots.

License

MIT © 2025 — DrawIA