diff --git a/.gitignore b/.gitignore
index 318557f..ac1d3c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,6 @@
 node_modules
+.yalc
+yalc.lock
 
 /.cache
 /build
diff --git a/app/components/ChatComponents/GooeyChatWidget.tsx b/app/components/ChatComponents/GooeyChatWidget.tsx
new file mode 100644
index 0000000..47ddbcf
--- /dev/null
+++ b/app/components/ChatComponents/GooeyChatWidget.tsx
@@ -0,0 +1,35 @@
+import { GWChatWidget, GWChatWidgetProps } from "gooey-web-widget";
+
+export default function GooeyChatWidget({
+  state,
+  onChange,
+  ...rest
+}: GWChatWidgetProps & {
+  state: Record<string, any>;
+  onChange: (value: string) => void;
+}) {
+
+  const handleSend = (message: string) => {
+    // Handle the send event here
+    console.log("Message sent:", message);
+    // You can also call onChange if needed
+    onChange(message);
+  };
+
+  const handleClear = () => {
+    // Handle the clear event here
+    console.log("Chat cleared");
+    // You can also call onChange if needed
+    // onChange("");
+  };
+
+  return (
+    <div className="h-100">
+      <GWChatWidget
+        {...rest}
+        onSend={handleSend}
+        onNewConversation={handleClear}
+      />
+    </div>
+  );
+}
diff --git a/app/renderer.tsx b/app/renderer.tsx
index dc156f9..9b6861f 100644
--- a/app/renderer.tsx
+++ b/app/renderer.tsx
@@ -22,6 +22,7 @@ import GooeySelect from "./components/GooeySelect";
 import GooeySwitch from "./components/GooeySwitch";
 import { GooeyTooltip } from "./components/GooeyTooltip";
 import { lazyImport } from "./lazyImports";
+import GooeyChatWidget from "./components/ChatComponents/GooeyChatWidget";
 
 const { DataTable, DataTableRaw } = lazyImport(() => import("~/dataTable"));
 
@@ -338,6 +339,9 @@ function RenderedTreeNode({
     case "code-editor": {
       return <CodeEditor props={props} state={state} onChange={onChange} />;
     }
+    case "gw-chat-widget": {
+      return <GooeyChatWidget {...props} state={state} onChange={onChange} />;
+    }
     case "switch":
       return <GooeySwitch props={props} state={state} />;
     case "input": {
diff --git a/package-lock.json b/package-lock.json
index 198a126..7cd2f6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "@uppy/webcam": "^3.3.1",
         "@uppy/xhr-upload": "^3.2.0",
         "firebase-admin": "^11.9.0",
+        "gooey-web-widget": "file:.yalc/gooey-web-widget",
         "html-react-parser": "^4.0.0",
         "isbot": "^3.6.8",
         "jshint": "^2.13.6",
@@ -43,8 +44,8 @@
         "nprogress": "^0.2.0",
         "plotly.js": "^2.27.1",
         "puppeteer": "^22.14.0",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "react-plotly.js": "^2.6.0",
         "react-select": "^5.7.3",
         "react-syntax-highlighter": "^15.5.0",
@@ -78,6 +79,57 @@
         "node": ">=14"
       }
     },
+    ".yalc/gooey-web-widget": {
+      "version": "3.0.0",
+      "dependencies": {
+        "html-dom-parser": "^5.0.13"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
+    ".yalc/gooey-web-widget/node_modules/entities": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
+      "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    ".yalc/gooey-web-widget/node_modules/html-dom-parser": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.13.tgz",
+      "integrity": "sha512-B7JonBuAfG32I7fDouUQEogBrz3jK9gAuN1r1AaXpED6dIhtg/JwiSRhjGL7aOJwRz3HU4efowCjQBaoXiREqg==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "10.0.0"
+      }
+    },
+    ".yalc/gooey-web-widget/node_modules/htmlparser2": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz",
+      "integrity": "sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.1",
+        "entities": "^6.0.0"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -3613,7 +3665,23 @@
         "streamx": "^2.15.0"
       }
     },
-    "node_modules/@reach/auto-id": {
+    "node_modules/@reach/tabs": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@reach/tabs/-/tabs-0.18.0.tgz",
+      "integrity": "sha512-gTRJzStWJJtgMhn9FDEmKogAJMcqNaGZx0i1SGoTdVM+D29DBhVeRdO8qEg+I2l2k32DkmuZxG/Mrh+GZTjczQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@reach/auto-id": "0.18.0",
+        "@reach/descendants": "0.18.0",
+        "@reach/polymorphic": "0.18.0",
+        "@reach/utils": "0.18.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || 17.x",
+        "react-dom": "^16.8.0 || 17.x"
+      }
+    },
+    "node_modules/@reach/tabs/node_modules/@reach/auto-id": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@reach/auto-id/-/auto-id-0.18.0.tgz",
       "integrity": "sha512-XwY1IwhM7mkHZFghhjiqjQ6dstbOdpbFLdggeke75u8/8icT8uEHLbovFUgzKjy9qPvYwZIB87rLiR8WdtOXCg==",
