ViteHub is still experimental. Expect bugs and breaking changes.
Session
Present an application-owned chat session with the same AI SDK message contract.
AI SDK defines UI messages and chat state, but it does not impose a persistence schema for sessions. ViteHubUISession therefore stays deliberately small: an ID, messages, optional title and timestamps, and application metadata.
Preview
SessionExample.vue
<script setup lang="ts">
import type { ViteHubUISession } from "@vite-hub/ui";
import type { UIMessage } from "ai";
const session: ViteHubUISession<UIMessage> = {
id: "session-42",
title: "Fix the invocation list overflow",
createdAt: "2026-08-23T09:00:00.000Z",
messages: [
{
id: "user-1",
role: "user",
parts: [{ type: "text", text: "Fix the error row overflow and update the PR." }],
},
{
id: "assistant-1",
role: "assistant",
parts: [{ type: "text", text: "The layout fix is tested and ready for review." }],
},
],
};
</script>
<template>
<AgentSession :session="session" status="ready" class="h-96" />
</template>
const session: ViteHubUISession = {
id: "session_01",
title: "Production deploy failure",
messages,
metadata: { projectId: "project_01" },
};
Render it with AgentSession:
<AgentSession :session :status>
<template #header="{ session }">
<SessionHeader :session />
</template>
<template #message="{ message }">
<AgentChatMessage :message />
</template>
</AgentSession>
The component adds session structure around AgentChat; it does not fetch, mutate, or persist the record. Applications can extend the session type and retain full control of tenancy and authorization.