You: "Create a sales agent that qualifies leads, sends emails, and books meetings"

Vibecode generates:
---
$context: https://schema.org.ai
$type: Agent
$id: https://agents.do/sales-bot
name: Sales Bot
capabilities: [qualify, email, book]
---

# {name}

An AI sales assistant that qualifies leads and books meetings.

import { scoreLeads } from './qualify/score-leads'
import { sendEmail } from 'https://functions.do/email'
import { bookMeeting } from 'https://functions.do/calendar'

export async function qualify(lead: Lead): Promise<Qualification> {
  const score = await scoreLeads(lead)
  if (score > 80) {
    await sendEmail(lead, 'high-intent')
    await bookMeeting(lead)
  }
  return { score, qualified: score > 80 }
}

<Tools display="rows" />
<Prompts display="cards" />

┌─────────────────────────────────────────────────────┐
│  Phase 1: Planning                                   │
│  - Identify $type (what Noun)                        │
│  - Determine $id (URL identity)                      │
│  - Plan imports and exports                          │
├─────────────────────────────────────────────────────┤
│  Phase 2: Schema                                     │
│  - Generate/extend Noun schema if needed             │
│  - Define Verb grammar for actions                   │
├─────────────────────────────────────────────────────┤
│  Phase 3: MDXLD Generation                           │
│  - Frontmatter ($context, $type, $id, properties)    │
│  - Content (Markdown prose)                          │
│  - Code (exported functions)                         │
│  - Components (JSX for rendering)                    │
├─────────────────────────────────────────────────────┤
│  Phase 4: Validation                                 │
│  - Zod schema validation                             │
│  - TypeScript type checking                          │
│  - Import resolution verification                    │
├─────────────────────────────────────────────────────┤
│  Phase 5: Complete                                   │
│  - Persist to db.sb                                  │
│  - Immediately available via Worker Loader           │
│  - Multi-target rendering ready                      │
└─────────────────────────────────────────────────────┘

import { qualify } from './qualify'           // Relative URL
import { sendEmail } from 'https://functions.do/email'  // Absolute URL
import { LeadSchema } from '@/nouns/Lead'     // Namespace alias

┌─────────────────────────────────────────────────────────────────┐
│                        ui/apps/vibecode                         │
│  React + Vite + @mdxui/primitives + dynamic themes                    │
│  (Chat, URL Editor, Tree Navigator, Multi-target Preview)      │
└─────────────────────────────────────────────────────────────────┘
                              │ WebSocket
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    workers/vibecode                             │
│  ┌─────────────────────┐    ┌─────────────────────────────┐    │
│  │  Durable Object:    │    │  AI Gateway                  │    │
│  │  CodeGeneratorAgent │───▶│  - Cloudflare AI (primary)   │    │
│  │  (phased generation)│    │  - OpenRouter (frontier)     │    │
│  └─────────────────────┘    └─────────────────────────────┘    │
│             │ RPC                                               │
│             ▼                                                   │
│  ┌─────────────────────┐    ┌─────────────────────────────┐    │
│  │  env.DB (service)   │───▶│  workers/db                  │    │
│  │  - sessions         │    │  - ClickHouse + Payload      │    │
│  │  - generated MDXLD  │    │  - Multi-tenant namespaces   │    │
│  └─────────────────────┘    └─────────────────────────────┘    │
│             │                                                   │
│             ▼                                                   │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │  Worker Loader - dynamic isolate execution               │   │
│  │  (generated Workers, Functions, Agents run here)         │   │
│  └─────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  URL Bar: https://agents.do/sales-bot                       │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────────────────────────────┐   │
│  │ URL Tree    │  │ MDXLD Editor (Monaco)               │   │
│  │             │  │                                     │   │
│  │ agents.do   │  │ ---                                 │   │
│  │ ├─ /        │  │ $type: Agent                        │   │
│  │ ├─ sales-bot│  │ $id: https://agents.do/sales-bot    │   │
│  │ │  ├─ /     │◀─│ name: Sales Bot                     │   │
│  │ │  ├─ qualify│ │ ---                                 │   │
│  │ │  ├─ email │  │                                     │   │
│  │ │  └─ book  │  │ # {name}                            │   │
│  │ └─ support  │  │                                     │   │
│  │             │  │ import { qualify } from './qualify' │   │
│  └─────────────┘  └─────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Preview: [HTML] [Markdown] [MCP] [JSON] [Slides]    │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

interface VibecodeSession {
  id: string
  status: 'active' | 'completed' | 'failed'
  phase: 'planning' | 'schema' | 'mdxld' | 'validation' | 'complete'

  targetType: string        // Noun type ($type)
  targetUrl: string         // $id URL
  targetCollection: string  // db.sb collection

  messages: Message[]       // Conversation history
  output?: MdxldDocument    // Generated MDXLD
}

---
$type: Noun
$id: https://nouns.do/invoice
name: Invoice
---

# Invoice

A financial document for billing.

export const schema = {
  type: 'object',
  properties: {
    number: { type: 'string' },
    amount: { type: 'number' },
    currency: { type: 'string', default: 'USD' },
    status: { enum: ['draft', 'sent', 'paid', 'overdue'] },
    customer: { $ref: 'https://nouns.do/customer' },
    lineItems: {
      type: 'array',
      items: { $ref: 'https://nouns.do/line-item' }
    }
  }
}

You: "Create an invoice for Acme Corp for $5,000 for consulting services"

Vibecode generates an Invoice MDXLD with proper schema validation.

You are planning an MDXLD document.

