ViteHub is still experimental. Expect bugs and breaking changes.

UI

Build AI chat, Agent inspection, diff, and file-tree interfaces with Vue and Nuxt.

@vite-hub/ui is the interface layer for ViteHub applications. It combines AI SDK message contracts, Nuxt UI styling, reusable Vue behavior, and Pierre's code views without replacing any of those foundations.

Install the package

Configure the Nuxt module or Vite plugin and load the default styles.

Render a chat

Connect an AI SDK or ViteHub chat directly to the component layer.

Customize message parts

Render text, reasoning, tools, files, sources, and typed data parts.

Inspect Agent work

Browse sessions, render invocation activity, and inspect the captured configuration.

Layers

Layer	Owns
AI SDK	`UIMessage`, `ChatStatus`, streaming state, tool parts, and transport helpers.
Headless Vue	Scroll intent, live-edge following, prepend preservation, and message jumps.
Nuxt UI	Theme tokens and established chat, prompt, reasoning, tool, button, and badge components.
ViteHub UI	Part dispatch, defaults, Markdown presentation, attachments, Agent inspection, and code views.
Pierre	Diff rendering and path-first file trees.

The package does not own chat transport. Use useChat() from @ai-sdk/vue or the ViteHub wrapper from vite-hub/agent/vue, then pass its reactive values to the UI.

Components

Chat and Chat message
Session
Message parts and Markdown
Chat prompt and attachments
Message scroller
Invocation list, invocation, and invocation inspector
Diff, file tree, and trace