Skip to content
IntelliHelper logo

Intelli UI

ContentLiquid Glass

AI Chat

Composable chat shell with user and assistant bubbles. Preview live, copy the source, or install with the CLI into your Next.js project.
npx @intellihelper/cli@latest add ai-chat

Chat transcript

About this component

AI Chat is part of Content. Composable chat shell with user and assistant bubbles.

Install with npx @intellihelper/cli@latest add ai-chat. Files land in your project so you can customize styles, variants, and behavior without a locked package.

Prefer AI-assisted install? Use the agent plugin or the MCP server.

When to use AI Chat

Use when

  • Use AI Chat when composable chat shell with user and assistant bubbles.
  • Typography, markdown, code viewers, and documentation surfaces.
  • Long-form help, changelogs, or in-app guides.

Avoid when

  • Dense data tables (use data components).
  • Primary navigation (use navigation components).

Accessibility notes

  • Preserve heading hierarchy in markdown rendering.
  • Code blocks should not trap focus; copy actions need labels.

Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.

Composition tips

  • Keep content panels readable: higher opacity and stronger text contrast than pure chrome.
  • Separate chrome toolbars from the reading column.

FAQ

View all content