diff --git a/package-lock.json b/package-lock.json
index 3174d20..e02ef02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,24 +9,26 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@ai-sdk/openai": "^0.0.9",
-        "@mfng/core": "^4.1.2",
+        "@ai-sdk/openai": "^0.0.40",
+        "@ai-sdk/react": "^0.0.36",
+        "@ai-sdk/ui-utils": "^0.0.24",
+        "@mfng/core": "^4.1.4",
         "@upstash/ratelimit": "^1.0.1",
         "@upstash/redis": "^1.28.4",
-        "ai": "^3.1.1",
+        "ai": "^3.2.45",
         "clsx": "^1.2.1",
-        "openai": "^4.40.1",
-        "react": "0.0.0-experimental-73bcdfbae5-20240502",
-        "react-dom": "0.0.0-experimental-73bcdfbae5-20240502",
+        "openai": "4.52.6",
+        "react": "19.0.0-rc-06d0b89e-20240801",
+        "react-dom": "19.0.0-rc-06d0b89e-20240801",
         "react-markdown": "^9.0.1",
-        "react-server-dom-webpack": "0.0.0-experimental-73bcdfbae5-20240502",
+        "react-server-dom-webpack": "19.0.0-rc-06d0b89e-20240801",
         "react-textarea-autosize": "^8.5.3",
         "server-only": "^0.0.1",
         "zod": "^3.22.4"
       },
       "devDependencies": {
         "@hono/node-server": "^1.8.2",
-        "@mfng/webpack-rsc": "^4.0.1",
+        "@mfng/webpack-rsc": "^4.2.1",
         "@swc/core": "^1.3.22",
         "@types/aws-lambda": "^8.10.136",
         "@types/node": "^20.11.26",
@@ -78,29 +80,24 @@
       }
     },
     "node_modules/@ai-sdk/openai": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-0.0.9.tgz",
-      "integrity": "sha512-SSZGtX4KFDXWYmQ9JuhVumo1XOx1JAdHybYy08iwVXuCud9xdjZjjxgZkNPytQK9gRxFsYDOw1h0V/WXO7XgfQ==",
+      "version": "0.0.40",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-0.0.40.tgz",
+      "integrity": "sha512-9Iq1UaBHA5ZzNv6j3govuKGXrbrjuWvZIgWNJv4xzXlDMHu9P9hnqlBr/Aiay54WwCuTVNhTzAUTfFgnTs2kbQ==",
       "dependencies": {
-        "@ai-sdk/provider": "0.0.3",
-        "@ai-sdk/provider-utils": "0.0.5"
+        "@ai-sdk/provider": "0.0.14",
+        "@ai-sdk/provider-utils": "1.0.5"
       },
       "engines": {
         "node": ">=18"
       },
       "peerDependencies": {
         "zod": "^3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
       }
     },
     "node_modules/@ai-sdk/provider": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.3.tgz",
-      "integrity": "sha512-0B8P6VZpJ6F9yS9BpmJBYSqIaIfeRtL5tD5SP+qgR8y0pPwalIbRMUFiLz9YUT6g70MJsCLpm/2/fX3cfAYCJw==",
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.14.tgz",
+      "integrity": "sha512-gaQ5Y033nro9iX1YUjEDFDRhmMcEiCk56LJdIUbX5ozEiCNCfpiBpEqrjSp/Gp5RzBS2W0BVxfG7UGW6Ezcrzg==",
       "dependencies": {
         "json-schema": "0.4.0"
       },
@@ -109,11 +106,11 @@
       }
     },
     "node_modules/@ai-sdk/provider-utils": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-0.0.5.tgz",
-      "integrity": "sha512-VVy9eQS+vS2j6cqTEQ9htMHz2nW/HFAkDXLvNFPoi1pZkviknJZEzb+DZUna6Od+jBf/TVA0HZwYnyGDaeI9cQ==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-1.0.5.tgz",
+      "integrity": "sha512-XfOawxk95X3S43arn2iQIFyWGMi0DTxsf9ETc6t7bh91RPWOOPYN1tsmS5MTKD33OGJeaDQ/gnVRzXUCRBrckQ==",
       "dependencies": {
-        "@ai-sdk/provider": "0.0.3",
+        "@ai-sdk/provider": "0.0.14",
         "eventsource-parser": "1.1.2",
         "nanoid": "3.3.6",
         "secure-json-parse": "2.7.0"
@@ -130,6 +127,114 @@
         }
       }
     },
+    "node_modules/@ai-sdk/react": {
+      "version": "0.0.36",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-0.0.36.tgz",
+      "integrity": "sha512-LAxFLtHKN1BajTNP8YzyVIwXn45LSunmvm2Svrfq5oPOyJ2gUEjtaONnbme4mwRXJ1kk6b63SLrgOIXbz6XF/g==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.5",
+        "@ai-sdk/ui-utils": "0.0.24",
+        "swr": "2.2.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/solid": {
+      "version": "0.0.27",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/solid/-/solid-0.0.27.tgz",
+      "integrity": "sha512-uEvlT7MBkRRZxk7teDgtrGe7G3U9tspgSJUvupdOE2d0a4vLlHrMqHb07ao97/Xo1aVHh7oBF9XIgRzKnFtbIQ==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.5",
+        "@ai-sdk/ui-utils": "0.0.24"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.7.7"
+      },
+      "peerDependenciesMeta": {
+        "solid-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/svelte": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/svelte/-/svelte-0.0.29.tgz",
+      "integrity": "sha512-7vrh61wXPVfy19nS4CqyAC3UWjsOgj/b94PCccVTGFoqbmVSa0VptXPYoFfgPTP/W71v7TjXqeq1ygLc4noTZw==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.5",
+        "@ai-sdk/ui-utils": "0.0.24",
+        "sswr": "2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "svelte": "^3.0.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/ui-utils": {
+      "version": "0.0.24",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-0.0.24.tgz",
+      "integrity": "sha512-NBhhICWJ5vAkN4BJnP/MyT+fOB6rTlGlsKGQwvjlhNxdrY1/jXqe2ikNkCbCSEz20IDk82bmg2JJBM96g1O3Ig==",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.14",
+        "@ai-sdk/provider-utils": "1.0.5",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/vue": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/vue/-/vue-0.0.28.tgz",
+      "integrity": "sha512-ZnDjkkUH/9xoXqJEmyrG9Z8z7DKBnp2uyCd9ZVI8QSqKOaP0jOwhv8THUXlIqDEF+ULLGMWm0XeY/L7i3CMYTA==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.5",
+        "@ai-sdk/ui-utils": "0.0.24",
+        "swrv": "1.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -1131,22 +1236,22 @@
       }
     },
     "node_modules/@mfng/core": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@mfng/core/-/core-4.1.2.tgz",
-      "integrity": "sha512-5dxxCivOdQCXaW4uGP/2rSOeNgjD/DQWRtSoG16twf/k0MKs0QMRDhftKMydpDTmqgl10kqdoLXDv5EsggoC2Q==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@mfng/core/-/core-4.1.4.tgz",
+      "integrity": "sha512-wrrly8h1Ahf3NkLRIDjSdV1FRY9Z15sif65yAWgJWppozNHTMgE1hCR9eu+n4b6gQFBXZdW1f0DjEQPHIacNCw==",
       "dependencies": {
         "htmlescape": "^1.1.1"
       },
       "peerDependencies": {
+        "react": "*",
         "react-dom": "*",
-        "react-react": "*",
         "react-server-dom-webpack": "*"
       }
     },
     "node_modules/@mfng/webpack-rsc": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@mfng/webpack-rsc/-/webpack-rsc-4.0.1.tgz",
