Orion, Pro

Orion is a whole app made of Dashboardblocks blocks: chats with thinking, web search with sources and files, a canvas beside the chat for documents and charts, Projects with their instructions and files, Research that reads the web and writes a cited report, Connectors to Google Drive, Notion, Slack, Gmail, Linear and GitHub, Usage and plan, Settings with memory, and the admin's Members, Roles and models, Usage, Policies and Security. Replies come from a real model through the AI SDK. Everything else reads and writes through one sample API, so the app works as soon as you add a key. Open the preview to try it first: its replies are recorded, so it never calls a model.

InstallCopy Anchor Link

Orion comes with All-Access and installs with the shadcn CLI.

1. Make a Next.js project with shadcn set up, at shadcn create (opens in a new tab) or with the CLI:

   Copy Text

   npx shadcn@latest init --template next

2. Add the @dashboardblocks-pro registry and your token, as Installation shows.

3. Install Orion:

   Copy Text

   npx shadcn@latest add @dashboardblocks-pro/orion-next --overwrite

4. Add your Anthropic API key to .env.local:

   Copy Text

   ANTHROPIC_API_KEY=sk-ant-…

5. Run npm run dev and open /new.

Without a key, the app still runs, and a reply says which variable to set. With --overwrite, the CLI replaces any file you have that Orion also ships, such as shadcn components and blocks you've changed and a proxy.ts, so commit first and check the diff. Without it, the CLI asks about each of those files, and skips them all when it can't ask. Your root layout, home page and theme stay as they are, and Orion takes your shadcn style, component library and icon set.

What it addsCopy Anchor Link

In a project with a src/ folder, they go in src/. The blocks Orion uses install next to your other blocks in components/dashboardblocks/.

Use another modelCopy Anchor Link

Start in lib/orion/ai/models.ts, which names the three Claude models the message box offers: Haiku 5.5, Sonnet 5.5 and Opus 5.5. To use another provider, install its AI SDK package and put its models there, such as openai('…') with OPENAI_API_KEY, or gateway('…') from ai to go through Vercel's AI Gateway. Then change, in the same file, what each model costs, the key's name, the settings only Claude reads, and the web search and page reader. Nothing outside lib/orion/ai/ imports the AI SDK.

Three things outside that file follow the model too: the names the message box shows, in lib/orion/api/index.ts; the largest file and image a message may carry, MAX_FILE_SIZE and MAX_IMAGE_SIZE in the same file; and how a search's sites and a page read reach the page, forPage in reply.ts, which expects another provider's results in the shapes Claude's take.

reply.ts streams each reply as snapshots in the AI SDK's UIMessage shape: thinking, searches with their sources, the documents it writes and its words. To use another SDK, rewrite streamReply: the pages read only the snapshots it yields.

Use your own dataCopy Anchor Link

Pages never load data themselves. Each route file calls functions from lib/orion/api, and each change goes through a Server Action that calls one too. To keep chats in your database, rewrite the bodies of those functions and keep their types. The pages, routes and actions stay as they are.

1. Start with the page you need first. Its route file in app/(orion)/ names the functions it calls, such as getChat and getComposer for a chat.
2. Rewrite each function to query your database and return the type types.ts gives it. A write returns a result the page shows, such as a refusal with its reason, so keep returning one.
3. Once nothing reads data/ any more, delete it.

Every read and write takes the session first, which names the member who is signed in, and checks what they may do in index.ts. Admins manage members and invites, the models each role may use, policies, single sign-on, the plan and extra usage. A send is checked against the models the member's role may use and against the plan's budget. Keep those checks when you move a write to your database.

Keep what people changeCopy Anchor Link

The sample API keeps its changes, chats and replies included, in the server's memory, in one copy every visitor shares, and starts that copy again once nobody has opened the app for ten minutes. Your database replaces it: once a write stores its change, the next read shows it, on every server.

A reply goes on when the tab closes, and is saved once it ends, through Next.js's after(). Uploaded files are kept in memory too, up to 4 MB each, the most a Vercel function takes in one request. Once your app uploads to S3, R2 or Vercel Blob, raise MAX_FILE_SIZE in index.ts. When a policy keeps chats for 90 or 30 days, older ones are deleted on every read; in your app, run that as a daily job.

Usage and billingCopy Anchor Link

Each reply counts what it cost (its tokens at the prices in models.ts, and its web searches) against the plan's budget for a 5-hour session and for a week. Past a limit, a person keeps Haiku 5.5, and the workspace's extra usage pays for the other models when the admin turns it on.

The writes that would reach your payment provider say where in their doc comments. openBillingPortal opens its billing page (in Stripe, a Billing Portal session), startUpgrade its checkout, and buyExtraUsage charges the saved card. Here they come back to /usage, and a new card is saved to the sample.

Connect appsCopy Anchor Link

Connectors sign in for real, to the MCP servers listed in lib/orion/ai/connectors.ts. Notion and Linear register Orion themselves the first time someone connects. Google Drive and Gmail need an OAuth client of your own in Google Cloud, in GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET; Slack needs SLACK_CLIENT_ID and SLACK_CLIENT_SECRET, and GitHub GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. Give each one <your app>/connectors/callback as its redirect URL. Until they're set, Connect names the variables it's missing.

The sample keeps each person's sign-in in the server's memory. Keep its tokens where only your server reads them, such as an encrypted column: they act as the person in that app.

Add your authCopy Anchor Link

components/orion/next/session.ts tells every page whether someone is signed in and who they are. For now Nadia, the admin of Briar's workspace, is signed in until she signs out. Change isSignedOut and getSession to read your auth library's session, with the member's own id.

The /sign-in and /sign-out routes in proxy.ts stand in for your auth library's own. Once you add yours, take them out of its matcher and out of components/orion/next/proxy.ts, and point the sign-in and sign-out links at your library's pages: they're in components/orion/next/next-shell.tsx, components/orion/pages/shared-chat-page.tsx and components/orion/pages/settings-members-page.tsx.

If you had a proxy.ts before, put yours back and call orionProxy(request) from components/orion/next/proxy.ts for the paths in the matcher of the one Orion installed.