ai
ai copied to clipboard
vercel
Build error: "AI cannot be used as a JSX component"
Description
The project setup from the template project for using the AI SDK with server components, throws the following error on build: "AI cannot be used as a JSX component." This seems to contradict the documentation for this component, as it says it is a provider that can be used to wrap other components. I think it occurs because the type of AI is a Promise and not a React component.
Here's a link to my project repo where the error can be reproduced. Specifically, it occurs in the layout.tsx file. I did not modify this file in any way from the template code provided in the documentation.
Thanks!
Action.tsx where AI is defined
// AI is a provider you wrap your application with so you can access AI and UI state in your components.
export const AI = createAI({
actions: {
submitUserMessage,
},
// 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[] }
initialUIState,
initialAIState,
})
Layout.tsx Code
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { AI } from "./action"
import "./globals.css"
const inter = Inter({ subsets: ["latin"] })
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={inter.className}>
{/*TS error thrown on the following line*/}
<AI>{children}</AI>
</body>
</html>
)
}
What version of Next.js and typescript are you using? I recommend upgrading TypeScript
Hi @MaxLeiter thanks for the reply. I tried upgrading my Typescript to "^5.4.3" but that didn't resolve the error. I'm on Next 14.2.0-canary.22
If I just ignore the typescript error, the build works though.
If I remember correctly, the type of AI cannot be inferred correctly with the implicit return type of the action. For me, it helped to set an explicit return type, see https://github.com/unstubbable/ai-rsc-test/commit/ef44eb0.
