liveBook · Manning

Ai component

As explained in Build AI-Enhanced Web Apps

An AI component is a React context provider that makes AI state, UI state, and associated actions available to descendant components.

An AI component is a React context provider created with createAI. It wraps the application layout so descendant components can access unified AI state, UI state, and server actions. section 4.2.3

Its architecture connects three application concerns:

  • createAI defines the available actions plus initial AI and UI state. section 4.2.3
  • getMutableAIState resolves conversation history on the server, while streamUI generates streaming React content. section 4.2.3
  • useActions, useUIState, and useAIState let child components invoke actions and read or update shared state. section 4.2.3

Wrap the application layout

Import AI from the actions module and place it around the layout’s shared header, main content, and footer. Every descendant can then use the AI hooks without receiving state or actions through props.

How Build AI-Enhanced Web Apps covers it

How deep it goes
Explains provider placement, server history, streaming, initialization, and consuming hooks through runnable listings.
Examples
Uses a chat layout, streamed ChatBubble responses, conversation history, and a page consuming three shared hooks.
What it assumes
Assumes React component and useState patterns, then replaces local conversation management with shared AI and UI state hooks.
What you can do after
Apply createAI to centralize chat state and expose server actions to descendant components.
How it connects
Connects React context providers with server actions, AI state, UI state, streamUI, and state hooks.
Cover of Build AI-Enhanced Web Apps
liveBookmanning.com
Read Build AI-Enhanced Web Apps on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build AI-Enhanced Web Apps. The section links point to the parts of the book it draws on.