Given the user's request, determine:
1. $type - What Noun type (check existing nouns or define new)
2. $id - The URL for this entity
3. $context - The schema namespace (default: https://schema.org.ai)
4. imports - What URLs this will import from
5. exports - What functions/components this will export

Consider:
- Does this Noun already exist? Check the nouns collection.
- What is the canonical URL for this entity?
- What existing functions/components can be reused via imports?
- What new capabilities need to be created?

Output a structured plan in JSON.

You are defining or extending a Noun schema.

If the $type doesn't exist in the nouns collection:
1. Define the JSON Schema for the Noun
2. Generate the TypeScript interface
3. Create the Zod validation schema

If extending an existing Noun:
1. Show the schema delta (new/modified properties)
2. Ensure backwards compatibility
3. Bump the schema version

Follow schema.org.ai conventions where applicable.
Output the complete schema definition.

You are generating an MDXLD document.

Structure your output as:

---
$context: {context}
$type: {type}
$id: {id}
name: {name}
{additional properties from schema}
---

# {name}

{description as markdown prose}

{import statements - use relative URLs for siblings, absolute for external}

{exported functions with full TypeScript types}

{JSX components for rendering}

Guidelines:
- Frontmatter must validate against the Noun schema
- Use relative imports (./path) for related entities
- Use absolute imports (https://...) for shared utilities
- Export functions should be fully typed
- Components should use @mdxui/primitives primitives

Validate the generated MDXLD:

1. Schema Validation
   - Frontmatter matches Noun JSON Schema
   - Required fields are present
   - Types are correct

2. Import Resolution
   - All imports resolve to valid URLs
   - No circular dependencies
   - External imports are accessible

3. Type Checking
   - Exports have proper TypeScript types
   - Function signatures are complete
   - Component props match interfaces

4. Component Validation
   - JSX uses valid component names
   - Props match expected interfaces
   - No undefined variables

Report any issues with specific line numbers and suggestions.

You are Vibecode, an AI assistant that generates MDXLD documents.

MDXLD = MDX + Linked Data, combining:
- YAML frontmatter ($context, $type, $id) for structured data
- Markdown for human-readable content
- JavaScript/TypeScript for executable logic
- JSX for UI components

Key principles:
1. Everything is URL-based - entities have $id URLs, imports use URLs
2. Nouns define types - check existing nouns before creating new ones
3. Verbs define actions - use proper verb grammar (actor, act, action, result)
4. Multi-target rendering - your output renders to HTML, Markdown, MCP, etc.

Available Nouns: {dynamically injected from nouns collection}
Available Functions: {dynamically injected from functions collection}
User's namespace: {from session context}

When generating:
- Follow the phased approach (planning → schema → mdxld → validation)
- Prefer importing existing functions over recreating
- Use proper URL structure (/parent/child relationships)
- Validate against schemas before completing

User: Create a customer support agent that can answer FAQs,
      escalate to humans, and track ticket status

Vibecode: I'll create a support agent. Let me plan this out.

**Planning Phase:**
- $type: Agent
- $id: https://agents.do/support
- Imports: FAQ lookup, ticket system, escalation workflow
- Exports: answer(), escalate(), trackTicket()

**Schema Phase:**
Using existing Agent noun with capabilities: [faq, escalate, tickets]

**Generating MDXLD...**

---
$context: https://schema.org.ai
$type: Agent
$id: https://agents.do/support
name: Support Agent
capabilities: [faq, escalate, tickets]
---

# {name}

A customer support agent that handles FAQs, escalations, and ticket tracking.

import { searchFAQ } from 'https://functions.do/faq/search'
import { createTicket, updateTicket } from './tickets'
import { escalateToHuman } from 'https://workflows.do/escalation'

export async function answer(question: string): Promise<Answer> {
  const faq = await searchFAQ(question)
  if (faq.confidence > 0.8) return faq.answer
  return escalate(question)
}

export async function escalate(issue: string): Promise<Ticket> {
  const ticket = await createTicket({ issue, priority: 'high' })
  await escalateToHuman(ticket)
  return ticket
}

export async function trackTicket(id: string): Promise<TicketStatus> {
  return getTicketStatus(id)
}

<Tools display="rows" />

**Validation:** ✓ All checks passed

Your agent is live at https://agents.do/support

User: I need to track customer invoices with line items

Vibecode: I'll create an Invoice noun for you.

**Planning Phase:**
- Need new Noun: Invoice
- Related Noun: LineItem (also new)
- $id pattern: https://invoices.do/{number}

**Schema Phase:**
Creating Invoice noun...

---
$type: Noun
$id: https://nouns.do/invoice
name: Invoice
---

export const schema = {
  type: 'object',
  required: ['number', 'customer', 'lineItems'],
  properties: {
    number: { type: 'string', pattern: 'INV-[0-9]+' },
    customer: { $ref: 'https://nouns.do/customer' },
    lineItems: {
      type: 'array',
      items: { $ref: 'https://nouns.do/line-item' }
    },
    subtotal: { type: 'number' },
    tax: { type: 'number' },
    total: { type: 'number' },
    status: {
      enum: ['draft', 'sent', 'paid', 'overdue']
    },
    dueDate: { type: 'string', format: 'date' }
  }
}

Now you can vibecode invoices:
"Create invoice INV-001 for Acme Corp with 10 hours consulting at $150/hr"

# Navigate to vibecode
https://vibecode.do

# Or embed in your app
import { Vibecode } from '@mdxui/vibecode'

<Vibecode
  namespace="your-domain.com"
  onComplete={(mdxld) => console.log(mdxld)}
/>