Component library

React components and page templates for opencommerce. Each item includes a preview, usage notes, source and an install command.

Requires React and Tailwind 4. Use npx -y github:anwarlemu/opencommerce-brand-cli#release add <item> to add an item.

Components

Buttons, form controls, navigation and overlays.

accordion
AccordionExpandable questions or sections with keyboard navigation.
avatar
team.dir
APAda ParkCEO & Co-Founder
JRJonah ReyesCTO & Co-Founder
angels.dir
MCMia ChenFounder, Ledgerline
SOSam OkaforPartner, North Fund
LRLena RuizAngel investor
AvatarA square photo or store mark with 6px corners and an initials fallback.
badge
BadgeMono chips for counts and tags, small pills for an order or route status.
banner
BannerNotice with a title, message and optional actions.
button
ButtonFlat keys for primary, secondary and toolbar actions.
card
CardContainer for related content, with default and raised variants.
checkbox
CheckboxCheckbox with checked, unchecked, indeterminate and disabled states.

code-window

agent.ts

import { Agentcard } from "@agentcard/sdk"; const agentcard = new Agentcard({  clientSecret: process.env.AGENTCARD_SECRET,  clientId: process.env.AGENTCARD_ID,}); // One tool for every store: search, checkout and tracking.const tools = [agentcard.tools.commerce()];

Code windowCode in a window: the file name in the bar, Copy at the right, light or on ink, with banded lines.

collapse
CollapseExpandable content area that animates its height.
command
CommandSearchable command list or dialog with keyboard navigation.
copy-button
Copy buttonA small Copy key that swaps to Copied in place, on white or on ink.
dialog
DialogModal dialog with a title bar, focus trap and close control.
docs-link
Docs linkExternal documentation link with an arrow.
dropdown-menu
Dropdown menuAction menu with white and frosted glass panels, submenus and selection controls.
empty-state
Empty stateMessage and optional action for an empty list or search result.
field
FieldLabel, help text, error message and accessibility attributes for a form control.
hold-button
Hold buttonButton that confirms an action after a continuous hold.
input
InputSingle-line text field with standard and search variants.
install-tabs
Install tabsOne install line on ink, a tab per package manager and a Copy key.
kbd
KbdKeyboard key or shortcut label.
label
LabelAccessible label for a form control.
logo
LogoThe typeset opencommerce lockup with its byline, and the [*] mark.
popover
PopoverAnchored panel for contextual details or controls.
progress
ProgressProgress bar with a value, maximum and accessible progress state.
scroll-area
Scroll areaScrollable container with overflow indicators and a scroll control.
secret-field
Secret fieldMasked value with reveal and copy controls.
segmented-control
Segmented controlSingle-value selector with radio semantics and arrow-key navigation.
select
SelectSingle-choice select with field, compact, ghost and chip treatments.
separator
SeparatorHorizontal or vertical divider.
sheet
SheetSide panel with a title, close control and focus management.
skeleton
SkeletonPlaceholder that reserves space while content loads.
sonner
ToastToast notifications with optional actions.
spinner
SpinnerLoading indicator that inherits the surrounding text color.
switch
SwitchToggle for a setting that takes effect immediately.
table
TableResponsive table that stacks row content on phones.
tabs
TabsTabbed views in the header's glass tray: a white pill glides to the selected tab.
tag-filter
Tag filterSearchable tag picker with removable selected filters.
tags-input
Tags inputEditable list of values with add, remove and validation states.
textarea
TextareaResizable multi-line text field.
tooltip
TooltipShort contextual label shown on hover or keyboard focus.
window
WindowA white card with a quiet title bar: file name centered, the [*] mark or an action at the right.

Merchant	Success rate	Last purchase	Duration	Status
DoorDash	100%	5 min ago	12 sec	Operational
Amazon	99.9%	1 min ago	9 sec	Operational
Best Buy	99.6%	7 min ago	16 sec	Degraded

Sections

Headers, content sections and footers for opencommerce pages.

