From 087f14ba6003dd38136b943d7e5ba653f1acca29 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Fri, 28 Jul 2023 15:44:11 -0700
Subject: [PATCH 01/16] Only emit parsable mdx

---
 packages/ai-jsx/package.json               |    2 +
 packages/ai-jsx/src/react/jit-ui/mdx.tsx   |   31 +-
 packages/ai-jsx/src/react/jit-ui/sample.ts |   20 +
 packages/examples/src/mdx.tsx              |   23 +-
 yarn.lock                                  | 1044 +++++++++++++++++++-
 5 files changed, 1099 insertions(+), 21 deletions(-)
 create mode 100644 packages/ai-jsx/src/react/jit-ui/sample.ts

diff --git a/packages/ai-jsx/package.json b/packages/ai-jsx/package.json
index 5470855b8..cdbd2003d 100644
--- a/packages/ai-jsx/package.json
+++ b/packages/ai-jsx/package.json
@@ -319,6 +319,7 @@
     "prepack": "yarn create-entry-points",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
+    "demo": "node dist/esm/react/jit-ui/sample.js",
     "test": "jest",
     "unit": "yarn build && jest",
     "typecheck": "tsc -p tsconfig.json --noEmit",
@@ -329,6 +330,7 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.5.0",
+    "@mdx-js/mdx": "^2.3.0",
     "@nick.heiner/wandb-fork": "^0.5.2-5",
     "axios": "^1.4.0",
     "cli-highlight": "^2.1.11",
diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 67fa051d6..855adca00 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -2,14 +2,15 @@ import * as AI from '../core.js';
 import { ChatCompletion, SystemMessage } from '../../core/completion.js';
 import React from 'react';
 import { collectComponents } from '../completion.js';
+import { compile } from '@mdx-js/mdx';
 
 /**
  * Use GPT-4 with this.
  */
