Skip to content
COHO
Atrium design system

COHO docs

Atrium

COHO

v0.1
AI Building

Build an Atrium app with AI

One minimised file with everything an AI tool needs: how to work, the hard rules, the full app contract and the design system. Upload it to any LLM, then describe your app.

ATRIUM-AI-BUILD.mdMarkdown
  1. Upload the file to ChatGPT, Claude, Cursor or any AI tool (or paste its contents).
  2. Describe the app you want in plain English.
  3. Let the AI ask you for the API key when it needs one.
View the file
Auto

Pattern

AI moments

View .md

How an app shows AI at work, and hands its output to a manager to check.

Many Atrium apps use AI to draft replies, summarise records or suggest next steps. Managers stay in charge: the AI drafts, the manager decides. Every AI moment follows the same three steps, so managers recognise them in any app.

Step What the manager sees
1. Ask A button that names what the AI will do: "Draft reply", "Summarise". Not "Ask AI" or "Magic".
2. Generating An AI content block with the moving border and the label "Writing". Keep the rest of the screen usable.
3. Check and use The output marked "Drafted by AI", with Edit and a primary action that names the result: "Use reply". Nothing is sent or saved until the manager presses it.

Generating

Example

Writing

HTML

<div class="at-ai at-ai--generating" aria-busy="true">
  <p class="at-ai__label">Writing</p>
  <div class="at-stack at-stack--tight"><span class="at-skeleton"></span><span class="at-skeleton at-skeleton--medium"></span></div>
</div>

Ready to check

Example

Drafted by AI

Hi Sam, the boiler engineer is booked for Thursday between 9am and 1pm. They will call 30 minutes before arriving.

HTML

<div class="at-ai">
  <p class="at-ai__label">Drafted by AI</p>
  <p>Hi Sam, the boiler engineer is booked for Thursday between 9am and 1pm. They will call 30 minutes before arriving.</p>
  <div class="at-inline at-inline--end">
    <button type="button" class="at-button">Discard</button>
    <button type="button" class="at-button">Edit</button>
    <button type="button" class="at-button at-button--primary">Use reply</button>
  </div>
</div>

Rules

  • A person presses the button. AI output is never sent to a tenant, saved to a record or used to change money without a manager choosing to.
  • Always marked. Keep the AI content marking until the manager has used or approved the output.
  • Always editable. Every output has Edit and Discard.
  • Honest when unsure. If the AI could be wrong, say so: "Check the dates before sending."
  • Errors in plain words. "Could not draft a reply. Try again, or write one yourself." Never show model or API errors.