-      "integrity": "sha512-ueObgKTlNqHbR6FllipITAha7fVzOMHDvyK59h2WU6u3DIBs0+Lwz0cSiU7PKnrBhxxTApRaL5zS5krrYy9aog==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@mfng/webpack-rsc/-/webpack-rsc-4.2.1.tgz",
+      "integrity": "sha512-A7zKJpeTG38eR8wL+qWJr3o3Llw2OtC0PeTTlfWIQdUssD5KUd89sUC8APZb4R+Q8/vi129HZ7faJ7LfC5tm+w==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.21.3",
@@ -1195,6 +1300,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2162,45 +2275,46 @@
       }
     },
     "node_modules/ai": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/ai/-/ai-3.1.1.tgz",
-      "integrity": "sha512-pJZc6q7SLd2/NenxN62iagMw9HHQ4Q8FyKqkrZUJntupRTHHgN3fL7exzJU/ICHDAbtn/EcJXOau6P61QgUtKQ==",
-      "dependencies": {
-        "@ai-sdk/provider": "0.0.3",
-        "@ai-sdk/provider-utils": "0.0.5",
+      "version": "3.2.45",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-3.2.45.tgz",
+      "integrity": "sha512-FRsxS9ydMMTT851aNE8uyyXZ86IjJigOe5mYdhbpSsz8okTPJPFo0bSlZULvNKttonU7UvU4hCzZV0qAMMZm+w==",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.14",
+        "@ai-sdk/provider-utils": "1.0.5",
+        "@ai-sdk/react": "0.0.36",
+        "@ai-sdk/solid": "0.0.27",
+        "@ai-sdk/svelte": "0.0.29",
+        "@ai-sdk/ui-utils": "0.0.24",
+        "@ai-sdk/vue": "0.0.28",
+        "@opentelemetry/api": "1.9.0",
         "eventsource-parser": "1.1.2",
         "json-schema": "0.4.0",
         "jsondiffpatch": "0.6.0",
         "nanoid": "3.3.6",
         "secure-json-parse": "2.7.0",
-        "solid-swr-store": "0.10.7",
-        "sswr": "2.0.0",
-        "swr": "2.2.0",
-        "swr-store": "0.10.6",
-        "swrv": "1.0.4",
         "zod-to-json-schema": "3.22.5"
       },
       "engines": {
         "node": ">=18"
       },
       "peerDependencies": {
-        "react": "^18.2.0",
-        "solid-js": "^1.7.7",
+        "openai": "^4.42.0",
+        "react": "^18 || ^19",
+        "sswr": "^2.1.0",
         "svelte": "^3.0.0 || ^4.0.0",
-        "vue": "^3.3.4",
         "zod": "^3.0.0"
       },
       "peerDependenciesMeta": {
-        "react": {
+        "openai": {
           "optional": true
         },
-        "solid-js": {
+        "react": {
           "optional": true
         },
-        "svelte": {
+        "sswr": {
           "optional": true
         },
-        "vue": {
+        "svelte": {
           "optional": true
         },
         "zod": {
@@ -3024,6 +3138,11 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -6571,9 +6690,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.40.1",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.40.1.tgz",
-      "integrity": "sha512-mS7LerF4fY1/we0aKGGwIWtosTJFLKuNbBWMBR/G1TAZUHoktAdod0dqIrlQvSD39uS6jNEEbT7jRsXmzfEPBw==",
+      "version": "4.52.6",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.52.6.tgz",
+      "integrity": "sha512-mT4SblnPXkzgiGY/cByU57sDDCqNUt3GQV8mzt4rL/xP6PHIQyTqwJ/WxwGhHRQ9okxgsDNgKQ6asdq8Dynw+g==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -7694,22 +7813,22 @@
       }
     },
     "node_modules/react": {
-      "version": "0.0.0-experimental-73bcdfbae5-20240502",
-      "resolved": "https://registry.npmjs.org/react/-/react-0.0.0-experimental-73bcdfbae5-20240502.tgz",
-      "integrity": "sha512-V/IJUwAFh/qxOPARkBNjtt7ohchHxNhNCyUdnbfDgBMdkEtwTFdI/btpsg881hfHCsYGC9wfDFPPH8ni+8f8Hg==",
+      "version": "19.0.0-rc-06d0b89e-20240801",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc-06d0b89e-20240801.tgz",
+      "integrity": "sha512-moBKIME1GBgs8onH1xCs+gzPWyLF62m+2XbD4GpirxeRDca7GLA8UQZO9IuQvf1uxCpVWCG8FrpU/D2x7Plknw==",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "0.0.0-experimental-73bcdfbae5-20240502",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-experimental-73bcdfbae5-20240502.tgz",
-      "integrity": "sha512-BsZ+1jtUoy/mwbr87km72xr63N1UUAMbyA99ZU0ZL99os+1r1NjAAQzk1isvlC0U41fDmkdq28ASZI09m3XT3A==",
+      "version": "19.0.0-rc-06d0b89e-20240801",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-rc-06d0b89e-20240801.tgz",
+      "integrity": "sha512-6JIbEXFwsRkI3gLKhcmjvQ3GKsP4NR/BjPyTKyp7xYeQEeiH01TypGVbc/K6nU1/y4jNGFGkxH3ZFbKKZwCecw==",
       "dependencies": {
-        "scheduler": "0.0.0-experimental-73bcdfbae5-20240502"
+        "scheduler": "0.25.0-rc-06d0b89e-20240801"
       },
       "peerDependencies": {
-        "react": "0.0.0-experimental-73bcdfbae5-20240502"
+        "react": "19.0.0-rc-06d0b89e-20240801"
       }
     },
     "node_modules/react-markdown": {
@@ -7738,9 +7857,9 @@
       }
     },
     "node_modules/react-server-dom-webpack": {
-      "version": "0.0.0-experimental-73bcdfbae5-20240502",
-      "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-73bcdfbae5-20240502.tgz",
-      "integrity": "sha512-jscvySId+xf9Y0o2jkA7zdJOOZBH+dPOLGO5Ay+w/4kcqey8zPp+mqHCfh1hdNjKcVnfb50FcUDAnj3M2Y52sQ==",
+      "version": "19.0.0-rc-06d0b89e-20240801",
+      "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-19.0.0-rc-06d0b89e-20240801.tgz",
+      "integrity": "sha512-vtmADrM6fkwEt4wjfS1NX3IU7g+RcIfl8a9WmuI3mhrQ0o6eYUccCQxzn7vMPcTqtiSsD3Cou/09hJoFiqxR/Q==",
       "dependencies": {
         "acorn-loose": "^8.3.0",
         "neo-async": "^2.6.1"
@@ -7749,8 +7868,8 @@
         "node": ">=0.10.0"
       },
       "peerDependencies": {
-        "react": "0.0.0-experimental-73bcdfbae5-20240502",
-        "react-dom": "0.0.0-experimental-73bcdfbae5-20240502",
+        "react": "19.0.0-rc-06d0b89e-20240801",
+        "react-dom": "19.0.0-rc-06d0b89e-20240801",
         "webpack": "^5.59.0"
       }
     },
@@ -8099,9 +8218,9 @@
       "dev": true
     },
     "node_modules/scheduler": {
-      "version": "0.0.0-experimental-73bcdfbae5-20240502",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-experimental-73bcdfbae5-20240502.tgz",
-      "integrity": "sha512-lUQnRZCoEAyKNPE9UWkx8c8+EHfjtMLw5L9E+at8QBCzvlC2aCZ9f3qhuJJb5pna659KpATGo+tEaJxmImLTiw=="
+      "version": "0.25.0-rc-06d0b89e-20240801",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-06d0b89e-20240801.tgz",
+      "integrity": "sha512-5RF+494IBigvBHUPYId9MhAWyN0cZZq3o82oAbYvZuc2IFc4mZYHS3z2MuJ5Lwm39zGWDEzB404X6BO47zbt5w=="
     },
     "node_modules/schema-utils": {
       "version": "4.2.0",
@@ -8204,18 +8323,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/solid-swr-store": {
-      "version": "0.10.7",
-      "resolved": "https://registry.npmjs.org/solid-swr-store/-/solid-swr-store-0.10.7.tgz",
-      "integrity": "sha512-A6d68aJmRP471aWqKKPE2tpgOiR5fH4qXQNfKIec+Vap+MGQm3tvXlT8n0I8UgJSlNAsSAUuw2VTviH2h3Vv5g==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "solid-js": "^1.2",
-        "swr-store": "^0.10"
-      }
-    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -8280,14 +8387,14 @@
       }
     },
     "node_modules/sswr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/sswr/-/sswr-2.0.0.tgz",