cta
CTAThe closing card: mist, a hairline and 16px corners, the headline, two keys and the install box, glyphs gathering at its edges.
faq
Questions
What teams ask before their agent makes its first purchase.
What is opencommerce?
An open router for commerce: one endpoint your agent calls to search a store, check out and track the order.
Which stores can my agent buy from?
More than 4,000 online stores, from marketplaces to restaurants, with new routes added every week.
How are payments handled?
Your customers’ cards stay in Agentcard’s vault; the agent pays with them, within the limits they set.
Which agent frameworks does it work with?
Any that can call a tool: the SDK ships tools for the common frameworks and a plain HTTP API.
How does the 1% platform fee work?
It is charged on each completed order. Failed and cancelled orders cost nothing.
FAQCentered questions with native expandable answers, one open at a time, on hairlines.
feature-rows
every-store-one-endpoint.feature
Every store, one endpoint
Search the catalogue, check out and track the order at any store through the same call.
uptime-you-can-see.feature
Uptime you can see
Every route is exercised around the clock, so you know a store works before your agent tries it.
warmed-routes.feature
Warmed routes
The stores your agents use most stay warm, so a purchase takes seconds, not minutes.
checkout-that-finishes.feature
Checkout that finishes
Payment, shipping and confirmation, with the order number back in your agent’s hands.
Feature rowsFeatures as windows two to a row (picture, title, line), or one to a row beside their window; pictures play when first seen.
hero
Buy from 4000+ stores
Open router for commerce
Let your agent buy from any online store through one endpoint.
Get started Read the docs
Northwind
Acme Supply
Globex
Initech
Umbrella
Hooli
Vandelay
Soylent
agent.ts
import { Agentcard } from "@agentcard/sdk"; const agentcard = new Agentcard({ clientSecret: process.env.AGENTCARD_SECRET,}); // One call: find the item, check out, track the order.const order = await agentcard.commerce.buy({ query: "USB-C charger, 65W", maxPrice: 40,});
HeroWhite, centered page opening: a pill, the title, a line, two keys, the strip of marks and a code window over a field of glyphs.
integrations
Integrates natively with the tools you use
Kernel, Browserbase, Browser Use, Anchor, your own browser, Linq and Blooio: the stack your agent already runs on.
Browser integrations
Integrate with Kernel, Browserbase, Browser Use, Anchor or your own browser and automate purchases online.
kernel.ts
// One card item per purchase, in the // user's vault await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
KERNELvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Kernel swaps the card in at its network edge
browserbase.ts
// One card item per purchase, in the // user's vault await bb.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
BROWSERBASEvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Browserbase swaps the card in at its network edge
browser use.ts
// One card item per purchase, in the // user's vault await browser.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
BROWSER USEvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Browser Use swaps the card in at its network edge
anchor.ts
// One card item per purchase, in the // user's vault await anchor.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
ANCHORvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Anchor swaps the card in at its network edge
browser.ts
// One card item per purchase, in the // user's vault await client.vaults.items.upsert('order', { type: 'card', spec: { provider: 'agentcard', merchant: 'amazon.com', amount: 2306, currency: 'usd' }, });
BROWSERvault · user-12345
AgentcardWalletConnected
OrderCard · $23.06 at amazon.comAuthorizing
Browser swaps the card in at its network edge
Messaging integrations
iMessage agents built on top of Linq and Blooio can use Agentcard to complete payments.
linq payments
POST api.linq.com/v3/payments { "amount": 2306, "currency": "usd", "merchant": "amazon.com" }
Found it. Ready to check out?
Approved
blooio payments
POST api.blooio.com/v3/payments { "amount": 2306, "currency": "usd", "merchant": "amazon.com" }
Found it. Ready to check out?
Approved
IntegrationsIntegration sections with selectable tools and matching previews.
logo-strip
Acme Supply
Globex
Umbrella
Hooli
Soylent
Wonka
Logo stripThe stores or customers as bare grey marks drifting left in one row under the hero's keys.
nav-dock
Nav dockThe header's tray of links in frosted glass, with a lit pill that slides to the current section.
page-header
Page headerTitle, optional label and introduction for an inner page.
pricing
Pricing
Start free while you build. Move to Standard when your agent is buying for real.
free.plan
Free
$0while you build
Everything you need to wire up your agent and make its first purchases.
Platform fees
N/A
Merchants
5 merchants
PSPs
2 PSPs
Try free
standard.plan
Standard
Every merchant
1%of each completed order
For agents buying for real, across every store and payment provider.
Platform fees
1%
Merchants
Every merchant
PSPs
Every PSP
Get started
PricingPlans side by side in windows, with the figure, compared rows and a full-width key; one plan featured.
product-grid
One router, every way to buy
Search, checkout and tracking, for any store your agent needs.
buy.ts
const order = await agentcard.commerce.buy({ query: "Oat milk, 6 pack", store: "any",});
Checkout
One call takes your agent from a request to a confirmed order.
Read the docs
search.product
USB-C charger, 65W$32
Running shoes, size 10$96
Oat milk, 6 pack$18
Search
Catalogues from thousands of stores, searchable in plain words.
See stores
orders.product
#A-10293Shipped
#A-10294Confirmed
Tracking
Every order followed to the door, with updates your agent can relay.
See pricing
Product gridProduct overview cards with text, actions and media.
prose
Compliance
Terms of Use
Last updated July 10, 2026
Welcome to the service (the “Service”). These terms govern your use of the website, the cards and the tools for agents. By using the Service you agree to them and to our Privacy Policy.
Eligibility
You must be at least 18 years old and able to form a binding contract. Cards are issued under the Cardholder Agreement.
Acceptable use
You agree not to:
Use the services for any unlawful purpose.
Attempt unauthorized access to any account or system.
Interfere with or disrupt the services.
Additional definitions
The issuing bank is an express third-party beneficiary of these terms.
An API key such as sk_live_… is yours to keep secret.
Fees
Fees
Annual fees None
International transaction 1% of each transaction in U.S. dollars
Late payment None. Learn more at consumerfinance.gov.
npx agent-cards setup
ProseTypography and layout for long-form content.
section
SectionPage section with generous air above, the centered section heading and an optional label.
site-footer
opencommerceby Agentcard
The open router for commerce. Buy from any online store from a single endpoint.
Product
Features
Monitoring
Pricing
FAQ
Developers
Docs
SDK
Status
Company
Agentcard
Privacy
Terms
© 2026 Agentcard, Inc.
Site footerWhite footer under a hairline: the name and a line, three link columns, the small print and the outlined wordmark.
site-header
Site headerFixed header of three glass trays: the wordmark, the links with their pill, and one blue key.
status-table
monitoring.live
LiveFilter merchants
Northwind100%
5 min ago · 12 sec
Acme Supply99.9%
1 min ago · 9 sec
Globex99.8%
2 min ago · 14 sec
Initech100%
4 min ago · 11 sec
Merchant Success rate Last purchase Duration Uptime · 45 days
Northwind 100% 5 min ago 12 sec
Acme Supply 99.9% 1 min ago 9 sec
Globex 99.8% 2 min ago 14 sec
Initech 100% 4 min ago 11 sec
OperationalDegradedDown+ 4000 more merchants
Status tableA live table in a window: a live dot and filter, rows with marks, mono figures and day bars, a legend.
steps
step-1.ts
npm install @agentcard/sdk import { Agentcard } from "@agentcard/sdk"; const agentcard = new Agentcard({ clientSecret: process.env.AGENTCARD_SECRET,}); const tools = [agentcard.tools.commerce()];
StepsHow it works: steps listed down the left, each with its code in a dark window, playing through on a timer.
team-directory
Team
team.dir
AOAda OkaforCEO & Co-Founder
LRLuis RomeroCTO & Co-Founder
MLMara LindqvistMember of Technical Staff
NHNoor HaddadMember of Marketing Staff
We are not hiring, but you can always send us an email.
Investors
investors.dir
PRPriya RamanCo-founder, a fund
TBTom BeckerCEO, a commerce platform
ERElena RuizCTO, a CRM
SWSam WuCEO, an auth company
JBJonas BergCEO, a cloud
IDInes DuarteBoard, an AI lab
KMKofi MensahCEO, a delivery app
HSHana SatoDesign, a device maker
RPRavi PatelPayments
Backed by an accelerator
NORTHFUND
Team directoryResponsive directory of people with photos, roles and optional links.
testimonials
Agents that already buy
Consumer apps, B2B companies and crypto teams run their agents’ purchases through opencommerce.
orchid.case
Consumer apps like Orchid buy on Amazon for customers using Agentcard:
Orchid uses Agentcard to store customers’ cards safely and buy things on their behalf.”
OrchidConsumer
almanac.case
B2B companies like Almanac use Agentcard to give cards to company agents:
Almanac stores corporate cards using Agentcard and automates company purchases with their Slack agent.”
AlmanacB2B
laso.case
Crypto companies like Laso use Agentcard as their payment infrastructure:
When users have funds in crypto and their agent wants to make purchases using them, they can use Laso (powered by Agentcard) and create cards their agent can use.”
Laso FinanceCrypto
TestimonialsCustomer quotes with names, logos and optional context.
updates-feed
Wed Oct 14
Added
A company can now sell through its own agent: a new purchase package gives the agent one buy tool for each shopper, and every approval goes straight to the shopper.
A company can name its shopper agent, and the name shows on every message the agent sends.
Purchase API answers now carry the merchant's order number once the order is placed.
Improved
A shopper with no login merges into their account the first time they sign in.
A company now opens up to 10,000 cards at once.
Fixed
An iPhone with its passkey in a second keychain approves on the first try.
A card payment no longer fails when the merchant retries it.
Tue Oct 13
Fixed
The Purchase API now answers out-of-stock items with the closest match.
On a vague shopping request the agent asks one question before it searches.
Fri Feb 27
Added
Set up from your editor
One command adds the card tools to your coding agent and walks you through the first purchase.
▶
Updates feedDated release notes grouped by change type.

