mdxui

Vibe Code Your One-Person Unicorn Into Reality

Stop wiring primitives. Start declaring businesses.

Traditional components are buttons, forms, and cards. But your business isn't made of buttons—it's made of Agents, Services, Workflows, and Integrations.

mdxui lifts the abstraction to where your business actually lives.

<Startup name="Acme Analytics" domain="acme.analytics" />
<Agent name="DataAnalyst" role="Analyze metrics and generate insights" />
<Service name="Analytics API" endpoints={[track, identify, query]} />
<Dashboard metrics={[mrr, churn, nps]} />

Each component deploys real infrastructure. Type-safe. Auto-wired. Production-ready.

Installation

npm install mdxui

Why mdxui?

Build at the Speed of Thought

Write what you mean, not how to build it:

// Instead of wiring auth, billing, dashboards, APIs...
<SaaS
  name="My Product"
  pricing={[free, pro, enterprise]}
  features={[analytics, exports, integrations]}
/>

// Instead of building agent frameworks from scratch...
<Agent
  name="CustomerSuccess"
  role="Handle support tickets and escalate when needed"
  tools={[searchDocs, createTicket, escalateToHuman]}
/>

One Interface, Many Implementations

mdxui defines the what. Template packages provide the how:

• @mdxui/beacon — Marketing sites, landing pages, docs
• @mdxui/cockpit — SaaS dashboards, admin panels, developer portals

Same props. Different designs. Swap templates without changing content.

AI-Native by Design

Every schema includes .describe() for AI consumption. LLMs understand your components:

// AI can generate valid props from natural language
const heroProps = await ai.generate(HeroPropsSchema, "A bold hero for a developer tool")

Component Types

Domain Components

Components that represent entire business models, not UI widgets:

<Startup />     // Venture-backed company with billing, auth, dashboards
<Agency />      // Service business with clients and projects
<Marketplace /> // Multi-sided platform with buyers and sellers
<SaaS />        // Software-as-a-Service with subscriptions
<Platform />    // Developer platform with APIs and SDKs

Agent Components

AI-native primitives that execute business logic autonomously:

<Agent />       // AI agent with tools and capabilities
<Workflow />    // Multi-step automated process
<Function />    // Serverless function execution
<Trigger />     // Event-driven automation

Service Components

Services-as-Software that connect and compose seamlessly:

<API />         // REST/GraphQL API endpoint
<Integration /> // Third-party service connection
<Webhook />     // Event-driven notification
<MCP />         // Model Context Protocol server

Site Components

Build marketing sites, landing pages, blogs, and documentation:

import type { SiteComponents } from 'mdxui'

const components: SiteComponents = {
  // Layout
  Site, Header, Footer, LandingPage, Page,

  // Sections
  Hero, Features, Pricing, Testimonials, CTA, FAQ,

  // Content
  Blog, BlogPost, Docs, DocsPage,
}

14 site types optimized for specific use cases: Marketing, Docs, Blog, Directory, Marketplace, Community, Portfolio, Personal, Event, Story, API, Agent, Agency, Platform.

App Components

Build SaaS dashboards, admin panels, and developer portals:

import type { AppComponents } from 'mdxui'

const components: AppComponents = {
  // Layout
  App, Shell, Sidebar, Header, Dashboard, Settings,

  // Developer features (auto-wire to Platform.do collections)
  APIKeys, Webhooks, Usage, Team, Billing,
}

17 app types with pre-configured views: Dashboard, Developer, Admin, SaaS, Data, Headless, CRM, Booking, Support, Agency, Ops, Agent, Workflow, Infra, Platform, ClientPortal, VibeCode.

Auto-Wiring

Components marked with @autowire automatically query Platform.do collections:

// Blog component auto-fetches from 'posts' collection
<Blog />

// APIKeys component auto-fetches from 'apiKeys' collection
<APIKeys />

No manual data fetching. No prop drilling. Just declare what you need.

Runtime Validation

Every component has a Zod schema for runtime validation:

import { HeroPropsSchema, DashboardPropsSchema } from 'mdxui/zod'

// Validate props at runtime
const result = HeroPropsSchema.safeParse(props)
if (!result.success) {
  console.error(result.error)
}

// Generate TypeScript types
type HeroProps = z.infer<typeof HeroPropsSchema>

Exports

// Type interfaces
import type { SiteComponents, AppComponents } from 'mdxui'

// Component props
import type { HeroProps, DashboardProps, AgentProps } from 'mdxui'

// Common types
import type { Component, CTA, NavItem, ThemeMode } from 'mdxui'

// Zod schemas for validation
import { HeroPropsSchema, DashboardPropsSchema } from 'mdxui/zod'

// Auto-wiring configuration
import { siteAutoWiring, appAutoWiring } from 'mdxui'

MDXLiveRenderer

Real-time MDX preview for live editing experiences:

import { MDXLiveRenderer } from 'mdxui'

<MDXLiveRenderer
  content={mdxContent}
  components={siteComponents}
  debounceMs={300}
  loadingComponent={<Spinner />}
  errorComponent={({ error }) => <ErrorMessage error={error} />}
/>

Security Note

MDXLiveRenderer uses dynamic code evaluation for real-time preview. Safe for admin panels and development tools. Not recommended for user-submitted content without sandboxing. See Security Considerations below.

Ecosystem

mdxui is the foundation for building one-person unicorns:

| Tool | Purpose | |------|---------| | mdxui.dev | Documentation and playground | | schema.org.ai | Define your domain with semantic schemas | | Platform.do | Deploy business logic as code | | Agents.do | Hire AI agents | | Services.Studio | Design AI services | | SaaS.Studio | Build your SaaS | | Startups.Studio | Launch your unicorn |

Security Considerations

The MDXLiveRenderer component uses new Function() for real-time MDX preview.

Safe for:

• Admin panels with authenticated users (e.g., Platform.do)
• Development tools and local preview
• Internal applications with trusted content

Not safe for:

• User-submitted content without sandboxing
• Public-facing applications rendering untrusted MDX
• Environments with strict CSP (requires script-src 'unsafe-eval')

Type Validation Notes

Some Zod schemas use z.any() for React-specific types (children, components, event handlers) that cannot be validated at runtime. Type safety for these fields is enforced at compile time via TypeScript.

Documentation

Full documentation at mdxui.dev

License

MIT © MDX.org.ai