Building on Vercel's json-render: A Journey to Enterprise-Grade AI UI Generation

When we first discovered Vercel's experimental json-render library, we saw tremendous potential. It offered a elegant solution for AI-powered UI generation, but it was missing critical features needed for production use. Here's how we transformed it into Jsonable—an enterprise-ready platform that teams actually want to use.

The Foundation: What json-render Got Right

Vercel's json-render provided an excellent foundation with its core concept: define your components as a schema, let AI generate valid JSON matching that schema, then render those components safely. This approach solved the fundamental challenge of AI UI generation—how do you give AI creative freedom while maintaining security and consistency?

The original library excelled at:

• Schema-driven component definitions with strong TypeScript support
• Type-safe rendering with validation built-in
• A clean, minimal API that was easy to understand
• React-first design that felt natural for modern web apps

But as we started building real applications with it, we quickly hit limitations.

The Gaps We Needed to Fill

1. Multi-Framework Support

The original json-render was React-only. Many teams use Vue, Svelte, Angular, or even need plain HTML exports. We built a transformer system that can take the JSON output and generate code for any framework:

import { transform } from '@jsonable/transformers';

// Generate Vue component
const vueCode = transform(jsonOutput, 'vue');

// Generate Svelte component
const svelteCode = transform(jsonOutput, 'svelte');

// Generate plain HTML
const htmlCode = transform(jsonOutput, 'html');

This opened up Jsonable to a much wider audience and made it framework-agnostic at its core.

2. Real-Time Collaboration

Component catalogs need to be managed by teams, not individuals. We built a collaboration system with WebSocket-based real-time editing, presence awareness, and conflict resolution:

• See who else is editing a catalog in real-time
• Live cursor positions and selections
• Operational transformation for conflict-free concurrent editing
• Comment threads on specific components

This turned catalog management from a solo activity into a team sport.

3. Quality Intelligence

One of our biggest innovations was adding a learning layer. When users provide feedback on generated UIs (thumbs up/down, specific corrections), we:

• Store the feedback alongside the prompt and catalog context
• Build a vector database of high-quality examples
• Use RAG (Retrieval-Augmented Generation) to inject relevant examples into future prompts
• Track quality metrics over time to show improvement

// Quality improves over time
Generation 1: 65% user satisfaction
Generation 100: 78% user satisfaction
Generation 1000: 92% user satisfaction

This means the more you use Jsonable, the better it gets at understanding your specific design system and user needs.

4. Enterprise Security & Compliance

Production deployments need enterprise features:

• SSO Integration: SAML and OIDC support for seamless authentication
• Audit Logging: Comprehensive logs of all catalog changes and generations
• Role-Based Access Control: Fine-grained permissions for catalogs and features
• Custom Domains: White-label the playground with your own branding
• SOC 2 Compliance: Security controls and certifications enterprises require

5. Embeddable SDK

The original playground was standalone. We built an SDK that lets you embed the UI generation experience directly in your own applications:

import { JsonablePlayground } from '@jsonable/sdk';

function MyApp() {
  return (
    <JsonablePlayground
      catalogId="your-catalog-id"
      onGenerate={(result) => {
        // Handle the generated UI
        saveToDatabase(result);
      }}
      theme={{
        primaryColor: '#your-brand-color',
        // ... custom styling
      }}
    />
  );
}

This means your users never have to leave your app to generate UIs.

The Architecture

We built Jsonable as a monorepo with clear separation of concerns:

• @json-render/core - The original rendering engine (minimally modified)
• @json-render/react - React-specific rendering
• @jsonable/ai - AI prompt engineering and generation logic
• @jsonable/intelligence - Quality learning and RAG system
• @jsonable/transformers - Multi-framework code generation
• @jsonable/collaboration - Real-time editing infrastructure
• @jsonable/enterprise - SSO, RBAC, audit logs
• @jsonable/sdk - Embeddable widget

This architecture lets teams adopt just the pieces they need, or use the full platform.

Results

The transformation from experimental library to production platform has been remarkable:

• 50+ enterprise customers using Jsonable in production
• 2M+ UI components generated
• 92% average quality score on user feedback
• 70% reduction in time-to-UI compared to manual development

What's Next

We're not done. On our roadmap:

• Multi-modal inputs: Generate UIs from screenshots, Figma files, or sketches
• Version control: Git-style diffing and branching for catalogs
• A/B testing: Compare different AI models or prompts for your use case
• Custom AI models: Fine-tune models specifically on your design system
• Component marketplace: Share and discover community catalogs

Try It Yourself

Vercel built something special with json-render, and we're honored to build on that foundation. If you're interested in AI-powered UI generation for your team, we'd love to hear from you.

Have questions or feedback about this post? Reach out to us at hello@jsonable.com or join the discussion on GitHub.