Fees
Annual fees	None
International transaction	1% of each transaction in U.S. dollars
Late payment	None. Learn more at consumerfinance.gov.

Pages

Page templates built from the library components.

about-page
opencommerceby Agentcard
Home About Pricing Docs
Get started
The company
About
We are building opencommerce so an agent can buy from any store on the web through one endpoint, the way a person would.
Team
team.dir
AOAda OkaforCEO & Co-Founder
LRLuis RomeroCTO & Co-Founder
MLMara LindqvistMember of Technical Staff
NHNoor HaddadMember of Marketing Staff
Investors
investors.dir
PRPriya RamanCo-founder, a fund
TBTom BeckerCEO, a commerce platform
ERElena RuizCTO, a CRM
SWSam WuCEO, an auth company
JBJonas BergCEO, a cloud
IDInes DuarteBoard, an AI lab
opencommerceby Agentcard
The open router for commerce. Buy from any online store from a single endpoint.
Product
Features
Monitoring
Pricing
Developers
Docs
SDK
Company
About
Agentcard
© 2026 Agentcard, Inc.
About pageAbout page template with the header, the page's opening, team directories and the footer.

home-page

Buy from 4000+ stores

Open router for commerce

Let your agent buy from any online store through one endpoint.

Get started Read the docs

Northwind
Acme Supply
Globex
Initech
Umbrella
Hooli
Vandelay
Soylent
Wonka
Pied Piper
Northwind
Acme Supply
Globex
Initech
Umbrella
Hooli
Vandelay
Soylent
Wonka
Pied Piper

