.

apps/blogai/app/[locale]/morphic/action.tsx

@@ -113,12 +113,23 @@ const initialUIState: {
 }[] = []
 
 // AI is a provider you wrap your application with so you can access AI and UI state in your components.
-export const AI = createAI({
+// export const AI = createAI({
-  actions: {
+//   actions: {
-    submit
+//     submit
-  },
+//   },
-  // Each state can be any shape of object, but for chat applications
+//   // Each state can be any shape of object, but for chat applications
-  // it makes sense to have an array of messages. Or you may prefer something like { id: number, messages: Message[] }
+//   // it makes sense to have an array of messages. Or you may prefer something like { id: number, messages: Message[] }
+//   initialUIState,
+//   initialAIState
+// })
+
+export const {
+  AIProvider,
+  useUIState,
+  useAIState,
+  useActions
+} = createAI({
+  actions: { submit },
   initialUIState,
   initialAIState
-})
+})

apps/blogai/app/[locale]/morphic/layout.tsx

@@ -54,7 +54,7 @@ export default function RootLayout({
       disableTransitionOnChange
     >
       {/* <Header /> */}
-      <AI.AIProvider>{children}</AI.AIProvider> 
+      <AIProvider>{children}</AIProvider>
       {/* <Footer /> */}
     </ThemeProvider>
   )