Tempio Docs
Design system

Blocks

Every block in @tempio/ui/components/blocks/*, rendered once from its fixture in @tempio/ui/fixtures/blocks, with its import path and its props type above it. Props types live in @tempio/ui/components/blocks/types. Four blocks appear twice: Pricing, FounderNote, Testimonial and StatTiles each carry a gate, and the second frame passes the entry that fails it so the empty result and the rule are both on the page. Everything here is fixture data — not a customer, not a confirmed figure.

Mode
1 Section
@tempio/ui/components/blocks/section · SectionProps
Children are composition, so the fixture is the band's settings only.

A band at ground tone and content width. Ground is the one tone that carries the dark palette with it.

2 SiteNav
@tempio/ui/components/blocks/site-nav · SiteNavProps
Tempio
3 SiteFooter
@tempio/ui/components/blocks/site-footer · SiteFooterProps
3 SiteFooter, Daylight
@tempio/ui/components/blocks/site-footer · SiteFooterProps
The home page's footer: the who-we-are column, the updates field, and the fade at the bottom edge. The field's error state is data-error on the form.
4 Hero
@tempio/ui/components/blocks/hero · HeroProps

The ads command center

Put frontier AI to work on every ad account you run.

Tempio's MCP hands your AI every account, every number and the tools to run them across Meta, Google Ads and TikTok.

Every change lands as a draft on the record and goes live when you approve it, or when a rule you wrote does.

Bring your own AI

  • Anthropic
  • OpenAI
  • Gemini
  • Grok
  • OpenClaw
  • Kimi K3
4 Hero, scenario
@tempio/ui/components/blocks/hero · HeroProps
Fixture data: not a customer, not a confirmed figure. media: { scenario: true } renders the agent's transcript beside the ad in PlacementPreview.

Ask your agent for the change, then approve the draft it writes.

Tempio hands the AI you already use every ad account you run. Each change it makes lands as a change request that applies when you approve it, or when a rule you wrote does.

Update the Marlow feed ad for the spring launch.
draft_changes
Drafting the new headline, primary text and image as one change request.
Change request drafted · Marlow feed ad · Headline, primary text and image · Awaiting approval
Approve
MarlowAd

Our Ethiopian spring lot, roasted the day it ships. First bag half price.

The spring roast is here
The spring roast is hereShop now
128146

No safe zone is drawn for this placement.

5 LogoStrip
@tempio/ui/components/blocks/logo-strip · LogoStripProps

Bring your own AI

  • Anthropic
  • OpenAI
  • Gemini
  • Grok
  • OpenClaw
  • Kimi K3
5 LogoStrip, library
@tempio/ui/components/blocks/logo-strip · LogoStripProps
Fixture data: not a customer, not a confirmed figure. The advertisers sit on the reserved example domains; each mark is the domain's favicon, with the name beside it.

Public ads from

  • Fixture Outdoor
  • Fixture Coffee
  • Fixture Studio
5 LogoStrip, library — the gate
@tempio/ui/components/blocks/logo-strip · LogoStripProps

An empty advertisers list renders nothing. The row stays empty until the ad library has a source, and no placeholder takes its place.

6 BeforeAfter
@tempio/ui/components/blocks/before-after · BeforeAfterProps

Three dashboards, or one room

Across three ad managers
  • Yesterday's spend lives in three tabs and none of them agree on the day boundary.
  • A budget change is six clicks and no record of who asked for it.
  • Your AI cannot see any of it, so you paste screenshots into a chat window.
  • Currency is whatever each platform decided to show you.

Four surfaces, no ledger.

In Tempio
  • One normalised account tree, one timezone, one set of base counts.
  • A budget change is a draft with an author, a reviewer and a diff.
  • Your AI reads the accounts over MCP and drafts the work in place.
  • Money is minor units with its currency; a ratio with no denominator reads as a dash.

One surface, every change on the record.

7 Objections
@tempio/ui/components/blocks/objections · ObjectionsProps

But I heard…

  • AI tools spend your budget while you sleep.

    Tempio writes a draft. The draft applies when you approve it, or when a rule you wrote approves it, and either way the ledger names the authority that cleared it.

  • MCP servers only read; they cannot change anything.

    Tempio's tools create, update, pause and rebudget at campaign, ad group and ad level. The write goes through the same gate whether a person or an agent asked for it.

  • Cross-platform numbers never reconcile.

    Tempio stores base counts only and computes every ratio at read time, so a zero denominator is a dash rather than a zero. Currency stays in integer minor units with its code.

8 Pricing
@tempio/ui/components/blocks/pricing · PricingProps
Fixture data: not a customer, not a confirmed figure.
monthyear

Solo

USD

One operator, every account they run.

  • Connected ad accountsunlimited
  • MCP server and scoped keys
  • Drafts, approvals and the audit log
  • Seats and roles
Price

USD 24/month

Request early access

Studio

USD

A team, with the approval trail to match.

  • Connected ad accountsunlimited
  • MCP server and scoped keys
  • Drafts, approvals and the audit log
  • Seats and roles
Price

USD 64/month

Request early access

Fixture tiers and amounts for the gallery and the tests. The published price list is the site's, and it stays unpublished until the flag flips.

8 Pricing — the gate
@tempio/ui/components/blocks/pricing · PricingProps

tiers: null renders nothing. The route passes tiers only once the price list is published, so a page with no published price shows no empty table.

9 Transcript
@tempio/ui/components/blocks/transcript · TranscriptProps
What did we spend on Meta yesterday, and where did it go?
tempio_manage
Reading yesterday's spend across the connected Meta accounts.
3 accounts · 41 campaigns · spend AUD 4,812.60 · CPC A$1.94 · ROAS —
I read three Meta accounts. Two campaigns took most of it, and one of them has no conversions recorded yet, so its ROAS is a dash rather than a zero.
Cut that one to a quarter of its budget until conversions land.
tempio_manage
I've drafted the budget change. It's in the queue with the current and proposed amounts; approve it and it goes live on Meta.
10 PromptChips
@tempio/ui/components/blocks/prompt-chips · PromptChipsProps

What people ask it

What did we spend on Meta yesterday, and where did it go?
tempio_manage
Reading yesterday's spend across the connected Meta accounts.
3 accounts · 41 campaigns · spend AUD 4,812.60 · CPC A$1.94 · ROAS —
I read three Meta accounts. Two campaigns took most of it, and one of them has no conversions recorded yet, so its ROAS is a dash rather than a zero.
Cut that one to a quarter of its budget until conversions land.
tempio_manage
I've drafted the budget change. It's in the queue with the current and proposed amounts; approve it and it goes live on Meta.
11 Faq
@tempio/ui/components/blocks/faq · FaqProps

Questions

12 FounderNote
@tempio/ui/components/blocks/founder-note · FounderNoteProps
Fixture data: not a customer, not a confirmed figure.
AT

Anthony Tirrizzi

Founder, Tempio

I run ad accounts for other businesses. Tempio is the tool I use on real money, which is why the gate exists and why nothing applies without an authority on the record.

If a number here cannot be traced to a platform response, it does not ship.

— Anthony

12 FounderNote — the gate
@tempio/ui/components/blocks/founder-note · FounderNoteProps

A null entry — no portrait, no paragraph — renders nothing, and no placeholder takes its place.

13 Comparison
@tempio/ui/components/blocks/comparison · ComparisonProps
Tempio, another MCP server, and the ad manager
TempioOther MCP serversThe ad manager
Your own AI reads the accountsYesYesNo
Your own AI writes campaigns, ad groups and adsYesPartialRead tools, in the ones published so farNo
Every write lands on the record firstYesA draft with the current value, the proposed value and the authority that cleared itNoPartialA change history, which is not an approval
Meta, Google Ads and TikTok in one account treeYesNoOne platform per login, one timezone per platform
RatiosBase counts stored; CPC, CPM, CTR and ROAS computed at read time, and a dash where the denominator is zeroWhatever the platform returnedThe platform's own rounding
Where they winAn ad manager carries the platform's newest surfaces the day that platform ships them; Tempio reaches them adapter by adapter, and says on the channel page which state each one is in.
14 Disqualifier
@tempio/ui/components/blocks/disqualifier · DisqualifierProps

Who this is for

A good fit if

  • You run ad accounts on Meta, Google Ads or TikTok and you already work with an AI assistant.
  • You want a change on the record before it is a change on the platform.
  • You would rather write the rule that approves a change than approve the same change every morning.

Might not be a good fit if

  • You want the platform's newest beta surface the week it ships; Tempio reaches it when the adapter does.
  • You want an agent to spend without an approval or a rule behind it. There is no mode that does that.
  • You run a single account and the ad manager already does everything you need.
15 CtaBand
@tempio/ui/components/blocks/cta-band · CtaBandProps

Put your agent in the room

Connect an ad account, mint a scoped key, and let your own AI read the numbers and draft the work. Approve what it writes, or write the rule that approves it.

Request early access
  • No card. Early access is invite-only while the platform approvals land.
  • Read and draft by default; approve is a separate permission you grant.
16 Testimonial
@tempio/ui/components/blocks/testimonial · TestimonialProps
Fixture data: not a customer, not a confirmed figure.
Fixture copy standing in for a quote nobody has given yet. The block renders a card only when a named person has said it can be published and the page can say where they said it.
FOFixture OperatorMedia buyer, Fixture Co

Source: fixture

16 Testimonial — the gate
@tempio/ui/components/blocks/testimonial · TestimonialProps

permission: false renders nothing. A quote appears only when a named person gave permission and the words can be traced to where they were said.

16 TestimonialWall
@tempio/ui/components/blocks/testimonial · TestimonialWallProps
Fixture data: not a customer, not a confirmed figure. The wall gates each entry the way the single card does: four are passed, two render.
  • Fixture stand-in for a portrait
    Fixture copy standing in for a quote nobody has given yet. The block renders a card only when a named person has said it can be published and the page can say where they said it.
    Fixture OperatorMedia buyerFixture Co
    Source: fixture
  • Fixture copy for the second card, so the wall has a grid to lay out. The wall gates every entry the way the single card does.
    Fixture PlannerPerformance leadFixture Group
    Source: fixture
17 StatTiles
@tempio/ui/components/blocks/stat-tiles · StatTilesProps
Fixture data: not a customer, not a confirmed figure. The third tile carries no confirmation, so it does not render.
  • 3

    Ad platforms with a live adapter: Meta, Google Ads and TikTok

    fixture

  • 1

    Gate every write passes through, agent or person

    fixture

17 StatTiles — the gate
@tempio/ui/components/blocks/stat-tiles · StatTilesProps

A tile without confirmedBy does not render, and a set where none are confirmed renders nothing. Real numbers enter copy only after Anthony confirms them.

18 FeatureBento
@tempio/ui/components/blocks/feature-bento · FeatureBentoProps

What the workspace holds

One account tree

Every connected account, campaign, ad group and ad in one normalised shape, on one timezone, with one currency rule.

Base counts only

Impressions, clicks, spend and conversions are stored; CPC, CPM, CTR and ROAS are computed when you read them.

Drafts, not writes

A change is written as a draft against the account it targets, with the current value, the proposed value and the author on it.

Scoped keys

A key carries read, draft or approve. The embedded agent never holds approve, and a key dies with the membership that minted it.

An audit log

Every apply names the authority that cleared it, whether that was a person or a rule the org wrote.

How the gate works
19 Steps
@tempio/ui/components/blocks/steps · StepsProps

Three moves from account to draft

  1. 01

    Connect the account

    Authorise the ad account once. Tempio pulls the account tree and the last ninety days of base counts into the workspace.

  2. 02

    Point your agent at it

    Mint a scoped key and add the MCP server to whichever client you already use. The tools appear; nothing else changes.

  3. 03

    Approve what it drafts

    The agent reads and writes drafts. A draft becomes a change when you approve it, or when a rule you wrote approves it.

20 CalculatorShell
@tempio/ui/components/blocks/calculator-shell · CalculatorShellProps
Read-only here: the route owns the values, the results and the arithmetic, and the gallery passes no onChange.

Return on ad spend

AUD
AUD
%
ROAS
4
Break-even ROAS
—
  1. ROAS is attributed revenue divided by ad spend, inside the same attribution window.
  2. Break-even ROAS is one divided by your gross margin, which is why the margin input is the one that decides whether the first number is good news.
  3. A ratio with no denominator is a dash, never a zero.

What each platform counts as revenue

PlatformWhat it countsWhere the number comes from
MetaPurchases inside the attribution windowThe platform's own reporting
Google AdsConversions at the value you sent with themThe platform's own reporting
TikTokPurchases inside the attribution windowThe platform's own reporting
21 TermArticle
@tempio/ui/components/blocks/term-article · TermArticleProps

Return on ad spend (ROAS)

Return on ad spend is the revenue attributed to a campaign divided by what that campaign cost. A ROAS of 3 means three units of revenue for every unit spent.

ROAS = attributed revenue ÷ ad spend

attributed revenue
Revenue the platform or your own analytics assigns to the campaign, inside its attribution window.
ad spend
What the campaign cost over the same window, in the account's own currency.

Work it out with the calculator

What the number is telling you

ROAS is a ratio, so it moves when either side moves. A campaign whose revenue held steady while spend fell has a higher ROAS and a smaller business behind it.

Where it goes wrong

A ROAS with no revenue in the window is undefined, not zero. Fixture copy: the rendered pages carry the sourced version.

22 Breadcrumbs
@tempio/ui/components/blocks/breadcrumbs · BreadcrumbsProps
24 Freshness
@tempio/ui/components/blocks/freshness · FreshnessProps
25 ToolFrame
@tempio/ui/components/blocks/tool-frame · ToolFrameProps

Gallery stand-in. The frame renders whatever a route puts inside it and never supplies a tool of its own.

Fixture frame. The route renders its own client tool inside it; the frame supplies the hairline and the caption.
26 CardGrid
@tempio/ui/components/blocks/card-grid · CardGridProps
27 FeatureTabs
@tempio/ui/components/blocks/feature-tabs · FeatureTabsProps
Fixture data: not a customer, not a confirmed figure. Each tab renders a surface from @tempio/ui's fixtures/surfaces.tsx: marketing renderings of the four surfaces, not the app's components.

The accounts, the plan and the drafts in one workspace

Each view reads the same normalised numbers, so the table, the timeline and the review never disagree about a campaign.

Campaigns

10 campaigns

CampaignSpend
Spring launch, prospectingA$4,820.60
Brand searchA$1,298.80
Always-on videoA$2,103.00
Retargeting, last 30 daysA$964.10
Lookalike, top customersA$1,547.20
Competitor termsA$613.40
Creator spotlightA$889.00
Generic search termsA$721.80
Holiday giftingA$382.50
Winter clearanceA$0.00
28 TwoUp
@tempio/ui/components/blocks/two-up · TwoUpProps
  • Your channels in one workspace. Campaigns, ad groups and ads from every connected account, on one timezone, with each amount kept in its own currency.

    • Meta
    • Google Ads
    • TikTok
  • Your own agents over MCP. Point the client you already use at your workspace. It reads the numbers and drafts changes with a key scoped to what you allow.

29 DarkGrid
@tempio/ui/components/blocks/dark-grid · DarkGridProps
The purple band, and the one place the pattern appears on the home page.

Also in the workspace

  • Guardrails

    Spend caps and limits that every draft is checked against before it can apply.

  • Approvals

    Approve a change yourself, or write the rule that approves changes like it.

  • Pacing

    Spend against plan by day, so a campaign running hot shows up before the month ends.

  • The ad library

    Public ads from other advertisers, saved and compared beside your own.

  • Client sign-off

    Send a draft to the client whose account it touches and keep who signed it off on the record.

  • The CLI

    The same tools in your terminal, under your keys and on the same record.

PlacementPreview
@tempio/ui/components/ads/placement-preview · PlacementPreviewProps
Fixture data: not a customer, not a confirmed figure. The safe zones and frames come from @tempio/ui/fixtures/safe-zones, each row with the platform’s spec page in its comment.
Tempio

Ask where the spend went this week and get the answer with the numbers behind it.

All your ad accounts in one place

All your ad accounts in one place

Learn more

No safe zone is drawn for this placement.

PlacementPreview, faithful
@tempio/ui/components/ads/placement-preview · PlacementPreviewProps
Fixture data: not a customer, not a confirmed figure. chrome="faithful" draws the placement in the platform’s own interface from components/ads/chrome. A mode with no reference screenshot of the platform’s app carries an Approximate marker.
TempioAd

Ask where the spend went this week and get the answer with the numbers behind it.

All your ad accounts in one place
All your ad accounts in one placeLearn more
128146

No safe zone is drawn for this placement.