AI Components

These are AI Elements components rebuilt on Nooxit. They keep AI Elements' props, so its examples and the messages from the AI SDK's useChat work unchanged. Everything you see on screen is a Nooxit component.

InstallationCopy Anchor Link

Import them from nooxit-design-system/components/ai/*:

import {
  Message,
  MessageContent,
} from 'nooxit-design-system/components/ai/message';

They live in their own folder because some share a name with a base component: components/message is the chat layout, and components/ai/message is the AI message built on it. From the registry they install as @nooxit/ai-message, @nooxit/ai-prompt-input and so on.

The components take their message types from the AI SDK (UIMessage, ChatStatus, FileUIPart), so add ai to your app. These are type imports only; no AI SDK code runs inside the components.

Replies are rendered as Markdown by Streamdown, which comes with the package. It is set up for code highlighting only: Mermaid diagrams, math and CJK text are not supported.

What changed from AI ElementsCopy Anchor Link

• Nooxit components inside. Conversation scrolls with Message Scroller instead of use-stick-to-bottom. Message is Message and Bubble, so a user message is a muted bubble on the right and a reply is plain text on the left. The send button is primary. The empty state is Empty.
• Phosphor icons replace Lucide, also in Streamdown's code-block controls.
• Token states. Hovers use the hover-* tokens and list items highlight like menu items. There are no shadows.
• Fewer dependencies. A built-in id replaces nanoid, Shimmer uses the theme's shimmer utility instead of motion, and only Streamdown's code plugin is installed.
• No Model Selector.