HN 표시: MDMA – LLM 응답을 대화형으로 만드는 마크다운 확장

Markdown Document with Mounted Applications Interactive documents from Markdown. Built for next gen-apps AI conversations today are plain text — the user reads a response and manually acts on it. MDMA changes that. When an LLM knows the MDMA spec, it can respond with interactive components (forms, tables, approval gates) instead of just text. The conversation becomes actionable: the user fills out a form, approves a step, or reviews structured data — all inline, with a predictable schema that your app already knows how to render and process. No custom UI per use case. No parsing free-form text. The AI generates structured, validated components and your frontend renders them instantly. MDMA extends Markdown with interactive components defined in fenced mdma code blocks. A regular Markdown file becomes an interactive application: # Patient Intake ```mdmatype: form id: intake-form fields: - name: patient-name type: text label: "Full Name" required: true sensitive: true - name: email type: email label: "Email" required: true sensitive: true - name: reason type: textarea label: "Reason for Visit" required: true ``` ```mdmatype: button id: submit-btn text: "Submit Intake Form" variant: primary onAction: submit ``` 9 built-in component types, all rendered out of the box by @mobile-reality/mdma-renderer-react : | Component | Type key | Description | |---|---|---| | Form | form | Multi-field forms with text, email, number, select, textarea, checkbox, and datetime fields. Supports validation, required fields, default values, and sensitive (PII) flags. | | Button | button | Action buttons with primary , secondary , and danger variants. | | Tasklist | tasklist | Interactive checkbox task items with labels. | | Table | table | Data tables with typed columns and row data. | | Chart | chart | Table fallback by default — renders chart data as a simple HTML table to avoid forcing a charting dependency (~400KB). Override with your own renderer (e.g. recharts) via customizations.components.chart (see Custom Chart Renderer below). | | Callout | callout | Alert banners with info , warning , error , and success variants. Supports optional title and dismiss button. | | Approval Gate | approval-gate | Approve/deny workflow gates with pending, approved, and denied states. | | Webhook | webhook | Webhook triggers with idle, executing, success, and error status indicators. | | Thinking | thinking | Collapsible thinking/reasoning blocks that show the AI's chain of thought. | Additionally, standard Markdown content (headings, paragraphs, lists, code blocks, images, links, tables, etc.) is rendered inline between components. The built-in chart renderer intentionally renders data as a plain table so the library stays lightweight. To get actual charts, register a custom renderer: import { MdmaDocument } from '@mobile-reality/mdma-renderer-react'; import { MyRechartsRenderer } from './MyRechartsRenderer'; function App({ ast, store }) { return ( ); } This pattern works for overriding any built-in component — pass a custom React component under customizations.components. . # Core — parse and run MDMA documents npm install @mobile-reality/mdma-parser @mobile-reality/mdma-runtime # React rendering npm install @mobile-reality/mdma-renderer-react # AI authoring — system prompts for LLM-based generation npm install @mobile-reality/mdma-prompt-pack # Validation — static analysis for MDMA documents npm install @mobile-reality/mdma-validator # CLI — interactive prompt builder + document validation npx @mobile-reality/mdma-cli All packages are published under the @mobile-reality npm org. import { unified } from 'unified'; import remarkParse from 'remark-parse'; import { remarkMdma } from '@mobile-reality/mdma-parser'; import { createDocumentStore } from '@mobile-reality/mdma-runtime'; import type { MdmaRoot } from '@mobile-reality/mdma-spec'; // 1. Parse markdown into AST const processor = unified().use(remarkParse).use(remarkMdma); const tree = processor.parse(markdown); const ast = (await processor.run(tree)) as MdmaRoot; // 2. Create a reactive document store const store = createDocumentStore(ast, { documentId: 'my-doc', sessionId: crypto.randomUUID(), }); // 3. Subscribe to state changes store.subscribe((state) => { console.log('Bindings:', state.bindings); }); // 4. Dispatch user actions store.dispatch({ type: 'FIELD_CHANGED', componentId: 'intake-form', field: 'patient-name', value: 'Jane Doe', }); import { buildSystemPrompt } from '@mobile-reality/mdma-prompt-pack'; // Custom prompt prescribes exactly what the LLM should generate const systemPrompt = buildSystemPrompt({ customPrompt: `You are a bug tracking assistant. When a user reports a bug, always generate a single form component matching this exact structure: \`\`\`mdma type: form id: bug-report fields: - name: title type: text label: "Bug Title" required: true - name: severity type: select label: "Severity" options: - { label: Critical, value: critical } - { label: High, value: high } -