diff --git a/.eslintrc b/.eslintrc
index 9a714bb..b20915e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,7 +8,7 @@
   },
   "parserOptions": {
     "ecmaFeatures": {
-      "jsx": false
+      "jsx": true
     },
     "ecmaVersion": "latest",
     "sourceType": "module",
@@ -24,6 +24,14 @@
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-explicit-any": "off"
   },
+  "overrides": [
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "no-undef": "off"
+      }
+    }
+  ],
   "settings": {},
   "globals": {
     "__DEV__": true
diff --git a/examples/scratch-design-htm-0.tsx b/examples/scratch-design-htm-0.tsx
new file mode 100644
index 0000000..dc863a5
--- /dev/null
+++ b/examples/scratch-design-htm-0.tsx
@@ -0,0 +1,53 @@
+/* eslint-disable */
+import { z } from 'zod'
+
+// framework mocks
+function htm(...params: any[]) {
+  return (...p: any[]) => ``
+}
+htm.System = function System() {}
+htm.User = function User() {}
+htm.Assistant = function Assistant() {}
+htm.Example = function Example() {}
+const $: any = {}
+
+async function ExampleLLMQuery({ texts }: { texts: string[] }) {
+  const examples = [
+    { input: 'The food was digusting', output: 'negative' },
+    { input: 'We had a fantastic night', output: 'positive' },
+    { input: 'Recommended', output: 'positive' },
+    { input: 'The waiter was rude', output: 'negative' }
+  ]
+
+  // TODO: this doesn't handle type inference
+  const prompt = htm`
+    <System>You are an expert sentiment-labelling assistant</System>
+
+    <User>
+      Label the following texts as positive or negative:
+
+      <ul>
+        ${texts.map((text) => htm`<li>${text}</li>`)}
+      </ul>
+    </User>
+
+    <System>
+      ${examples.map((example) => htm`<${htm.Example} ...${example} />`)}
+    </System>
+
+    <Output schema=${z.array(
+      z.object({ text: z.string(), label: z.string() })
+    )} />
+  `
+
+  return $.gpt4(prompt)
+}
+
+ExampleLLMQuery({
+  texts: [
+    'I went to this place and it was just so awful.',
+    'I had a great time.',
+    'I had a terrible time.',
+    'Food poisoning...'
+  ]
+})
diff --git a/examples/scratch-design-jsx-0.tsx b/examples/scratch-design-jsx-0.tsx
new file mode 100644
index 0000000..9617680
--- /dev/null
+++ b/examples/scratch-design-jsx-0.tsx
@@ -0,0 +1,59 @@
+/* eslint-disable */
+import React from 'react'
+import { z } from 'zod'
+
+// framework mocks
+function LLMCall() {}
+function System() {}
+function User() {}
+function Assistant() {}
+function Example() {}
+
+// TODO
+// - [ ] handle reactive state?
+// - [ ] handle side effects?
+// - [ ] handle async?
+
+async function ExampleLLMQuery({ texts }: { texts: string[] }) {
+  const examples = [
+    { input: 'The food was digusting', output: 'negative' },
+    { input: 'We had a fantastic night', output: 'positive' },
+    { input: 'Recommended', output: 'positive' },
+    { input: 'The waiter was rude', output: 'negative' }
+  ]
+
+  return (
+    <LLMCall
+      model='gpt-4'
+      temperature={0.1}
+      output={z.array(z.object({ text: z.string(), label: z.string() }))}
+    >
+      <System>You are an expert sentiment-labelling assistant</System>
+
+      <User>
+        Label the following texts as positive or negative:
+        {/* {texts.map((text) => `- ${text}\n`)} */}
+        <ul>
+          {texts.map((text, index) => (
+            <li key={index}>{text}</li>
+          ))}
+        </ul>
+      </User>
+
+      <System>
+        {examples.map((example) => (
+          <Example {...example} />
+        ))}
+      </System>
+    </LLMCall>
+  )
+}
+
+ExampleLLMQuery({
+  texts: [
+    'I went to this place and it was just so awful.',
+    'I had a great time.',
+    'I had a terrible time.',
+    'Food poisoning...'
+  ]
+})
diff --git a/package.json b/package.json
index 00fd4e6..5aee3a6 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "npm-run-all": "^4.1.5",
     "p-memoize": "^7.1.1",
     "prettier": "^2.8.8",
+    "react": "^18.2.0",
     "serpapi": "^1.1.1",
     "sinon": "^15.1.0",
     "tsup": "^6.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 55c569f..2f3fda0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,6 +106,9 @@ devDependencies:
   prettier:
     specifier: ^2.8.8
     version: 2.8.8
+  react:
+    specifier: ^18.2.0
+    version: 18.2.0
   serpapi:
     specifier: ^1.1.1
     version: 1.1.1
@@ -2540,6 +2543,13 @@ packages:
       wrap-ansi: 6.2.0
     dev: true
 
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: true
+
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -3098,6 +3108,13 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: true
+
   /read-pkg-up@8.0.0:
     resolution: {integrity: sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==}
     engines: {node: '>=12'}
diff --git a/tsconfig.json b/tsconfig.json
index cba07bf..4b278db 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,10 +12,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "jsx": "preserve",
     "baseUrl": ".",
     "outDir": "build",
     "noEmit": true
   },
   "exclude": ["node_modules", "build"],
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }