Cortex starter app

Pro starter app. Needs a tealmac UI Pro licence. Set it up once on /pro/login, see Install Pro.

Cortex is a finished AI assistant interface. It is not a chat box: it is the whole product around one, so you can connect a model and ship. See it running at /templates/cortex.

What is included

Eight pages share one layout with a searchable chat history sidebar, a command menu on ⌘K and a drawer on phones.

• Chat (/templates/cortex): a streaming message list, model picker, attachments, web search toggle, token meter, reasoning disclosures, tool call cards, inline citations with a sources panel, and a canvas that opens documents and components from a reply.
• Conversation (/c/quarterly-report): a long thread with a failed and a retried tool call, a model switch and a chart component in the canvas.
• New chat (/new): a greeting, starter suggestions and the composer.
• Prompt library (/prompts): search, categories, starring, sorting and a create and edit dialog. Use opens a new chat with the prompt in the composer.
• Prompt (/prompts/weekly-update): variables as form fields, a live preview, version history and usage.
• Files (/files): uploads with indexing progress, failed files with retry, collections and a storage meter.
• Usage (/usage): tokens, requests and spend with trends, a chart per day and model, plan limits and a per-member breakdown, with CSV export.
• Settings (/settings): model defaults, custom instructions and memory, data controls, and the provider connection.

Every list page has empty, loading and error states. Add ?state=empty, ?state=loading or ?state=error to a page URL to preview them.

It is built from tealmac UI components: ai-chat, ai-message, prompt-input, model-picker, sources-list, citation, reasoning-disclosure, tool-call-card, artifact-panel, token-meter, chat-attachment, streaming-text, suggestion-chips, state-view, usage-meter, file-dropzone and api-key-field, plus shadcn/ui primitives and the chart component.

Install

CopyTEALMAC_UI_LICENSE_KEY=your-licence-key

Copy{
  "registries": {
    "@tealmac-pro": {
      "url": "https://ui.tealmac.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${TEALMAC_UI_LICENSE_KEY}"
      }
    }
  }
}

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @tealmac-pro/cortex
Copy

Where the files go

Copycomponents/tealmac-pro/cortex/
  cortex-shell.tsx        sidebar, top bar, command menu
  cortex-chat-view.tsx    the chat workspace, canvas and sources panel
  cortex-ai-sdk.ts        adapter from AI SDK messages
  cortex-data.ts          demo data: models, chats, prompts, files, usage
  cortex-*.tsx            one file per page
app/templates/cortex/
  page.tsx                chat
  c/quarterly-report/page.tsx
  new/page.tsx
  prompts/page.tsx
  prompts/weekly-update/page.tsx
  files/page.tsx
  usage/page.tsx
  settings/page.tsx

Pages link to each other under /templates/cortex. To serve the app from another path, move the app/templates/cortex folder and search for the old prefix in the cortex-*.tsx files.

Connect a real model with the Vercel AI SDK

Cortex keeps its demo conversations in the message shape the Vercel AI SDK uses, a UIMessage with parts, and renders everything through toCortexMessages(). In cortex-chat-view.tsx the simulated hook useSimulatedChat returns the same fields as useChat(), so connecting a model means replacing one line. No keys and no extra dependency are added by the install.

Copynpm i ai @ai-sdk/react

Copyimport { useChat } from "@ai-sdk/react"
 
// before: const chat = useSimulatedChat(convo?.messages ?? [])
const chat = useChat({ messages: convo?.messages })
 
// These two lines stay the same.
const view = toCortexMessages(chat.messages, chat.status, sourceDetails)
const promptStatus = toPromptStatus(chat.status)

Copyimport { convertToModelMessages, streamText, type UIMessage } from "ai"
 
export const maxDuration = 60
 
export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json()
 
  const result = streamText({
    // A "provider/model" string for the AI Gateway, or a provider instance.
    model: process.env.CORTEX_MODEL ?? "provider/model-name",
    system: "You are Cortex, a careful assistant for the Northbeam team.",
    messages: convertToModelMessages(messages),
  })
 
  return result.toUIMessageStreamResponse({
    sendReasoning: true,
    sendSources: true,
  })
}

What the adapter maps

data-artifact is Cortex's own data part. Send it from a tool or the stream writer with { title, kind, filename, language, code } and the canvas shows it. step-start and unknown parts are ignored. The streaming caret, the Stop button and the thinking indicator follow status.

Replace the demo data

cortex-data.ts holds the models, history, prompts, files and usage numbers. Replace each with a query: chats and prompts from your database, files from your index, usage from your billing events. Shapes are exported as TypeScript types, and every list page already handles empty, loading and error states through the StateView component.

Theming

Cortex uses semantic tokens only: background, card, primary, muted, accent, border and chart-1 to chart-5. It follows light and dark mode and every theme preset with no extra CSS. See Theming.

Accessibility

• Landmarks on every page: a labelled sidebar, main and navigation regions, and one h1.
• The message list is a role="log" region with a polite live announcement and a scroll-to-latest button; the composer has a visible label.
• Everything works from the keyboard: history rows, menus, the model picker, the canvas tabs and the command menu. Focus rings are always visible.
• Side panels become sheets on small screens with a focus trap and Escape to close.
• Replies appear in one piece under prefers-reduced-motion, and animations are switched off.