-      "integrity": "sha512-mV0kkeBHcjcb0M5NqKtKVg/uTIYNlIIniyDfSGrSfxpEdM9C365jK0z55pl9K0xAkNTJi2OAOVFQpgMPUk+V0w==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sswr/-/sswr-2.1.0.tgz",
+      "integrity": "sha512-Cqc355SYlTAaUt8iDPaC/4DPPXK925PePLMxyBKuWd5kKc5mwsG3nT9+Mq2tyguL5s7b4Jg+IRMpTRsNTAfpSQ==",
       "dependencies": {
         "swrev": "^4.0.0"
       },
       "peerDependencies": {
-        "svelte": "^4.0.0"
+        "svelte": "^4.0.0 || ^5.0.0-next.0"
       }
     },
     "node_modules/string-width": {
@@ -8563,27 +8670,17 @@
       }
     },
     "node_modules/swr": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.0.tgz",
-      "integrity": "sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
       "dependencies": {
+        "client-only": "^0.0.1",
         "use-sync-external-store": "^1.2.0"
       },
       "peerDependencies": {
         "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/swr-store": {
-      "version": "0.10.6",
-      "resolved": "https://registry.npmjs.org/swr-store/-/swr-store-0.10.6.tgz",
-      "integrity": "sha512-xPjB1hARSiRaNNlUQvWSVrG5SirCjk2TmaUyzzvk69SZQan9hCJqw/5rG9iL7xElHU784GxRPISClq4488/XVw==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/swrev": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/swrev/-/swrev-4.0.0.tgz",
diff --git a/package.json b/package.json
index 21bff60..e8e6704 100644
--- a/package.json
+++ b/package.json
@@ -26,24 +26,26 @@
     "watch:dev": "webpack --mode development --watch"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^0.0.9",
-    "@mfng/core": "^4.1.2",
+    "@ai-sdk/openai": "^0.0.40",
+    "@ai-sdk/react": "^0.0.36",
+    "@ai-sdk/ui-utils": "^0.0.24",
+    "@mfng/core": "^4.1.4",
     "@upstash/ratelimit": "^1.0.1",
     "@upstash/redis": "^1.28.4",
-    "ai": "^3.1.1",
+    "ai": "^3.2.45",
     "clsx": "^1.2.1",
-    "openai": "^4.40.1",
-    "react": "0.0.0-experimental-73bcdfbae5-20240502",
-    "react-dom": "0.0.0-experimental-73bcdfbae5-20240502",
+    "openai": "4.52.6",
+    "react": "19.0.0-rc-06d0b89e-20240801",
+    "react-dom": "19.0.0-rc-06d0b89e-20240801",
     "react-markdown": "^9.0.1",
-    "react-server-dom-webpack": "0.0.0-experimental-73bcdfbae5-20240502",
+    "react-server-dom-webpack": "19.0.0-rc-06d0b89e-20240801",
     "react-textarea-autosize": "^8.5.3",
     "server-only": "^0.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@hono/node-server": "^1.8.2",
-    "@mfng/webpack-rsc": "^4.0.1",
+    "@mfng/webpack-rsc": "^4.2.1",
     "@swc/core": "^1.3.22",
     "@types/aws-lambda": "^8.10.136",
     "@types/node": "^20.11.26",
diff --git a/src/app/actions.tsx b/src/app/actions.tsx
new file mode 100644
index 0000000..7002515
--- /dev/null
+++ b/src/app/actions.tsx
@@ -0,0 +1,124 @@
+import {openai} from '@ai-sdk/openai';
+import type {CoreMessage} from 'ai';
+import {generateId} from 'ai';
+import {
+  getMutableAIState as $getMutableAIState,
+  createAI,
+  createStreamableValue,
+  streamUI,
+} from 'ai/rsc';
+import * as React from 'react';
+import {z} from 'zod';
+import {BotMessage, Message} from './message.js';
+
+type AIProviderNoActions = ReturnType<typeof createAI<AIState, UIState>>;
+// typed wrapper *without* actions defined to avoid circular dependencies
+const getMutableAIState = $getMutableAIState<AIProviderNoActions>;
+
+// mock function to fetch weather data
+const fetchWeatherData = async (_location: string) => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return {temperature: `72°F`};
+};
+
+export async function submitUserMessage(userInput: string): Promise<{
+  id: string;
+  display: React.ReactNode;
+}> {
+  'use server';
+
+  const aiState = getMutableAIState();
+
+  aiState.update({
+    ...aiState.get(),
+    messages: [
+      ...aiState.get().messages,
+      {id: generateId(), role: `user`, content: userInput},
+    ],
+  });
+
+  let textStream: undefined | ReturnType<typeof createStreamableValue<string>>;
+  let textNode: React.ReactNode;
+
+  const result = await streamUI({
+    model: openai(`gpt-4-turbo`),
+    initial: <Message role="assistant">Working on that...</Message>,
+    system: `You are a weather assistant.`,
+    messages: aiState
+      .get()
+      .messages.map(({role, content}) => ({role, content} as CoreMessage)),
+
+    text: async ({content, done, delta}) => {
+      if (!textStream) {
+        textStream = createStreamableValue(``);
+        textNode = <BotMessage textStream={textStream.value} />;
+      }
+
+      if (done) {
+        textStream.done();
+        aiState.update({
+          ...aiState.get(),
+          messages: [
+            ...aiState.get().messages,
+            {id: generateId(), role: `assistant`, content},
+          ],
+        });
+      } else {
+        textStream.append(delta);
+      }
+
+      return textNode;
+    },
+    tools: {
+      get_current_weather: {
+        description: `Get the current weather`,
+        parameters: z.object({
+          location: z.string(),
+        }),
+        async *generate({location}) {
+          yield (
+            <Message role="assistant">Loading weather for {location}</Message>
+          );
+          const {temperature} = await fetchWeatherData(location);
+          return (
+            <Message role="assistant">
+              <span>
+                The temperature in {location} is{` `}
+                <span className="font-semibold">{temperature}</span>
+              </span>
+            </Message>
+          );
+        },
+      },
+    },
+    onFinish: (event) => {
+      // your own logic, e.g. for saving the chat history or recording usage
+      console.log(`[onFinish]: ${JSON.stringify(event, null, 2)}`);
+    },
+  });
+
+  return {
+    id: generateId(),
+    display: result.value,
+  };
+}
+
+export type ClientMessage = CoreMessage & {
+  id: string;
+};
+
+export type AIState = {
+  chatId: string;
+  messages: ClientMessage[];
+};
+
+export type UIState = {
+  id: string;
+  display: React.ReactNode;
+}[];
+
+export const AI = createAI({
+  actions: {submitUserMessage},
+  initialUIState: [] as UIState,
+  initialAIState: {chatId: generateId(), messages: []} as AIState,
+});
diff --git a/src/app/ai-state.ts b/src/app/ai-state.ts
deleted file mode 100644
index a98aaf5..0000000
--- a/src/app/ai-state.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type {CoreMessage} from 'ai';
-
-export type UserInputAction = 'choose-option' | 'message' | 'select-image';
-
-export interface UserInput {
-  readonly action: UserInputAction;
-  readonly content: string;
-}
-
-export function fromUserInput(userInput: UserInput): CoreMessage {
-  const {action, content} = userInput;
-
-  if (action === `message`) {
-    return {role: `user`, content};
-  }
-
-  return {
-    role: `user`,
-    content: getUserActionContent(action, content),
-  };
-}
-
-function getUserActionContent(
-  action: 'choose-option' | 'select-image',
-  content: string,
-): string {
-  switch (action) {
-    case `choose-option`:
-      return `I choose: ${content}`;
-    case `select-image`:
-      return `I want to know more about the image ${content}. Keep it short.`;
-  }
-}
diff --git a/src/app/ai.tsx b/src/app/ai.tsx
deleted file mode 100644
index 46cea10..0000000
--- a/src/app/ai.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type {CoreMessage} from 'ai';
-import {createAI} from 'ai/rsc';
-import type * as React from 'react';
-import {submitUserMessage} from './submit-user-message.js';
-
-export interface UIStateItem {
-  readonly id: number;
-  readonly role: 'user' | 'assistant' | 'error';
-  readonly display: React.ReactNode;
-}
-
-const initialAIState: CoreMessage[] = [];
-const initialUIState: UIStateItem[] = [];
-
-export const AI = createAI({
-  actions: {submitUserMessage},
-  initialUIState,
-  initialAIState,
-});
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 686ebc4..44a24e8 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {AI} from './ai.js';
-import {Chat} from './chat.js';
-import {Header} from './header.js';
-import {Welcome} from './welcome.js';
+import {AI} from './actions.js';
+import Page from './page.js';
 
 export function App(): JSX.Element {
   return (
@@ -14,19 +12,14 @@ export function App(): JSX.Element {
         <meta
           name="description"
           content="A demo showcasing a chat assistant capable of displaying images of various
-kinds, using the Vercel AI SDK 3.0 with Generative UI, powered by React Server Components."
+kinds, using the Vercel AI SDK 3.2 with Generative UI, powered by React Server Components."
         />
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
       </head>
       <body className="bg-zinc-100">
-        <Header />
-        <main className="p-4">
-          <AI>
-            <Chat>
-              <Welcome />
-            </Chat>
-          </AI>
-        </main>
+        <AI>
+          <Page />
+        </AI>
       </body>
     </html>
   );
diff --git a/src/app/chat-message.tsx b/src/app/chat-message.tsx
deleted file mode 100644
index a16e650..0000000
--- a/src/app/chat-message.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import {clsx} from 'clsx';
-import * as React from 'react';
-
-export type ChatMessageProps = React.PropsWithChildren<{
-  readonly role: 'assistant' | 'user' | 'error';
-}>;
-
-export function ChatMessage({
-  children,
-  role,
-}: ChatMessageProps): React.ReactNode {
-  return (
-    <div
-      className={clsx(`max-w-lg rounded-md px-4 py-3 shadow`, {
-        'ml-8 self-end bg-white': role === `user`,
-        'mr-8 bg-zinc-800 text-white': role === `assistant`,
-        'mr-8 border-2 border-red-700 border-opacity-70 bg-red-100 text-black':
-          role === `error`,
-      })}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/src/app/chat.tsx b/src/app/chat.tsx
deleted file mode 100644
index 2e32799..0000000
--- a/src/app/chat.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client';
-
-import {useActions, useUIState} from 'ai/rsc';
-import * as React from 'react';
-import Textarea from 'react-textarea-autosize';
-import type {AI} from './ai.js';
-import {ChatMessage} from './chat-message.js';
-import {getErrorMessage} from './get-error-message.js';
-import {LoadingIndicator} from './loading-indicator.js';
-import {useEnterSubmit} from './use-enter-submit.js';
-
-export function Chat({children}: React.PropsWithChildren): React.ReactNode {
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-  const [inputValue, setInputValue] = React.useState(``);
-  const [isPending, startTransition] = React.useTransition();
-  const [messages, setMessages] = useUIState<typeof AI>();
-  const {submitUserMessage} = useActions<typeof AI>();
-  const {formRef, handleKeyDown} = useEnterSubmit();
-
-  const [optimisticMessages, setOptimisticMessages] =
-    React.useOptimistic(messages);
-
-  const handleSubmit = (
-    event: React.SyntheticEvent<HTMLFormElement, SubmitEvent>,
-  ) => {
-    event.preventDefault();
-
-    const {submitter} = event.nativeEvent;
-
-    const examplePrompt =
-      submitter instanceof HTMLButtonElement &&
-      submitter.name === `example-prompt`
-        ? submitter.value
-        : undefined;
-
-    if (examplePrompt && textareaRef.current) {
-      setInputValue(examplePrompt);
-    }
-
-    const userInput = examplePrompt ?? inputValue;
-
-    if (!userInput || isPending) {
-      return;
-    }
-
-    setMessages((prevMessages) => [
-      ...prevMessages,
-      {id: Date.now(), role: `user`, display: <div>{userInput}</div>},
-    ]);
-
-    setInputValue(``);
-    document.body.scrollIntoView({block: `end`, behavior: `smooth`});
-
-    startTransition(async () => {
-      setOptimisticMessages((prevMessages) => [
-        ...prevMessages,
-        {id: 0, role: `assistant`, display: <LoadingIndicator />},
-      ]);
-
-      try {
-        const message = await submitUserMessage({
-          action: `message`,
-          content: userInput,
-        });
-
-        setMessages((prevMessages) => [...prevMessages, message]);
-      } catch (error) {
-        console.error(error);
-        const errorMessage = getErrorMessage(error);
-
-        setMessages((prevMessages) => [
-          ...prevMessages,
-          {id: Date.now(), role: `error`, display: <p>{errorMessage}</p>},
-        ]);
-      }
-
-      textareaRef.current?.focus();
-    });
-  };
-
-  return (
-    <form
-      ref={formRef}
-      className="mx-auto flex max-w-3xl flex-col space-y-3 pb-36"
-      onSubmit={handleSubmit}
-    >
-      {optimisticMessages.length === 0 && children}
-
-      {optimisticMessages.map((message) => (
-        <ChatMessage key={message.id} role={message.role}>
-          {message.display}
-        </ChatMessage>
-      ))}
-
-      <div className="fixed bottom-0 left-0 right-0 w-full">
-        <div className="mx-auto flex max-w-3xl border-t bg-white p-4 shadow-lg md:rounded-t-xl md:border md:p-6">
-          <Textarea
-            ref={textareaRef}
-            className="flex-1 resize-none rounded-md bg-zinc-100 p-2 outline-cyan-500"
-            placeholder="Send a message."
-            rows={1}
-            autoFocus
-            maxRows={6}
-            value={inputValue}
-            onChange={(event) => {
-              setInputValue(event.target.value);
-            }}
-            onKeyDown={handleKeyDown}
-            tabIndex={0}
-            autoComplete="off"
-            data-1p-ignore
-          />
-        </div>
-      </div>
-    </form>
-  );
-}
diff --git a/src/app/get-error-message.ts b/src/app/get-error-message.ts
deleted file mode 100644
index b673808..0000000
--- a/src/app/get-error-message.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {CallServerError} from '@mfng/core/client';
-
-export function getErrorMessage(error: unknown): string {
-  if (error instanceof CallServerError) {
-    switch (error.statusCode) {
-      case 413:
-        return `Your message is too long. Please shorten it and try again.`;
-      case 429:
-        return `Sorry, you've reached your request limit. Please try again in a few minutes.`;
-    }
-  }
-
-  return `An unexpected error occured.`;
-}
diff --git a/src/app/github-mark-white.svg b/src/app/github-mark-white.svg
deleted file mode 100644
index d5e6491..0000000
--- a/src/app/github-mark-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/app/google-image-search.ts b/src/app/google-image-search.ts
deleted file mode 100644
index 977b23d..0000000
--- a/src/app/google-image-search.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import {z} from 'zod';
-
-export type Image = z.TypeOf<typeof image>;
-export type ImageSearchResponse = z.TypeOf<typeof imageSearchResponse>;
-export type ImageSearchParams = z.TypeOf<typeof imageSearchParams>;
-
-const apiKey = process.env.GOOGLE_SEARCH_API_KEY!;
-const searchEngineId = process.env.GOOGLE_SEARCH_SEARCH_ENGINE_ID!;
-
-export const imageSearchParams = z.object({
-  q: z.string().describe(`The search query`),
-  exactTerms: z
-    .string()
-    .optional()
-    .describe(
-      `Identifies a word or phrase that all search results must contain. Useful for artwork titles.`,
-    ),
-  excludeTerms: z
-    .string()
-    .optional()
-    .describe(
-      `Identifies a word or phrase that should not appear in any search result.`,
-    ),
-  imgColorType: z
-    .enum([`color`, `gray`, `mono`, `trans`])
-    .optional()
-    .describe(
-      `Returns black and white, grayscale, transparent, or color images. Acceptable values are: "color", "gray", "mono" (black and white), "trans" (transparent background).`,
-    ),
-  imgDominantColor: z
-    .enum([
-      `black`,
-      `blue`,
-      `brown`,
-      `gray`,
-      `green`,
-      `orange`,
-      `pink`,
-      `purple`,
-      `red`,
-      `teal`,
-      `white`,
-      `yellow`,
-    ])
-    .optional()
-    .describe(
-      `Returns images of a specific dominant color. Acceptable values are: "black", "blue", "brown", "gray", "green", "orange", "pink", "purple", "red", "teal", "white", "yellow".`,
-    ),
-  imgType: z
-    .enum([`clipart`, `face`, `lineart`, `stock`, `photo`, `animated`])
-    .optional()
-    .describe(
-      `Returns images of a type. Acceptable values are: "clipart", "face", "lineart", "stock", "photo", "animated".`,
-    ),
-  num: z
-    .string()
-    .describe(
-      `Number of search results to return. Valid values are integers between 1 and 10, inclusive.`,
-    ),
-});
-
-const image = z
-  .object({
-    link: z.string(),
-    snippet: z.string(),
-    image: z.object({
-      contextLink: z.string(),
-      thumbnailLink: z.string(),
-      width: z.number(),
-      height: z.number(),
-    }),
-  })
-  .transform(
-    ({link, snippet, image: {contextLink, thumbnailLink, width, height}}) => ({
-      website: {url: contextLink, snippet},
-      thumbnailUrl: thumbnailLink,
-      url: link,
-      width,
-      height,
-    }),
-  );
-
-const images = z
-  .object({kind: z.string(), items: z.array(image).default([])})
-  .transform(({items}) => items);
-
-const error = z.object({
-  error: z.object({code: z.number(), message: z.string()}),
-});
-
-const imageSearchResponse = z.union([error, images]);
-
-export async function searchImages(
-  params: z.TypeOf<typeof imageSearchParams>,
-): Promise<z.TypeOf<typeof imageSearchResponse>> {
-  const url = new URL(`https://www.googleapis.com/customsearch/v1`);
-
-  url.search = new URLSearchParams({
-    ...params,
-    cx: searchEngineId,
-    key: apiKey,
-    rights: `cc_publicdomain`,
-    safe: `active`,
-    searchType: `image`,
-  }).toString();
-
-  const response = await fetch(url);
-  const json = await response.json();
-  const result = imageSearchResponse.safeParse(json);
-
-  if (result.success) {
-    return result.data;
-  }
-
-  console.debug(JSON.stringify(json, null, 2));
-
-  throw result.error;
-}
diff --git a/src/app/header.tsx b/src/app/header.tsx
deleted file mode 100644
index 957fe2a..0000000
--- a/src/app/header.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import gitHubLogo from './github-mark-white.svg';
-
-export function Header(): React.ReactNode {
-  return (
-    <header className="flex items-center justify-between bg-zinc-800 px-4 py-3 text-zinc-50 shadow md:px-6">
-      <div>
-        <h1 className="text-xl font-bold">AI SDK with Generative UI</h1>
-        <h2 className="text-sm">Deployed on AWS Lambda &amp; CloudFront</h2>
-      </div>
-      <a
-        href="https://github.com/unstubbable/mfng-ai-demo"
-        title="MFNG AI Demo GitHub Repo"
-        className="flex-shrink-0"
-      >
-        <img src={gitHubLogo} className="h-8 w-8" alt="GitHub Logo" />
-      </a>
-    </header>
-  );
-}
diff --git a/src/app/image-search-result.ts b/src/app/image-search-result.ts
deleted file mode 100644
index 9c907ef..0000000
--- a/src/app/image-search-result.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import type {Image, ImageSearchResponse} from './google-image-search.js';
-
-export type ImageSearchResult =
-  | {status: 'error'; title: string; errorMessage: string}
-  | {status: 'not-found'; title: string; notFoundMessage: string}
-  | {status: 'found'; images: Image[]; title: string};
-
-export interface CreateImageSearchResultOptions {
-  readonly response: ImageSearchResponse;
-  readonly title: string;
-  readonly notFoundMessage: string;
-  readonly errorMessage: string;
-}
-
-export function createImageSearchResult(
-  options: CreateImageSearchResultOptions,
-): ImageSearchResult {
-  const {response, title, notFoundMessage, errorMessage} = options;
-
-  if (`error` in response) {
-    console.error(
-      `Error searching for images:`,
-      JSON.stringify(response.error),
-    );
-
-    if (response.error.code === 400) {
-      console.warn(
-        `The env variables GOOGLE_SEARCH_API_KEY and GOOGLE_SEARCH_SEARCH_ENGINE_ID must be provided.`,
-      );
-    }
-
-    return {status: `error`, title, errorMessage};
-  }
-
-  return response.length === 0
-    ? {status: `not-found`, title, notFoundMessage}
-    : {status: `found`, images: response, title};
-}
-
-export function prepareImageSearchResultForAiState(
-  imageSearchResult: ImageSearchResult,
-): unknown {
-  const {status, title} = imageSearchResult;
-
-  if (imageSearchResult.status === `found`) {
-    const {images} = imageSearchResult;
-
-    return {
-      status,
-      title,
-      images: images.map(({url, website}) => ({url, website})),
-    };
-  }
-
-  return {status, title};
-}
diff --git a/src/app/image-selector.tsx b/src/app/image-selector.tsx
deleted file mode 100644
index 48755cd..0000000
--- a/src/app/image-selector.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import {useSubmitUserMessage} from './use-submit-user-message.js';
-
-export type ImageSelectorProps = React.PropsWithChildren<{
-  readonly url: string;
-}>;
-
-export function ImageSelector({
-  children,
-  url,
-}: ImageSelectorProps): React.ReactNode {
-  const handleClick = useSubmitUserMessage(`select-image`, url);
-
-  return (
-    <button
-      className="cursor-pointer outline-cyan-500"
-      type="button"
-      onClick={handleClick}
-    >
-      {children}
-    </button>
-  );
-}
diff --git a/src/app/images.tsx b/src/app/images.tsx
deleted file mode 100644
index 89f0c40..0000000
--- a/src/app/images.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-import {type ImageSearchParams, searchImages} from './google-image-search.js';
-import {
-  createImageSearchResult,
-  prepareImageSearchResultForAiState,
-} from './image-search-result.js';
-import {ImageSelector} from './image-selector.js';
-import {ProgressiveImage} from './progressive-image.js';
-
-export interface ImagesProps {
-  readonly title: string;
-  readonly notFoundMessage: string;
-  readonly errorMessage: string;
-  readonly searchParams: ImageSearchParams;
-  readonly onDataFetched: (dataForAiState: unknown) => void;
-}
-
-type ImagesContainerProps = React.PropsWithChildren<{
-  readonly title: string;
-}>;
-
-function ImagesContainer({title, children}: ImagesContainerProps) {
-  return (
-    <div className="space-y-3">
-      <h4 className="text-l font-bold">{title}</h4>
-      {children}
-    </div>
-  );
-}
-
-export async function Images({
-  title,
-  notFoundMessage,
-  errorMessage,
-  searchParams,
-  onDataFetched,
-}: ImagesProps): Promise<React.ReactElement> {
-  const response = await searchImages(searchParams);
-
-  const result = createImageSearchResult({
-    response,
-    title,
-    notFoundMessage,
-    errorMessage,
-  });
-
-  onDataFetched(prepareImageSearchResultForAiState(result));
-
-  if (result.status !== `found`) {
-    const message =
-      result.status === `not-found`
-        ? result.notFoundMessage
-        : result.errorMessage;
-
-    return (
-      <ImagesContainer title={result.title}>
-        <p className="text-sm">
-          <em>{message}</em>
-        </p>
-      </ImagesContainer>
-    );
-  }
-
-  return (
-    <ImagesContainer title={result.title}>
-      {result.images.map(({thumbnailUrl, url, width, height}) => (
-        <ImageSelector key={thumbnailUrl} url={url}>
-          <ProgressiveImage
-            thumbnailUrl={thumbnailUrl}
-            url={url}
-            width={width}
-            height={height}
-            alt={result.title}
-          />
-        </ImageSelector>
-      ))}
-    </ImagesContainer>
-  );
-}
diff --git a/src/app/loading-indicator.tsx b/src/app/loading-indicator.tsx
deleted file mode 100644
index 89e4d1e..0000000
--- a/src/app/loading-indicator.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from 'react';
-
-export function LoadingIndicator(): React.ReactNode {
-  return <p className="animate-pulse tracking-widest">&hellip;</p>;
-}
diff --git a/src/app/markdown.tsx b/src/app/markdown.tsx
deleted file mode 100644
index e6f4be8..0000000
--- a/src/app/markdown.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-import ReactMarkdown from 'react-markdown';
-import 'server-only'; // We don't want react-markdown in client bundles.
-
-export interface MarkdownProps {
-  readonly text: string;
-}
-
-export function Markdown({text}: MarkdownProps): React.ReactNode {
-  return (
-    <ReactMarkdown
-      components={{
-        h1: ({children}) => (
-          <h1 className="mb-4 text-3xl font-bold">{children}</h1>
-        ),
-        h2: ({children}) => (
-          <h2 className="mb-4 text-2xl font-bold">{children}</h2>
-        ),
-        h3: ({children}) => (
-          <h3 className="mb-4 text-xl font-bold">{children}</h3>
-        ),
-        h4: ({children}) => (
-          <h4 className="mb-4 text-lg font-bold">{children}</h4>
-        ),
-        p: ({children}) => <p className="mb-3 last:mb-0">{children}</p>,
-        ol: ({children}) => <ol className="mb-3 last:mb-0">{children}</ol>,
-        ul: ({children}) => <ul className="mb-3 last:mb-0">{children}</ul>,
-        li: ({children}) => (
-          <li className="mb-2 ml-4 list-item list-disc last:mb-0">
-            {children}
-          </li>
-        ),
-        pre: ({children}) => (
-          <pre className="bg-zinc-100 p-2 text-xs">{children}</pre>
-        ),
-        a: ({href, children}) => (
-          <a href={href} className="underline">
-            {children}
-          </a>
-        ),
-      }}
-    >
-      {text}
-    </ReactMarkdown>
-  );
-}
diff --git a/src/app/message.tsx b/src/app/message.tsx
new file mode 100644
index 0000000..033f02e
--- /dev/null
+++ b/src/app/message.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import type {StreamableValue} from 'ai/rsc';
+import {useStreamableValue} from 'ai/rsc';
+import * as React from 'react';
+
+export function BotMessage({
+  textStream,
+}: {
+  textStream: StreamableValue;
+}): React.ReactNode {
+  const [text] = useStreamableValue(textStream);
+  return <Message role="assistant">{text}</Message>;
+}
+
+export function Message({
+  role,
+  children,
+}: {
+  role: string;
+  children: React.ReactNode;
+}): React.ReactNode {
+  return (
+    <div className="flex flex-col gap-1 border-b p-2">
+      <div className="flex flex-row justify-between">
+        <div className="text-sm text-zinc-500">{role}</div>
+      </div>
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..76b74a9
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import {generateId} from 'ai';
+import {useActions, useUIState} from 'ai/rsc';
+import {Fragment, useState} from 'react';
+import * as React from 'react';
+import type {AI} from './actions.js';
+import {Message} from './message.js';
+
+export default function Home(): React.ReactNode {
+  const [input, setInput] = useState(``);
+  const [messages, setMessages] = useUIState<typeof AI>();
+  const {submitUserMessage} = useActions<typeof AI>();
+
+  const handleSubmission = async () => {
+    setMessages((currentMessages) => [
+      ...currentMessages,
+      {
+        id: generateId(),
+        display: <Message role="user">{input}</Message>,
+      },
+    ]);
+
+    const response = await submitUserMessage(input);
+    setMessages((currentMessages) => [...currentMessages, response]);
+    setInput(``);
+  };
+
+  return (
+    <div className="flex flex-col-reverse">
+      <div className="flex w-full flex-row gap-2 bg-zinc-100 p-2">
+        <input
+          className="w-full bg-zinc-100 p-2 outline-none"
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          placeholder="Ask a question"
+          onKeyDown={(event) => {
+            if (event.key === `Enter`) {
+              void handleSubmission();
+            }
+          }}
+        />
+        <button
+          className="rounded-md bg-zinc-900 p-2 text-zinc-100"
+          onClick={handleSubmission}
+        >
+          Send
+        </button>
+      </div>
+
+      <div className="flex h-[calc(100dvh-56px)] flex-col overflow-y-scroll">
+        <div>
+          {messages.map((message) => (
+            <Fragment key={message.id}>{message.display}</Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/progressive-image.tsx b/src/app/progressive-image.tsx
deleted file mode 100644
index 65e6ae2..0000000
--- a/src/app/progressive-image.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-export interface ProgressiveImageProps {
-  readonly thumbnailUrl: string;
-  readonly url: string;
-  readonly width: number;
-  readonly height: number;
-  readonly alt: string;
-}
-
-export function ProgressiveImage({
-  thumbnailUrl,
-  url,
-  width,
-  height,
-  alt,
-}: ProgressiveImageProps): React.ReactNode {
-  const [hasPreloadedImage, setHasPreloadedImage] = React.useState(false);
-
-  React.useEffect(() => {
-    setHasPreloadedImage(false);
-    const preloadImage = new Image();
-
-    preloadImage.src = url;
-    preloadImage.onload = () => setHasPreloadedImage(true);
-  }, [url]);
-
-  return hasPreloadedImage ? (
-    <img src={url} width={width} height={height} alt={alt} />
-  ) : (
-    <img
-      src={thumbnailUrl}
-      width={width}
-      height={height}
-      alt={alt}
-      className="blur-md"
-    />
-  );
-}
diff --git a/src/app/submit-user-message.tsx b/src/app/submit-user-message.tsx
deleted file mode 100644
index b2388a9..0000000
--- a/src/app/submit-user-message.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-'use server';
-
-import {createOpenAI} from '@ai-sdk/openai';
-import type {AssistantContent} from 'ai';
-import {getMutableAIState, streamUI} from 'ai/rsc';
-import * as React from 'react';
-import {z} from 'zod';
-import {type UserInput, fromUserInput} from './ai-state.js';
-import type {AI, UIStateItem} from './ai.js';
-import {imageSearchParams} from './google-image-search.js';
-import {Images} from './images.js';
-import {LoadingIndicator} from './loading-indicator.js';
-import {Markdown} from './markdown.js';
-import {UserChoiceButton} from './user-choice-button.js';
-
-export async function submitUserMessage(
-  userInput: UserInput,
-): Promise<UIStateItem> {
-  const aiState = getMutableAIState<typeof AI>();
-
-  aiState.update([...aiState.get(), fromUserInput(userInput)]);
-
-  let lastTextContent: string | undefined;
-
-  const ui = await streamUI({
-    model: createOpenAI({baseURL: process.env.OPENAI_BASE_URL})(`gpt-4-turbo`),
-    initial: <LoadingIndicator />,
-    system: `You are a chat assistant with a focus on images (photos, paintings, cliparts, animated gifs, etc.).
-
-    A user might ask for images of any kind (only safe for work, though!) and you search for them and show them, using the input of the user for the various search parameters.
-
-    Always prefer to show specific titled art pieces. If in doubt, just pick some that you know.
-
-    When it comes to art, try to show known images to the user with their title. Think about it step by step to come up with specific search queries. E.g. first select a style, then select an artist for that style, and then search for the specific painting (e.g. surrealism -> Dalí -> The Persistence of Memory -> query terms: ["Salvador Dalí", "The Persistence of Memory"]). Do this process a couple of times to come up with a diverse set of images in one single message.
-
-    Use markdown in your messages if it improves how you can structure a response, highlight certain parts (especially the discussed subject's name/title should be strong), or to add links to other websites.
-
-    Don't include images in markdown, use the dedicated tool instead.
-
-    Never ask the user whether they want to see images of the discussed subject, always show them unprompted.
-
-    Before showing images of a certain artist it might make sense to introduce them to the user first, with a couple of words.
-
-    The user can also select an image if they want to know more about it.
-
-    When asking the user a question, you may present them with options to choose from.
-
-    Use the provided tools to show an interactive UI, along with your textual messages.
-    `,
-    messages: aiState.get(),
-    text: ({content, done}) => {
-      lastTextContent = content;
-
-      if (done) {
-        aiState.done([...aiState.get(), {role: `assistant`, content}]);
-      }
-
-      return <Markdown text={content} />;
-    },
-    tools: {
-      get_choice_from_user: {
-        description: `Show a UI to let the user choose between several options`,
-        parameters: z.object({
-          intro: z
-            .string()
-            .describe(
-              `An introduction text that explains the options, or just poses the question if it wasn't asked before. Markdown allowed.`,
-            ),
-          options: z.array(
-            z.object({
-              id: z
-                .string()
-                .describe(
-                  `A short technical ID that's unique among all options.`,
-                ),
-              label: z.string()
-                .describe(`A short label for a UI element that the user can use to select the option.
-
-                  If you're asking a yes/no question, prefer verbose labels, e.g. "Yes, I want to see them"/"No, I'm good" over "yes"/"no".`),
-            }),
-          ),
-        }),
-        generate({intro, options}, {toolName, toolCallId}) {
-          console.log(`get_choice_from_user`, options);
-
-          const assistentContent: AssistantContent = [
-            {
-              type: `tool-call`,
-              args: {intro, options},
-              toolName,
-              toolCallId,
-            },
-          ];
-
-          if (lastTextContent) {
-            assistentContent.unshift({type: `text`, text: lastTextContent});
-          }
-
-          aiState.done([
-            ...aiState.get(),
-            {
-              role: `assistant`,
-              content: assistentContent,
-            },
-            {
-              role: `tool`,
-              content: [
-                {type: `tool-result`, toolName, toolCallId, result: {options}},
-              ],
-            },
-          ]);
-
-          return (
-            <div className="space-y-4">
-              {lastTextContent && (
-                <div>
-                  <Markdown text={lastTextContent} />
-                </div>
-              )}
-              <div>
-                <Markdown text={intro} />
-              </div>
-              <div className="mb-3 space-y-2 last:mb-0">
-                {options.map(({id, label}) => (
-                  <UserChoiceButton key={id} optionId={id}>
-                    {label}
-                  </UserChoiceButton>
-                ))}
-              </div>
-            </div>
-          );
-        },
-      },
-      search_and_show_images: {
-        description: `Search for images and show them.
-
-        When searching for artists or styles (but not for specific art pieces), it might be helpful to put the medium into the query along with the artist's or styles' name (e.g. "paintings", "photos").
-
-        If the images to search for are distinctly different from each other (e.g. two different, titled paintings by the same artist), split the search up into multiple search parameter sets.
-
-        Select three images overall, unless the user asks for more or less. When searching for a specific artwork, select only one image.
-
-        Never call the function more than once in a message, instead use multiple searches within the same function call.
-        `,
-        parameters: z.object({
-          loadingText: z
-            .string()
-            .describe(
-              `A short text to show to the user while the image search is running.`,
-            ),
-          searches: z
-            .array(
-              z.object({
-                title: z
-                  .string()
-                  .describe(
-                    `The title can be used as an alt attribute or headline when showing images.`,
-                  ),
-                notFoundMessage: z
-                  .string()
-                  .describe(
-                    `An error message to show to the user when no images were found.`,
-                  ),
-                errorMessage: z
-                  .string()
-                  .describe(
-                    `An error message to show to the user when the search errored, most likely due to the search quota being exceeded for the current time period.`,
-                  ),
-                searchParams: imageSearchParams,
-              }),
-            )
-            .describe(`Use multiple sets of search parameters if needed.`),
-        }),
-        async *generate({loadingText, searches}, {toolName, toolCallId}) {
-          console.log(`search_and_show_images`, searches);
-
-          const text = lastTextContent ? (
-            <div>
-              <Markdown text={lastTextContent} />
-            </div>
-          ) : undefined;
-
-          yield (
-            <div className="space-y-3">
-              {text}
-              <p>{loadingText}</p>
-            </div>
-          );
-
-          const assistentContent: AssistantContent = [
-            {
-              type: `tool-call`,
-              args: {loadingText, searches},
-              toolName,
-              toolCallId,
-            },
-          ];
-
-          if (lastTextContent) {
-            assistentContent.unshift({type: `text`, text: lastTextContent});
-          }
-
-          aiState.update((prevAiState) => [
-            ...prevAiState,
-            {role: `assistant`, content: assistentContent},
-          ]);
-
-          const elementsWithData = searches.map(
-            ({title, notFoundMessage, errorMessage, searchParams}) => {
-              let resolveDataPromise: (data: unknown) => void;
-
-              return {
-                element: (
-                  <Images
-                    key={title}
-                    title={title}
-                    notFoundMessage={notFoundMessage}
-                    errorMessage={errorMessage}
-                    searchParams={searchParams}
-                    onDataFetched={(data) => resolveDataPromise(data)}
-                  />
-                ),
-                dataPromise: new Promise(
-                  (resolve) => (resolveDataPromise = resolve),
-                ),
-              };
-            },
-          );
-
-          const finalUi = (
-            <div className="space-y-4">
-              {text}
-              <div className="space-y-3">
-                {elementsWithData.map(({element}) => element)}
-              </div>
-            </div>
-          );
-
-          yield finalUi;
-
-          const dataItems = await Promise.all(
-            elementsWithData.map(async ({dataPromise}) => dataPromise),
-          );
-
-          aiState.done([
-            ...aiState.get(),
-            {
-              role: `tool`,
-              content: [
-                {type: `tool-result`, toolName, toolCallId, result: dataItems},
-              ],
-            },
-          ]);
-
-          return finalUi;
-        },
-      },
-    },
-  });
-
-  return {id: Date.now(), role: `assistant`, display: ui.value};
-}
diff --git a/src/app/use-enter-submit.ts b/src/app/use-enter-submit.ts
deleted file mode 100644
index 0a02424..0000000
--- a/src/app/use-enter-submit.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-export interface UseEnterSubmitResult {
-  readonly formRef: React.RefObject<HTMLFormElement>;
-
-  readonly handleKeyDown: (
-    event: React.KeyboardEvent<HTMLTextAreaElement>,
-  ) => void;
-}
-
-export function useEnterSubmit(): UseEnterSubmitResult {
-  const formRef = React.useRef<HTMLFormElement>(null);
-
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLTextAreaElement>): void => {
-      if (
-        event.key === `Enter` &&
-        !event.shiftKey &&
-        !event.nativeEvent.isComposing
-      ) {
-        event.preventDefault();
-        formRef.current?.requestSubmit();
-      }
-    },
-    [],
-  );
-
-  return {formRef, handleKeyDown};
-}
diff --git a/src/app/use-submit-user-message.tsx b/src/app/use-submit-user-message.tsx
deleted file mode 100644
index 4d18b9d..0000000
--- a/src/app/use-submit-user-message.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import {useActions, useUIState} from 'ai/rsc';
-import * as React from 'react';
-import type {UserInputAction} from './ai-state.js';
-import type {AI} from './ai.js';
-import {getErrorMessage} from './get-error-message.js';
-import {LoadingIndicator} from './loading-indicator.js';
-
-export function useSubmitUserMessage(
-  action: UserInputAction,
-  content: string,
-): () => void {
-  const [, setMessages] = useUIState<typeof AI>();
-  const {submitUserMessage} = useActions<typeof AI>();
-
-  return React.useCallback(async () => {
-    const optimisticMessageId = Date.now();
-
-    setMessages((prevMessages) => [
-      ...prevMessages,
-      {
-        id: optimisticMessageId,
-        role: `assistant`,
-        display: <LoadingIndicator />,
-      },
-    ]);
-
-    document.body.scrollIntoView({block: `end`, behavior: `smooth`});
-
-    try {
-      const message = await submitUserMessage({action, content});
-
-      setMessages((prevMessages) => [
-        ...prevMessages.filter(({id}) => id !== optimisticMessageId),
-        message,
-      ]);
-    } catch (error) {
-      console.error(error);
-      const errorMessage = getErrorMessage(error);
-
-      setMessages((prevMessages) => [
-        ...prevMessages.filter(({id}) => id !== optimisticMessageId),
-        {id: Date.now(), role: `error`, display: <p>{errorMessage}</p>},
-      ]);
-    }
-  }, [submitUserMessage, action, content]);
-}
diff --git a/src/app/user-choice-button.tsx b/src/app/user-choice-button.tsx
deleted file mode 100644
index fa6cbc1..0000000
--- a/src/app/user-choice-button.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import {clsx} from 'clsx';
-import * as React from 'react';
-import {useSubmitUserMessage} from './use-submit-user-message.js';
-
-export interface UserChoiceButtonProps {
-  readonly optionId: string;
-  readonly children: React.ReactNode;
-}
-
-export function UserChoiceButton({
-  children,
-  optionId,
-}: UserChoiceButtonProps): React.ReactNode {
-  const [selected, setSelected] = React.useState(false);
-  const submitUserMessage = useSubmitUserMessage(`choose-option`, optionId);
-
-  const handleClick = () => {
-    setSelected(true);
-    submitUserMessage();
-  };
-
-  return (
-    <button
-      className="flex w-full items-center justify-between rounded bg-zinc-100 px-3 py-2 text-left text-black outline-cyan-500 hover:bg-zinc-200"
-      onClick={handleClick}
-    >
-      {children}
-      <span
-        className={clsx(
-          `text-2xl text-cyan-500`,
-          selected ? `visible` : `invisible`,
-        )}
-      >
-        ✓
-      </span>
-    </button>
-  );
-}
diff --git a/src/app/welcome.tsx b/src/app/welcome.tsx
deleted file mode 100644
index 4513758..0000000
--- a/src/app/welcome.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import {Markdown} from './markdown.js';
-
-const welcomeText = `
-This demo showcases a chat assistant capable of displaying images of various
-kinds.
-
-Built using [MFNG](https://github.com/unstubbable/mfng/) — a minimal React
-Server Components (RSC) bundler & library — and the
-[Vercel AI SDK](https://sdk.vercel.ai/docs), this demo leverages RSCs to
-[seamlessly integrate text with UI](https://sdk.vercel.ai/docs/concepts/ai-rsc),
-as generated by the LLM.
-
-The app is deployed on AWS Lambda & CloudFront. Due to cost considerations, it
-is heavily rate-limited, which may result in occasional error responses.
-
-Give it a try with an example:
-`;
-
-const examplePrompts = [
-  `Pick a painter from the 18th century and show me some of their work.`,
-  `List some of the earliest photographs.`,
-  `What are those funny-looking, furless cats called?`,
-  `Surprise me with paintings, but let me choose the style.`,
-];
-
-export function Welcome(): React.ReactNode {
-  return (
-    <div className="rounded-lg bg-white p-4 text-zinc-500 shadow md:p-6">
-      <h3 className="mb-4 text-lg font-bold leading-6 text-black">
-        Welcome to the MFNG AI SDK Generative UI demo!
-      </h3>
-      <Markdown text={welcomeText} />
-      <ul className="space-y-3">
-        {examplePrompts.map((prompt) => (
-          <li key={prompt} className="ml-4 list-item list-disc">
-            <button
-              className="cursor-pointer text-left"
-              name="example-prompt"
-              value={prompt}
-            >
-              <span className="text-black underline">{prompt}</span>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}