Differences from React

AI.JSX is not React, although it seamlessly integrates with it. It's more similar to React Server Components than React Client Components.

Instead, AI.JSX is a componentized, type-safe system for composing your prompts and controlling the flow of your LLM-based app.

React is stateful; AI.JSX is stateless

In React, your JSX becomes a stateful tree, which is mounted into the DOM. For instance:

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount((count) => count + 1)}>Increment</button>
    </>
  );
}

When you render this component, it lives in the DOM, maintaining state, and moving through a lifecycle.

In AI.JSX, there's no lifecycle. Your component is stateless and renders exactly once.

AI.JSX is async / streaming native

In React, client components must be synchronous. Server components can return promises.

In AI.JSX, components can return promises, or generators:

async function MyAsyncComponent() {
  const data = await loadData();
  const formattedData = processData(data);
  return <UserMessage>Please summarize: {formattedData}</UserMessage>;
}

You can embed promises directly in JSX:

function MyAsyncComponent() {
  return <UserMessage>Please summarize: {loadData()}</UserMessage>;
}

For more detail, see Rules of AI.JSX.

Context is different

In React Client Components, you use useContext to access context. In React Server Components, you can't use context.

In AI.JSX, there's a similar concept of context.