ProApp

Detent

shadcn add @detent-pro/template-detent

5,063 lines ·Comes with Pro

app.detentui.com

What’s inside

Every part of the app, and all of it works on the desk above.

SessionsPinned, renamed, archived with an undo, filtered by project; a clock on any with a question waiting.Gliding highlightInline rename
ThreadThe plan ticking off as it works, the diff written line by line and the tests printing as they run, a pause before any command it isn’t trusted with, then charts, terminals, the PR and sources in the answer.Streaming answerApprovalsLive steps
Composer@ for tools, / for skills, photos pasted or dropped, dictation, and Plan first.Rich composer
Up nextWhat you ask while it answers waits in order: send one now, take it back to edit, or drop it. Stopping holds the rest until you resume.Queue
Model and reasoningEach model with its mark and what it’s for, and reasoning on a ramp of dots that lights up to the playhead.Dot ramp
PhotosPhotos sit in the thread at their own shape, and open full size out of their tile.Photo viewer
ReviewThe change it made, file by file, beside the chat and ready to merge.Diff review
Search⌘K across every session, or ask about what you typed instead.Search
SettingsTheme with three dark styles, what it knows about you, models, connected apps and their scopes, and your data.Settings
AutomationsSessions that start themselves, on a schedule or when something happens.Automations

Make it yours

From install to your product, in the order you’d do it. Every file it names lands in your project as source.

Starting fresh?

Download Detent as a whole Next.js project: unzip, npm install, npm run dev.

Comes with Pro · $99

1
Install it
The workspace lands as pages in app/chat (a new chat, each session at its own address, and Automations) with its agent’s AI route at app/api/detent. The workspace itself goes in components/detent/templates/detent. First time? Set up the Pro registry once, as on the Pro page under Set up once.
shadcn add @detent-pro/template-detent
2
Open it
Run your app and go to /chat. Every session has its own URL, so links, refresh and the back button work. Ask it anything: the agent searches, reads and answers with sources, and asks before it runs a command. It answers from a script until you give it a model, so it runs with no key.
3
Give it a real model
Swap the script for any AI SDK model and add its key to .env.local. Point its three tools at your own search, files and sandbox; a tool with needsApproval waits for a yes in the thread.
components/detent/templates/detent/ai/route.ts
```
import { anthropic } from '@ai-sdk/anthropic'

// in streamText({ … }):
model: anthropic('claude-sonnet-5-5'), // was scripted
```
4
Put in your sessions
The layout reads the sessions down the side on the server. Swap the body for your database, and store each session’s turns with it to bring old ones back.
components/detent/templates/detent/db.ts
```
export async function getSessions(): Promise<Session[]> {
  return db.select().from(sessions) // was the demo’s
}
```
5
Make it your product
Your name for its models and your team’s workspace come from one file; the mark in the rail is Mark.tsx. Colours and type come from your shadcn theme.
components/detent/templates/detent/config.ts
```
export const BRAND = {
  name: 'Acme',
  workspace: 'Acme',
  workspaces: ['Acme', 'Personal'],
}
```