Conversation cards

The bespoke cards the assistant renders inline in a conversation, one per agent tool, presentational and mockable outside a live thread.

Household net worth

£1,284,500

Computed

Assets £1.7m

Liabilities £420k

Cash

£64.5k

Investments

£240k

Pensions

£350k

Property

£1.1m

Mortgage

-£390k

Other debts

-£30k

When the assistant runs a tool that has a visual answer, the transcript renders a bespoke card in place of a plain tool chip. These cards live in @reva/ui as pure presentational components: they take the tool's payload as typed props and hand every side effect back to the host through callbacks, so they render here with mock data exactly as they do in a live thread.

The client portal wires each card to its agent tool through a thin container that owns the data fetching, mutations and transcript state. The card itself never talks to an API.

The cards

CardAgent toolPurpose
Net worthget_financial_pictureThe household financial picture: headline net worth, assets vs liabilities, per owner ranking
Explore sessionshow_explore_sessionOne saved scenario: metric selector, period scrubber, today's-money figures
Expenses cashflowplanned, wired in a follow-upPlanned annual spend across the life plan with life-stage bands and one-off events
Household incomeplanned, wired in a follow-upThe whole household's annual income stacked by source, with the per-person events that reshape it
Retirement drawdownplanned, wired in a follow-upInvestable wrappers stacked against the pot each retirement date demands, with the shortfall at the target age
Retirement potsplanned, wired in a follow-upPer-person pots needed at retirement: bridge and pension stacked across ages, with each pot's make-up
User formask_user_formStructured questions the assistant asks mid run, keyboard first
Household planpropose_household_dataThe assistant's proposed household data, reviewed and edited before saving
Connect accountsshow_connect_accountsThe live data hub: open banking, FreeAgent, statements and spreadsheets

Usage

import {
  ConnectAccountsCard,
  ExpensesCashflowCard,
  ExploreSessionCard,
  HouseholdIncomeCard,
  HouseholdPlanCard,
  NetWorthCard,
  RetirementDrawdownCard,
  RetirementPotsCard,
  UserFormCard,
} from "@reva/ui";

Payload prop types (NetWorthData, ExploreSessionCardData, UserFormData, HouseholdPlanData) keep the wire field names from the Go tools, so a captured tool output drops straight in as mock data. The client portal's zod schemas are compile-time locked against these types: if a tool's shape drifts, check-types fails rather than a card breaking at runtime.

On this page