<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]} />

// 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]}
/>

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

<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 />       // AI agent with tools and capabilities
<Workflow />    // Multi-step automated process
<Function />    // Serverless function execution
<Trigger />     // Event-driven automation

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

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,
}

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,
}

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

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

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>

// 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'

import { MDXLiveRenderer } from 'mdxui'

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