-export function MdxChatCompletion({ children, usageExamples }: { children: AI.Node; usageExamples: React.ReactNode }) {
+export async function* MdxChatCompletion({ children, usageExamples, alwaysParsable }: { children: AI.Node; usageExamples: React.ReactNode, alwaysParsable?: boolean }, {render, logger}: AI.ComponentContext) {
   const components = collectComponents(usageExamples);
   /* prettier-ignore */
-  return <ChatCompletion>
+  const completion = <ChatCompletion>
     <SystemMessage>
       You are an assistant who can use React components to work with the user. By default, you use markdown. However, if it's useful, you can also mix in the following React components: {Object.keys(components).join(', ')}.
       All your responses
@@ -112,4 +113,30 @@ export function MdxChatCompletion({ children, usageExamples }: { children: AI.No
     </SystemMessage>
     {children}
   </ChatCompletion>;
+
+  if (!alwaysParsable) {
+    return completion;
+  }
+
+  const renderedCompletion = render(completion, {appendOnly: true});
+  yield AI.AppendOnlyStream;
+
+  let lastParsablerame = '';
+
+  for await (const frame of renderedCompletion) {
+    const delta = frame.slice(lastParsablerame.length);
+    try {
+      await compile(frame);
+      logger.trace({frame}, 'Yielding parsable frame')
+      lastParsablerame = frame;
+      yield delta;
+    } catch {
+      // Make sure we only yield parsable frames.
+      logger.trace({frame}, 'Not yielding unparsable frame')
+    }
+  }
+  const finalResult = await renderedCompletion;
+  yield finalResult.slice(lastParsablerame.length);
+  // Assume the last frame is parsable.
+  return AI.AppendOnlyStream;
 }
diff --git a/packages/ai-jsx/src/react/jit-ui/sample.ts b/packages/ai-jsx/src/react/jit-ui/sample.ts
new file mode 100644
index 000000000..51e070e73
--- /dev/null
+++ b/packages/ai-jsx/src/react/jit-ui/sample.ts
@@ -0,0 +1,20 @@
+import { compile } from '@mdx-js/mdx';
+
+async function main() {
+
+try {
+  await compile(`
+  Sure, here are the details of your flight reservation:
+
+<Card>
+**Flight Number**: ABC123
+**Departure Airport**: JFK
+**Departure Date**: October 1, 2022
+**Departure Time**: 10:00 AM
+  `)
+} catch (e) {
+  console.log('got error', e)
+}
+
+}
+main().then(() => console.log('done')).catch(e => console.log('error', e));
\ No newline at end of file
diff --git a/packages/examples/src/mdx.tsx b/packages/examples/src/mdx.tsx
index 5a869f825..bc1103718 100644
--- a/packages/examples/src/mdx.tsx
+++ b/packages/examples/src/mdx.tsx
@@ -1,14 +1,12 @@
 /** @jsxImportSource ai-jsx/react */
 import * as AI from 'ai-jsx';
 import { SystemMessage, UserMessage } from 'ai-jsx/core/completion';
-// import { showInspector } from 'ai-jsx/core/inspector';
+import { showInspector } from 'ai-jsx/core/inspector';
 import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
 import { JsonChatCompletion } from 'ai-jsx/batteries/constrained-output';
 import z from 'zod';
 
 import { OpenAI } from 'ai-jsx/lib/openai';
-import { PinoLogger } from 'ai-jsx/core/log';
-import { pino } from 'pino';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 function Card({ header, footer, children }: { header?: string; footer?: string; children: string }) {
@@ -115,7 +113,7 @@ function QuestionAndAnswer({ children }: { children: AI.Node }, { memo }: AI.Com
       <OpenAI chatModel="gpt-4">
         Q: {question}
         {'\n'}
-        A: <MdxChatCompletion usageExamples={usageExample}>{question}</MdxChatCompletion>
+        A: <MdxChatCompletion usageExamples={usageExample} alwaysParsable>{question}</MdxChatCompletion>
         {'\n\n'}
       </OpenAI>
     </>
@@ -166,20 +164,13 @@ export function App() {
 
 // showInspector(<App />);
 
-const logger = pino({
-  name: 'ai-jsx',
-  level: process.env.loglevel ?? 'trace',
-  transport: {
-    target: 'pino-pretty',
-    options: {
-      colorize: true,
-    },
-  },
-});
-
 let lastValue = '';
-const rendering = AI.createRenderContext({ logger: new PinoLogger(logger) }).render(<App />, { appendOnly: true });
+const rendering = AI.createRenderContext().render(<App />, { appendOnly: true });
 for await (const frame of rendering) {
+  // console.log(frame);
+  // console.log(frame.slice(lastValue.length));
   process.stdout.write(frame.slice(lastValue.length));
   lastValue = frame;
 }
+
+// console.log(await rendering);
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 6dbe795a4..fc5c914a2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3806,6 +3806,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mdx-js/mdx@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@mdx-js/mdx@npm:2.3.0"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/mdx": ^2.0.0
+    estree-util-build-jsx: ^2.0.0
+    estree-util-is-identifier-name: ^2.0.0
+    estree-util-to-js: ^1.1.0
+    estree-walker: ^3.0.0
+    hast-util-to-estree: ^2.0.0
+    markdown-extensions: ^1.0.0
+    periscopic: ^3.0.0
+    remark-mdx: ^2.0.0
+    remark-parse: ^10.0.0
+    remark-rehype: ^10.0.0
+    unified: ^10.0.0
+    unist-util-position-from-estree: ^1.0.0
+    unist-util-stringify-position: ^3.0.0
+    unist-util-visit: ^4.0.0
+    vfile: ^5.0.0
+  checksum: d918766a326502ec0b54adee61dc2930daf5b748acb9107f9bfd1ab0dbc4d7b1a4d0dbb9e21da9dd2a9fc2f9950b2973a43c6ba62d3a72eb67a30f6c953e5be8
+  languageName: node
+  linkType: hard
+
 "@mdx-js/react@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/react@npm:1.6.22"
@@ -6271,6 +6296,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/acorn@npm:^4.0.0":
+  version: 4.0.6
+  resolution: "@types/acorn@npm:4.0.6"
+  dependencies:
+    "@types/estree": "*"
+  checksum: 60e1fd28af18d6cb54a93a7231c7c18774a9a8739c9b179e9e8750dca631e10cbef2d82b02830ea3f557b1d121e6406441e9e1250bd492dc81d4b3456e76e4d4
+  languageName: node
+  linkType: hard
+
 "@types/aria-query@npm:^5.0.1":
   version: 5.0.1
   resolution: "@types/aria-query@npm:5.0.1"
@@ -6399,6 +6433,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/debug@npm:^4.0.0":
+  version: 4.1.8
+  resolution: "@types/debug@npm:4.1.8"
+  dependencies:
+    "@types/ms": "*"
+  checksum: a9a9bb40a199e9724aa944e139a7659173a9b274798ea7efbc277cb084bc37d32fc4c00877c3496fac4fed70a23243d284adb75c00b5fdabb38a22154d18e5df
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.4
   resolution: "@types/eslint-scope@npm:3.7.4"
@@ -6419,6 +6462,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/estree-jsx@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@types/estree-jsx@npm:1.0.0"
+  dependencies:
+    "@types/estree": "*"
+  checksum: 851d7afb63a89fb9ce7822563930660433f29106d72db279ce9c99f791ec996ef21b05adc6f545325cd1745b3041cc86422f0ffa39a06734305b90cfbc871765
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:*, @types/estree@npm:^1.0.0":
   version: 1.0.1
   resolution: "@types/estree@npm:1.0.1"
@@ -6719,6 +6771,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdx@npm:^2.0.0":
+  version: 2.0.5
+  resolution: "@types/mdx@npm:2.0.5"
+  checksum: 1069baff0b2d0fb0bc724748e2386af626cc30f8ef99e680afb4dee566ed0aeabd31cea774212a7033f491e594a0acc234116078b252cba94ac413f91eb585a3
+  languageName: node
+  linkType: hard
+
 "@types/memcached@npm:^2.2.6":
   version: 2.2.7
   resolution: "@types/memcached@npm:2.2.7"
@@ -6749,6 +6808,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ms@npm:*":
+  version: 0.7.31
+  resolution: "@types/ms@npm:0.7.31"
+  checksum: daadd354aedde024cce6f5aa873fefe7b71b22cd0e28632a69e8b677aeb48ae8caa1c60e5919bb781df040d116b01cb4316335167a3fc0ef6a63fa3614c0f6da
+  languageName: node
+  linkType: hard
+
 "@types/mysql@npm:2.15.19":
   version: 2.15.19
   resolution: "@types/mysql@npm:2.15.19"
@@ -7549,7 +7615,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx@npm:^5.3.2":
+"acorn-jsx@npm:^5.0.0, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
   peerDependencies:
@@ -7581,6 +7647,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"acorn@npm:^8.0.0":
+  version: 8.10.0
+  resolution: "acorn@npm:8.10.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 538ba38af0cc9e5ef983aee196c4b8b4d87c0c94532334fa7e065b2c8a1f85863467bb774231aae91613fcda5e68740c15d97b1967ae3394d20faddddd8af61d
+  languageName: node
+  linkType: hard
+
 "acorn@npm:^8.0.4, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.2":
   version: 8.9.0
   resolution: "acorn@npm:8.9.0"
@@ -7672,6 +7747,7 @@ __metadata:
   dependencies:
     "@anthropic-ai/sdk": ^0.5.0
     "@jest/globals": ^29.5.0
+    "@mdx-js/mdx": ^2.3.0
     "@nick.heiner/wandb-fork": ^0.5.2-5
     "@tsconfig/node16": ^1.0.4
     "@tsconfig/node18": ^2.0.1
@@ -8181,6 +8257,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"astring@npm:^1.8.0":
+  version: 1.8.6
+  resolution: "astring@npm:1.8.6"
+  bin:
+    astring: bin/astring
+  checksum: 6f034d2acef1dac8bb231e7cc26c573d3c14e1975ea6e04f20312b43d4f462f963209bc64187d25d477a182dc3c33277959a0156ab7a3617aa79b1eac4d88e1f
+  languageName: node
+  linkType: hard
+
 "async@npm:^3.2.3":
   version: 3.2.4
   resolution: "async@npm:3.2.4"
@@ -8568,6 +8653,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bail@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "bail@npm:2.0.2"
+  checksum: aab4e8ccdc8d762bf3fdfce8e706601695620c0c2eda256dd85088dc0be3cfd7ff126f6e99c2bee1f24f5d418414aacf09d7f9702f16d6963df2fa488cda8824
+  languageName: node
+  linkType: hard
+
 "balanced-match@npm:^1.0.0":
   version: 1.0.2
   resolution: "balanced-match@npm:1.0.2"
@@ -8988,6 +9080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ccount@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "ccount@npm:2.0.1"
+  checksum: 48193dada54c9e260e0acf57fc16171a225305548f9ad20d5471e0f7a8c026aedd8747091dccb0d900cde7df4e4ddbd235df0d8de4a64c71b12f0d3303eeafd4
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.0.0, chalk@npm:^2.4.1":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -9040,6 +9139,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "character-entities-html4@npm:2.1.0"
+  checksum: 7034aa7c7fa90309667f6dd50499c8a760c3d3a6fb159adb4e0bada0107d194551cdbad0714302f62d06ce4ed68565c8c2e15fdef2e8f8764eb63fa92b34b11d
+  languageName: node
+  linkType: hard
+
 "character-entities-legacy@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-entities-legacy@npm:1.1.4"
@@ -9047,6 +9153,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-legacy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "character-entities-legacy@npm:3.0.0"
+  checksum: 7582af055cb488b626d364b7d7a4e46b06abd526fb63c0e4eb35bcb9c9799cc4f76b39f34fdccef2d1174ac95e53e9ab355aae83227c1a2505877893fce77731
+  languageName: node
+  linkType: hard
+
 "character-entities@npm:^1.0.0":
   version: 1.2.4
   resolution: "character-entities@npm:1.2.4"
@@ -9054,6 +9167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "character-entities@npm:2.0.2"
+  checksum: cf1643814023697f725e47328fcec17923b8f1799102a8a79c1514e894815651794a2bffd84bb1b3a4b124b050154e4529ed6e81f7c8068a734aecf07a6d3def
+  languageName: node
+  linkType: hard
+
 "character-reference-invalid@npm:^1.0.0":
   version: 1.1.4
   resolution: "character-reference-invalid@npm:1.1.4"
@@ -9061,6 +9181,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-reference-invalid@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "character-reference-invalid@npm:2.0.1"
+  checksum: 98d3b1a52ae510b7329e6ee7f6210df14f1e318c5415975d4c9e7ee0ef4c07875d47c6e74230c64551f12f556b4a8ccc24d9f3691a2aa197019e72a95e9297ee
+  languageName: node
+  linkType: hard
+
 "charenc@npm:0.0.2":
   version: 0.0.2
   resolution: "charenc@npm:0.0.2"
@@ -9425,6 +9552,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"comma-separated-tokens@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "comma-separated-tokens@npm:2.0.3"
+  checksum: e3bf9e0332a5c45f49b90e79bcdb4a7a85f28d6a6f0876a94f1bb9b2bfbdbbb9292aac50e1e742d8c0db1e62a0229a106f57917e2d067fca951d81737651700d
+  languageName: node
+  linkType: hard
+
 "commander@npm:7, commander@npm:^7.2.0":
   version: 7.2.0
   resolution: "commander@npm:7.2.0"
@@ -10692,6 +10826,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decode-named-character-reference@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "decode-named-character-reference@npm:1.0.2"
+  dependencies:
+    character-entities: ^2.0.0
+  checksum: f4c71d3b93105f20076052f9cb1523a22a9c796b8296cd35eef1ca54239c78d182c136a848b83ff8da2071e3ae2b1d300bf29d00650a6d6e675438cc31b11d78
+  languageName: node
+  linkType: hard
+
 "decompress-response@npm:^3.3.0":
   version: 3.3.0
   resolution: "decompress-response@npm:3.3.0"
@@ -10877,7 +11020,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.3":
+"dequal@npm:^2.0.0, dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
   checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
@@ -10975,6 +11118,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff@npm:^5.0.0":
+  version: 5.1.0
+  resolution: "diff@npm:5.1.0"
+  checksum: c7bf0df7c9bfbe1cf8a678fd1b2137c4fb11be117a67bc18a0e03ae75105e8533dbfb1cda6b46beb3586ef5aed22143ef9d70713977d5fb1f9114e21455fba90
+  languageName: node
+  linkType: hard
+
 "digest-fetch@npm:^1.3.0":
   version: 1.3.0
   resolution: "digest-fetch@npm:1.3.0"
@@ -12260,6 +12410,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-util-attach-comments@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "estree-util-attach-comments@npm:2.1.1"
+  dependencies:
+    "@types/estree": ^1.0.0
+  checksum: c5c2c41c9a55a169fb4fba9627057843f0d2e21e47a2e3e24318a11ffcf6bc704c0f96f405a529bddac7969b7c44f6cf86711505faaf0c5862c2024419b19704
+  languageName: node
+  linkType: hard
+
+"estree-util-build-jsx@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "estree-util-build-jsx@npm:2.2.2"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    estree-util-is-identifier-name: ^2.0.0
+    estree-walker: ^3.0.0
+  checksum: d008ac36a45d797eadca696f41b4c1ac0587ec0e0b52560cfb0e76d14ef15fc18e526f9023b6e5457dafa9cf3f010c9bb1dfc9c727ebd7cf0ba2ebbaa43919ac
+  languageName: node
+  linkType: hard
+
+"estree-util-is-identifier-name@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "estree-util-is-identifier-name@npm:2.1.0"
+  checksum: cab317a071fafb99cf83b57df7924bccd2e6ab4e252688739e49f00b16cefd168e279c171442b0557c80a1c80ffaa927d670dadea65bb3c9b151efb8e772e89d
+  languageName: node
+  linkType: hard
+
+"estree-util-to-js@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "estree-util-to-js@npm:1.2.0"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    astring: ^1.8.0
+    source-map: ^0.7.0
+  checksum: 93a75e1051a6a4f5c631597ecd2ed95129fadbc80a58a10475d6d6b1b076a69393ba4a8d2bb71f698401f64ccca47e3f3828dd0042cac81439b988fae0f5f8e0
+  languageName: node
+  linkType: hard
+
+"estree-util-visit@npm:^1.0.0":
+  version: 1.2.1
+  resolution: "estree-util-visit@npm:1.2.1"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/unist": ^2.0.0
+  checksum: 6feea4fdc43b0ba0f79faf1d57cf32373007e146d4810c7c09c13f5a9c1b8600c1ac57a8d949967cedd2a9a91dddd246e19b59bacfc01e417168b4ebf220f691
+  languageName: node
+  linkType: hard
+
 "estree-walker@npm:^1.0.1":
   version: 1.0.1
   resolution: "estree-walker@npm:1.0.1"
@@ -12267,6 +12465,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-walker@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "estree-walker@npm:3.0.3"
+  dependencies:
+    "@types/estree": ^1.0.0
+  checksum: a65728d5727b71de172c5df323385755a16c0fdab8234dc756c3854cfee343261ddfbb72a809a5660fac8c75d960bb3e21aa898c2d7e9b19bb298482ca58a3af
+  languageName: node
+  linkType: hard
+
 "esutils@npm:^2.0.2":
   version: 2.0.3
   resolution: "esutils@npm:2.0.3"
@@ -13688,6 +13895,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-to-estree@npm:^2.0.0":
+  version: 2.3.3
+  resolution: "hast-util-to-estree@npm:2.3.3"
+  dependencies:
+    "@types/estree": ^1.0.0
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^2.0.0
+    "@types/unist": ^2.0.0
+    comma-separated-tokens: ^2.0.0
+    estree-util-attach-comments: ^2.0.0
+    estree-util-is-identifier-name: ^2.0.0
+    hast-util-whitespace: ^2.0.0
+    mdast-util-mdx-expression: ^1.0.0
+    mdast-util-mdxjs-esm: ^1.0.0
+    property-information: ^6.0.0
+    space-separated-tokens: ^2.0.0
+    style-to-object: ^0.4.1
+    unist-util-position: ^4.0.0
+    zwitch: ^2.0.0
+  checksum: a09de0214db4d71f11cbd6f18663a8032116f82cb076b05d2d735444c05a9692902dae1023b70d0a254fc0a776f81e97450ca396bb9252c8fd631c3ba2e12f24
+  languageName: node
+  linkType: hard
+
 "hast-util-to-parse5@npm:^6.0.0":
   version: 6.0.0
   resolution: "hast-util-to-parse5@npm:6.0.0"
@@ -13701,6 +13931,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hast-util-whitespace@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "hast-util-whitespace@npm:2.0.1"
+  checksum: 431be6b2f35472f951615540d7a53f69f39461e5e080c0190268bdeb2be9ab9b1dddfd1f467dd26c1de7e7952df67beb1307b6ee940baf78b24a71b5e0663868
+  languageName: node
+  linkType: hard
+
 "hastscript@npm:^6.0.0":
   version: 6.0.0
   resolution: "hastscript@npm:6.0.0"
@@ -14339,6 +14576,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphabetical@npm:2.0.1"
+  checksum: 56207db8d9de0850f0cd30f4966bf731eb82cedfe496cbc2e97e7c3bacaf66fc54a972d2d08c0d93bb679cb84976a05d24c5ad63de56fabbfc60aadae312edaa
+  languageName: node
+  linkType: hard
+
 "is-alphanumerical@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-alphanumerical@npm:1.0.4"
@@ -14349,6 +14593,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphanumerical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphanumerical@npm:2.0.1"
+  dependencies:
+    is-alphabetical: ^2.0.0
+    is-decimal: ^2.0.0
+  checksum: 87acc068008d4c9c4e9f5bd5e251041d42e7a50995c77b1499cf6ed248f971aadeddb11f239cabf09f7975ee58cac7a48ffc170b7890076d8d227b24a68663c9
+  languageName: node
+  linkType: hard
+
 "is-any-array@npm:^2.0.0":
   version: 2.0.1
   resolution: "is-any-array@npm:2.0.1"
@@ -14480,6 +14734,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-decimal@npm:2.0.1"
+  checksum: 97132de7acdce77caa7b797632970a2ecd649a88e715db0e4dbc00ab0708b5e7574ba5903962c860cd4894a14fd12b100c0c4ac8aed445cf6f55c6cf747a4158
+  languageName: node
+  linkType: hard
+
 "is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
   version: 2.2.1
   resolution: "is-docker@npm:2.2.1"
@@ -14549,6 +14810,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-hexadecimal@npm:2.0.1"
+  checksum: 66a2ea85994c622858f063f23eda506db29d92b52580709eb6f4c19550552d4dcf3fb81952e52f7cf972097237959e00adc7bb8c9400cd12886e15bf06145321
+  languageName: node
+  linkType: hard
+
 "is-inside-container@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-inside-container@npm:1.0.0"
@@ -14702,6 +14970,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-reference@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "is-reference@npm:3.0.1"
+  dependencies:
+    "@types/estree": "*"
+  checksum: 12c316d16191961938057e949c9f59ecac3c00c8101005a81ee351fde0775590238939c294ecac3a371400eb85d4b2556675396ebd4db821b767c145df28623f
+  languageName: node
+  linkType: hard
+
 "is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
@@ -16297,6 +16574,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kleur@npm:^4.0.3":
+  version: 4.1.5
+  resolution: "kleur@npm:4.1.5"
+  checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12
+  languageName: node
+  linkType: hard
+
 "klona@npm:^2.0.4, klona@npm:^2.0.5":
   version: 2.0.6
   resolution: "klona@npm:2.0.6"
@@ -16884,6 +17168,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"longest-streak@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "longest-streak@npm:3.1.0"
+  checksum: d7f952ed004cbdb5c8bcfc4f7f5c3d65449e6c5a9e9be4505a656e3df5a57ee125f284286b4bf8ecea0c21a7b3bf2b8f9001ad506c319b9815ad6a63a47d0fd0
+  languageName: node
+  linkType: hard
+
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -17044,6 +17335,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-extensions@npm:^1.0.0":
+  version: 1.1.1
+  resolution: "markdown-extensions@npm:1.1.1"
+  checksum: 8a6dd128be1c524049ea6a41a9193715c2835d3d706af4b8b714ff2043a82786dbcd4a8f1fa9ddd28facbc444426c97515aef2d1f3dd11d5e2d63749ba577b1e
+  languageName: node
+  linkType: hard
+
 "marked@npm:^4.3.0":
   version: 4.3.0
   resolution: "marked@npm:4.3.0"
@@ -17101,6 +17399,106 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-definitions@npm:^5.0.0":
+  version: 5.1.2
+  resolution: "mdast-util-definitions@npm:5.1.2"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    "@types/unist": ^2.0.0
+    unist-util-visit: ^4.0.0
+  checksum: 2544daccab744ea1ede76045c2577ae4f1cc1b9eb1ea51ab273fe1dca8db5a8d6f50f87759c0ce6484975914b144b7f40316f805cb9c86223a78db8de0b77bae
+  languageName: node
+  linkType: hard
+
+"mdast-util-from-markdown@npm:^1.0.0, mdast-util-from-markdown@npm:^1.1.0":
+  version: 1.3.1
+  resolution: "mdast-util-from-markdown@npm:1.3.1"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    "@types/unist": ^2.0.0
+    decode-named-character-reference: ^1.0.0
+    mdast-util-to-string: ^3.1.0
+    micromark: ^3.0.0
+    micromark-util-decode-numeric-character-reference: ^1.0.0
+    micromark-util-decode-string: ^1.0.0
+    micromark-util-normalize-identifier: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    unist-util-stringify-position: ^3.0.0
+    uvu: ^0.5.0
+  checksum: c2fac225167e248d394332a4ea39596e04cbde07d8cdb3889e91e48972c4c3462a02b39fda3855345d90231eb17a90ac6e082fb4f012a77c1d0ddfb9c7446940
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-expression@npm:^1.0.0":
+  version: 1.3.2
+  resolution: "mdast-util-mdx-expression@npm:1.3.2"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^2.0.0
+    "@types/mdast": ^3.0.0
+    mdast-util-from-markdown: ^1.0.0
+    mdast-util-to-markdown: ^1.0.0
+  checksum: e4c90f26deaa5eb6217b0a9af559a80de41da02ab3bcd864c56bed3304b056ae703896e9876bc6ded500f4aff59f4de5cbf6a4b109a5ba408f2342805fe6dc05
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx-jsx@npm:^2.0.0":
+  version: 2.1.4
+  resolution: "mdast-util-mdx-jsx@npm:2.1.4"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^2.0.0
+    "@types/mdast": ^3.0.0
+    "@types/unist": ^2.0.0
+    ccount: ^2.0.0
+    mdast-util-from-markdown: ^1.1.0
+    mdast-util-to-markdown: ^1.3.0
+    parse-entities: ^4.0.0
+    stringify-entities: ^4.0.0
+    unist-util-remove-position: ^4.0.0
+    unist-util-stringify-position: ^3.0.0
+    vfile-message: ^3.0.0
+  checksum: add3ff2dd1faf2419b506abb630a471da42edc99e16fdcff95f405d27f881cb4890a94b2a7a38de9592f37170bee1c135bc156699a0f74af4b69610f0b5fcf1d
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdx@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdx@npm:2.0.1"
+  dependencies:
+    mdast-util-from-markdown: ^1.0.0
+    mdast-util-mdx-expression: ^1.0.0
+    mdast-util-mdx-jsx: ^2.0.0
+    mdast-util-mdxjs-esm: ^1.0.0
+    mdast-util-to-markdown: ^1.0.0
+  checksum: 7303149230a26e524e319833b782bffca94e49cdab012996618701259bd056e014ca22a35d25ffa8880ba9064ee126a2a002f01e5c90a31ca726339ed775875e
+  languageName: node
+  linkType: hard
+
+"mdast-util-mdxjs-esm@npm:^1.0.0":
+  version: 1.3.1
+  resolution: "mdast-util-mdxjs-esm@npm:1.3.1"
+  dependencies:
+    "@types/estree-jsx": ^1.0.0
+    "@types/hast": ^2.0.0
+    "@types/mdast": ^3.0.0
+    mdast-util-from-markdown: ^1.0.0
+    mdast-util-to-markdown: ^1.0.0
+  checksum: ee78a4f58adfec38723cbc920f05481201ebb001eff3982f2d0e5f5ce5c75685e732e9d361ad4a1be8b936b4e5de0f2599cb96b92ad4bd92698ac0c4a09bbec3
+  languageName: node
+  linkType: hard
+
+"mdast-util-phrasing@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "mdast-util-phrasing@npm:3.0.1"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    unist-util-is: ^5.0.0
+  checksum: c5b616d9b1eb76a6b351d195d94318494722525a12a89d9c8a3b091af7db3dd1fc55d294f9d29266d8159a8267b0df4a7a133bda8a3909d5331c383e1e1ff328
+  languageName: node
+  linkType: hard
+
 "mdast-util-to-hast@npm:10.0.1":
   version: 10.0.1
   resolution: "mdast-util-to-hast@npm:10.0.1"
@@ -17117,6 +17515,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-to-hast@npm:^12.1.0":
+  version: 12.3.0
+  resolution: "mdast-util-to-hast@npm:12.3.0"
+  dependencies:
+    "@types/hast": ^2.0.0
+    "@types/mdast": ^3.0.0
+    mdast-util-definitions: ^5.0.0
+    micromark-util-sanitize-uri: ^1.1.0
+    trim-lines: ^3.0.0
+    unist-util-generated: ^2.0.0
+    unist-util-position: ^4.0.0
+    unist-util-visit: ^4.0.0
+  checksum: ea40c9f07dd0b731754434e81c913590c611b1fd753fa02550a1492aadfc30fb3adecaf62345ebb03cea2ddd250c15ab6e578fffde69c19955c9b87b10f2a9bb
+  languageName: node
+  linkType: hard
+
+"mdast-util-to-markdown@npm:^1.0.0, mdast-util-to-markdown@npm:^1.3.0":
+  version: 1.5.0
+  resolution: "mdast-util-to-markdown@npm:1.5.0"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    "@types/unist": ^2.0.0
+    longest-streak: ^3.0.0
+    mdast-util-phrasing: ^3.0.0
+    mdast-util-to-string: ^3.0.0
+    micromark-util-decode-string: ^1.0.0
+    unist-util-visit: ^4.0.0
+    zwitch: ^2.0.0
+  checksum: 64338eb33e49bb0aea417591fd986f72fdd39205052563bb7ce9eb9ecc160824509bfacd740086a05af355c6d5c36353aafe95cab9e6927d674478757cee6259
+  languageName: node
+  linkType: hard
+
 "mdast-util-to-string@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-to-string@npm:2.0.0"
@@ -17124,6 +17554,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-to-string@npm:^3.0.0, mdast-util-to-string@npm:^3.1.0":
+  version: 3.2.0
+  resolution: "mdast-util-to-string@npm:3.2.0"
+  dependencies:
+    "@types/mdast": ^3.0.0
+  checksum: dc40b544d54339878ae2c9f2b3198c029e1e07291d2126bd00ca28272ee6616d0d2194eb1c9828a7c34d412a79a7e73b26512a734698d891c710a1e73db1e848
+  languageName: node
+  linkType: hard
+
 "mdn-data@npm:2.0.14":
   version: 2.0.14
   resolution: "mdn-data@npm:2.0.14"
@@ -17213,6 +17652,350 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-core-commonmark@npm:^1.0.0, micromark-core-commonmark@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "micromark-core-commonmark@npm:1.1.0"
+  dependencies:
+    decode-named-character-reference: ^1.0.0
+    micromark-factory-destination: ^1.0.0
+    micromark-factory-label: ^1.0.0
+    micromark-factory-space: ^1.0.0
+    micromark-factory-title: ^1.0.0
+    micromark-factory-whitespace: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-chunked: ^1.0.0
+    micromark-util-classify-character: ^1.0.0
+    micromark-util-html-tag-name: ^1.0.0
+    micromark-util-normalize-identifier: ^1.0.0
+    micromark-util-resolve-all: ^1.0.0
+    micromark-util-subtokenize: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.1
+    uvu: ^0.5.0
+  checksum: c6dfedc95889cc73411cb222fc2330b9eda6d849c09c9fd9eb3cd3398af246167e9d3cdb0ae3ce9ae59dd34a14624c8330e380255d41279ad7350cf6c6be6c5b
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdx-expression@npm:^1.0.0":
+  version: 1.0.8
+  resolution: "micromark-extension-mdx-expression@npm:1.0.8"
+  dependencies:
+    "@types/estree": ^1.0.0
+    micromark-factory-mdx-expression: ^1.0.0
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-events-to-acorn: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: 49750d10c1664904a5eb61b8dae2a4ff31eef56176d02ff30de4ee4b5db7ca4598b6f044963c26771f53e2a5a517a9ff7223d87fc0b6e159332d77e4f3486cc3
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdx-jsx@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "micromark-extension-mdx-jsx@npm:1.0.5"
+  dependencies:
+    "@types/acorn": ^4.0.0
+    "@types/estree": ^1.0.0
+    estree-util-is-identifier-name: ^2.0.0
+    micromark-factory-mdx-expression: ^1.0.0
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+    vfile-message: ^3.0.0
+  checksum: 0ddb7b71c2c5f51f1232546d316b6c126ad245d57690b1af7877dd7b678b8b700d85a78587d56525b26a04082a4e833c6c9199c2db2a3379adf014be796123fb
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdx-md@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "micromark-extension-mdx-md@npm:1.0.1"
+  dependencies:
+    micromark-util-types: ^1.0.0
+  checksum: fdeaf8f4f973ec8ebefb74bb4cc1c25d2c3190e3ce4f8197e4cbc1ac325b39ac4dc2723a9f4ec8ff5b179d380e8ba37467acafa13c36dec8d312cd9822a5ab29
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdxjs-esm@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "micromark-extension-mdxjs-esm@npm:1.0.5"
+  dependencies:
+    "@types/estree": ^1.0.0
+    micromark-core-commonmark: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-events-to-acorn: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    unist-util-position-from-estree: ^1.1.0
+    uvu: ^0.5.0
+    vfile-message: ^3.0.0
+  checksum: 7006cfa963d63a56c2744a9b03021aeba99a24b0a4f769165a13446439c8df529448a63db5f3ae604d1a4f616bbebde8efd1f495d7be32acb064491878e38fbe
+  languageName: node
+  linkType: hard
+
+"micromark-extension-mdxjs@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "micromark-extension-mdxjs@npm:1.0.1"
+  dependencies:
+    acorn: ^8.0.0
+    acorn-jsx: ^5.0.0
+    micromark-extension-mdx-expression: ^1.0.0
+    micromark-extension-mdx-jsx: ^1.0.0
+    micromark-extension-mdx-md: ^1.0.0
+    micromark-extension-mdxjs-esm: ^1.0.0
+    micromark-util-combine-extensions: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: 1e6bf3df765071dbfb80b20f1ca298f6789cf759dfd19d13301c91e33794940363989107b675afeedb78af446e4af590e0f0cf8c1ed63a70682a494c015eba52
+  languageName: node
+  linkType: hard
+
+"micromark-factory-destination@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-destination@npm:1.1.0"
+  dependencies:
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: 9e2b5fb5fedbf622b687e20d51eb3d56ae90c0e7ecc19b37bd5285ec392c1e56f6e21aa7cfcb3c01eda88df88fe528f3acb91a5f57d7f4cba310bc3cd7f824fa
+  languageName: node
+  linkType: hard
+
+"micromark-factory-label@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-label@npm:1.1.0"
+  dependencies:
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: fcda48f1287d9b148c562c627418a2ab759cdeae9c8e017910a0cba94bb759a96611e1fc6df33182e97d28fbf191475237298983bb89ef07d5b02464b1ad28d5
+  languageName: node
+  linkType: hard
+
+"micromark-factory-mdx-expression@npm:^1.0.0":
+  version: 1.0.9
+  resolution: "micromark-factory-mdx-expression@npm:1.0.9"
+  dependencies:
+    "@types/estree": ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-events-to-acorn: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    unist-util-position-from-estree: ^1.0.0
+    uvu: ^0.5.0
+    vfile-message: ^3.0.0
+  checksum: 7359bf3290bf95c647aff1208d88a58288acdcd15190fe3da8bc56a683615f158a7f0593ace7ae459581079d7a9f7420a68d31ce8f0f1637cadacfb52e7782f0
+  languageName: node
+  linkType: hard
+
+"micromark-factory-space@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-space@npm:1.1.0"
+  dependencies:
+    micromark-util-character: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: b58435076b998a7e244259a4694eb83c78915581206b6e7fc07b34c6abd36a1726ade63df8972fbf6c8fa38eecb9074f4e17be8d53f942e3b3d23d1a0ecaa941
+  languageName: node
+  linkType: hard
+
+"micromark-factory-title@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-title@npm:1.1.0"
+  dependencies:
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: 4432d3dbc828c81f483c5901b0c6591a85d65a9e33f7d96ba7c3ae821617a0b3237ff5faf53a9152d00aaf9afb3a9f185b205590f40ed754f1d9232e0e9157b1
+  languageName: node
+  linkType: hard
+
+"micromark-factory-whitespace@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-whitespace@npm:1.1.0"
+  dependencies:
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: ef0fa682c7d593d85a514ee329809dee27d10bc2a2b65217d8ef81173e33b8e83c549049764b1ad851adfe0a204dec5450d9d20a4ca8598f6c94533a73f73fcd
+  languageName: node
+  linkType: hard
+
+"micromark-util-character@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "micromark-util-character@npm:1.2.0"
+  dependencies:
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: 089e79162a19b4a28731736246579ab7e9482ac93cd681c2bfca9983dcff659212ef158a66a5957e9d4b1dba957d1b87b565d85418a5b009f0294f1f07f2aaac
+  languageName: node
+  linkType: hard
+
+"micromark-util-chunked@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-chunked@npm:1.1.0"
+  dependencies:
+    micromark-util-symbol: ^1.0.0
+  checksum: c435bde9110cb595e3c61b7f54c2dc28ee03e6a57fa0fc1e67e498ad8bac61ee5a7457a2b6a73022ddc585676ede4b912d28dcf57eb3bd6951e54015e14dc20b
+  languageName: node
+  linkType: hard
+
+"micromark-util-classify-character@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-classify-character@npm:1.1.0"
+  dependencies:
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: 8499cb0bb1f7fb946f5896285fcca65cd742f66cd3e79ba7744792bd413ec46834f932a286de650349914d02e822946df3b55d03e6a8e1d245d1ddbd5102e5b0
+  languageName: node
+  linkType: hard
+
+"micromark-util-combine-extensions@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-combine-extensions@npm:1.1.0"
+  dependencies:
+    micromark-util-chunked: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: ee78464f5d4b61ccb437850cd2d7da4d690b260bca4ca7a79c4bb70291b84f83988159e373b167181b6716cb197e309bc6e6c96a68cc3ba9d50c13652774aba9
+  languageName: node
+  linkType: hard
+
+"micromark-util-decode-numeric-character-reference@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-decode-numeric-character-reference@npm:1.1.0"
+  dependencies:
+    micromark-util-symbol: ^1.0.0
+  checksum: 4733fe75146e37611243f055fc6847137b66f0cde74d080e33bd26d0408c1d6f44cabc984063eee5968b133cb46855e729d555b9ff8d744652262b7b51feec73
+  languageName: node
+  linkType: hard
+
+"micromark-util-decode-string@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-decode-string@npm:1.1.0"
+  dependencies:
+    decode-named-character-reference: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-decode-numeric-character-reference: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+  checksum: f1625155db452f15aa472918499689ba086b9c49d1322a08b22bfbcabe918c61b230a3002c8bc3ea9b1f52ca7a9bb1c3dd43ccb548c7f5f8b16c24a1ae77a813
+  languageName: node
+  linkType: hard
+
+"micromark-util-encode@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-encode@npm:1.1.0"
+  checksum: 4ef29d02b12336918cea6782fa87c8c578c67463925221d4e42183a706bde07f4b8b5f9a5e1c7ce8c73bb5a98b261acd3238fecd152e6dd1cdfa2d1ae11b60a0
+  languageName: node
+  linkType: hard
+
+"micromark-util-events-to-acorn@npm:^1.0.0":
+  version: 1.2.3
+  resolution: "micromark-util-events-to-acorn@npm:1.2.3"
+  dependencies:
+    "@types/acorn": ^4.0.0
+    "@types/estree": ^1.0.0
+    "@types/unist": ^2.0.0
+    estree-util-visit: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+    vfile-message: ^3.0.0
+  checksum: aba0dadb8689a70fab6223386b843f3084c21db0f96b412ebd7be91d2392bb8571af899c60e13eeb373a5f851d6dcd690b584ed1e09833904ac72ddd0a88a7ab
+  languageName: node
+  linkType: hard
+
+"micromark-util-html-tag-name@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "micromark-util-html-tag-name@npm:1.2.0"
+  checksum: ccf0fa99b5c58676dc5192c74665a3bfd1b536fafaf94723bd7f31f96979d589992df6fcf2862eba290ef18e6a8efb30ec8e1e910d9f3fc74f208871e9f84750
+  languageName: node
+  linkType: hard
+
+"micromark-util-normalize-identifier@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-normalize-identifier@npm:1.1.0"
+  dependencies:
+    micromark-util-symbol: ^1.0.0
+  checksum: 8655bea41ffa4333e03fc22462cb42d631bbef9c3c07b625fd852b7eb442a110f9d2e5902a42e65188d85498279569502bf92f3434a1180fc06f7c37edfbaee2
+  languageName: node
+  linkType: hard
+
+"micromark-util-resolve-all@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-resolve-all@npm:1.1.0"
+  dependencies:
+    micromark-util-types: ^1.0.0
+  checksum: 1ce6c0237cd3ca061e76fae6602cf95014e764a91be1b9f10d36cb0f21ca88f9a07de8d49ab8101efd0b140a4fbfda6a1efb72027ab3f4d5b54c9543271dc52c
+  languageName: node
+  linkType: hard
+
+"micromark-util-sanitize-uri@npm:^1.0.0, micromark-util-sanitize-uri@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "micromark-util-sanitize-uri@npm:1.2.0"
+  dependencies:
+    micromark-util-character: ^1.0.0
+    micromark-util-encode: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+  checksum: 6663f365c4fe3961d622a580f4a61e34867450697f6806f027f21cf63c92989494895fcebe2345d52e249fe58a35be56e223a9776d084c9287818b40c779acc1
+  languageName: node
+  linkType: hard
+
+"micromark-util-subtokenize@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-subtokenize@npm:1.1.0"
+  dependencies:
+    micromark-util-chunked: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: 4a9d780c4d62910e196ea4fd886dc4079d8e424e5d625c0820016da0ed399a281daff39c50f9288045cc4bcd90ab47647e5396aba500f0853105d70dc8b1fc45
+  languageName: node
+  linkType: hard
+
+"micromark-util-symbol@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-symbol@npm:1.1.0"
+  checksum: 02414a753b79f67ff3276b517eeac87913aea6c028f3e668a19ea0fc09d98aea9f93d6222a76ca783d20299af9e4b8e7c797fe516b766185dcc6e93290f11f88
+  languageName: node
+  linkType: hard
+
+"micromark-util-types@npm:^1.0.0, micromark-util-types@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "micromark-util-types@npm:1.1.0"
+  checksum: b0ef2b4b9589f15aec2666690477a6a185536927ceb7aa55a0f46475852e012d75a1ab945187e5c7841969a842892164b15d58ff8316b8e0d6cc920cabd5ede7
+  languageName: node
+  linkType: hard
+
+"micromark@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "micromark@npm:3.2.0"
+  dependencies:
+    "@types/debug": ^4.0.0
+    debug: ^4.0.0
+    decode-named-character-reference: ^1.0.0
+    micromark-core-commonmark: ^1.0.1
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-chunked: ^1.0.0
+    micromark-util-combine-extensions: ^1.0.0
+    micromark-util-decode-numeric-character-reference: ^1.0.0
+    micromark-util-encode: ^1.0.0
+    micromark-util-normalize-identifier: ^1.0.0
+    micromark-util-resolve-all: ^1.0.0
+    micromark-util-sanitize-uri: ^1.0.0
+    micromark-util-subtokenize: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.1
+    uvu: ^0.5.0
+  checksum: 56c15851ad3eb8301aede65603473443e50c92a54849cac1dadd57e4ec33ab03a0a77f3df03de47133e6e8f695dae83b759b514586193269e98c0bf319ecd5e4
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
@@ -17517,6 +18300,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mri@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "mri@npm:1.2.0"
+  checksum: 83f515abbcff60150873e424894a2f65d68037e5a7fcde8a9e2b285ee9c13ac581b63cfc1e6826c4732de3aeb84902f7c1e16b7aff46cd3f897a0f757a894e85
+  languageName: node
+  linkType: hard
+
 "mrmime@npm:^1.0.0":
   version: 1.0.1
   resolution: "mrmime@npm:1.0.1"
@@ -18469,6 +19259,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "parse-entities@npm:4.0.1"
+  dependencies:
+    "@types/unist": ^2.0.0
+    character-entities: ^2.0.0
+    character-entities-legacy: ^3.0.0
+    character-reference-invalid: ^2.0.0
+    decode-named-character-reference: ^1.0.0
+    is-alphanumerical: ^2.0.0
+    is-decimal: ^2.0.0
+    is-hexadecimal: ^2.0.0
+  checksum: 32a6ff5b9acb9d2c4d71537308521fd265e685b9215691df73feedd9edfe041bb6da9f89bd0c35c4a2bc7d58e3e76e399bb6078c2fd7d2a343ff1dd46edbf1bd
+  languageName: node
+  linkType: hard
+
 "parse-json@npm:^5.0.0, parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
@@ -18650,6 +19456,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"periscopic@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "periscopic@npm:3.1.0"
+  dependencies:
+    "@types/estree": ^1.0.0
+    estree-walker: ^3.0.0
+    is-reference: ^3.0.0
+  checksum: 2153244352e58a0d76e7e8d9263e66fe74509495f809af388da20045fb30aa3e93f2f94468dc0b9166ecf206fcfc0d73d2c7641c6fbedc07b1de858b710142cb
+  languageName: node
+  linkType: hard
+
 "pg-int8@npm:1.0.1":
   version: 1.0.1
   resolution: "pg-int8@npm:1.0.1"
@@ -20000,6 +20817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"property-information@npm:^6.0.0":
+  version: 6.2.0
+  resolution: "property-information@npm:6.2.0"
+  checksum: 23afce07ba821cbe7d926e63cdd680991961c82be4bbb6c0b17c47f48894359c1be6e51cd74485fc10a9d3fd361b475388e1e39311ed2b53127718f72aab1955
+  languageName: node
+  linkType: hard
+
 "protobufjs@npm:^7.0.0, protobufjs@npm:^7.1.2, protobufjs@npm:^7.2.2":
   version: 7.2.3
   resolution: "protobufjs@npm:7.2.3"
@@ -20762,6 +21586,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-mdx@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "remark-mdx@npm:2.3.0"
+  dependencies:
+    mdast-util-mdx: ^2.0.0
+    micromark-extension-mdxjs: ^1.0.0
+  checksum: 98486986c5b6f6a8321eb2f3b13c70fcd5644821428c77b7bfeb5ee5d4605b9761b322b2f6b531e83883cd2d5bc7bc4623427149aee00e1eba012f538b3d5627
+  languageName: node
+  linkType: hard
+
 "remark-parse@npm:8.0.3":
   version: 8.0.3
   resolution: "remark-parse@npm:8.0.3"
@@ -20786,6 +21620,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-parse@npm:^10.0.0":
+  version: 10.0.2
+  resolution: "remark-parse@npm:10.0.2"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    mdast-util-from-markdown: ^1.0.0
+    unified: ^10.0.0
+  checksum: 5041b4b44725f377e69986e02f8f072ae2222db5e7d3b6c80829756b842e811343ffc2069cae1f958a96bfa36104ab91a57d7d7e2f0cef521e210ab8c614d5c7
+  languageName: node
+  linkType: hard
+
+"remark-rehype@npm:^10.0.0":
+  version: 10.1.0
+  resolution: "remark-rehype@npm:10.1.0"
+  dependencies:
+    "@types/hast": ^2.0.0
+    "@types/mdast": ^3.0.0
+    mdast-util-to-hast: ^12.1.0
+    unified: ^10.0.0
+  checksum: b9ac8acff3383b204dfdc2599d0bdf86e6ca7e837033209584af2e6aaa6a9013e519a379afa3201299798cab7298c8f4b388de118c312c67234c133318aec084
+  languageName: node
+  linkType: hard
+
 "remark-squeeze-paragraphs@npm:4.0.0":
   version: 4.0.0
   resolution: "remark-squeeze-paragraphs@npm:4.0.0"
@@ -21156,6 +22013,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sade@npm:^1.7.3":
+  version: 1.8.1
+  resolution: "sade@npm:1.8.1"
+  dependencies:
+    mri: ^1.1.0
+  checksum: 0756e5b04c51ccdc8221ebffd1548d0ce5a783a44a0fa9017a026659b97d632913e78f7dca59f2496aa996a0be0b0c322afd87ca72ccd909406f49dbffa0f45d
+  languageName: node
+  linkType: hard
+
 "safe-array-concat@npm:^1.0.0":
   version: 1.0.0
   resolution: "safe-array-concat@npm:1.0.0"
@@ -21866,7 +22732,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.7.3":
+"source-map@npm:^0.7.0, source-map@npm:^0.7.3":
   version: 0.7.4
   resolution: "source-map@npm:0.7.4"
   checksum: 01cc5a74b1f0e1d626a58d36ad6898ea820567e87f18dfc9d24a9843a351aaa2ec09b87422589906d6ff1deed29693e176194dc88bcae7c9a852dc74b311dbf5
@@ -21896,6 +22762,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 202e97d7ca1ba0758a0aa4fe226ff98142073bcceeff2da3aad037968878552c3bbce3b3231970025375bbba5aee00c5b8206eda408da837ab2dc9c0f26be990
+  languageName: node
+  linkType: hard
+
 "spawn-command@npm:0.0.2":
   version: 0.0.2
   resolution: "spawn-command@npm:0.0.2"
@@ -22184,6 +23057,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stringify-entities@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "stringify-entities@npm:4.0.3"
+  dependencies:
+    character-entities-html4: ^2.0.0
+    character-entities-legacy: ^3.0.0
+  checksum: 59e8f523b403bf7d415690e72ae52982decd6ea5426bd8b3f5c66225ddde73e766c0c0d91627df082d0794e30b19dd907ffb5864cef3602e4098d6777d7ca3c2
+  languageName: node
+  linkType: hard
+
 "stringify-object@npm:^3.3.0":
   version: 3.3.0
   resolution: "stringify-object@npm:3.3.0"
@@ -22305,6 +23188,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-to-object@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "style-to-object@npm:0.4.1"
+  dependencies:
+    inline-style-parser: 0.1.1
+  checksum: 2ea213e98eed21764ae1d1dc9359231a9f2d480d6ba55344c4c15eb275f0809f1845786e66d4caf62414a5cc8f112ce9425a58d251c77224060373e0db48f8c2
+  languageName: node
+  linkType: hard
+
 "styled-jsx@npm:5.1.1":
   version: 5.1.1
   resolution: "styled-jsx@npm:5.1.1"
@@ -22831,6 +23723,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trim-lines@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "trim-lines@npm:3.0.1"
+  checksum: e241da104682a0e0d807222cc1496b92e716af4db7a002f4aeff33ae6a0024fef93165d49eab11aa07c71e1347c42d46563f91dfaa4d3fb945aa535cdead53ed
+  languageName: node
+  linkType: hard
+
 "trim-trailing-lines@npm:^1.0.0":
   version: 1.1.4
   resolution: "trim-trailing-lines@npm:1.1.4"
@@ -22852,6 +23751,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trough@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "trough@npm:2.1.0"
+  checksum: a577bb561c2b401cc0e1d9e188fcfcdf63b09b151ff56a668da12197fe97cac15e3d77d5b51f426ccfd94255744a9118e9e9935afe81a3644fa1be9783c82886
+  languageName: node
+  linkType: hard
+
 "tryer@npm:^1.0.1":
   version: 1.0.1
   resolution: "tryer@npm:1.0.1"
@@ -23376,6 +24282,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unified@npm:^10.0.0":
+  version: 10.1.2
+  resolution: "unified@npm:10.1.2"
+  dependencies:
+    "@types/unist": ^2.0.0
+    bail: ^2.0.0
+    extend: ^3.0.0
+    is-buffer: ^2.0.0
+    is-plain-obj: ^4.0.0
+    trough: ^2.0.0
+    vfile: ^5.0.0
+  checksum: 053e7c65ede644607f87bd625a299e4b709869d2f76ec8138569e6e886903b6988b21cd9699e471eda42bee189527be0a9dac05936f1d069a5e65d0125d5d756
+  languageName: node
+  linkType: hard
+
 "unified@npm:^9.2.2":
   version: 9.2.2
   resolution: "unified@npm:9.2.2"
@@ -23431,6 +24352,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-generated@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "unist-util-generated@npm:2.0.1"
+  checksum: 6221ad0571dcc9c8964d6b054f39ef6571ed59cc0ce3e88ae97ea1c70afe76b46412a5ffaa91f96814644ac8477e23fb1b477d71f8d70e625728c5258f5c0d99
+  languageName: node
+  linkType: hard
+
 "unist-util-is@npm:^4.0.0":
   version: 4.1.0
   resolution: "unist-util-is@npm:4.1.0"
@@ -23438,6 +24366,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-is@npm:^5.0.0":
+  version: 5.2.1
+  resolution: "unist-util-is@npm:5.2.1"
+  dependencies:
+    "@types/unist": ^2.0.0
+  checksum: ae76fdc3d35352cd92f1bedc3a0d407c3b9c42599a52ab9141fe89bdd786b51f0ec5a2ab68b93fb532e239457cae62f7e39eaa80229e1cb94875da2eafcbe5c4
+  languageName: node
+  linkType: hard
+
+"unist-util-position-from-estree@npm:^1.0.0, unist-util-position-from-estree@npm:^1.1.0":
+  version: 1.1.2
+  resolution: "unist-util-position-from-estree@npm:1.1.2"
+  dependencies:
+    "@types/unist": ^2.0.0
+  checksum: e3f4060e2a9e894c6ed63489c5a7cb58ff282e5dae9497cbc2073033ca74d6e412af4d4d342c97aea08d997c908b8bce2fe43a2062aafc2bb3f266533016588b
+  languageName: node
+  linkType: hard
+
 "unist-util-position@npm:^3.0.0":
   version: 3.1.0
   resolution: "unist-util-position@npm:3.1.0"
@@ -23445,6 +24391,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-position@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "unist-util-position@npm:4.0.4"
+  dependencies:
+    "@types/unist": ^2.0.0
+  checksum: e7487b6cec9365299695e3379ded270a1717074fa11fd2407c9b934fb08db6fe1d9077ddeaf877ecf1813665f8ccded5171693d3d9a7a01a125ec5cdd5e88691
+  languageName: node
+  linkType: hard
+
 "unist-util-remove-position@npm:^2.0.0":
   version: 2.0.1
   resolution: "unist-util-remove-position@npm:2.0.1"
@@ -23454,6 +24409,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-remove-position@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "unist-util-remove-position@npm:4.0.2"
+  dependencies:
+    "@types/unist": ^2.0.0
+    unist-util-visit: ^4.0.0
+  checksum: 989831da913d09a82a99ed9b47b78471b6409bde95942cde47e09da54b7736516f17e3c7e026af468684c1efcec5fb52df363381b2f9dc7fd96ce791c5a2fa4a
+  languageName: node
+  linkType: hard
+
 "unist-util-remove@npm:^2.0.0":
   version: 2.1.0
   resolution: "unist-util-remove@npm:2.1.0"
@@ -23472,6 +24437,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-stringify-position@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "unist-util-stringify-position@npm:3.0.3"
+  dependencies:
+    "@types/unist": ^2.0.0
+  checksum: dbd66c15183607ca942a2b1b7a9f6a5996f91c0d30cf8966fb88955a02349d9eefd3974e9010ee67e71175d784c5a9fea915b0aa0b0df99dcb921b95c4c9e124
+  languageName: node
+  linkType: hard
+
 "unist-util-visit-parents@npm:^3.0.0":
   version: 3.1.1
   resolution: "unist-util-visit-parents@npm:3.1.1"
@@ -23482,6 +24456,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-visit-parents@npm:^5.1.1":
+  version: 5.1.3
+  resolution: "unist-util-visit-parents@npm:5.1.3"
+  dependencies:
+    "@types/unist": ^2.0.0
+    unist-util-is: ^5.0.0
+  checksum: 8ecada5978994f846b64658cf13b4092cd78dea39e1ba2f5090a5de842ba4852712c02351a8ae95250c64f864635e7b02aedf3b4a093552bb30cf1bd160efbaa
+  languageName: node
+  linkType: hard
+
 "unist-util-visit@npm:2.0.3, unist-util-visit@npm:^2.0.0, unist-util-visit@npm:^2.0.3":
   version: 2.0.3
   resolution: "unist-util-visit@npm:2.0.3"
@@ -23493,6 +24477,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-visit@npm:^4.0.0":
+  version: 4.1.2
+  resolution: "unist-util-visit@npm:4.1.2"
+  dependencies:
+    "@types/unist": ^2.0.0
+    unist-util-is: ^5.0.0
+    unist-util-visit-parents: ^5.1.1
+  checksum: 95a34e3f7b5b2d4b68fd722b6229972099eb97b6df18913eda44a5c11df8b1e27efe7206dd7b88c4ed244a48c474a5b2e2629ab79558ff9eb936840295549cee
+  languageName: node
+  linkType: hard
+
 "universal-user-agent@npm:^6.0.0":
   version: 6.0.0
   resolution: "universal-user-agent@npm:6.0.0"
@@ -23732,6 +24727,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uvu@npm:^0.5.0":
+  version: 0.5.6
+  resolution: "uvu@npm:0.5.6"
+  dependencies:
+    dequal: ^2.0.0
+    diff: ^5.0.0
+    kleur: ^4.0.3
+    sade: ^1.7.3
+  bin:
+    uvu: bin.js
+  checksum: 09460a37975627de9fcad396e5078fb844d01aaf64a6399ebfcfd9e55f1c2037539b47611e8631f89be07656962af0cf48c334993db82b9ae9c3d25ce3862168
+  languageName: node
+  linkType: hard
+
 "v8-compile-cache-lib@npm:^3.0.1":
   version: 3.0.1
   resolution: "v8-compile-cache-lib@npm:3.0.1"
@@ -23792,6 +24801,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-message@npm:^3.0.0":
+  version: 3.1.4
+  resolution: "vfile-message@npm:3.1.4"
+  dependencies:
+    "@types/unist": ^2.0.0
+    unist-util-stringify-position: ^3.0.0
+  checksum: d0ee7da1973ad76513c274e7912adbed4d08d180eaa34e6bd40bc82459f4b7bc50fcaff41556135e3339995575eac5f6f709aba9332b80f775618ea4880a1367
+  languageName: node
+  linkType: hard
+
 "vfile@npm:^4.0.0":
   version: 4.2.1
   resolution: "vfile@npm:4.2.1"
@@ -23804,6 +24823,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile@npm:^5.0.0":
+  version: 5.3.7
+  resolution: "vfile@npm:5.3.7"
+  dependencies:
+    "@types/unist": ^2.0.0
+    is-buffer: ^2.0.0
+    unist-util-stringify-position: ^3.0.0
+    vfile-message: ^3.0.0
+  checksum: 642cce703afc186dbe7cabf698dc954c70146e853491086f5da39e1ce850676fc96b169fcf7898aa3ff245e9313aeec40da93acd1e1fcc0c146dc4f6308b4ef9
+  languageName: node
+  linkType: hard
+
 "vscode-oniguruma@npm:^1.7.0":
   version: 1.7.0
   resolution: "vscode-oniguruma@npm:1.7.0"
@@ -24787,3 +25818,10 @@ __metadata:
   checksum: 28a1bebacab3bc60150b6b0a2ba1db2ad033f068e81f05e4892ec0ea13ae63f5d140a1d692062ac0657840c8da076f35b94433b5f1c329d7803b247de80f064a
   languageName: node
   linkType: hard
+
+"zwitch@npm:^2.0.0":
+  version: 2.0.4
+  resolution: "zwitch@npm:2.0.4"
+  checksum: f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6
+  languageName: node
+  linkType: hard

From d06ec72c392efd74e97147aadba3163eb98dcbe3 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Fri, 28 Jul 2023 15:44:17 -0700
Subject: [PATCH 02/16] Remove test file

---
 packages/ai-jsx/src/react/jit-ui/sample.ts | 20 --------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 packages/ai-jsx/src/react/jit-ui/sample.ts

diff --git a/packages/ai-jsx/src/react/jit-ui/sample.ts b/packages/ai-jsx/src/react/jit-ui/sample.ts
deleted file mode 100644
index 51e070e73..000000000
--- a/packages/ai-jsx/src/react/jit-ui/sample.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { compile } from '@mdx-js/mdx';
-
-async function main() {
-
-try {
-  await compile(`
-  Sure, here are the details of your flight reservation:
-
-<Card>
-**Flight Number**: ABC123
-**Departure Airport**: JFK
-**Departure Date**: October 1, 2022
-**Departure Time**: 10:00 AM
-  `)
-} catch (e) {
-  console.log('got error', e)
-}
-
-}
-main().then(() => console.log('done')).catch(e => console.log('error', e));
\ No newline at end of file

From 997a3dda606b0fc09215a0e9401141cb8892d86d Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Fri, 28 Jul 2023 15:49:01 -0700
Subject: [PATCH 03/16] Docs

---
 packages/ai-jsx/src/react/jit-ui/mdx.tsx | 30 ++++++++++++++++++++----
 packages/examples/src/mdx.tsx            |  7 ++++--
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 855adca00..bd56a20f9 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -5,9 +5,29 @@ import { collectComponents } from '../completion.js';
 import { compile } from '@mdx-js/mdx';
 
 /**
- * Use GPT-4 with this.
+ * A completion component that emits [MDX](https://mdxjs.com/).
+ *
+ * By default, the result streamed out of this component will sometimes be unparsable, as the model emits a partial value.
+ * (For instance, if the model is emitting the string `foo <Bar />`, and
+ * it streams out `foo <Ba`, that's not parsable.)
+ *
+ * To ensure that the result is always parsable, pass the prop `alwaysParsable`. This will buffer up intermediate streaming results until the result accumulated so far is parsable.
+ *
+ * You'll get better results with this if you use GPT-4.
+ *
+ * Use `usageExamples` to teach the model how to use your components.
+ *
+ * @see https://docs.ai-jsx.com/guides/mdx
+ * @see https://github.com/fixie-ai/ai-jsx/blob/main/packages/examples/src/mdx.tsx
  */
-export async function* MdxChatCompletion({ children, usageExamples, alwaysParsable }: { children: AI.Node; usageExamples: React.ReactNode, alwaysParsable?: boolean }, {render, logger}: AI.ComponentContext) {
+export async function* MdxChatCompletion(
+  {
+    children,
+    usageExamples,
+    alwaysParsable,
+  }: { children: AI.Node; usageExamples: React.ReactNode; alwaysParsable?: boolean },
+  { render, logger }: AI.ComponentContext
+) {
   const components = collectComponents(usageExamples);
   /* prettier-ignore */
   const completion = <ChatCompletion>
@@ -118,7 +138,7 @@ export async function* MdxChatCompletion({ children, usageExamples, alwaysParsab
     return completion;
   }
 
-  const renderedCompletion = render(completion, {appendOnly: true});
+  const renderedCompletion = render(completion, { appendOnly: true });
   yield AI.AppendOnlyStream;
 
   let lastParsablerame = '';
@@ -127,12 +147,12 @@ export async function* MdxChatCompletion({ children, usageExamples, alwaysParsab
     const delta = frame.slice(lastParsablerame.length);
     try {
       await compile(frame);
-      logger.trace({frame}, 'Yielding parsable frame')
+      logger.trace({ frame }, 'Yielding parsable frame');
       lastParsablerame = frame;
       yield delta;
     } catch {
       // Make sure we only yield parsable frames.
-      logger.trace({frame}, 'Not yielding unparsable frame')
+      logger.trace({ frame }, 'Not yielding unparsable frame');
     }
   }
   const finalResult = await renderedCompletion;
diff --git a/packages/examples/src/mdx.tsx b/packages/examples/src/mdx.tsx
index bc1103718..e973d3b99 100644
--- a/packages/examples/src/mdx.tsx
+++ b/packages/examples/src/mdx.tsx
@@ -113,7 +113,10 @@ function QuestionAndAnswer({ children }: { children: AI.Node }, { memo }: AI.Com
       <OpenAI chatModel="gpt-4">
         Q: {question}
         {'\n'}
-        A: <MdxChatCompletion usageExamples={usageExample} alwaysParsable>{question}</MdxChatCompletion>
+        A:{' '}
+        <MdxChatCompletion usageExamples={usageExample} alwaysParsable>
+          {question}
+        </MdxChatCompletion>
         {'\n\n'}
       </OpenAI>
     </>
@@ -173,4 +176,4 @@ for await (const frame of rendering) {
   lastValue = frame;
 }
 
-// console.log(await rendering);
\ No newline at end of file
+// console.log(await rendering);

From 504026164800911ee9c1f56afdb60e749ec5b5fa Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Fri, 28 Jul 2023 16:15:30 -0700
Subject: [PATCH 04/16] Start to set up nextjs demo

---
 packages/ai-jsx/src/react/jit-ui/mdx.tsx      |  43 +-
 .../src/app/building-blocks/api/route.tsx     |  97 +++++
 .../src/app/building-blocks/loading.tsx       |   7 +
 .../src/app/building-blocks/page.tsx          |  19 +
 .../src/components/BuildingBlocks.map.tsx     |   4 +
 .../src/components/BuildingBlocks.tsx         | 369 ++++++++++++++++++
 .../components/BuildingBlocksGenerator.tsx    |  33 ++
 7 files changed, 558 insertions(+), 14 deletions(-)
 create mode 100644 packages/nextjs-demo/src/app/building-blocks/api/route.tsx
 create mode 100644 packages/nextjs-demo/src/app/building-blocks/loading.tsx
 create mode 100644 packages/nextjs-demo/src/app/building-blocks/page.tsx
 create mode 100644 packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
 create mode 100644 packages/nextjs-demo/src/components/BuildingBlocks.tsx
 create mode 100644 packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx

diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index bd56a20f9..9fb11fb7f 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -24,8 +24,8 @@ export async function* MdxChatCompletion(
   {
     children,
     usageExamples,
-    alwaysParsable,
-  }: { children: AI.Node; usageExamples: React.ReactNode; alwaysParsable?: boolean },
+    hydrate,
+  }: { children: AI.Node; usageExamples: React.ReactNode; hydrate?: boolean },
   { render, logger }: AI.ComponentContext
 ) {
   const components = collectComponents(usageExamples);
@@ -134,29 +134,44 @@ export async function* MdxChatCompletion(
     {children}
   </ChatCompletion>;
 
-  if (!alwaysParsable) {
+  if (!hydrate) {
     return completion;
   }
 
-  const renderedCompletion = render(completion, { appendOnly: true });
-  yield AI.AppendOnlyStream;
-
-  let lastParsablerame = '';
+  const renderedCompletion = render(completion);
 
   for await (const frame of renderedCompletion) {
-    const delta = frame.slice(lastParsablerame.length);
     try {
-      await compile(frame);
+      yield hydrateMDX(frame);
       logger.trace({ frame }, 'Yielding parsable frame');
-      lastParsablerame = frame;
-      yield delta;
     } catch {
       // Make sure we only yield parsable frames.
       logger.trace({ frame }, 'Not yielding unparsable frame');
     }
   }
-  const finalResult = await renderedCompletion;
-  yield finalResult.slice(lastParsablerame.length);
   // Assume the last frame is parsable.
-  return AI.AppendOnlyStream;
+  return hydrateMDX(await renderedCompletion);
+}
+
+interface Node {
+  type: string;
+  tagName?: string;
+  children?: Node[];
+  name?: string;
+  value?: string;
+  attributes?: { type: string; name: string; value: string }[];
+}
+
+async function hydrateMDX(mdx: string) {
+  let ast: Node | undefined;
+  
+  function rehypePlugin() {
+    return (_ast: Node) => {
+      ast = _ast;
+    };
+  }
+  await compile(mdx, {
+    rehypePlugins: [rehypePlugin],
+  });
+  
 }
diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
new file mode 100644
index 000000000..190d2c20e
--- /dev/null
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -0,0 +1,97 @@
+/** @jsxImportSource ai-jsx/react */
+import * as AI from 'ai-jsx/experimental/next';
+import { NextRequest } from 'next/server';
+import { UserMessage } from 'ai-jsx/core/completion';
+import BuildingBlocksMap from '@/components/BuildingBlocks.map';
+const {
+  Card,
+  ButtonGroup
+} = BuildingBlocksMap;
+import fs from 'fs';
+import path from 'path';
+import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
+
+// Flip this flag to use a fixture response. This makes it easier to iterate on the UI.
+const useFixture = false;
+
+function BuildingBlocksAI({ query }: { query: string }) {
+
+  const usageExamples = <>
+    Use a Card to display collected information to the user. The children can be markdown.
+    
+    Only use the card if you have a logically-grouped set of information to show the user, in the context of a larger response. Generally, your entire response should not be a card.
+
+    A card takes optional header and footer props.
+
+    Example 1 of how you might use this component:
+      Here's the best candidate I found:
+      <Card header='Sam Smith'>
+        **Skills**: React, TypeScript, Node.js
+        **Location**: Seattle, WA
+        **Years of experience**: 5
+        **Availability**: Full-time
+      </Card>
+
+    Example 2 of how you might use this component:
+      <Card header='Your Ferry Booking' footer='Reservation held for 20 minutes'>
+      **Leaves** at 4:15p and **arrives** at 6:20p.
+      </Card>
+
+    Example 3 of how you might use this component (using with surrounding markdown):
+      Sure, I'd be happy to help you find a car wash. Here are some options:
+
+      <Card header='AutoWorld'>
+      $50 for a quick car wash.
+      </Card>
+      <Card header='Big Joel Big Trucks'>
+      $155 for a detailing
+      </Card>
+      <Card header='Small Joel Small Trucks'>
+      $10 for some guy to spray your car with a hose.
+      </Card>
+
+    Example 4 of how you might use this component, after writing out a report on economics:
+      ... and that concludes the report on economics.
+      <Card header='Primary Points'>
+        * Price is determined by supply and demand
+        * Setting price floors or ceilings cause deadweight loss.
+        * Interfering with the natural price can also cause shortages.
+      </Card>
+
+    Use a button group when the user needs to make a choice. A ButtonGroup requires a labels prop.
+
+    Example 1 of how you might use this component:
+      <ButtonGroup labels={['Yes', 'No']} />
+
+    Example 2 of how you might use this component (using with surrounding markdown):
+      The system is configured. How would you like to proceed?
+      <ButtonGroup labels={['Deploy to prod', 'Deploy to staging', 'Cancel']} />
+  </>
+
+  return (
+    <MdxChatCompletion hydrate usageExamples={usageExamples}>
+      <UserMessage>{query}</UserMessage>
+    </MdxChatCompletion>
+  );
+}
+
+export async function POST(request: NextRequest) {
+  const { topic } = await request.json();
+
+  // This is an intentional constant flag.
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (useFixture) {
+    const textEncoder = new TextEncoder();
+    const fakeStream = fs.readFileSync(path.join(process.cwd(), 'src', 'app', 'recipe', 'api', 'fixture.txt'), 'utf-8');
+    return new Response(
+      new ReadableStream({
+        start(controller) {
+          controller.enqueue(textEncoder.encode(fakeStream));
+          controller.close();
+        },
+      })
+    );
+  }
+
+  return AI.toReactStream(BuildingBlocksMap, <BuildingBlocksAI query={topic} />);
+}
diff --git a/packages/nextjs-demo/src/app/building-blocks/loading.tsx b/packages/nextjs-demo/src/app/building-blocks/loading.tsx
new file mode 100644
index 000000000..05242d8fc
--- /dev/null
+++ b/packages/nextjs-demo/src/app/building-blocks/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-screen h-screen">
+      <p>Loading...</p>
+    </div>
+  );
+}
diff --git a/packages/nextjs-demo/src/app/building-blocks/page.tsx b/packages/nextjs-demo/src/app/building-blocks/page.tsx
new file mode 100644
index 000000000..91ac6c1a8
--- /dev/null
+++ b/packages/nextjs-demo/src/app/building-blocks/page.tsx
@@ -0,0 +1,19 @@
+import InputPrompt from '@/components/InputPrompt';
+import ResultContainer from '@/components/ResultContainer';
+import {BuildingBlocks} from '@/components/BuildingBlocksGenerator';
+
+export default function RecipeExample({ searchParams }: { searchParams: any }) {
+  const defaultValue = 'Chicken Tikka Masala';
+  const query = searchParams.q ?? defaultValue;
+  return (
+    <>
+      <ResultContainer
+        title="Building Blocks"
+        description="In this demo, the AI can use building block UI components"
+      >
+        <InputPrompt label="Ask me anything..." defaultValue={query} />
+        <BuildingBlocks topic={query} />
+      </ResultContainer>
+    </>
+  );
+}
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
new file mode 100644
index 000000000..504ba991d
--- /dev/null
+++ b/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
@@ -0,0 +1,4 @@
+import * as BuildingBlocks from './BuildingBlocks';
+import { makeComponentMap } from 'ai-jsx/react/map';
+
+export default makeComponentMap(BuildingBlocks);
\ No newline at end of file
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
new file mode 100644
index 000000000..f9fa7c785
--- /dev/null
+++ b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
@@ -0,0 +1,369 @@
+'use client';
+
+import React, { ReactNode, Children, useState } from 'react';
+import classNames from 'classnames';
+import _ from 'lodash';
+// @ts-expect-error
+import { Switch } from '@headlessui/react';
+
+export function Button({ children, primary }: { children: ReactNode; primary?: boolean }) {
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'inline-flex items-center gap-x-1.5 rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-sm',
+        primary
+          ? 'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+          : 'bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50'
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function IconButton({ children }: { children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      className="rounded-full bg-indigo-600 p-1.5 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+    >
+      {children}
+    </button>
+  );
+}
+
+type BackgroundColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
+export function Badge({ children, color }: { children: ReactNode; color: BackgroundColor }) {
+  function getColorClasses() {
+    switch (color) {
+      case 'red':
+        return 'bg-red-100 text-red-800 ring-red-600/20';
+      case 'green':
+        return 'bg-green-100 text-green-800 ring-green-600/20';
+      case 'yellow':
+        return 'bg-yellow-100 text-yellow-800 ring-yellow-600/20';
+      case 'blue':
+        return 'bg-blue-100 text-blue-800 ring-blue-600/20';
+      case 'indigo':
+        return 'bg-indigo-100 text-indigo-800 ring-indigo-600/20';
+      case 'purple':
+        return 'bg-purple-100 text-purple-800 ring-purple-600/20';
+      case 'pink':
+        return 'bg-pink-100 text-pink-800 ring-pink-600/20';
+      case 'gray':
+        return 'bg-gray-100 text-gray-800 ring-gray-600/20';
+      default:
+        throw new Error(`Unrecognized color: ${color}`);
+    }
+  }
+  return (
+    <span
+      className={classNames(
+        'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
+        getColorClasses()
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ButtonGroup({ labels }: { labels: string[] }) {
+  return (
+    <span className="isolate inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        className="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+      >
+        {labels[0]}
+      </button>
+      {labels.length > 2 &&
+        labels.slice(1, -1).map((label, index) => (
+          <button
+            key={index}
+            type="button"
+            className="relative -ml-px inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+          >
+            {label}
+          </button>
+        ))}
+
+      <button
+        type="button"
+        className="relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+      >
+        {_.last(labels)}
+      </button>
+    </span>
+  );
+}
+
+export function Card({ children, header, footer }: { children: ReactNode; header?: ReactNode; footer?: ReactNode }) {
+  if (header || footer) {
+    return (
+      <div className="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
+        {header && <div className="px-4 py-5 sm:px-6">{header}</div>}
+
+        <div className="px-4 py-5 sm:p-6">{children}</div>
+        {footer && <div className="px-4 py-4 sm:px-6">{footer}</div>}
+      </div>
+    );
+  }
+  return (
+    <div className="overflow-hidden rounded-lg bg-white shadow">
+      <div className="px-4 py-5 sm:p-6">{children}</div>
+    </div>
+  );
+}
+
+export function CardList({ children }: { children: ReactNode[] }) {
+  return (
+    <ul role="list" className="space-y-3">
+      {Children.map(children, (child, index) => (
+        <li key={index} className="overflow-hidden rounded-md bg-white px-6 py-4 shadow">
+          {child}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * Example:
+ * 
+    <InputWithLabel
+      label="Quests Completed"
+      type="number"
+      id="character-quests-completed"
+      exampleValue="0"
+    />
+
+  Example 2:
+
+    <InputWithLabel
+      label="Gold"
+      type="number"
+      id="character-gold"
+      exampleValue="0"
+      helpText="The amount of gold the character has"
+    />
+ */
+export function InputWithLabel({
+  label,
+  type,
+  id,
+  exampleValue,
+  helpText,
+}: {
+  label: string;
+  type: string;
+  id: string;
+  /* An example value. This is NOT the place for help text. */
+  exampleValue: string;
+
+  /* Text guiding the user on how to fill out the input. */
+  helpText?: string;
+}) {
+  return (
+    <div>
+      <div className="rounded-md px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-indigo-600">
+        <label htmlFor={id} className="block text-xs font-medium text-gray-900">
+          {label}
+        </label>
+        <input
+          type={type}
+          name={id}
+          id={id}
+          className="block w-full border-0 p-0 text-gray-900 exampleValue:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
+          placeholder={exampleValue}
+        />
+      </div>
+      {helpText && (
+        <p className="mt-2 text-sm text-gray-500" id="email-description">
+          {helpText}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function TextAreaInput({ label, id, defaultValue }: { label: string; id: string; defaultValue: string }) {
+  return (
+    <div>
+      <label htmlFor="comment" className="block text-sm font-medium leading-6 text-gray-900">
+        {label}
+      </label>
+      <div className="mt-2">
+        <textarea
+          rows={4}
+          name={id}
+          id={id}
+          className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 exampleValue:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+          defaultValue={defaultValue}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function SimpleRadioGroup({ choices }: { choices: { id: string; title: string }[] }) {
+  return (
+    <div>
+      <label className="text-base font-semibold text-gray-900">Notifications</label>
+      <p className="text-sm text-gray-500">How do you prefer to receive notifications?</p>
+      <fieldset className="mt-4">
+        <legend className="sr-only">Notification method</legend>
+        <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
+          {choices.map((choice) => (
+            <div key={choice.id} className="flex items-center">
+              <input
+                id={choice.id}
+                name="notification-method"
+                type="radio"
+                defaultChecked={choice.id === 'email'}
+                className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+              />
+              <label htmlFor={choice.id} className="ml-3 block text-sm font-medium leading-6 text-gray-900">
+                {choice.title}
+              </label>
+            </div>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+export function Toggle({ title, subtitle }: { title: string; subtitle?: string }) {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Switch.Group as="div" className="flex items-center">
+      <Switch
+        checked={enabled}
+        onChange={setEnabled}
+        className={classNames(
+          enabled ? 'bg-indigo-600' : 'bg-gray-200',
+          'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+        )}
+      >
+        <span
+          aria-hidden="true"
+          className={classNames(
+            enabled ? 'translate-x-5' : 'translate-x-0',
+            'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+          )}
+        />
+      </Switch>
+      <Switch.Label as="span" className="ml-3 text-sm">
+        <span className="font-medium text-gray-900">{title}</span>{' '}
+        {subtitle && <span className="text-gray-500">{subtitle}</span>}
+      </Switch.Label>
+    </Switch.Group>
+  );
+}
+
+export function CheckboxList({ items }: { items: { id: string; title: string; description: string }[] }) {
+  return (
+    <fieldset>
+      <div className="space-y-5">
+        {items.map((item, index) => (
+          <div className="relative flex items-start" key={index}>
+            <div className="flex h-6 items-center">
+              <input
+                id={item.id}
+                aria-describedby={`${item.id}-description`}
+                name={item.id}
+                type="checkbox"
+                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+              />
+            </div>
+            <div className="ml-3 text-sm leading-6">
+              <label htmlFor={item.id} className="font-medium text-gray-900">
+                {item.title}
+              </label>
+              <p id="comments-description" className="text-gray-500">
+                {item.description}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </fieldset>
+  );
+}
+
+export default function ActionPanel({
+  title,
+  description,
+  buttonLabel,
+}: {
+  title: ReactNode;
+  description: ReactNode;
+  buttonLabel: ReactNode;
+}) {
+  return (
+    <Card>
+      <h3 className="text-base font-semibold leading-6 text-gray-900">{title}</h3>
+      <div className="mt-2 max-w-xl text-sm text-gray-500">
+        <p>{description}</p>
+      </div>
+      <div className="mt-5">
+        <button
+          type="button"
+          className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+        >
+          {buttonLabel}
+        </button>
+      </div>
+    </Card>
+  );
+}
+
+export function StackedFormSection({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="border-b border-gray-900/10 pb-6">
+      <h2 className="text-base font-semibold leading-7 text-gray-900">{title}</h2>
+      {subtitle && <p className="mt-1 text-sm leading-6 text-gray-600">{subtitle}</p>}
+      <div className="mt-4 flex flex-col gap-y-3">{children}</div>
+    </div>
+  );
+}
+
+export function StackedForm({
+  children,
+  cancelLabel,
+  submitLabel,
+}: {
+  children: ReactNode;
+  cancelLabel: ReactNode;
+  submitLabel: ReactNode;
+}) {
+  return (
+    <form>
+      <div className="space-y-6">{children}</div>
+      <div className="mt-6 flex items-center justify-end gap-x-6">
+        <button type="button" className="text-sm font-semibold leading-6 text-gray-900">
+          {cancelLabel}
+        </button>
+        <button
+          type="submit"
+          className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          {submitLabel}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+// TODO: What's the best way to give the UI icons? Maybe stick to emojis for now?
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
new file mode 100644
index 000000000..d74cdc155
--- /dev/null
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -0,0 +1,33 @@
+import { useAIStream } from 'ai-jsx/react';
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import BuildingBlocksMap from './BuildingBlocks.map';
+
+export default function BuildingBlockGenerator({ topic }: { topic: string }) {
+  const [isLoading, setIsLoading] = useState(false);
+  const { current, fetchAI } = useAIStream({
+    componentMap: BuildingBlocksMap,
+    onComplete: (x) => {
+      setIsLoading(false);
+      return x;
+    },
+  });
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetchAI('/building-blocks/api', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ topic }),
+    });
+  }, [topic]);
+
+  return (
+    <div>
+      <div className="whitespace-pre-line">{current}</div>
+      <div className="mt-4">
+        {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}
+      </div>
+    </div>
+  );
+}

From 72c0ca263ff22846d61ab1bbc2c8c3f427ae6ee9 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Fri, 28 Jul 2023 16:47:24 -0700
Subject: [PATCH 05/16] Attempting to make hydration work

---
 packages/ai-jsx/src/react/jit-ui/mdx.tsx      | 110 ++++++++++++++----
 packages/examples/src/mdx.tsx                 |   5 +-
 .../src/app/building-blocks/api/route.tsx     |  80 +++++--------
 .../src/app/building-blocks/page.tsx          |  12 +-
 .../src/components/BuildingBlocks.map.tsx     |   2 +-
 .../components/BuildingBlocksGenerator.tsx    |   2 +
 .../nextjs-demo/src/components/NavBar.tsx     |   1 +
 7 files changed, 128 insertions(+), 84 deletions(-)

diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 9fb11fb7f..897275431 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -1,8 +1,11 @@
+/** @jsxImportSource ai-jsx/react */
+
 import * as AI from '../core.js';
 import { ChatCompletion, SystemMessage } from '../../core/completion.js';
 import React from 'react';
 import { collectComponents } from '../completion.js';
 import { compile } from '@mdx-js/mdx';
+import _ from 'lodash';
 
 /**
  * A completion component that emits [MDX](https://mdxjs.com/).
@@ -21,11 +24,7 @@ import { compile } from '@mdx-js/mdx';
  * @see https://github.com/fixie-ai/ai-jsx/blob/main/packages/examples/src/mdx.tsx
  */
 export async function* MdxChatCompletion(
-  {
-    children,
-    usageExamples,
-    hydrate,
-  }: { children: AI.Node; usageExamples: React.ReactNode; hydrate?: boolean },
+  { children, usageExamples, hydrate }: { children: AI.Node; usageExamples: React.ReactNode; hydrate?: boolean },
   { render, logger }: AI.ComponentContext
 ) {
   const components = collectComponents(usageExamples);
@@ -138,11 +137,94 @@ export async function* MdxChatCompletion(
     return completion;
   }
 
+  async function hydrateMDX(mdx: string, components: ReturnType<typeof collectComponents>) {
+    let ast: Node | undefined;
+
+    function rehypePlugin() {
+      return (_ast: Node) => {
+        ast = _ast;
+      };
+    }
+    await compile(mdx, {
+      rehypePlugins: [rehypePlugin],
+    });
+
+    const hydrated = convertAstToComponent(ast!, components);
+    logger.warn({ hydrated }, 'Hydrating MDX');
+
+    return (
+      <AI.React>
+        {convertAstToComponent(ast!, components)}
+        {/* <div>{mdx}</div> */}
+        {/* {React.createElement('div', { children: mdx })} */}
+      </AI.React>
+    );
+  }
+
+  function convertAstToComponent(ast: Node, components: ReturnType<typeof collectComponents>): React.ReactNode {
+    function convertAstToComponentRec(ast: Node): React.ReactNode {
+      const { type, tagName, children = [], name, attributes = [] } = ast;
+
+      switch (type) {
+        case 'root': {
+          return <div>{_.compact(children.map(convertAstToComponentRec))}</div>;
+        }
+        case 'element': {
+          return React.createElement(tagName!, {}, _.compact(children.map(convertAstToComponentRec)));
+        }
+        case 'mdxJsxFlowElement': {
+          const componentName = name!;
+          // @ts-expect-error
+          const props = attributes.reduce<Jsonifiable>((acc: any, attr: any) => {
+            if (attr.value?.type) {
+              // E.g. <A b={null} />
+              throw new Error(
+                `Unimplemented code path: handling a React component with a non-trivial prop ${JSON.stringify(
+                  attr.value,
+                  null,
+                  2
+                )}`
+              );
+            }
+            acc[attr.name] = attr.value === null ? true : attr.value;
+            return acc;
+          }, {});
+
+          const Component = components[componentName];
+          if (!Component) {
+            logger.warn(
+              { component: componentName },
+              `Ignoring component "${componentName}" that wasn't present in the example. ` +
+                'You may need to adjust the prompt or include an example of this component.'
+            );
+            return null;
+          }
+
+          return <Component {...props}>{_.compact(children.map(convertAstToComponentRec))}</Component>;
+        }
+        case 'text': {
+          if (ast.value === '\n') {
+            return <br />;
+          }
+          return <p>{[ast.value]}</p>;
+        }
+        // We handle the imports separately.
+        case 'mdxjsEsm': {
+          return null;
+        }
+        default: {
+          throw new Error(`Unhandled type: ${JSON.stringify(ast, null, 2)}`);
+        }
+      }
+    }
+    return convertAstToComponentRec(ast);
+  }
+
   const renderedCompletion = render(completion);
 
   for await (const frame of renderedCompletion) {
     try {
-      yield hydrateMDX(frame);
+      yield hydrateMDX(frame, components);
       logger.trace({ frame }, 'Yielding parsable frame');
     } catch {
       // Make sure we only yield parsable frames.
@@ -150,7 +232,7 @@ export async function* MdxChatCompletion(
     }
   }
   // Assume the last frame is parsable.
-  return hydrateMDX(await renderedCompletion);
+  return hydrateMDX(await renderedCompletion, components);
 }
 
 interface Node {
@@ -161,17 +243,3 @@ interface Node {
   value?: string;
   attributes?: { type: string; name: string; value: string }[];
 }
-
-async function hydrateMDX(mdx: string) {
-  let ast: Node | undefined;
-  
-  function rehypePlugin() {
-    return (_ast: Node) => {
-      ast = _ast;
-    };
-  }
-  await compile(mdx, {
-    rehypePlugins: [rehypePlugin],
-  });
-  
-}
diff --git a/packages/examples/src/mdx.tsx b/packages/examples/src/mdx.tsx
index e973d3b99..7a74e79e2 100644
--- a/packages/examples/src/mdx.tsx
+++ b/packages/examples/src/mdx.tsx
@@ -113,10 +113,7 @@ function QuestionAndAnswer({ children }: { children: AI.Node }, { memo }: AI.Com
       <OpenAI chatModel="gpt-4">
         Q: {question}
         {'\n'}
-        A:{' '}
-        <MdxChatCompletion usageExamples={usageExample} alwaysParsable>
-          {question}
-        </MdxChatCompletion>
+        A: <MdxChatCompletion usageExamples={usageExample}>{question}</MdxChatCompletion>
         {'\n\n'}
       </OpenAI>
     </>
diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
index 190d2c20e..f725decc2 100644
--- a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -3,10 +3,7 @@ import * as AI from 'ai-jsx/experimental/next';
 import { NextRequest } from 'next/server';
 import { UserMessage } from 'ai-jsx/core/completion';
 import BuildingBlocksMap from '@/components/BuildingBlocks.map';
-const {
-  Card,
-  ButtonGroup
-} = BuildingBlocksMap;
+const { Card, ButtonGroup } = BuildingBlocksMap;
 import fs from 'fs';
 import path from 'path';
 import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
@@ -15,58 +12,39 @@ import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
 const useFixture = false;
 
 function BuildingBlocksAI({ query }: { query: string }) {
-
-  const usageExamples = <>
-    Use a Card to display collected information to the user. The children can be markdown.
-    
-    Only use the card if you have a logically-grouped set of information to show the user, in the context of a larger response. Generally, your entire response should not be a card.
-
-    A card takes optional header and footer props.
-
-    Example 1 of how you might use this component:
-      Here's the best candidate I found:
-      <Card header='Sam Smith'>
-        **Skills**: React, TypeScript, Node.js
-        **Location**: Seattle, WA
-        **Years of experience**: 5
-        **Availability**: Full-time
-      </Card>
-
-    Example 2 of how you might use this component:
-      <Card header='Your Ferry Booking' footer='Reservation held for 20 minutes'>
-      **Leaves** at 4:15p and **arrives** at 6:20p.
-      </Card>
-
-    Example 3 of how you might use this component (using with surrounding markdown):
-      Sure, I'd be happy to help you find a car wash. Here are some options:
-
-      <Card header='AutoWorld'>
-      $50 for a quick car wash.
-      </Card>
-      <Card header='Big Joel Big Trucks'>
-      $155 for a detailing
+  const usageExamples = (
+    <>
+      Use a Card to display collected information to the user. The children can be markdown. Only use the card if you
+      have a logically-grouped set of information to show the user, in the context of a larger response. Generally, your
+      entire response should not be a card. A card takes optional header and footer props. Example 1 of how you might
+      use this component: Here's the best candidate I found:
+      <Card header="Sam Smith">
+        **Skills**: React, TypeScript, Node.js **Location**: Seattle, WA **Years of experience**: 5 **Availability**:
+        Full-time
       </Card>
-      <Card header='Small Joel Small Trucks'>
-      $10 for some guy to spray your car with a hose.
+      Example 2 of how you might use this component:
+      <Card header="Your Ferry Booking" footer="Reservation held for 20 minutes">
+        **Leaves** at 4:15p and **arrives** at 6:20p.
       </Card>
-
-    Example 4 of how you might use this component, after writing out a report on economics:
-      ... and that concludes the report on economics.
-      <Card header='Primary Points'>
-        * Price is determined by supply and demand
-        * Setting price floors or ceilings cause deadweight loss.
-        * Interfering with the natural price can also cause shortages.
+      Example 3 of how you might use this component (using with surrounding markdown): Sure, I'd be happy to help you
+      find a car wash. Here are some options:
+      <Card header="AutoWorld">$50 for a quick car wash.</Card>
+      <Card header="Big Joel Big Trucks">$155 for a detailing</Card>
+      <Card header="Small Joel Small Trucks">$10 for some guy to spray your car with a hose.</Card>
+      Example 4 of how you might use this component, after writing out a report on economics: ... and that concludes the
+      report on economics.
+      <Card header="Primary Points">
+        * Price is determined by supply and demand * Setting price floors or ceilings cause deadweight loss. *
+        Interfering with the natural price can also cause shortages.
       </Card>
-
-    Use a button group when the user needs to make a choice. A ButtonGroup requires a labels prop.
-
-    Example 1 of how you might use this component:
+      Use a button group when the user needs to make a choice. A ButtonGroup requires a labels prop. Example 1 of how
+      you might use this component:
       <ButtonGroup labels={['Yes', 'No']} />
-
-    Example 2 of how you might use this component (using with surrounding markdown):
-      The system is configured. How would you like to proceed?
+      Example 2 of how you might use this component (using with surrounding markdown): The system is configured. How
+      would you like to proceed?
       <ButtonGroup labels={['Deploy to prod', 'Deploy to staging', 'Cancel']} />
-  </>
+    </>
+  );
 
   return (
     <MdxChatCompletion hydrate usageExamples={usageExamples}>
diff --git a/packages/nextjs-demo/src/app/building-blocks/page.tsx b/packages/nextjs-demo/src/app/building-blocks/page.tsx
index 91ac6c1a8..7f5eeab16 100644
--- a/packages/nextjs-demo/src/app/building-blocks/page.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/page.tsx
@@ -1,16 +1,14 @@
 import InputPrompt from '@/components/InputPrompt';
 import ResultContainer from '@/components/ResultContainer';
-import {BuildingBlocks} from '@/components/BuildingBlocksGenerator';
+import BuildingBlocks from '@/components/BuildingBlocksGenerator';
 
-export default function RecipeExample({ searchParams }: { searchParams: any }) {
-  const defaultValue = 'Chicken Tikka Masala';
+export default function BuildingBlocksPage({ searchParams }: { searchParams: any }) {
+  const defaultValue =
+    'Summarize this JSON blob for me, using a card: {"reservation":{"reservationId":"1234567890","passengerName":"John Doe","flightNumber":"ABC123","origin":"Los Angeles","destination":"New York","departureDate":"2022-01-01","departureTime":"09:00","arrivalDate":"2022-01-01","arrivalTime":"15:00"}}';
   const query = searchParams.q ?? defaultValue;
   return (
     <>
-      <ResultContainer
-        title="Building Blocks"
-        description="In this demo, the AI can use building block UI components"
-      >
+      <ResultContainer title="Building Blocks" description="In this demo, the AI can use building block UI components">
         <InputPrompt label="Ask me anything..." defaultValue={query} />
         <BuildingBlocks topic={query} />
       </ResultContainer>
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
index 504ba991d..ad4261685 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
@@ -1,4 +1,4 @@
 import * as BuildingBlocks from './BuildingBlocks';
 import { makeComponentMap } from 'ai-jsx/react/map';
 
-export default makeComponentMap(BuildingBlocks);
\ No newline at end of file
+export default makeComponentMap(BuildingBlocks);
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index d74cdc155..e0b1354fc 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useAIStream } from 'ai-jsx/react';
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
diff --git a/packages/nextjs-demo/src/components/NavBar.tsx b/packages/nextjs-demo/src/components/NavBar.tsx
index 2afe53a14..5365dac30 100644
--- a/packages/nextjs-demo/src/components/NavBar.tsx
+++ b/packages/nextjs-demo/src/components/NavBar.tsx
@@ -13,6 +13,7 @@ export default function NavBar() {
     'Basic Chat': '/basic-chat',
     'Docs Chat': '/docs-chat',
     'Recipe JIT UI': '/recipe',
+    'Building Blocks JIT UI': '/building-blocks',
   };
 
   return (

From c880d53e0d197d785ac4208a49802a7a3bec4e76 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Fri, 28 Jul 2023 17:30:09 -0700
Subject: [PATCH 06/16] This is broken in some ways, but also sorta works?

---
 packages/ai-jsx/src/react/jit-ui/mdx.tsx      | 171 ++++++++++--------
 .../src/app/building-blocks/api/route.tsx     |   7 +-
 2 files changed, 98 insertions(+), 80 deletions(-)

diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 897275431..01ba7c1da 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -29,109 +29,117 @@ export async function* MdxChatCompletion(
 ) {
   const components = collectComponents(usageExamples);
   /* prettier-ignore */
-  const completion = <ChatCompletion>
-    <SystemMessage>
-      You are an assistant who can use React components to work with the user. By default, you use markdown. However, if it's useful, you can also mix in the following React components: {Object.keys(components).join(', ')}.
-      All your responses
-      should be in MDX, which is Markdown For the Component Era. Here are instructions for how to use MDX:
-      === Begin instructions
-      {/* Snipped from https://github.com/mdx-js/mdx/blob/main/docs/docs/what-is-mdx.server.mdx. */}
-      MDX allows you to use JSX in your markdown content.
-      You can import components, such as interactive charts or alerts, and embed them
-      within your content.
-      This makes writing long-form content with components a blast.
+  // const completion = <ChatCompletion>
+  //   <SystemMessage>
+  //     You are an assistant who can use React components to work with the user. By default, you use markdown. However, if it's useful, you can also mix in the following React components: {Object.keys(components).join(', ')}.
+  //     All your responses
+  //     should be in MDX, which is Markdown For the Component Era. Here are instructions for how to use MDX:
+  //     === Begin instructions
+  //     {/* Snipped from https://github.com/mdx-js/mdx/blob/main/docs/docs/what-is-mdx.server.mdx. */}
+  //     MDX allows you to use JSX in your markdown content.
+  //     You can import components, such as interactive charts or alerts, and embed them
+  //     within your content.
+  //     This makes writing long-form content with components a blast.
 
-      More practically MDX can be explained as a format that combines markdown with
-      JSX and looks as follows:
+  //     More practically MDX can be explained as a format that combines markdown with
+  //     JSX and looks as follows:
 
-      === Begin example
-      {`
-        Here is some markdown text 
-        <MyComponent id="123" />
+  //     === Begin example
+  //     {`
+  //       Here is some markdown text
+  //       <MyComponent id="123" />
 
-        # Here is more markdown text
+  //       # Here is more markdown text
 
-        <Component
-          open
-          x={1}
-          label={'this is a string, *not* markdown!'}
-          icon={<Icon />}
-        />
+  //       <Component
+  //         open
+  //         x={1}
+  //         label={'this is a string, *not* markdown!'}
+  //         icon={<Icon />}
+  //       />
 
-        * Markdown list item 1
-        * Markdown list item 2
-        * Markdown list item 3
-      `}
-      === end example
-      === end instructions
+  //       * Markdown list item 1
+  //       * Markdown list item 2
+  //       * Markdown list item 3
+  //     `}
+  //     === end example
+  //     === end instructions
 
-      Do not include a starting ```mdx and closing ``` line. Just respond with the MDX itself.
+  //     Do not include a starting ```mdx and closing ``` line. Just respond with the MDX itself.
 
-      Do not include extra whitespace that is not needed for the markdown interpretation. For instance, if your component has a prop that's a JSON object, put it all on one line:
+  //     Do not include extra whitespace that is not needed for the markdown interpretation. For instance, if your component has a prop that's a JSON object, put it all on one line:
 
-      {'<Component prop={[[{"key": "value"}, {"long": "field"}]]} />'}
+  //     {'<Component prop={[[{"key": "value"}, {"long": "field"}]]} />'}
 
-      This doc tells you the differences between MDX and markdown.
+  //     This doc tells you the differences between MDX and markdown.
 
-      {/* Adapted from https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown */}
-      === Start doc
-      ### 7.2 Deviations from Markdown
+  //     {/* Adapted from https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown */}
+  //     === Start doc
+  //     ### 7.2 Deviations from Markdown
 
-      MDX adds constructs to Markdown but also prohibits certain normal Markdown
-      constructs.
+  //     MDX adds constructs to Markdown but also prohibits certain normal Markdown
+  //     constructs.
 
-      #### 7.2.2 Indented code
+  //     #### 7.2.2 Indented code
 
-      Indentation to create code blocks is not supported.
-      Instead, use fenced code blocks.
+  //     Indentation to create code blocks is not supported.
+  //     Instead, use fenced code blocks.
 
-      The reason for this change is so that elements can be indented.
+  //     The reason for this change is so that elements can be indented.
 
-      {/* Commenting out the negative examples because they seem to confuse the LLM. */}
-      {/*
-      Incorrect:
+  //     {/* Commenting out the negative examples because they seem to confuse the LLM. */}
+  //     {/*
+  //     Incorrect:
 
-      ```markdown
-          console.log(1)
-      ``` */}
+  //     ```markdown
+  //         console.log(1)
+  //     ``` */}
 
-      Correct:
+  //     Correct:
 
-        ```js
-        console.log(1)
-        ```
+  //       ```js
+  //       console.log(1)
+  //       ```
 
-      #### 7.2.3 Autolinks
+  //     #### 7.2.3 Autolinks
 
-      Autolinks are not supported.
-      Instead, use links or references.
+  //     Autolinks are not supported.
+  //     Instead, use links or references.
 
-      The reason for this change is because whether something is an element (whether
-      HTML or JSX) or an autolink is ambiguous {'(Markdown normally treats `<svg:rect>`, `<xml:lang/>`, or `<svg:circle{...props}>` as links).'}
+  //     The reason for this change is because whether something is an element (whether
+  //     HTML or JSX) or an autolink is ambiguous {'(Markdown normally treats `<svg:rect>`, `<xml:lang/>`, or `<svg:circle{...props}>` as links).'}
 
-      {/* Incorrect:
+  //     {/* Incorrect:
 
-      ```markdown
-      See <https://example.com> for more information
-      ``` */}
+  //     ```markdown
+  //     See <https://example.com> for more information
+  //     ``` */}
 
-      Correct:
+  //     Correct:
 
-        See [example.com](https://example.com) for more information.
+  //       See [example.com](https://example.com) for more information.
 
-      #### 7.2.4 Errors
+  //     #### 7.2.4 Errors
 
-      Whereas all Markdown is valid, incorrect MDX will crash.
-      === end doc
+  //     Whereas all Markdown is valid, incorrect MDX will crash.
+  //     === end doc
 
-      Here are the components you have available, and how to use them:
+  //     Here are the components you have available, and how to use them:
 
-      === Begin components
-      <AI.React>{usageExamples}</AI.React>
-      === end components
-    </SystemMessage>
-    {children}
-  </ChatCompletion>;
+  //     === Begin components
+  //     <AI.React>{usageExamples}</AI.React>
+  //     === end components
+  //   </SystemMessage>
+  //   {children}
+  // </ChatCompletion>;
+
+  const completion = <>{`pre text
+<Card>
+  * **Foo**: bar
+  <Badge color='red'>Content</Badge>
+  <Toggle title='my title' subtitle='my subtitle' />
+</Card>
+post text`}</>
 
   if (!hydrate) {
     return completion;
@@ -150,7 +158,7 @@ export async function* MdxChatCompletion(
     });
 
     const hydrated = convertAstToComponent(ast!, components);
-    logger.warn({ hydrated }, 'Hydrating MDX');
+    logger.warn({ hydrated, ast }, 'Hydrating MDX');
 
     return (
       <AI.React>
@@ -170,8 +178,10 @@ export async function* MdxChatCompletion(
           return <div>{_.compact(children.map(convertAstToComponentRec))}</div>;
         }
         case 'element': {
-          return React.createElement(tagName!, {}, _.compact(children.map(convertAstToComponentRec)));
+          return <div>element {_.compact(children.map(convertAstToComponentRec))}</div>;
+          // return React.createElement(tagName!, {}, ..._.compact(children.map(convertAstToComponentRec)));
         }
+        case 'mdxJsxTextElement':
         case 'mdxJsxFlowElement': {
           const componentName = name!;
           // @ts-expect-error
@@ -200,20 +210,23 @@ export async function* MdxChatCompletion(
             return null;
           }
 
+          // return <div>{JSON.stringify(ast)}</div>
+          // return React.createElement(Component, props, _.compact(children.map(convertAstToComponentRec)));
+          // console.log({Component}, 'rendering component');
           return <Component {...props}>{_.compact(children.map(convertAstToComponentRec))}</Component>;
         }
         case 'text': {
           if (ast.value === '\n') {
             return <br />;
           }
-          return <p>{[ast.value]}</p>;
+          return <span>{[ast.value]}</span>;
         }
         // We handle the imports separately.
         case 'mdxjsEsm': {
           return null;
         }
         default: {
-          throw new Error(`Unhandled type: ${JSON.stringify(ast, null, 2)}`);
+          throw new Error(`Unhandled MDX AST type: ${JSON.stringify(ast, null, 2)}`);
         }
       }
     }
@@ -231,7 +244,7 @@ export async function* MdxChatCompletion(
       logger.trace({ frame }, 'Not yielding unparsable frame');
     }
   }
-  // Assume the last frame is parsable.
+  // TODO: do not assume the last frame is parsable.
   return hydrateMDX(await renderedCompletion, components);
 }
 
diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
index f725decc2..46be5e890 100644
--- a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -3,7 +3,7 @@ import * as AI from 'ai-jsx/experimental/next';
 import { NextRequest } from 'next/server';
 import { UserMessage } from 'ai-jsx/core/completion';
 import BuildingBlocksMap from '@/components/BuildingBlocks.map';
-const { Card, ButtonGroup } = BuildingBlocksMap;
+const { Card, ButtonGroup, Badge, Toggle } = BuildingBlocksMap;
 import fs from 'fs';
 import path from 'path';
 import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
@@ -43,6 +43,11 @@ function BuildingBlocksAI({ query }: { query: string }) {
       Example 2 of how you might use this component (using with surrounding markdown): The system is configured. How
       would you like to proceed?
       <ButtonGroup labels={['Deploy to prod', 'Deploy to staging', 'Cancel']} />
+      Use a badge to indicate status:
+      <Badge color="yellow">In progress</Badge>
+      <Badge color="green">Complete</Badge>
+      Use a toggle to let users enable/disable an option:
+      <Toggle title="Use rocket fuel" subtitle="($7 surcharge)" />
     </>
   );
 

From a8e8c8613c35464f500538a14b2bb269524b8deb Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Sat, 29 Jul 2023 16:33:03 -0700
Subject: [PATCH 07/16] Futzin around

---
 packages/ai-jsx/src/react/jit-ui/mdx.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 01ba7c1da..cb12744c3 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -145,6 +145,9 @@ post text`}</>
     return completion;
   }
 
+  // Instead of this, should we just be sending the raw MDX to the client,
+  // then having an MDX component do the on-the-fly compiling?
+  // How else will we customize what everything gets compiled to?
   async function hydrateMDX(mdx: string, components: ReturnType<typeof collectComponents>) {
     let ast: Node | undefined;
 
@@ -153,12 +156,12 @@ post text`}</>
         ast = _ast;
       };
     }
-    await compile(mdx, {
+    const compileResult = await compile(mdx, {
       rehypePlugins: [rehypePlugin],
     });
 
     const hydrated = convertAstToComponent(ast!, components);
-    logger.warn({ hydrated, ast }, 'Hydrating MDX');
+    logger.warn({ hydrated, ast, compileResult }, 'Hydrating MDX');
 
     return (
       <AI.React>
@@ -169,6 +172,8 @@ post text`}</>
     );
   }
 
+  // I think we just need to use an honest markdown renderer here.
+
   function convertAstToComponent(ast: Node, components: ReturnType<typeof collectComponents>): React.ReactNode {
     function convertAstToComponentRec(ast: Node): React.ReactNode {
       const { type, tagName, children = [], name, attributes = [] } = ast;
@@ -178,8 +183,8 @@ post text`}</>
           return <div>{_.compact(children.map(convertAstToComponentRec))}</div>;
         }
         case 'element': {
-          return <div>element {_.compact(children.map(convertAstToComponentRec))}</div>;
-          // return React.createElement(tagName!, {}, ..._.compact(children.map(convertAstToComponentRec)));
+          // return <div>{tagName} {_.compact(children.map(convertAstToComponentRec))}</div>;
+          return React.createElement(tagName!, {}, ...[tagName, ..._.compact(children.map(convertAstToComponentRec))]);
         }
         case 'mdxJsxTextElement':
         case 'mdxJsxFlowElement': {

From c7ca0f4304f5229582899769289814372be573b2 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 17:26:42 -0400
Subject: [PATCH 08/16] MSGD this may work

---
 packages/ai-jsx/src/react/jit-ui/mdx.tsx      | 224 +++++++++---------
 packages/nextjs-demo/package.json             |   2 +
 .../src/app/building-blocks/page.tsx          |   6 +-
 .../src/components/BuildingBlocks.tsx         |   2 +-
 .../components/BuildingBlocksGenerator.tsx    |  44 +++-
 yarn.lock                                     |  25 ++
 6 files changed, 186 insertions(+), 117 deletions(-)

diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index cb12744c3..4007ad008 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -23,7 +23,7 @@ import _ from 'lodash';
  * @see https://docs.ai-jsx.com/guides/mdx
  * @see https://github.com/fixie-ai/ai-jsx/blob/main/packages/examples/src/mdx.tsx
  */
-export async function* MdxChatCompletion(
+export async function MdxChatCompletion(
   { children, usageExamples, hydrate }: { children: AI.Node; usageExamples: React.ReactNode; hydrate?: boolean },
   { render, logger }: AI.ComponentContext
 ) {
@@ -141,116 +141,118 @@ export async function* MdxChatCompletion(
 </Card>
 post text`}</>
 
-  if (!hydrate) {
-    return completion;
-  }
-
-  // Instead of this, should we just be sending the raw MDX to the client,
-  // then having an MDX component do the on-the-fly compiling?
-  // How else will we customize what everything gets compiled to?
-  async function hydrateMDX(mdx: string, components: ReturnType<typeof collectComponents>) {
-    let ast: Node | undefined;
-
-    function rehypePlugin() {
-      return (_ast: Node) => {
-        ast = _ast;
-      };
-    }
-    const compileResult = await compile(mdx, {
-      rehypePlugins: [rehypePlugin],
-    });
-
-    const hydrated = convertAstToComponent(ast!, components);
-    logger.warn({ hydrated, ast, compileResult }, 'Hydrating MDX');
-
-    return (
-      <AI.React>
-        {convertAstToComponent(ast!, components)}
-        {/* <div>{mdx}</div> */}
-        {/* {React.createElement('div', { children: mdx })} */}
-      </AI.React>
-    );
-  }
-
-  // I think we just need to use an honest markdown renderer here.
-
-  function convertAstToComponent(ast: Node, components: ReturnType<typeof collectComponents>): React.ReactNode {
-    function convertAstToComponentRec(ast: Node): React.ReactNode {
-      const { type, tagName, children = [], name, attributes = [] } = ast;
-
-      switch (type) {
-        case 'root': {
-          return <div>{_.compact(children.map(convertAstToComponentRec))}</div>;
-        }
-        case 'element': {
-          // return <div>{tagName} {_.compact(children.map(convertAstToComponentRec))}</div>;
-          return React.createElement(tagName!, {}, ...[tagName, ..._.compact(children.map(convertAstToComponentRec))]);
-        }
-        case 'mdxJsxTextElement':
-        case 'mdxJsxFlowElement': {
-          const componentName = name!;
-          // @ts-expect-error
-          const props = attributes.reduce<Jsonifiable>((acc: any, attr: any) => {
-            if (attr.value?.type) {
-              // E.g. <A b={null} />
-              throw new Error(
-                `Unimplemented code path: handling a React component with a non-trivial prop ${JSON.stringify(
-                  attr.value,
-                  null,
-                  2
-                )}`
-              );
-            }
-            acc[attr.name] = attr.value === null ? true : attr.value;
-            return acc;
-          }, {});
-
-          const Component = components[componentName];
-          if (!Component) {
-            logger.warn(
-              { component: componentName },
-              `Ignoring component "${componentName}" that wasn't present in the example. ` +
-                'You may need to adjust the prompt or include an example of this component.'
-            );
-            return null;
-          }
-
-          // return <div>{JSON.stringify(ast)}</div>
-          // return React.createElement(Component, props, _.compact(children.map(convertAstToComponentRec)));
-          // console.log({Component}, 'rendering component');
-          return <Component {...props}>{_.compact(children.map(convertAstToComponentRec))}</Component>;
-        }
-        case 'text': {
-          if (ast.value === '\n') {
-            return <br />;
-          }
-          return <span>{[ast.value]}</span>;
-        }
-        // We handle the imports separately.
-        case 'mdxjsEsm': {
-          return null;
-        }
-        default: {
-          throw new Error(`Unhandled MDX AST type: ${JSON.stringify(ast, null, 2)}`);
-        }
-      }
-    }
-    return convertAstToComponentRec(ast);
-  }
-
-  const renderedCompletion = render(completion);
-
-  for await (const frame of renderedCompletion) {
-    try {
-      yield hydrateMDX(frame, components);
-      logger.trace({ frame }, 'Yielding parsable frame');
-    } catch {
-      // Make sure we only yield parsable frames.
-      logger.trace({ frame }, 'Not yielding unparsable frame');
-    }
-  }
-  // TODO: do not assume the last frame is parsable.
-  return hydrateMDX(await renderedCompletion, components);
+  return completion;
+
+  // if (!hydrate) {
+  //   return completion;
+  // }
+
+  // // Instead of this, should we just be sending the raw MDX to the client,
+  // // then having an MDX component do the on-the-fly compiling?
+  // // How else will we customize what everything gets compiled to?
+  // async function hydrateMDX(mdx: string, components: ReturnType<typeof collectComponents>) {
+  //   let ast: Node | undefined;
+
+  //   function rehypePlugin() {
+  //     return (_ast: Node) => {
+  //       ast = _ast;
+  //     };
+  //   }
+  //   const compileResult = await compile(mdx, {
+  //     rehypePlugins: [rehypePlugin],
+  //   });
+
+  //   const hydrated = convertAstToComponent(ast!, components);
+  //   logger.warn({ hydrated, ast, compileResult }, 'Hydrating MDX');
+
+  //   return (
+  //     <AI.React>
+  //       {convertAstToComponent(ast!, components)}
+  //       {/* <div>{mdx}</div> */}
+  //       {/* {React.createElement('div', { children: mdx })} */}
+  //     </AI.React>
+  //   );
+  // }
+
+  // // I think we just need to use an honest markdown renderer here.
+
+  // function convertAstToComponent(ast: Node, components: ReturnType<typeof collectComponents>): React.ReactNode {
+  //   function convertAstToComponentRec(ast: Node): React.ReactNode {
+  //     const { type, tagName, children = [], name, attributes = [] } = ast;
+
+  //     switch (type) {
+  //       case 'root': {
+  //         return <div>{_.compact(children.map(convertAstToComponentRec))}</div>;
+  //       }
+  //       case 'element': {
+  //         // return <div>{tagName} {_.compact(children.map(convertAstToComponentRec))}</div>;
+  //         return React.createElement(tagName!, {}, ...[tagName, ..._.compact(children.map(convertAstToComponentRec))]);
+  //       }
+  //       case 'mdxJsxTextElement':
+  //       case 'mdxJsxFlowElement': {
+  //         const componentName = name!;
+  //         // @ts-expect-error
+  //         const props = attributes.reduce<Jsonifiable>((acc: any, attr: any) => {
+  //           if (attr.value?.type) {
+  //             // E.g. <A b={null} />
+  //             throw new Error(
+  //               `Unimplemented code path: handling a React component with a non-trivial prop ${JSON.stringify(
+  //                 attr.value,
+  //                 null,
+  //                 2
+  //               )}`
+  //             );
+  //           }
+  //           acc[attr.name] = attr.value === null ? true : attr.value;
+  //           return acc;
+  //         }, {});
+
+  //         const Component = components[componentName];
+  //         if (!Component) {
+  //           logger.warn(
+  //             { component: componentName },
+  //             `Ignoring component "${componentName}" that wasn't present in the example. ` +
+  //               'You may need to adjust the prompt or include an example of this component.'
+  //           );
+  //           return null;
+  //         }
+
+  //         // return <div>{JSON.stringify(ast)}</div>
+  //         // return React.createElement(Component, props, _.compact(children.map(convertAstToComponentRec)));
+  //         // console.log({Component}, 'rendering component');
+  //         return <Component {...props}>{_.compact(children.map(convertAstToComponentRec))}</Component>;
+  //       }
+  //       case 'text': {
+  //         if (ast.value === '\n') {
+  //           return <br />;
+  //         }
+  //         return <span>{[ast.value]}</span>;
+  //       }
+  //       // We handle the imports separately.
+  //       case 'mdxjsEsm': {
+  //         return null;
+  //       }
+  //       default: {
+  //         throw new Error(`Unhandled MDX AST type: ${JSON.stringify(ast, null, 2)}`);
+  //       }
+  //     }
+  //   }
+  //   return convertAstToComponentRec(ast);
+  // }
+
+  // const renderedCompletion = render(completion);
+
+  // for await (const frame of renderedCompletion) {
+  //   try {
+  //     yield hydrateMDX(frame, components);
+  //     logger.trace({ frame }, 'Yielding parsable frame');
+  //   } catch {
+  //     // Make sure we only yield parsable frames.
+  //     logger.trace({ frame }, 'Not yielding unparsable frame');
+  //   }
+  // }
+  // // TODO: do not assume the last frame is parsable.
+  // return hydrateMDX(await renderedCompletion, components);
 }
 
 interface Node {
diff --git a/packages/nextjs-demo/package.json b/packages/nextjs-demo/package.json
index 86191ed09..46c89990d 100644
--- a/packages/nextjs-demo/package.json
+++ b/packages/nextjs-demo/package.json
@@ -13,6 +13,8 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
     "@octokit/graphql": "^5.0.6",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "20.2.5",
diff --git a/packages/nextjs-demo/src/app/building-blocks/page.tsx b/packages/nextjs-demo/src/app/building-blocks/page.tsx
index 7f5eeab16..bb4b980ba 100644
--- a/packages/nextjs-demo/src/app/building-blocks/page.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/page.tsx
@@ -7,11 +7,11 @@ export default function BuildingBlocksPage({ searchParams }: { searchParams: any
     'Summarize this JSON blob for me, using a card: {"reservation":{"reservationId":"1234567890","passengerName":"John Doe","flightNumber":"ABC123","origin":"Los Angeles","destination":"New York","departureDate":"2022-01-01","departureTime":"09:00","arrivalDate":"2022-01-01","arrivalTime":"15:00"}}';
   const query = searchParams.q ?? defaultValue;
   return (
-    <>
+    <div>
       <ResultContainer title="Building Blocks" description="In this demo, the AI can use building block UI components">
         <InputPrompt label="Ask me anything..." defaultValue={query} />
-        <BuildingBlocks topic={query} />
       </ResultContainer>
-    </>
+      <BuildingBlocks topic={query} />
+    </div>
   );
 }
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
index f9fa7c785..527a81b26 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocks.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
@@ -294,7 +294,7 @@ export function CheckboxList({ items }: { items: { id: string; title: string; de
   );
 }
 
-export default function ActionPanel({
+export function ActionPanel({
   title,
   description,
   buttonLabel,
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index e0b1354fc..83cf593db 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -3,17 +3,26 @@
 import { useAIStream } from 'ai-jsx/react';
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
-import BuildingBlocksMap from './BuildingBlocks.map';
+import * as BuildingBlocks from './BuildingBlocks';
+import {MDXProvider, useMDXComponents} from '@mdx-js/react'
+import {run, compile} from '@mdx-js/mdx'
+import * as runtime from 'react/jsx-runtime'
+
+function WrapMDX(props: any) {
+  const components = useMDXComponents();
+  return props.children;
+}
 
 export default function BuildingBlockGenerator({ topic }: { topic: string }) {
   const [isLoading, setIsLoading] = useState(false);
   const { current, fetchAI } = useAIStream({
-    componentMap: BuildingBlocksMap,
+    componentMap: BuildingBlocks,
     onComplete: (x) => {
       setIsLoading(false);
       return x;
     },
   });
+  const [mdx, setMdx] = useState<any>(null)
 
   useEffect(() => {
     setIsLoading(true);
@@ -24,9 +33,40 @@ export default function BuildingBlockGenerator({ topic }: { topic: string }) {
     });
   }, [topic]);
 
+  useEffect(() => {
+    (async () => {
+      if (!current) {
+        return;
+      }
+      let compiled;
+      try {
+        compiled = String(await compile(current[0] as string, {
+          outputFormat: 'function-body',
+          // If we enable this, we get slightly nicer error messages.
+          // But we also get _jsxDev is not a function.
+          // This seems surmountable but also not something I want to attend to now.
+          development: false,
+        }))
+      } catch {
+        // Sometimes the current output will not be parsable – that's fine.
+        return;
+      }
+      const {default: Content} = await run(compiled, runtime)
+      setMdx(
+      <MDXProvider components={BuildingBlocks}>
+        <WrapMDX>
+          <Content components={BuildingBlocks} />
+        </WrapMDX>
+      </MDXProvider>)
+    })()
+
+  }, [current])
+
+
   return (
     <div>
       <div className="whitespace-pre-line">{current}</div>
+      <div>{mdx}</div>
       <div className="mt-4">
         {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}
       </div>
diff --git a/yarn.lock b/yarn.lock
index fc5c914a2..aba640ab3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3840,6 +3840,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mdx-js/react@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@mdx-js/react@npm:2.3.0"
+  dependencies:
+    "@types/mdx": ^2.0.0
+    "@types/react": ">=16"
+  peerDependencies:
+    react: ">=16"
+  checksum: f45fe779556e6cd9a787f711274480e0638b63c460f192ebdcd77cc07ffa61e23c98cb46dd46e577093e1cb4997a232a848d1fb0ba850ae204422cf603add524
+  languageName: node
+  linkType: hard
+
 "@mdx-js/util@npm:1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/util@npm:1.6.22"
@@ -7048,6 +7060,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:>=16":
+  version: 18.2.18
+  resolution: "@types/react@npm:18.2.18"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: 2e0d75de2b618e76780019e52478b1bec2b015a9187aea30f84518c0c3ddc639055bdfea50864aece937bad0cb0544d0100b80d30f5461e72fbc1c3c0be8b140
+  languageName: node
+  linkType: hard
+
 "@types/resolve@npm:1.17.1":
   version: 1.17.1
   resolution: "@types/resolve@npm:1.17.1"
@@ -18599,6 +18622,8 @@ __metadata:
     "@babel/plugin-transform-react-jsx": ^7.22.5
     "@headlessui/react": ^1.7.15
     "@heroicons/react": ^2.0.18
+    "@mdx-js/mdx": ^2.3.0
+    "@mdx-js/react": ^2.3.0
     "@next/eslint-plugin-next": ^13.4.6
     "@octokit/graphql": ^5.0.6
     "@tailwindcss/forms": ^0.5.3

From 9ec43b57d32d4abf9559d94fd4f188e4ce4a1f54 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 17:38:51 -0400
Subject: [PATCH 09/16] Switch to use useChat hook

---
 .../src/app/building-blocks/api/route.tsx     | 23 ++---
 .../src/components/BuildingBlocks.map.tsx     |  4 -
 .../components/BuildingBlocksGenerator.tsx    | 86 ++++++++++---------
 3 files changed, 49 insertions(+), 64 deletions(-)
 delete mode 100644 packages/nextjs-demo/src/components/BuildingBlocks.map.tsx

diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
index 46be5e890..11ba46161 100644
--- a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -2,11 +2,13 @@
 import * as AI from 'ai-jsx/experimental/next';
 import { NextRequest } from 'next/server';
 import { UserMessage } from 'ai-jsx/core/completion';
-import BuildingBlocksMap from '@/components/BuildingBlocks.map';
-const { Card, ButtonGroup, Badge, Toggle } = BuildingBlocksMap;
+import * as BuildingBlocks from '@/components/BuildingBlocks';
+const { Card, ButtonGroup, Badge, Toggle } = BuildingBlocks;
 import fs from 'fs';
 import path from 'path';
 import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
+import { toTextStream } from 'ai-jsx/stream';
+import { StreamingTextResponse } from 'ai';
 
 // Flip this flag to use a fixture response. This makes it easier to iterate on the UI.
 const useFixture = false;
@@ -61,20 +63,5 @@ function BuildingBlocksAI({ query }: { query: string }) {
 export async function POST(request: NextRequest) {
   const { topic } = await request.json();
 
-  // This is an intentional constant flag.
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (useFixture) {
-    const textEncoder = new TextEncoder();
-    const fakeStream = fs.readFileSync(path.join(process.cwd(), 'src', 'app', 'recipe', 'api', 'fixture.txt'), 'utf-8');
-    return new Response(
-      new ReadableStream({
-        start(controller) {
-          controller.enqueue(textEncoder.encode(fakeStream));
-          controller.close();
-        },
-      })
-    );
-  }
-
-  return AI.toReactStream(BuildingBlocksMap, <BuildingBlocksAI query={topic} />);
+  return new StreamingTextResponse(toTextStream(<BuildingBlocksAI query={topic} />));
 }
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
deleted file mode 100644
index ad4261685..000000000
--- a/packages/nextjs-demo/src/components/BuildingBlocks.map.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import * as BuildingBlocks from './BuildingBlocks';
-import { makeComponentMap } from 'ai-jsx/react/map';
-
-export default makeComponentMap(BuildingBlocks);
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index 83cf593db..6ee2fab41 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -1,71 +1,73 @@
 'use client';
 
-import { useAIStream } from 'ai-jsx/react';
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import * as BuildingBlocks from './BuildingBlocks';
-import {MDXProvider, useMDXComponents} from '@mdx-js/react'
-import {run, compile} from '@mdx-js/mdx'
-import * as runtime from 'react/jsx-runtime'
-
-function WrapMDX(props: any) {
-  const components = useMDXComponents();
-  return props.children;
-}
+import { MDXProvider } from '@mdx-js/react';
+import { run, compile } from '@mdx-js/mdx';
+import * as runtime from 'react/jsx-runtime';
+import { useChat } from 'ai/react';
+import _ from 'lodash';
 
 export default function BuildingBlockGenerator({ topic }: { topic: string }) {
-  const [isLoading, setIsLoading] = useState(false);
-  const { current, fetchAI } = useAIStream({
-    componentMap: BuildingBlocks,
-    onComplete: (x) => {
-      setIsLoading(false);
-      return x;
-    },
+  const { messages, isLoading, append } = useChat({
+    api: '/building-blocks/api',
   });
-  const [mdx, setMdx] = useState<any>(null)
 
   useEffect(() => {
-    setIsLoading(true);
-    fetchAI('/building-blocks/api', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ topic }),
-    });
-  }, [topic]);
+    if (messages.length === 0) {
+      append({
+        id: '0',
+        role: 'user',
+        content: topic,
+      });
+    }
+  }, [messages]);
+
+  const [mdx, setMdx] = useState<any>(null);
+
+  function getAIResponse() {
+    if (messages.length <= 1) {
+      return null;
+    }
+    return messages[messages.length - 1].content;
+  }
 
   useEffect(() => {
     (async () => {
-      if (!current) {
+      const aiResponse = getAIResponse();
+      if (!aiResponse) {
         return;
       }
       let compiled;
       try {
-        compiled = String(await compile(current[0] as string, {
-          outputFormat: 'function-body',
-          // If we enable this, we get slightly nicer error messages.
-          // But we also get _jsxDev is not a function.
-          // This seems surmountable but also not something I want to attend to now.
-          development: false,
-        }))
+        compiled = String(
+          await compile(aiResponse, {
+            outputFormat: 'function-body',
+            // If we enable this, we get slightly nicer error messages.
+            // But we also get _jsxDev is not a function.
+            // This seems surmountable but also not something I want to attend to now.
+            development: false,
+          })
+        );
       } catch {
         // Sometimes the current output will not be parsable – that's fine.
         return;
       }
-      const {default: Content} = await run(compiled, runtime)
+      const { default: Content } = await run(compiled, runtime);
       setMdx(
-      <MDXProvider components={BuildingBlocks}>
-        <WrapMDX>
+        <MDXProvider components={BuildingBlocks}>
           <Content components={BuildingBlocks} />
-        </WrapMDX>
-      </MDXProvider>)
-    })()
-
-  }, [current])
-
+        </MDXProvider>
+      );
+    })();
+  }, [getAIResponse()]);
 
   return (
     <div>
-      <div className="whitespace-pre-line">{current}</div>
+      <h2>Raw MDX</h2>
+      <div className="whitespace-pre-line">{getAIResponse()}</div>
+      <h2>Compiled MDX</h2>
       <div>{mdx}</div>
       <div className="mt-4">
         {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}

From e302f5f4be46da82222aa1a1cce792e46876cfc2 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 17:50:38 -0400
Subject: [PATCH 10/16] Ok, this seems to be working

---
 packages/ai-jsx/src/react/completion.tsx      |   8 +-
 packages/ai-jsx/src/react/jit-ui/mdx.tsx      | 284 +++++-------------
 .../src/app/building-blocks/api/route.tsx     |  25 +-
 .../src/components/BuildingBlocks.tsx         |   6 +-
 .../components/BuildingBlocksGenerator.tsx    |   7 +-
 5 files changed, 101 insertions(+), 229 deletions(-)

diff --git a/packages/ai-jsx/src/react/completion.tsx b/packages/ai-jsx/src/react/completion.tsx
index 2c732c396..cfc43d667 100644
--- a/packages/ai-jsx/src/react/completion.tsx
+++ b/packages/ai-jsx/src/react/completion.tsx
@@ -119,5 +119,11 @@ export function collectComponents(node: React.ReactNode | AI.Node) {
     }
   }
   collectComponentsRec(node, true);
-  return Object.fromEntries(Array.from(reactComponents).map((c) => [reactComponentName(c), c]));
+  return Object.fromEntries(
+    Array
+      .from(reactComponents)
+      /* filter out symbols, e.g. React.Fragment */
+      .filter(component => typeof component !== 'symbol')
+      .map((c) => [reactComponentName(c), c])
+  );
 }
diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 4007ad008..1f7d5b678 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -1,11 +1,9 @@
 /** @jsxImportSource ai-jsx/react */
 
 import * as AI from '../core.js';
-import { ChatCompletion, SystemMessage } from '../../core/completion.js';
+import { SystemMessage } from '../../core/completion.js';
 import React from 'react';
 import { collectComponents } from '../completion.js';
-import { compile } from '@mdx-js/mdx';
-import _ from 'lodash';
 
 /**
  * A completion component that emits [MDX](https://mdxjs.com/).
@@ -23,243 +21,109 @@ import _ from 'lodash';
  * @see https://docs.ai-jsx.com/guides/mdx
  * @see https://github.com/fixie-ai/ai-jsx/blob/main/packages/examples/src/mdx.tsx
  */
-export async function MdxChatCompletion(
-  { children, usageExamples, hydrate }: { children: AI.Node; usageExamples: React.ReactNode; hydrate?: boolean },
-  { render, logger }: AI.ComponentContext
+export function MdxSystemMessage(
+  { usageExamples }: { usageExamples: React.ReactNode },
 ) {
   const components = collectComponents(usageExamples);
   /* prettier-ignore */
-  // const completion = <ChatCompletion>
-  //   <SystemMessage>
-  //     You are an assistant who can use React components to work with the user. By default, you use markdown. However, if it's useful, you can also mix in the following React components: {Object.keys(components).join(', ')}.
-  //     All your responses
-  //     should be in MDX, which is Markdown For the Component Era. Here are instructions for how to use MDX:
-  //     === Begin instructions
-  //     {/* Snipped from https://github.com/mdx-js/mdx/blob/main/docs/docs/what-is-mdx.server.mdx. */}
-  //     MDX allows you to use JSX in your markdown content.
-  //     You can import components, such as interactive charts or alerts, and embed them
-  //     within your content.
-  //     This makes writing long-form content with components a blast.
+  return <SystemMessage>
+      You are an assistant who can use React components to work with the user. By default, you use markdown. However, if it's useful, you can also mix in the following React components: {Object.keys(components).join(', ')}.
+      All your responses
+      should be in MDX, which is Markdown For the Component Era. Here are instructions for how to use MDX:
+      === Begin instructions
+      {/* Snipped from https://github.com/mdx-js/mdx/blob/main/docs/docs/what-is-mdx.server.mdx. */}
+      MDX allows you to use JSX in your markdown content.
+      You can import components, such as interactive charts or alerts, and embed them
+      within your content.
+      This makes writing long-form content with components a blast.
 
-  //     More practically MDX can be explained as a format that combines markdown with
-  //     JSX and looks as follows:
+      More practically MDX can be explained as a format that combines markdown with
+      JSX and looks as follows:
 
-  //     === Begin example
-  //     {`
-  //       Here is some markdown text
-  //       <MyComponent id="123" />
+      === Begin example
+      {`
+        Here is some markdown text
+        <MyComponent id="123" />
 
-  //       # Here is more markdown text
+        # Here is more markdown text
 
-  //       <Component
-  //         open
-  //         x={1}
-  //         label={'this is a string, *not* markdown!'}
-  //         icon={<Icon />}
-  //       />
+        <Component
+          open
+          x={1}
+          label={'this is a string, *not* markdown!'}
+          icon={<Icon />}
+        />
 
-  //       * Markdown list item 1
-  //       * Markdown list item 2
-  //       * Markdown list item 3
-  //     `}
-  //     === end example
-  //     === end instructions
+        * Markdown list item 1
+        * Markdown list item 2
+        * Markdown list item 3
+      `}
+      === end example
+      === end instructions
 
-  //     Do not include a starting ```mdx and closing ``` line. Just respond with the MDX itself.
+      Do not include a starting ```mdx and closing ``` line. Just respond with the MDX itself.
 
-  //     Do not include extra whitespace that is not needed for the markdown interpretation. For instance, if your component has a prop that's a JSON object, put it all on one line:
+      Do not include extra whitespace that is not needed for the markdown interpretation. For instance, if your component has a prop that's a JSON object, put it all on one line:
 
-  //     {'<Component prop={[[{"key": "value"}, {"long": "field"}]]} />'}
+      {'<Component prop={[[{"key": "value"}, {"long": "field"}]]} />'}
 
-  //     This doc tells you the differences between MDX and markdown.
+      This doc tells you the differences between MDX and markdown.
 
-  //     {/* Adapted from https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown */}
-  //     === Start doc
-  //     ### 7.2 Deviations from Markdown
+      {/* Adapted from https://github.com/micromark/mdx-state-machine#72-deviations-from-markdown */}
+      === Start doc
+      ### 7.2 Deviations from Markdown
 
-  //     MDX adds constructs to Markdown but also prohibits certain normal Markdown
-  //     constructs.
+      MDX adds constructs to Markdown but also prohibits certain normal Markdown
+      constructs.
 
-  //     #### 7.2.2 Indented code
+      #### 7.2.2 Indented code
 
-  //     Indentation to create code blocks is not supported.
-  //     Instead, use fenced code blocks.
+      Indentation to create code blocks is not supported.
+      Instead, use fenced code blocks.
 
-  //     The reason for this change is so that elements can be indented.
+      The reason for this change is so that elements can be indented.
 
-  //     {/* Commenting out the negative examples because they seem to confuse the LLM. */}
-  //     {/*
-  //     Incorrect:
+      {/* Commenting out the negative examples because they seem to confuse the LLM. */}
+      {/*
+      Incorrect:
 
-  //     ```markdown
-  //         console.log(1)
-  //     ``` */}
+      ```markdown
+          console.log(1)
+      ``` */}
 
-  //     Correct:
+      Correct:
 
-  //       ```js
-  //       console.log(1)
-  //       ```
+        ```js
+        console.log(1)
+        ```
 
-  //     #### 7.2.3 Autolinks
+      #### 7.2.3 Autolinks
 
-  //     Autolinks are not supported.
-  //     Instead, use links or references.
+      Autolinks are not supported.
+      Instead, use links or references.
 
-  //     The reason for this change is because whether something is an element (whether
-  //     HTML or JSX) or an autolink is ambiguous {'(Markdown normally treats `<svg:rect>`, `<xml:lang/>`, or `<svg:circle{...props}>` as links).'}
+      The reason for this change is because whether something is an element (whether
+      HTML or JSX) or an autolink is ambiguous {'(Markdown normally treats `<svg:rect>`, `<xml:lang/>`, or `<svg:circle{...props}>` as links).'}
 
-  //     {/* Incorrect:
+      {/* Incorrect:
 
-  //     ```markdown
-  //     See <https://example.com> for more information
-  //     ``` */}
+      ```markdown
+      See <https://example.com> for more information
+      ``` */}
 
-  //     Correct:
+      Correct:
 
-  //       See [example.com](https://example.com) for more information.
+        See [example.com](https://example.com) for more information.
 
-  //     #### 7.2.4 Errors
+      #### 7.2.4 Errors
 
-  //     Whereas all Markdown is valid, incorrect MDX will crash.
-  //     === end doc
+      Whereas all Markdown is valid, incorrect MDX will crash.
+      === end doc
 
-  //     Here are the components you have available, and how to use them:
+      Here are the components you have available, and how to use them:
 
-  //     === Begin components
-  //     <AI.React>{usageExamples}</AI.React>
-  //     === end components
-  //   </SystemMessage>
-  //   {children}
-  // </ChatCompletion>;
-
-  const completion = <>{`pre text
-<Card>
-  * **Foo**: bar
-  <Badge color='red'>Content</Badge>
-  <Toggle title='my title' subtitle='my subtitle' />
-</Card>
-post text`}</>
-
-  return completion;
-
-  // if (!hydrate) {
-  //   return completion;
-  // }
-
-  // // Instead of this, should we just be sending the raw MDX to the client,
-  // // then having an MDX component do the on-the-fly compiling?
-  // // How else will we customize what everything gets compiled to?
-  // async function hydrateMDX(mdx: string, components: ReturnType<typeof collectComponents>) {
-  //   let ast: Node | undefined;
-
-  //   function rehypePlugin() {
-  //     return (_ast: Node) => {
-  //       ast = _ast;
-  //     };
-  //   }
-  //   const compileResult = await compile(mdx, {
-  //     rehypePlugins: [rehypePlugin],
-  //   });
-
-  //   const hydrated = convertAstToComponent(ast!, components);
-  //   logger.warn({ hydrated, ast, compileResult }, 'Hydrating MDX');
-
-  //   return (
-  //     <AI.React>
-  //       {convertAstToComponent(ast!, components)}
-  //       {/* <div>{mdx}</div> */}
-  //       {/* {React.createElement('div', { children: mdx })} */}
-  //     </AI.React>
-  //   );
-  // }
-
-  // // I think we just need to use an honest markdown renderer here.
-
-  // function convertAstToComponent(ast: Node, components: ReturnType<typeof collectComponents>): React.ReactNode {
-  //   function convertAstToComponentRec(ast: Node): React.ReactNode {
-  //     const { type, tagName, children = [], name, attributes = [] } = ast;
-
-  //     switch (type) {
-  //       case 'root': {
-  //         return <div>{_.compact(children.map(convertAstToComponentRec))}</div>;
-  //       }
-  //       case 'element': {
-  //         // return <div>{tagName} {_.compact(children.map(convertAstToComponentRec))}</div>;
-  //         return React.createElement(tagName!, {}, ...[tagName, ..._.compact(children.map(convertAstToComponentRec))]);
-  //       }
-  //       case 'mdxJsxTextElement':
-  //       case 'mdxJsxFlowElement': {
-  //         const componentName = name!;
-  //         // @ts-expect-error
-  //         const props = attributes.reduce<Jsonifiable>((acc: any, attr: any) => {
-  //           if (attr.value?.type) {
-  //             // E.g. <A b={null} />
-  //             throw new Error(
-  //               `Unimplemented code path: handling a React component with a non-trivial prop ${JSON.stringify(
-  //                 attr.value,
-  //                 null,
-  //                 2
-  //               )}`
-  //             );
-  //           }
-  //           acc[attr.name] = attr.value === null ? true : attr.value;
-  //           return acc;
-  //         }, {});
-
-  //         const Component = components[componentName];
-  //         if (!Component) {
-  //           logger.warn(
-  //             { component: componentName },
-  //             `Ignoring component "${componentName}" that wasn't present in the example. ` +
-  //               'You may need to adjust the prompt or include an example of this component.'
-  //           );
-  //           return null;
-  //         }
-
-  //         // return <div>{JSON.stringify(ast)}</div>
-  //         // return React.createElement(Component, props, _.compact(children.map(convertAstToComponentRec)));
-  //         // console.log({Component}, 'rendering component');
-  //         return <Component {...props}>{_.compact(children.map(convertAstToComponentRec))}</Component>;
-  //       }
-  //       case 'text': {
-  //         if (ast.value === '\n') {
-  //           return <br />;
-  //         }
-  //         return <span>{[ast.value]}</span>;
-  //       }
-  //       // We handle the imports separately.
-  //       case 'mdxjsEsm': {
-  //         return null;
-  //       }
-  //       default: {
-  //         throw new Error(`Unhandled MDX AST type: ${JSON.stringify(ast, null, 2)}`);
-  //       }
-  //     }
-  //   }
-  //   return convertAstToComponentRec(ast);
-  // }
-
-  // const renderedCompletion = render(completion);
-
-  // for await (const frame of renderedCompletion) {
-  //   try {
-  //     yield hydrateMDX(frame, components);
-  //     logger.trace({ frame }, 'Yielding parsable frame');
-  //   } catch {
-  //     // Make sure we only yield parsable frames.
-  //     logger.trace({ frame }, 'Not yielding unparsable frame');
-  //   }
-  // }
-  // // TODO: do not assume the last frame is parsable.
-  // return hydrateMDX(await renderedCompletion, components);
-}
-
-interface Node {
-  type: string;
-  tagName?: string;
-  children?: Node[];
-  name?: string;
-  value?: string;
-  attributes?: { type: string; name: string; value: string }[];
+      === Begin components
+      <AI.React>{usageExamples}</AI.React>
+      === end components
+    </SystemMessage>;
 }
diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
index 11ba46161..bcae6227a 100644
--- a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -1,17 +1,12 @@
 /** @jsxImportSource ai-jsx/react */
-import * as AI from 'ai-jsx/experimental/next';
 import { NextRequest } from 'next/server';
-import { UserMessage } from 'ai-jsx/core/completion';
+import { UserMessage, ChatCompletion } from 'ai-jsx/core/completion';
 import * as BuildingBlocks from '@/components/BuildingBlocks';
 const { Card, ButtonGroup, Badge, Toggle } = BuildingBlocks;
-import fs from 'fs';
-import path from 'path';
-import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
+import { MdxSystemMessage } from 'ai-jsx/react/jit-ui/mdx';
 import { toTextStream } from 'ai-jsx/stream';
-import { StreamingTextResponse } from 'ai';
-
-// Flip this flag to use a fixture response. This makes it easier to iterate on the UI.
-const useFixture = false;
+import { Message, StreamingTextResponse } from 'ai';
+import _ from 'lodash';
 
 function BuildingBlocksAI({ query }: { query: string }) {
   const usageExamples = (
@@ -54,14 +49,16 @@ function BuildingBlocksAI({ query }: { query: string }) {
   );
 
   return (
-    <MdxChatCompletion hydrate usageExamples={usageExamples}>
+    <ChatCompletion>
+      <MdxSystemMessage usageExamples={usageExamples} />
       <UserMessage>{query}</UserMessage>
-    </MdxChatCompletion>
+    </ChatCompletion>
   );
 }
 
 export async function POST(request: NextRequest) {
-  const { topic } = await request.json();
-
-  return new StreamingTextResponse(toTextStream(<BuildingBlocksAI query={topic} />));
+  const { messages } = await request.json();
+  const lastMessage = _.last(messages) as Message;
+ 
+  return new StreamingTextResponse(toTextStream(<BuildingBlocksAI query={lastMessage.content} />));
 }
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
index 527a81b26..ce4444f76 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocks.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
@@ -52,9 +52,11 @@ export function Badge({ children, color }: { children: ReactNode; color: Backgro
       case 'pink':
         return 'bg-pink-100 text-pink-800 ring-pink-600/20';
       case 'gray':
-        return 'bg-gray-100 text-gray-800 ring-gray-600/20';
       default:
-        throw new Error(`Unrecognized color: ${color}`);
+        return 'bg-gray-100 text-gray-800 ring-gray-600/20';
+      // This makes it too sensitive to model failures. It's better
+      // to gracefully degrade.
+      //   throw new Error(`Unrecognized color: ${color}`);
     }
   }
   return (
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index 6ee2fab41..89a694ab2 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -65,9 +65,12 @@ export default function BuildingBlockGenerator({ topic }: { topic: string }) {
 
   return (
     <div>
-      <h2>Raw MDX</h2>
+      <h2 className='text-lg'>Raw MDX</h2>
       <div className="whitespace-pre-line">{getAIResponse()}</div>
-      <h2>Compiled MDX</h2>
+      <div className="mt-4">
+        {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}
+      </div>
+      <h2 className='text-lg mt-4'>Compiled MDX</h2>
       <div>{mdx}</div>
       <div className="mt-4">
         {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}

From 368e2d35c0a764ab52c50d6e2dbe253e7a568d79 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 18:04:12 -0400
Subject: [PATCH 11/16] More cleanup

---
 packages/ai-jsx/package.json                         |  2 --
 packages/ai-jsx/src/react/completion.tsx             |  9 +++++----
 packages/ai-jsx/src/react/jit-ui/mdx.tsx             |  6 +-----
 packages/examples/src/mdx.tsx                        | 12 ++++++------
 .../src/app/building-blocks/api/route.tsx            |  2 +-
 .../src/components/BuildingBlocksGenerator.tsx       |  4 ++--
 yarn.lock                                            |  1 -
 7 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/packages/ai-jsx/package.json b/packages/ai-jsx/package.json
index e6c9294d1..2f97dea89 100644
--- a/packages/ai-jsx/package.json
+++ b/packages/ai-jsx/package.json
@@ -328,7 +328,6 @@
     "prepack": "yarn create-entry-points",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
-    "demo": "node dist/esm/react/jit-ui/sample.js",
     "test": "jest",
     "unit": "yarn build && jest",
     "typecheck": "tsc -p tsconfig.json --noEmit",
@@ -339,7 +338,6 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.5.0",
-    "@mdx-js/mdx": "^2.3.0",
     "@nick.heiner/wandb-fork": "^0.5.2-5",
     "axios": "^1.4.0",
     "cli-highlight": "^2.1.11",
diff --git a/packages/ai-jsx/src/react/completion.tsx b/packages/ai-jsx/src/react/completion.tsx
index cfc43d667..402c7847a 100644
--- a/packages/ai-jsx/src/react/completion.tsx
+++ b/packages/ai-jsx/src/react/completion.tsx
@@ -120,10 +120,11 @@ export function collectComponents(node: React.ReactNode | AI.Node) {
   }
   collectComponentsRec(node, true);
   return Object.fromEntries(
-    Array
-      .from(reactComponents)
-      /* filter out symbols, e.g. React.Fragment */
-      .filter(component => typeof component !== 'symbol')
+    Array.from(reactComponents)
+      /* Filter out symbols, e.g. React.Fragment.
+        `usageExample` will often be passed as a Fragment, and we don't want to tell the AI to output fragments.
+      */
+      .filter((component) => typeof component !== 'symbol')
       .map((c) => [reactComponentName(c), c])
   );
 }
diff --git a/packages/ai-jsx/src/react/jit-ui/mdx.tsx b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
index 1f7d5b678..844156e43 100644
--- a/packages/ai-jsx/src/react/jit-ui/mdx.tsx
+++ b/packages/ai-jsx/src/react/jit-ui/mdx.tsx
@@ -12,8 +12,6 @@ import { collectComponents } from '../completion.js';
  * (For instance, if the model is emitting the string `foo <Bar />`, and
  * it streams out `foo <Ba`, that's not parsable.)
  *
- * To ensure that the result is always parsable, pass the prop `alwaysParsable`. This will buffer up intermediate streaming results until the result accumulated so far is parsable.
- *
  * You'll get better results with this if you use GPT-4.
  *
  * Use `usageExamples` to teach the model how to use your components.
@@ -21,9 +19,7 @@ import { collectComponents } from '../completion.js';
  * @see https://docs.ai-jsx.com/guides/mdx
  * @see https://github.com/fixie-ai/ai-jsx/blob/main/packages/examples/src/mdx.tsx
  */
-export function MdxSystemMessage(
-  { usageExamples }: { usageExamples: React.ReactNode },
-) {
+export function MdxSystemMessage({ usageExamples }: { usageExamples: React.ReactNode }) {
   const components = collectComponents(usageExamples);
   /* prettier-ignore */
   return <SystemMessage>
diff --git a/packages/examples/src/mdx.tsx b/packages/examples/src/mdx.tsx
index 7a74e79e2..18ce89dea 100644
--- a/packages/examples/src/mdx.tsx
+++ b/packages/examples/src/mdx.tsx
@@ -1,8 +1,8 @@
 /** @jsxImportSource ai-jsx/react */
 import * as AI from 'ai-jsx';
-import { SystemMessage, UserMessage } from 'ai-jsx/core/completion';
+import { SystemMessage, UserMessage, ChatCompletion } from 'ai-jsx/core/completion';
 import { showInspector } from 'ai-jsx/core/inspector';
-import { MdxChatCompletion } from 'ai-jsx/react/jit-ui/mdx';
+import { MdxSystemMessage } from 'ai-jsx/react/jit-ui/mdx';
 import { JsonChatCompletion } from 'ai-jsx/batteries/constrained-output';
 import z from 'zod';
 
@@ -113,7 +113,10 @@ function QuestionAndAnswer({ children }: { children: AI.Node }, { memo }: AI.Com
       <OpenAI chatModel="gpt-4">
         Q: {question}
         {'\n'}
-        A: <MdxChatCompletion usageExamples={usageExample}>{question}</MdxChatCompletion>
+        A: <ChatCompletion>
+          <MdxSystemMessage usageExamples={usageExample} />
+          <UserMessage>{question}</UserMessage>
+        </ChatCompletion>
         {'\n\n'}
       </OpenAI>
     </>
@@ -167,10 +170,7 @@ export function App() {
 let lastValue = '';
 const rendering = AI.createRenderContext().render(<App />, { appendOnly: true });
 for await (const frame of rendering) {
-  // console.log(frame);
-  // console.log(frame.slice(lastValue.length));
   process.stdout.write(frame.slice(lastValue.length));
   lastValue = frame;
 }
 
-// console.log(await rendering);
diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
index bcae6227a..2fc23b5ef 100644
--- a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -59,6 +59,6 @@ function BuildingBlocksAI({ query }: { query: string }) {
 export async function POST(request: NextRequest) {
   const { messages } = await request.json();
   const lastMessage = _.last(messages) as Message;
- 
+
   return new StreamingTextResponse(toTextStream(<BuildingBlocksAI query={lastMessage.content} />));
 }
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index 89a694ab2..7649bfc23 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -65,12 +65,12 @@ export default function BuildingBlockGenerator({ topic }: { topic: string }) {
 
   return (
     <div>
-      <h2 className='text-lg'>Raw MDX</h2>
+      <h2 className="text-lg">Raw MDX</h2>
       <div className="whitespace-pre-line">{getAIResponse()}</div>
       <div className="mt-4">
         {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}
       </div>
-      <h2 className='text-lg mt-4'>Compiled MDX</h2>
+      <h2 className="text-lg mt-4">Compiled MDX</h2>
       <div>{mdx}</div>
       <div className="mt-4">
         {isLoading && <Image src="/loading.gif" alt="loading spiner" width={20} height={20} />}
diff --git a/yarn.lock b/yarn.lock
index aba640ab3..c01beda88 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7770,7 +7770,6 @@ __metadata:
   dependencies:
     "@anthropic-ai/sdk": ^0.5.0
     "@jest/globals": ^29.5.0
-    "@mdx-js/mdx": ^2.3.0
     "@nick.heiner/wandb-fork": ^0.5.2-5
     "@tsconfig/node16": ^1.0.4
     "@tsconfig/node18": ^2.0.1

From befdb91a72734ac2d7dcb7b458e4ad13daa5593b Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 18:23:56 -0400
Subject: [PATCH 12/16] Use GFM

---
 packages/nextjs-demo/package.json             |   1 +
 .../src/app/building-blocks/api/route.tsx     |  11 +-
 .../src/app/building-blocks/page.tsx          |   2 +-
 .../components/BuildingBlocksGenerator.tsx    |  19 +-
 yarn.lock                                     | 204 +++++++++++++++++-
 5 files changed, 227 insertions(+), 10 deletions(-)

diff --git a/packages/nextjs-demo/package.json b/packages/nextjs-demo/package.json
index 46c89990d..0b3feb53b 100644
--- a/packages/nextjs-demo/package.json
+++ b/packages/nextjs-demo/package.json
@@ -31,6 +31,7 @@
     "postcss": "8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "remark-gfm": "^3.0.1",
     "tailwindcss": "3.3.2",
     "typescript": "^5.1.3"
   },
diff --git a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
index 2fc23b5ef..937757c14 100644
--- a/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/api/route.tsx
@@ -7,6 +7,7 @@ import { MdxSystemMessage } from 'ai-jsx/react/jit-ui/mdx';
 import { toTextStream } from 'ai-jsx/stream';
 import { Message, StreamingTextResponse } from 'ai';
 import _ from 'lodash';
+import { OpenAI } from 'ai-jsx/lib/openai';
 
 function BuildingBlocksAI({ query }: { query: string }) {
   const usageExamples = (
@@ -49,10 +50,12 @@ function BuildingBlocksAI({ query }: { query: string }) {
   );
 
   return (
-    <ChatCompletion>
-      <MdxSystemMessage usageExamples={usageExamples} />
-      <UserMessage>{query}</UserMessage>
-    </ChatCompletion>
+    <OpenAI chatModel="gpt-4">
+      <ChatCompletion>
+        <MdxSystemMessage usageExamples={usageExamples} />
+        <UserMessage>{query}</UserMessage>
+      </ChatCompletion>
+    </OpenAI>
   );
 }
 
diff --git a/packages/nextjs-demo/src/app/building-blocks/page.tsx b/packages/nextjs-demo/src/app/building-blocks/page.tsx
index bb4b980ba..66000d68d 100644
--- a/packages/nextjs-demo/src/app/building-blocks/page.tsx
+++ b/packages/nextjs-demo/src/app/building-blocks/page.tsx
@@ -4,7 +4,7 @@ import BuildingBlocks from '@/components/BuildingBlocksGenerator';
 
 export default function BuildingBlocksPage({ searchParams }: { searchParams: any }) {
   const defaultValue =
-    'Summarize this JSON blob for me, using a card: {"reservation":{"reservationId":"1234567890","passengerName":"John Doe","flightNumber":"ABC123","origin":"Los Angeles","destination":"New York","departureDate":"2022-01-01","departureTime":"09:00","arrivalDate":"2022-01-01","arrivalTime":"15:00"}}';
+    'Summarize this JSON blob for me, using a Card: {"reservation":{"reservationId":"1234567890","passengerName":"John Doe","flightNumber":"ABC123","origin":"Los Angeles","destination":"New York","departureDate":"2022-01-01","departureTime":"09:00","arrivalDate":"2022-01-01","arrivalTime":"15:00"}}. Also use a Badge. And give me some other github-flavored markdown, using a table, <details>, and strikethrough.';
   const query = searchParams.q ?? defaultValue;
   return (
     <div>
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index 7649bfc23..27d8d847e 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -8,6 +8,7 @@ import { run, compile } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
 import { useChat } from 'ai/react';
 import _ from 'lodash';
+import remarkGFM from 'remark-gfm';
 
 export default function BuildingBlockGenerator({ topic }: { topic: string }) {
   const { messages, isLoading, append } = useChat({
@@ -48,17 +49,27 @@ export default function BuildingBlockGenerator({ topic }: { topic: string }) {
             // But we also get _jsxDev is not a function.
             // This seems surmountable but also not something I want to attend to now.
             development: false,
+            remarkPlugins: [remarkGFM]
           })
         );
       } catch {
-        // Sometimes the current output will not be parsable – that's fine.
+        console.log('Cannot parse MDX. If the stream is still coming in, this is fine. But if you were expecting this to be parsable, then there may be a bug.', aiResponse);
         return;
       }
       const { default: Content } = await run(compiled, runtime);
+
+      const components = {
+        table: (props: any) =>  <table className="min-w-full divide-y divide-gray-300" {...props} />,
+        th: (props: any) => <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" {...props} />,
+        td: (props: any) => <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500" {...props} />,
+        h2: (props: any) => <h2 className="text-lg font-bold" {...props} />,
+        h3: (props: any) => <h2 className="text-md font-bold" {...props} />,
+        h4: (props: any) => <h2 className="text-sm uppercase font-bold" {...props} />,
+        ...BuildingBlocks
+      }
+
       setMdx(
-        <MDXProvider components={BuildingBlocks}>
-          <Content components={BuildingBlocks} />
-        </MDXProvider>
+        <Content components={components} />
       );
     })();
   }, [getAIResponse()]);
diff --git a/yarn.lock b/yarn.lock
index c01beda88..70e9115c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11853,6 +11853,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"escape-string-regexp@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "escape-string-regexp@npm:5.0.0"
+  checksum: 20daabe197f3cb198ec28546deebcf24b3dbb1a5a269184381b3116d12f0532e06007f4bc8da25669d6a7f8efb68db0758df4cd981f57bc5b57f521a3e12c59e
+  languageName: node
+  linkType: hard
+
 "escodegen@npm:^2.0.0":
   version: 2.0.0
   resolution: "escodegen@npm:2.0.0"
@@ -17364,6 +17371,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"markdown-table@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "markdown-table@npm:3.0.3"
+  checksum: 8fcd3d9018311120fbb97115987f8b1665a603f3134c93fbecc5d1463380c8036f789e2a62c19432058829e594fff8db9ff81c88f83690b2f8ed6c074f8d9e10
+  languageName: node
+  linkType: hard
+
 "marked@npm:^4.3.0":
   version: 4.3.0
   resolution: "marked@npm:4.3.0"
@@ -17432,6 +17446,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-find-and-replace@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "mdast-util-find-and-replace@npm:2.2.2"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    escape-string-regexp: ^5.0.0
+    unist-util-is: ^5.0.0
+    unist-util-visit-parents: ^5.0.0
+  checksum: b4ce463c43fe6e1c38a53a89703f755c84ab5437f49bff9a0ac751279733332ca11c85ed0262aa6c17481f77b555d26ca6d64e70d6814f5b8d12d34a3e53a60b
+  languageName: node
+  linkType: hard
+
 "mdast-util-from-markdown@npm:^1.0.0, mdast-util-from-markdown@npm:^1.1.0":
   version: 1.3.1
   resolution: "mdast-util-from-markdown@npm:1.3.1"
@@ -17452,6 +17478,76 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm-autolink-literal@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "mdast-util-gfm-autolink-literal@npm:1.0.3"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    ccount: ^2.0.0
+    mdast-util-find-and-replace: ^2.0.0
+    micromark-util-character: ^1.0.0
+  checksum: 1748a8727cfc533bac0c287d6e72d571d165bfa77ae0418be4828177a3ec73c02c3f2ee534d87eb75cbaffa00c0866853bbcc60ae2255babb8210f7636ec2ce2
+  languageName: node
+  linkType: hard
+
+"mdast-util-gfm-footnote@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "mdast-util-gfm-footnote@npm:1.0.2"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    mdast-util-to-markdown: ^1.3.0
+    micromark-util-normalize-identifier: ^1.0.0
+  checksum: 2d77505f9377ed7e14472ef5e6b8366c3fec2cf5f936bb36f9fbe5b97ccb7cce0464d9313c236fa86fb844206fd585db05707e4fcfb755e4fc1864194845f1f6
+  languageName: node
+  linkType: hard
+
+"mdast-util-gfm-strikethrough@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "mdast-util-gfm-strikethrough@npm:1.0.3"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    mdast-util-to-markdown: ^1.3.0
+  checksum: 17003340ff1bba643ec4a59fd4370fc6a32885cab2d9750a508afa7225ea71449fb05acaef60faa89c6378b8bcfbd86a9d94b05f3c6651ff27a60e3ddefc2549
+  languageName: node
+  linkType: hard
+
+"mdast-util-gfm-table@npm:^1.0.0":
+  version: 1.0.7
+  resolution: "mdast-util-gfm-table@npm:1.0.7"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    markdown-table: ^3.0.0
+    mdast-util-from-markdown: ^1.0.0
+    mdast-util-to-markdown: ^1.3.0
+  checksum: 8b8c401bb4162e53f072a2dff8efbca880fd78d55af30601c791315ab6722cb2918176e8585792469a0c530cebb9df9b4e7fede75fdc4d83df2839e238836692
+  languageName: node
+  linkType: hard
+
+"mdast-util-gfm-task-list-item@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "mdast-util-gfm-task-list-item@npm:1.0.2"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    mdast-util-to-markdown: ^1.3.0
+  checksum: c9b86037d6953b84f11fb2fc3aa23d5b8e14ca0dfcb0eb2fb289200e172bb9d5647bfceb4f86606dc6d935e8d58f6a458c04d3e55e87ff8513c7d4ade976200b
+  languageName: node
+  linkType: hard
+
+"mdast-util-gfm@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "mdast-util-gfm@npm:2.0.2"
+  dependencies:
+    mdast-util-from-markdown: ^1.0.0
+    mdast-util-gfm-autolink-literal: ^1.0.0
+    mdast-util-gfm-footnote: ^1.0.0
+    mdast-util-gfm-strikethrough: ^1.0.0
+    mdast-util-gfm-table: ^1.0.0
+    mdast-util-gfm-task-list-item: ^1.0.0
+    mdast-util-to-markdown: ^1.0.0
+  checksum: 7078cb985255208bcbce94a121906417d38353c6b1a9acbe56ee8888010d3500608b5d51c16b0999ac63ca58848fb13012d55f26930ff6c6f3450f053d56514e
+  languageName: node
+  linkType: hard
+
 "mdast-util-mdx-expression@npm:^1.0.0":
   version: 1.3.2
   resolution: "mdast-util-mdx-expression@npm:1.3.2"
@@ -17698,6 +17794,99 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-autolink-literal@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "micromark-extension-gfm-autolink-literal@npm:1.0.5"
+  dependencies:
+    micromark-util-character: ^1.0.0
+    micromark-util-sanitize-uri: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: ec2f6bc4a3eb238c1b8be9744454ffbc2957e3d8a248697af5a26bb21479862300c0e40e0a92baf17c299ddf70d4bc4470d4eee112cd92322f87d81e45c2e83d
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-footnote@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "micromark-extension-gfm-footnote@npm:1.1.2"
+  dependencies:
+    micromark-core-commonmark: ^1.0.0
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-normalize-identifier: ^1.0.0
+    micromark-util-sanitize-uri: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: c151a629ee1cd92363c018a50f926a002c944ac481ca72b3720b9529e9c20f1cbef98b0fefdcd2d594af37d0d9743673409cac488af0d2b194210fd16375dcb7
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-strikethrough@npm:^1.0.0":
+  version: 1.0.7
+  resolution: "micromark-extension-gfm-strikethrough@npm:1.0.7"
+  dependencies:
+    micromark-util-chunked: ^1.0.0
+    micromark-util-classify-character: ^1.0.0
+    micromark-util-resolve-all: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: 169e310a4408feade0df80180f60d48c5cc5b7070e5e75e0bbd914e9100273508162c4bb20b72d53081dc37f1ff5834b3afa137862576f763878552c03389811
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-table@npm:^1.0.0":
+  version: 1.0.7
+  resolution: "micromark-extension-gfm-table@npm:1.0.7"
+  dependencies:
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: 4853731285224e409d7e2c94c6ec849165093bff819e701221701aa7b7b34c17702c44f2f831e96b49dc27bb07e445b02b025561b68e62f5c3254415197e7af6
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-tagfilter@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "micromark-extension-gfm-tagfilter@npm:1.0.2"
+  dependencies:
+    micromark-util-types: ^1.0.0
+  checksum: 7d2441df51f890c86f8e7cf7d331a570b69c8105fa1c2fc5b737cb739502c16c8ee01cf35550a8a78f89497c5dfacc97cf82d55de6274e8320f3aec25e2b0dd2
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm-task-list-item@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "micromark-extension-gfm-task-list-item@npm:1.0.5"
+  dependencies:
+    micromark-factory-space: ^1.0.0
+    micromark-util-character: ^1.0.0
+    micromark-util-symbol: ^1.0.0
+    micromark-util-types: ^1.0.0
+    uvu: ^0.5.0
+  checksum: 929f05343d272cffb8008899289f4cffe986ef98fc622ebbd1aa4ff11470e6b32ed3e1f18cd294adb69cabb961a400650078f6c12b322cc515b82b5068b31960
+  languageName: node
+  linkType: hard
+
+"micromark-extension-gfm@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-extension-gfm@npm:2.0.3"
+  dependencies:
+    micromark-extension-gfm-autolink-literal: ^1.0.0
+    micromark-extension-gfm-footnote: ^1.0.0
+    micromark-extension-gfm-strikethrough: ^1.0.0
+    micromark-extension-gfm-table: ^1.0.0
+    micromark-extension-gfm-tagfilter: ^1.0.0
+    micromark-extension-gfm-task-list-item: ^1.0.0
+    micromark-util-combine-extensions: ^1.0.0
+    micromark-util-types: ^1.0.0
+  checksum: c4a917c16d7aa5d00d1767b5ce5f3b1a78c0de11dbd5c8f69d2545083568aa6bb13bd9d8e4c7fec5f4da10e7ed8344b15acffc843b33a615c17396a118bc2bc1
+  languageName: node
+  linkType: hard
+
 "micromark-extension-mdx-expression@npm:^1.0.0":
   version: 1.0.8
   resolution: "micromark-extension-mdx-expression@npm:1.0.8"
@@ -18644,6 +18833,7 @@ __metadata:
     postcss: 8.4.24
     react: 18.2.0
     react-dom: 18.2.0
+    remark-gfm: ^3.0.1
     tailwindcss: 3.3.2
     typescript: ^5.1.3
   languageName: unknown
@@ -21594,6 +21784,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-gfm@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "remark-gfm@npm:3.0.1"
+  dependencies:
+    "@types/mdast": ^3.0.0
+    mdast-util-gfm: ^2.0.0
+    micromark-extension-gfm: ^2.0.0
+    unified: ^10.0.0
+  checksum: 02254f74d67b3419c2c9cf62d799ec35f6c6cd74db25c001361751991552a7ce86049a972107bff8122d85d15ae4a8d1a0618f3bc01a7df837af021ae9b2a04e
+  languageName: node
+  linkType: hard
+
 "remark-mdx@npm:1.6.22":
   version: 1.6.22
   resolution: "remark-mdx@npm:1.6.22"
@@ -24480,7 +24682,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unist-util-visit-parents@npm:^5.1.1":
+"unist-util-visit-parents@npm:^5.0.0, unist-util-visit-parents@npm:^5.1.1":
   version: 5.1.3
   resolution: "unist-util-visit-parents@npm:5.1.3"
   dependencies:

From a056d45c9f79678aa218c3b99b470e2435f7ed83 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 18:40:11 -0400
Subject: [PATCH 13/16] Use type: "module" for nextjs-demo

---
 packages/nextjs-demo/{next.config.js => next.config.cjs}         | 0
 packages/nextjs-demo/package.json                                | 1 +
 packages/nextjs-demo/{postcss.config.js => postcss.config.cjs}   | 0
 packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx  | 1 -
 packages/nextjs-demo/{tailwind.config.js => tailwind.config.cjs} | 0
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/nextjs-demo/{next.config.js => next.config.cjs} (100%)
 rename packages/nextjs-demo/{postcss.config.js => postcss.config.cjs} (100%)
 rename packages/nextjs-demo/{tailwind.config.js => tailwind.config.cjs} (100%)

diff --git a/packages/nextjs-demo/next.config.js b/packages/nextjs-demo/next.config.cjs
similarity index 100%
rename from packages/nextjs-demo/next.config.js
rename to packages/nextjs-demo/next.config.cjs
diff --git a/packages/nextjs-demo/package.json b/packages/nextjs-demo/package.json
index 0b3feb53b..1b4b294a7 100644
--- a/packages/nextjs-demo/package.json
+++ b/packages/nextjs-demo/package.json
@@ -2,6 +2,7 @@
   "name": "nextjs-demo",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
diff --git a/packages/nextjs-demo/postcss.config.js b/packages/nextjs-demo/postcss.config.cjs
similarity index 100%
rename from packages/nextjs-demo/postcss.config.js
rename to packages/nextjs-demo/postcss.config.cjs
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index 27d8d847e..bdac321c6 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -3,7 +3,6 @@
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import * as BuildingBlocks from './BuildingBlocks';
-import { MDXProvider } from '@mdx-js/react';
 import { run, compile } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
 import { useChat } from 'ai/react';
diff --git a/packages/nextjs-demo/tailwind.config.js b/packages/nextjs-demo/tailwind.config.cjs
similarity index 100%
rename from packages/nextjs-demo/tailwind.config.js
rename to packages/nextjs-demo/tailwind.config.cjs

From 10e03428cbf96313e902220b1a4e2825fabf0296 Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 18:45:37 -0400
Subject: [PATCH 14/16] Revert "Use type: "module" for nextjs-demo"

This reverts commit a056d45c9f79678aa218c3b99b470e2435f7ed83.
---
 packages/nextjs-demo/{next.config.cjs => next.config.js}         | 0
 packages/nextjs-demo/package.json                                | 1 -
 packages/nextjs-demo/{postcss.config.cjs => postcss.config.js}   | 0
 packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx  | 1 +
 packages/nextjs-demo/{tailwind.config.cjs => tailwind.config.js} | 0
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/nextjs-demo/{next.config.cjs => next.config.js} (100%)
 rename packages/nextjs-demo/{postcss.config.cjs => postcss.config.js} (100%)
 rename packages/nextjs-demo/{tailwind.config.cjs => tailwind.config.js} (100%)

diff --git a/packages/nextjs-demo/next.config.cjs b/packages/nextjs-demo/next.config.js
similarity index 100%
rename from packages/nextjs-demo/next.config.cjs
rename to packages/nextjs-demo/next.config.js
diff --git a/packages/nextjs-demo/package.json b/packages/nextjs-demo/package.json
index 1b4b294a7..0b3feb53b 100644
--- a/packages/nextjs-demo/package.json
+++ b/packages/nextjs-demo/package.json
@@ -2,7 +2,6 @@
   "name": "nextjs-demo",
   "version": "0.1.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
diff --git a/packages/nextjs-demo/postcss.config.cjs b/packages/nextjs-demo/postcss.config.js
similarity index 100%
rename from packages/nextjs-demo/postcss.config.cjs
rename to packages/nextjs-demo/postcss.config.js
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index bdac321c6..27d8d847e 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -3,6 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import * as BuildingBlocks from './BuildingBlocks';
+import { MDXProvider } from '@mdx-js/react';
 import { run, compile } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
 import { useChat } from 'ai/react';
diff --git a/packages/nextjs-demo/tailwind.config.cjs b/packages/nextjs-demo/tailwind.config.js
similarity index 100%
rename from packages/nextjs-demo/tailwind.config.cjs
rename to packages/nextjs-demo/tailwind.config.js

From 5b26a2b262cb1b2123c148365b21b7ee59f275cb Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Mon, 31 Jul 2023 18:50:00 -0400
Subject: [PATCH 15/16] CI fixes

---
 packages/examples/src/mdx.tsx                 |  5 +--
 packages/nextjs-demo/src/app/500.tsx          |  7 +++++
 .../src/components/BuildingBlocks.tsx         |  2 +-
 .../components/BuildingBlocksGenerator.tsx    | 31 ++++++++++++-------
 4 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 packages/nextjs-demo/src/app/500.tsx

diff --git a/packages/examples/src/mdx.tsx b/packages/examples/src/mdx.tsx
index 18ce89dea..f6c2e2914 100644
--- a/packages/examples/src/mdx.tsx
+++ b/packages/examples/src/mdx.tsx
@@ -1,6 +1,7 @@
 /** @jsxImportSource ai-jsx/react */
 import * as AI from 'ai-jsx';
 import { SystemMessage, UserMessage, ChatCompletion } from 'ai-jsx/core/completion';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { showInspector } from 'ai-jsx/core/inspector';
 import { MdxSystemMessage } from 'ai-jsx/react/jit-ui/mdx';
 import { JsonChatCompletion } from 'ai-jsx/batteries/constrained-output';
@@ -113,7 +114,8 @@ function QuestionAndAnswer({ children }: { children: AI.Node }, { memo }: AI.Com
       <OpenAI chatModel="gpt-4">
         Q: {question}
         {'\n'}
-        A: <ChatCompletion>
+        A:{' '}
+        <ChatCompletion>
           <MdxSystemMessage usageExamples={usageExample} />
           <UserMessage>{question}</UserMessage>
         </ChatCompletion>
@@ -173,4 +175,3 @@ for await (const frame of rendering) {
   process.stdout.write(frame.slice(lastValue.length));
   lastValue = frame;
 }
-
diff --git a/packages/nextjs-demo/src/app/500.tsx b/packages/nextjs-demo/src/app/500.tsx
new file mode 100644
index 000000000..7aa29e7a9
--- /dev/null
+++ b/packages/nextjs-demo/src/app/500.tsx
@@ -0,0 +1,7 @@
+export default function Failure() {
+  return (
+    <div className="flex items-center justify-center w-screen h-screen">
+      <p>500</p>
+    </div>
+  );
+}
diff --git a/packages/nextjs-demo/src/components/BuildingBlocks.tsx b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
index ce4444f76..1f5d6e2c6 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocks.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocks.tsx
@@ -133,7 +133,7 @@ export function CardList({ children }: { children: ReactNode[] }) {
 
 /**
  * Example:
- * 
+ *
     <InputWithLabel
       label="Quests Completed"
       type="number"
diff --git a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
index 27d8d847e..e66f3ec70 100644
--- a/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
+++ b/packages/nextjs-demo/src/components/BuildingBlocksGenerator.tsx
@@ -3,11 +3,15 @@
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import * as BuildingBlocks from './BuildingBlocks';
-import { MDXProvider } from '@mdx-js/react';
-import { run, compile } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
 import { useChat } from 'ai/react';
-import _ from 'lodash';
+
+// I don't feel like messing with the build system to fix this.
+// We get the error:
+// "The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@mdx-js/mdx")' call instead."
+// @ts-expect-error
+import { run, compile } from '@mdx-js/mdx';
+// @ts-expect-error
 import remarkGFM from 'remark-gfm';
 
 export default function BuildingBlockGenerator({ topic }: { topic: string }) {
@@ -49,28 +53,31 @@ export default function BuildingBlockGenerator({ topic }: { topic: string }) {
             // But we also get _jsxDev is not a function.
             // This seems surmountable but also not something I want to attend to now.
             development: false,
-            remarkPlugins: [remarkGFM]
+            remarkPlugins: [remarkGFM],
           })
         );
       } catch {
-        console.log('Cannot parse MDX. If the stream is still coming in, this is fine. But if you were expecting this to be parsable, then there may be a bug.', aiResponse);
+        console.log(
+          'Cannot parse MDX. If the stream is still coming in, this is fine. But if you were expecting this to be parsable, then there may be a bug.',
+          aiResponse
+        );
         return;
       }
       const { default: Content } = await run(compiled, runtime);
 
       const components = {
-        table: (props: any) =>  <table className="min-w-full divide-y divide-gray-300" {...props} />,
-        th: (props: any) => <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" {...props} />,
+        table: (props: any) => <table className="min-w-full divide-y divide-gray-300" {...props} />,
+        th: (props: any) => (
+          <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900" {...props} />
+        ),
         td: (props: any) => <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500" {...props} />,
         h2: (props: any) => <h2 className="text-lg font-bold" {...props} />,
         h3: (props: any) => <h2 className="text-md font-bold" {...props} />,
         h4: (props: any) => <h2 className="text-sm uppercase font-bold" {...props} />,
-        ...BuildingBlocks
-      }
+        ...BuildingBlocks,
+      };
 
-      setMdx(
-        <Content components={components} />
-      );
+      setMdx(<Content components={components} />);
     })();
   }, [getAIResponse()]);
 

From 6ab0d811585ee48448d8136fa9bbdda35e69a5ed Mon Sep 17 00:00:00 2001
From: Nick Heiner <nick.heiner+github@gmail.com>
Date: Tue, 1 Aug 2023 10:11:46 -0400
Subject: [PATCH 16/16] Changelog

---
 packages/ai-jsx/package.json    | 2 +-
 packages/docs/docs/changelog.md | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ai-jsx/package.json b/packages/ai-jsx/package.json
index 4bcc1dae0..0ea866478 100644
--- a/packages/ai-jsx/package.json
+++ b/packages/ai-jsx/package.json
@@ -4,7 +4,7 @@
   "repository": "fixie-ai/ai-jsx",
   "bugs": "https://github.com/fixie-ai/ai-jsx/issues",
   "homepage": "https://ai-jsx.com",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "volta": {
     "extends": "../../package.json"
   },
diff --git a/packages/docs/docs/changelog.md b/packages/docs/docs/changelog.md
index faa3ca3da..54e640dc9 100644
--- a/packages/docs/docs/changelog.md
+++ b/packages/docs/docs/changelog.md
@@ -1,6 +1,10 @@
 # Changelog
 
-## 0.7.3
+## 0.8.0
+
+- Move `MdxChatCompletion` to be `MdxSystemMessage`. You can now put this `SystemMessage` in any `ChatCompletion` to prompt the model to give MDX output.
+
+## [0.7.3](https://github.com/fixie-ai/ai-jsx/commit/670ea52647138052cb116cbc56b6cc4bb49512a0)
 
 - Update readme.