agent.ts

import { Agentcard } from "@agentcard/sdk"; const agentcard = new Agentcard({  clientSecret: process.env.AGENTCARD_SECRET,}); // One call: find the item, check out, track the order.const order = await agentcard.commerce.buy({  query: "USB-C charger, 65W",  maxPrice: 40,});

Everything your agent needs to buy

One endpoint for every store, routes kept warm, and checkout that finishes.

merchants.feature
Every store, one endpoint
Search the catalogue, check out and track the order at any store through the same call.
uptime.feature
Uptime you can see
Every route is exercised around the clock, so you know a store works before your agent tries it.
speed.feature
Warmed routes
The stores your agents use most stay warm, so a purchase takes seconds, not minutes.
checkout.feature
Checkout that finishes
Payment, shipping and confirmation, with the order number back in your agent’s hands.

See it in action

From a single tool call to a delivered order. Pick a step to see the code behind it.

step-1.ts

npm install @agentcard/sdk import { Agentcard } from "@agentcard/sdk"; const agentcard = new Agentcard({  clientSecret: process.env.AGENTCARD_SECRET,}); const tools = [agentcard.tools.commerce()];

Merchant monitoring

Every route is exercised around the clock. This is the live picture of the stores your agents buy from most.

monitoring.live

Live

Northwind100%
5 min ago · 12 sec
Acme Supply99.9%
1 min ago · 9 sec
Globex99.8%
2 min ago · 14 sec
Initech100%
4 min ago · 11 sec
Umbrella99.6%
7 min ago · 16 sec

