# ViteHub UI

`@vite-hub/ui` is the Vue and Nuxt component layer for the ViteHub Console. Start with a complete Console block, then connect your own data.

The package owns presentation, layout, and interaction defaults. Your app owns transport, persistence, and authorization. Every example uses synthetic data, makes no network requests, and shows the source below the live preview.

## A Console with the defaults

Select an Invocation to read its messages, tool calls, and result. The inspector shows its configuration and activity. This example uses the package styles and built-in layouts.

_Interactive preview available on the rendered documentation page._


Start with [the UI tutorial](https://vitehub.dev/docs/ui/get-started), then read [Installation](https://vitehub.dev/docs/ui/installation) for Nuxt and Vue with Vite. Copy the [Invocation dashboard](https://vitehub.dev/docs/ui/blocks/invocation-dashboard), [Chat app](https://vitehub.dev/docs/ui/blocks/chat-app), or [Code review](https://vitehub.dev/docs/ui/blocks/code-review) into your application. Each block explains how to connect real data.

## Components

::ui-component-gallery
- **Console:** [Chat app](https://vitehub.dev/docs/ui/blocks/chat-app), [Invocation dashboard](https://vitehub.dev/docs/ui/blocks/invocation-dashboard), [Code review](https://vitehub.dev/docs/ui/blocks/code-review)
- **Chat:** [Chat](https://vitehub.dev/docs/ui/chat), [Chat message](https://vitehub.dev/docs/ui/chat-message), [Message parts](https://vitehub.dev/docs/ui/message-parts), [Markdown](https://vitehub.dev/docs/ui/markdown), [Chat prompt](https://vitehub.dev/docs/ui/chat-prompt), [Session](https://vitehub.dev/docs/ui/session)
- **Agent work:** [Invocation list](https://vitehub.dev/docs/ui/invocation-list), [Invocation](https://vitehub.dev/docs/ui/invocation), [Invocation inspector](https://vitehub.dev/docs/ui/invocation-inspector), [Timeline](https://vitehub.dev/docs/ui/timeline), [Capability inspector](https://vitehub.dev/docs/ui/capability-inspector), [Tool list](https://vitehub.dev/docs/ui/tool-list), [Trace](https://vitehub.dev/docs/ui/trace), [Diff](https://vitehub.dev/docs/ui/diff), [Code view](https://vitehub.dev/docs/ui/code-view), [File tree](https://vitehub.dev/docs/ui/file-tree)
- **Utilities:** [Attachments](https://vitehub.dev/docs/ui/attachments), [Message scroller](https://vitehub.dev/docs/ui/message-scroller)
::

## What each layer owns

| Concern | Owner |
| ------- | ----- |
| Message contracts and transport | AI SDK or your ViteHub Agent route |
| Scroll intent and message jumps | ViteHub headless Vue primitives |
| Tokens and basic controls | Nuxt UI |
| Chat, sessions, Agent inspection, Markdown, and attachments | ViteHub UI |
| Diffs and path-first file trees | Pierre |

The package does not send messages. Use `useChat()` from `@ai-sdk/vue` or the ViteHub wrapper from `vite-hub/agent/vue`, then pass its reactive values to the components.

## Entry points

| Import                    | Use it for                                                                     |
| ------------------------- | ------------------------------------------------------------------------------ |
| `@vite-hub/ui`            | Styled components, composables, display helpers, and Pierre diff helpers.      |
| `@vite-hub/ui/agent-*`    | One styled component entry point, such as `@vite-hub/ui/agent-chat`.            |
| `@vite-hub/ui/headless`   | Message scroller primitives without styles or Nuxt UI.                         |
| `@vite-hub/ui/nuxt`       | The Nuxt module. It installs Nuxt UI, registers components, and loads the CSS. |
| `@vite-hub/ui/vite`       | The Vite plugin for Vue applications. It configures Nuxt UI and Comark.        |
| `@vite-hub/ui/styles.css` | The package stylesheet. Load it after Tailwind CSS and Nuxt UI.                |