Edit Agent

Name

Also known as (comma separated)

Brief definition AI system capable of performing multi-step tasks.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Agent name", "default": "Inbox Triage" }, { "id": "goal", "type": "text", "label": "Current goal", "default": "Sort unread mail into folders and flag anything urgent" }, { "id": "status", "type": "select", "label": "Status", "default": "active", "options": [ "active", "paused", "done" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "radius", "type": "number", "label": "Corner radius", "default": 14, "min": 0, "max": 24, "step": 1 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"agent-card\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\">\n <div class=\"agent-card__header\">\n <span class=\"agent-card__avatar\" aria-hidden=\"true\">&#129302;</span>\n <div class=\"agent-card__who\">\n <p class=\"agent-card__name\">{{name}}</p>\n <span class=\"agent-card__badge agent-card__badge--{{status}}\">{{status}}</span>\n </div>\n </div>\n <p class=\"agent-card__goal\"><span class=\"agent-card__goal-label\">Goal:</span> {{goal}}</p>\n</div>\n<style>\n.agent-card { font: 14px/1.5 system-ui, sans-serif; max-width: 360px; padding: 16px 18px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; box-sizing: border-box; }\n.agent-card__header { display: flex; align-items: center; gap: 12px; }\n.agent-card__avatar { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); font-size: 18px; flex-shrink: 0; }\n.agent-card__who { flex: 1; min-width: 0; }\n.agent-card__name { margin: 0 0 4px; font-weight: 700; font-size: 15px; }\n.agent-card__badge { display: inline-block; text-transform: capitalize; font-size: 11px; font-weight: 700; padding: .25em .7em; border-radius: 999px; border: 1.5px solid var(--accent); }\n.agent-card__badge--active { background: var(--accent); color: #241430; }\n.agent-card__badge--paused { background: transparent; color: var(--accent); }\n.agent-card__badge--done { background: transparent; color: #24143066; border-color: #24143033; }\n.agent-card__goal { margin: 12px 0 0; font-size: 13px; color: #241430cc; }\n.agent-card__goal-label { font-weight: 600; color: #241430; }\n</style>", "tailwind": "<div class=\"max-w-sm p-4 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] box-border\" style=\"--accent:{{accent}};border-radius:{{radius}}px;\">\n <div class=\"flex items-center gap-3\">\n <span class=\"flex items-center justify-center w-9.5 h-9.5 rounded-full text-lg flex-shrink-0\" style=\"background:var(--accent)\" aria-hidden=\"true\">&#129302;</span>\n <div class=\"flex-1 min-w-0\">\n <p class=\"m-0 mb-1 font-bold text-[15px]\">{{name}}</p>\n <span class=\"agent-card-tw__badge agent-card-tw__badge--{{status}} inline-block capitalize text-[11px] font-bold px-2.5 py-1 rounded-full border-[1.5px]\" style=\"border-color:var(--accent)\">{{status}}</span>\n </div>\n </div>\n <p class=\"mt-3 mb-0 text-[13px] text-[#241430]/80\"><span class=\"font-semibold text-[#241430]\">Goal:</span> {{goal}}</p>\n</div>\n<style>\n.agent-card-tw__badge--active { background: var(--accent); color: #241430; }\n.agent-card-tw__badge--paused { background: transparent; color: var(--accent); }\n.agent-card-tw__badge--done { background: transparent; color: #24143066; border-color: #24143033 !important; }\n</style>", "react": "export function Agent({\n name = \"{{name}}\",\n goal = \"{{goal}}\",\n status = \"{{status}}\",\n accent = \"{{accent}}\",\n radius = {{radius}},\n}) {\n const badge = {\n active: { background: accent, color: \"#241430\", borderColor: accent },\n paused: { background: \"transparent\", color: accent, borderColor: accent },\n done: { background: \"transparent\", color: \"#24143066\", borderColor: \"#24143033\" },\n }[status] ?? {};\n return (\n <div style={{ maxWidth: 360, padding: \"16px 18px\", background: \"#FAF7F2\", color: \"#241430\",\n border: \"1.5px solid #24143022\", borderRadius: radius, boxSizing: \"border-box\", fontFamily: \"system-ui, sans-serif\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n <span aria-hidden=\"true\" style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"center\", width: 38,\n height: 38, borderRadius: \"50%\", background: accent, fontSize: 18, flexShrink: 0 }}>&#129302;</span>\n <div style={{ flex: 1, minWidth: 0 }}>\n <p style={{ margin: \"0 0 4px\", fontWeight: 700, fontSize: 15 }}>{name}</p>\n <span style={{ display: \"inline-block\", textTransform: \"capitalize\", fontSize: 11, fontWeight: 700,\n padding: \"0.25em 0.7em\", borderRadius: 999, border: \"1.5px solid\", ...badge }}>{status}</span>\n </div>\n </div>\n <p style={{ margin: \"12px 0 0\", fontSize: 13, color: \"#241430cc\" }}>\n <span style={{ fontWeight: 600, color: \"#241430\" }}>Goal:</span> {goal}\n </p>\n </div>\n );\n}" }