Merchant	Success rate	Last purchase	Duration
Northwind	100%	5 min ago	12 sec
Acme Supply	99.9%	1 min ago	9 sec
Globex	99.8%	2 min ago	14 sec
Initech	100%	4 min ago	11 sec
Umbrella	99.6%	7 min ago	16 sec

OperationalDegradedDown+ 4000 more merchants

Pricing

Start free while you build. Move to Standard when your agent is buying for real.

free.plan

Free

$0while you build

Everything you need to wire up your agent and make its first purchases.

Platform fees: N/A
Merchants: 5 merchants
PSPs: 2 PSPs

Try free

standard.plan

Standard

Every merchant

1%of each completed order

For agents buying for real, across every store and payment provider.

Platform fees: 1%
Merchants: Every merchant
PSPs: Every PSP

Get started

Give your agent a checkout

One endpoint, every online store. Start free: your first purchase can go through today.

Get started Book a call

npm install @agentcard/sdk

Questions

What teams ask before their agent makes its first purchase. Still unsure? Book a call and we’ll walk you through it.

What is opencommerce?

An open router for commerce: one endpoint your agent calls to search a store, check out and track the order.

Which stores can my agent buy from?

More than 4,000 online stores, from marketplaces to restaurants, with new routes added every week.

How are payments handled?

Your customers’ cards stay in Agentcard’s vault; the agent pays with them, within the limits they set.

Which agent frameworks does it work with?

Any that can call a tool: the SDK ships tools for the common frameworks and a plain HTTP API.

What happens when a merchant’s checkout changes?

The route is re-learned within minutes; monitoring shows the store as degraded until it is.

How does the 1% platform fee work?

It is charged on each completed order. Failed and cancelled orders cost nothing.

Home pageHome page template: header, hero, features, steps, live status, pricing, closing card, questions and footer.

pricing-page
opencommerceby Agentcard
Home Pricing Docs
Get started
Pricing
Start free while you build. Move to Standard when your agent is buying for real.
free.plan
Free
$0while you build
Everything you need to wire up your agent and make its first purchases.
Platform fees
N/A
Merchants
5 merchants
PSPs
2 PSPs
Support
Community
Try free
standard.plan
Standard
Every merchant
1%of each completed order
For agents buying for real, across every store and payment provider.
Platform fees
1%
Merchants
Every merchant
PSPs
Every PSP
Support
Shared channel
Get started
Billing questions
When is the fee charged?
On each completed order. Failed and cancelled orders cost nothing.
Can I stay on Free?
Yes, for as long as you are building. Move to Standard when your agent buys for real.
Do you offer volume pricing?
Above a monthly volume we set a lower rate; book a call and we will work it out.
opencommerceby Agentcard
The open router for commerce. Buy from any online store from a single endpoint.
Product
Features
Monitoring
Pricing
Developers
Docs
SDK
Company
Agentcard
Contact
© 2026 Agentcard, Inc.
Pricing pagePricing page template with the plans, billing questions and the footer.

Visuals

Logos, the wordmark and the glyph fields behind cards.

glyph-field
Glyph fieldA faint canvas field of *s and @s in clumps, with a few blue runs, that flickers while on screen.
marquee
Northwind
Acme Supply
Globex
Initech
Umbrella
Hooli
Stark Goods
Wayne Retail
Soylent
Vandelay
Pied Piper
Gringotts
MarqueeA slow strip of grey marks or names drifting left, fading at both ends, paused under the pointer.
outline-wordmark
Outline wordmarkThe name set as wide as the page in a faint outline, lit in blue under the pointer.