@@ -3626,7 +3694,7 @@
         "react-dom": "^16.8.0 || 17.x"
       }
     },
-    "node_modules/@reach/descendants": {
+    "node_modules/@reach/tabs/node_modules/@reach/descendants": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@reach/descendants/-/descendants-0.18.0.tgz",
       "integrity": "sha512-GXUxnM6CfrX5URdnipPIl3Tlc6geuz4xb4n61y4tVWXQX1278Ra9Jz9DMRN8x4wheHAysvrYwnR/SzAlxQzwtA==",
@@ -3639,7 +3707,7 @@
         "react-dom": "^16.8.0 || 17.x"
       }
     },
-    "node_modules/@reach/polymorphic": {
+    "node_modules/@reach/tabs/node_modules/@reach/polymorphic": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@reach/polymorphic/-/polymorphic-0.18.0.tgz",
       "integrity": "sha512-N9iAjdMbE//6rryZZxAPLRorzDcGBnluf7YQij6XDLiMtfCj1noa7KyLpEc/5XCIB/EwhX3zCluFAwloBKdblA==",
@@ -3648,23 +3716,7 @@
         "react": "^16.8.0 || 17.x"
       }
     },
-    "node_modules/@reach/tabs": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@reach/tabs/-/tabs-0.18.0.tgz",
-      "integrity": "sha512-gTRJzStWJJtgMhn9FDEmKogAJMcqNaGZx0i1SGoTdVM+D29DBhVeRdO8qEg+I2l2k32DkmuZxG/Mrh+GZTjczQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@reach/auto-id": "0.18.0",
-        "@reach/descendants": "0.18.0",
-        "@reach/polymorphic": "0.18.0",
-        "@reach/utils": "0.18.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || 17.x",
-        "react-dom": "^16.8.0 || 17.x"
-      }
-    },
-    "node_modules/@reach/utils": {
+    "node_modules/@reach/tabs/node_modules/@reach/utils": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.18.0.tgz",
       "integrity": "sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==",
@@ -8326,9 +8378,9 @@
       }
     },
     "node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^2.0.0",
@@ -11400,6 +11452,10 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/gooey-web-widget": {
+      "resolved": ".yalc/gooey-web-widget",
+      "link": true
+    },
     "node_modules/google-auth-library": {
       "version": "8.9.0",
       "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-8.9.0.tgz",
@@ -17501,30 +17557,28 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-easy-swipe": {
@@ -17548,16 +17602,13 @@
       "peer": true
     },
     "node_modules/react-number-format": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.0.tgz",
-      "integrity": "sha512-NWdICrqLhI7rAS8yUeLVd6Wr4cN7UjJ9IBTS0f/a9i7UB4x4Ti70kGnksBtZ7o4Z7YRbvCMMR/jQmkoOBa/4fg==",
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.4.tgz",
+      "integrity": "sha512-wOmoNZoOpvMminhifQYiYSTCLUDOiUbBunrMrMjA+dV52sY+vck1S4UhR6PkgnoCquvvMSeJjErXZ4qSaWCliA==",
       "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
       "peerDependencies": {
-        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/react-plotly.js": {
@@ -18513,13 +18564,12 @@
       "license": "ISC"
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-dts": {
diff --git a/package.json b/package.json
index 76ff095..a489336 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gooey-gui",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
@@ -44,6 +44,7 @@
     "@uppy/webcam": "^3.3.1",
     "@uppy/xhr-upload": "^3.2.0",
     "firebase-admin": "^11.9.0",
+    "gooey-web-widget": "file:.yalc/gooey-web-widget",
     "html-react-parser": "^4.0.0",
     "isbot": "^3.6.8",
     "jshint": "^2.13.6",
@@ -53,8 +54,8 @@
     "nprogress": "^0.2.0",
     "plotly.js": "^2.27.1",
     "puppeteer": "^22.14.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-plotly.js": "^2.6.0",
     "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.5.0",
diff --git a/py/gooey_gui/components/common.py b/py/gooey_gui/components/common.py
index a384d56..061d7b3 100644
--- a/py/gooey_gui/components/common.py
+++ b/py/gooey_gui/components/common.py
@@ -922,3 +922,17 @@ def tooltip(
     )
     tooltip.mount()
     return core.NestingCtx(tooltip)
+
+def gooey_chat_widget(
+    messages,
+    config,
+    **props,
+):
+    return core.RenderTreeNode(
+        name="gw-chat-widget",
+        props=dict(
+            messages=messages,
+            config=config,
+            **props,
+        ),
+    ).mount()
diff --git a/remix.config.js b/remix.config.js
index 02fbde8..602e20b 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -30,6 +30,7 @@ module.exports = {
     /p-queue/,
     /p-timeout/,
     /is-network-error/,
+    /gooey-web-widget/
   ],
   routes(defineRoutes) {
     return defineRoutes((route) => {