stars
Agent harness
Every component working together in one agent conversation.
Components for agent-powered products
69 components grouped by the job they do, covering agent status, conversation, review, data, charts, dates, forms, collaboration, product and workspace, designed and built by the DesignMe team.
New components every week
Get each new component in your inbox as it lands, and vote on what we build next on the roadmap.
Unsubscribe any time. Read the privacy notice.
No components match
00
Harness
A live agent conversation built only from the components below. Pick a starter and watch them work together.
01
Agent status
Show what the agent is doing, how far along it is, and what it is working with.
readiness_score
Status pill
Compact agent status that reshapes itself as the task moves along.
Ready for a task
graphic_eq
Step loader
Progress through named steps with a choice of four loaders.
Reading Figma frames1/4
stars
Reasoning trail
A timeline of the agent's plan, notes, sources and edits that unfolds as it works.
stars
Thinking
A quiet, collapsible trace of steps, reasoning, searches or code edits.
dashboard
Context meter
Shows what is filling the context window and lets you compact it.
Context window68% used
Files and frames56k
Conversation60k
Tool results20k
Free64k
200k limit
Hover a segment for detail
bolt
Action log
Every file read, search, edit and command, logged as it happens.
Agent activityRunning
Each step is logged as it runs
readiness_score
Run queue
Grouped tasks with live progress, retries and a compact view.
bolt
Run cost
Live credit and token spend for a run, with a budget cap that pauses the agent.
Credits used
0/ 2,000
Input tokens0
Output tokens0
Tool calls0
Start a run and watch the cap
check_circle
Toast
A single notification with success, error, info and loading variants.
notifications
Toast stack
Agent notifications that stack neatly and fan out when you hover.
group
Agent lanes
Several agents working in parallel, each with its own lane, progress and hand-offs.
group3 agents working
The reviewer waits for the designer to finish
graphic_eq
Agent run timeline
Every model and tool step of a run on one time axis, with retries and cost.
Run 4821, update pricing page
Starting
ModelToolRetry
02
Conversation
Everything for asking, answering and replying, by text or by voice.
edit_note
Live answer
Answers that stream in with numbered sources, feedback and next steps.
Where are users dropping off in onboarding?
FNS
3 sources
Follow-ups
chat_bubble
Thread panel
Switch between agent threads and reply without leaving the panel.
Type a reply and press enter
terminal
Composer
Message input with sources, slash commands, model switching and dictation.
mic
Voice capture
Dictate a request, watch the waveform, then review the transcript before sending.
Tap the mic and describe the change you need
Ready0:00
Simulated input, no microphone access
stars
Prompt starters
Suggested tasks that fill the composer in one click.
Pick a starter or type your own
attach_file
Attachment tray
Drop files for the agent and watch each one upload.
upload
Drop files here
or
Real files stay in your browser
refresh
Response versions
Regenerate an answer and page through every version.
Write a one-line tagline for the new pricing page
1 / 1
Up to five versions
thumb_up
Feedback sheet
Quick ratings that open into reasons when an answer misses.
The pricing page loads quickly, so the drop-off is more likely caused by the comparison table sitting below the fold.
What went wrong
check_circleThanks, this helps the agent improve.
Try the thumbs down
03
Review and approve
Moments where a person checks, steers or signs off on the agent's work.
nearby_error
Decision prompt
Multiple-choice questions the agent needs answered before it continues.
Keys 1 to 3 select
stars
Proposal card
One suggested change with a confidence rating, alternatives and undo.
Accept, dismiss or open alternatives
edit_note
Rewrite toolbar
Pick a sentence and ask for a clearer, shorter or friendlier version.
Click a sentence to select it
tune
Design tuner
Layout values the agent adjusts live, with a preview beside the inspector.
Pricing card[X]/mo
tunePricing card
Layout
Type
Edit values or let the agent tune
lock
Permission gate
The agent asks for access, with scopes and a duration you choose.
Untick a scope or change the duration
checklist
Launch checklist
Pre-launch checks the agent runs one by one, with fixes for anything that fails.
Launch checklistWaiting
grid_on
Change review
Proposed edits highlighted cell by cell, ready to accept or reject.
starsProposed component cleanupScanning
Reviewing 8 components
04
Data and knowledge
Sources, tables, metrics and code the agent reads or produces.
description
Source stack
The documents the agent pulled in, filterable by type and pinnable.
Filter by source, click to pin
trending_up
Metric insight
Agent-written takeaways paired with a chart you can scrub week by week.
starsInsights1 / 3
Drag across the chart to scrub
filter_list
Task table
Tasks filtered by status, with rows that fold away smoothly.
Pick a status to filter
code
Code viewer
Highlighted source with a switch to view the agent's changes.
codeuseAgentStatus.ts
dashboard
Details panel
Record properties you can edit in place, with tags, links and a way to add more.
dashboardCompany details
Click a value to edit it
link
Citation hover card
Numbered citations that preview the exact source passage on hover.
Hover or tab to a citation
person
Account table
Client list with tags, last contact and relationship strength, sortable in place.
Click a column to sort, tick rows to select
document_scanner
Field extraction
Structured fields pulled from a document, each linked back to its source text.
descriptionProject brief.pdf
Extracted fields0 of 6
05
Charts
Lightweight charts for dashboards and reports, drawn in plain SVG and HTML.
trending_up
Line chart
Trend with a comparison period, range switching and a hover readout.
Active users
0+0%
This periodPrevious period
Hover the chart, switch the range
bar_chart
Bar chart
Two series by month, grouped or stacked, with values on hover.
Hours logged
0
DesignDevelopment
donut
Donut chart
Share of a total, with segments and legend that highlight together.
Traffic sources
100%
All sources
Hover a segment or a row
readiness_score
Health score
A tick gauge that fills to the score, with a status chip, trend and date range.
Account health
Northwind Labs
0
out of 100
Calculating the score
grid_on
Activity heatmap
Daily activity over recent weeks, shaded by volume.
Tasks completed
0
MonWedFriSun
Hover a dayLessMore
Hover any square
dashboard
Stat cards
Headline numbers with change and a sparkline, for the top of any dashboard.
Overview
Switch the period to see values count
06
Dates
Pickers for single dates and date ranges.
calendar
Date picker
Month grid with keyboard support and a sliding month change.
No date selected
MoTuWeThFrSaSu
Arrow keys move, enter selects
calendar
Date range picker
Quick presets beside a calendar, with a live preview while you choose the end date.
MoTuWeThFrSaSu
Pick a start date
Click a start and an end, or pick a preset
calendar
Event calendar
A month view with colour-coded events and a summary card on click.
MoTuWeThFrSaSu
Click a day with a dot, toggle the tags
schedule
Agenda
A scrollable week of meetings and deadlines with a live now line.
AgendaThis week
07
Forms and inputs
Buttons, fields, pickers and sign-in flows for any product.
bolt
Buttons
Variants, sizes and every state from loading to done.
Variants
Sizes
States
help
Tooltip
Labels with shortcuts on hover or focus, plus a richer explainer.
search
Search input
A search field with recent queries, live results and a keyboard shortcut.
Click the field or press ⌘ K
filter_list
Country select
A select with flags, search and keyboard navigation.
Country
Arrow keys move, type to filter
person
Social sign-in
Provider buttons with a connecting and connected state.
or
Pick a provider to see it connect
lock
Sign in
Email and password sign-in with validation and a show-password toggle.
Try signing in with an empty field
edit_note
Form
A project enquiry form with inline validation, chips, a counter and a sent state.
Submit with a bad email to see the errors
lock
Payment form
Card, wallet or bank checkout with live formatting, a discount code and an order summary.
Try a card starting with 4 or 5, or switch to a wallet
08
Collaboration
Threads and inboxes for teams working alongside an agent.
chat_bubble
Comments
A discussion thread with mentions, reactions and sorting.
Discussion
Type @ to mention, click a reaction
notifications
Notifications
An inbox with unread states, requests to approve and attachments.
Notifications
Approve a request or archive an item
person_add
Invite to collaborate
Find people, set what they can do and send the invite.
Share Pricing page v2
Invite people to view, comment or edit.
People with access
Type a name, pick a permission, send
thumb_up
Reactions
Hover Like to open a reaction tray, then pick one and watch it land.
Shipped the new pricing page today. Thanks to everyone who reviewed it this week, the comparison table finally sits where people look for it.
8 comments
Hover or long-press Like
09
Product
Pricing, onboarding, setup flows and model comparisons for the rest of your product.
bolt
Pricing cards
Three quiet plans with a billing toggle and a highlighted pick.
Switch billing to see prices update
checklist
Onboarding checklist
Setup steps with progress, one open at a time and a finish state.
Complete a step to open the next
account_tree
Stepper
A three step setup with a progress header and validation.
Fill a step to continue
tune
Set limit
A spending cap with a striped progress bar and an inline editor.
Monthly spending limit
Card ending 4417
$0$10,000
Plenty of room this month
$
Edit the limit to see the bar react
trending_up
Currency converter
Live conversion with flags, a swap, quick amounts and the rate trend.
Convert
Sample ratesYou send
They get
0
Pick a currency or swap them
splitscreen
Model compare
One prompt, two models side by side, with speed, cost and a vote.
chat_bubbleWrite a one-line tagline for a design agency that ships AI products.
10
Workspace
Navigation, search, settings and automations around the agent.
view_sidebar
Workspace rail
Collapsible navigation for spaces, projects and recent threads.
DDesign studio
Seats3 of 10
homeHomeSelected view
Hover, select or collapse
search
Command palette
Jump to files, components and actions from the keyboard.
searchEsc
↑↓MoveEnterOpen
Try typing "token" or "xyz"
settings
Agent settings
Autonomy level, capabilities and model, with a clear unsaved state.
Autonomy
Runs routine steps on its own and checks with you before sending, deleting or spending.
Remember project context
Browse the web
Run code
Send messages without asking
Model
All changes saved
Run freely unlocks the last toggle
folder
File explorer
A project tree that marks every file the agent adds, edits or removes.
ChangesScanning
Select a file
Click folders and files
account_tree
Automation canvas
Trigger, condition and branches, with a test run that lights the path.
Yes
No
history
Memory panel
What the agent remembers, with pin, forget and a master switch.
Memory
6 memories
Hover a memory to pin or forget it
Questions
What people usually ask before they start using the library.
Yes. Every component is free for personal and commercial projects under the MIT licence, so you can use, change and ship it in client work.
The HTML, CSS and JavaScript for that component. It needs the shared core once, which holds the tokens, icons, sound and small helpers, and you can copy that from the code view.
React and Tailwind versions are in progress, and you can follow them on the roadmap. Sign up and you will get them as soon as they land.
Webflow and Framer exports are coming soon. Until then the HTML version works in a Webflow embed or a Framer code component.
Two visual styles for the same components. Blueprint is technical and square with an orange accent, Soft is rounded with pastel colours, and both work in light and dark mode.
They work with a keyboard, use proper roles and labels, and respect reduced motion. Test them in your own product too, since accessibility depends on how they are used.
Every week. Each release is listed in the changelog, and subscribers get it first.
Yes. Suggest it on the roadmap and upvote the ones you want, and we build the most wanted first.
The team at DesignMe, a design and development studio working with startups and enterprises. If you need help building your product, you can book a call with us.