{"slug": "ai-permissioned-coworker-framework-and-designs", "title": "AI permissioned coworker framework and designs", "summary": "Thelve released @thelve/coworkers, an npm package of 14 inline-SVG avatar shapes for giving AI coworkers a face, with no dependencies, no build step, and no image assets. The library hashes each coworker's name to a stable shape and hue, supports overrides via shape and hue parameters, and ships React bindings through @thelve/coworkers/react. CSS keyframes for idle float, specular drift, and blink honor prefers-reduced-motion, and every gradient id is namespaced per instance to avoid collisions.", "body_md": "## The cast\n\nPick one to inspect & recolor\n\nAvatar kit · soft-body renders · v1\n\nFourteen shapes for giving AI coworkers a face. Each one is a single inline SVG — lit from the upper left, with a bounce rim off the lower right — so it holds its volume from 16 px in a list to 200 px on a profile.\n\nShape and hue derived from the coworker's name, so they stay stable across sessions\n\nOverlapped at 44 px the silhouettes stay separable without a ring or a border — that's what the different shapes buy you. A page of same-shaped circles needs colour alone to carry the difference.\n\nFlat is a destination, not a degraded render — every stop is somewhere worth landing\n\nNo dependencies, no build step, no image assets\n\nInstall\n\n```\nnpm i @thelve/coworkers\n```\n\nOne coworker\n\n``` js\nimport { avatarSVG } from \"@thelve/coworkers\";\nimport \"@thelve/coworkers/avatar.css\";\n\nel.innerHTML = avatarSVG({ name: \"Call QA\" });\n```\n\nReact\n\n``` js\nimport { Avatar } from \"@thelve/coworkers/react\";\nimport \"@thelve/coworkers/avatar.css\";\n\n<Avatar name={coworker.name} size={36} />\n```\n\nOverriding\n\n```\navatarSVG({ shape: \"bean\", hue: 174, size: 96 })\navatarSVG({ name: \"Inbox Triage\", eyes: false })\n```\n\n`avatarSVG({ name: 'Call QA' })` returns a complete SVG string — shape and hue hashed from the name, so the same coworker looks the same everywhere. Pass `shape` and `hue` to override.\n\nWrap it: `<span dangerouslySetInnerHTML={{__html: avatarSVG({name, size})}} />`. Every gradient id is namespaced per instance, so a hundred on one page never collide.\n\nThe SVG has no intrinsic size — set `width`/` height` in CSS. Idle float, specular drift and blink are CSS keyframes on `.av-body`, `.av-spec` and `.av-eyes`; they already honour `prefers-reduced-motion`.", "url": "https://wpnews.pro/news/ai-permissioned-coworker-framework-and-designs", "canonical_source": "https://eisenzopf.github.io/Thelve-coworkers/demo/", "published_at": "2026-09-12 22:36:38+00:00", "updated_at": "2026-09-12 22:55:45.909941+00:00", "lang": "en", "topics": ["ai-products", "developer-tools", "ai-agents"], "entities": ["Thelve", "@thelve/coworkers", "avatarSVG", "Avatar", "React", "npm"], "alternates": {"html": "https://wpnews.pro/news/ai-permissioned-coworker-framework-and-designs", "markdown": "https://wpnews.pro/news/ai-permissioned-coworker-framework-and-designs.md", "text": "https://wpnews.pro/news/ai-permissioned-coworker-framework-and-designs.txt", "jsonld": "https://wpnews.pro/news/ai-permissioned-coworker-framework-and-designs.jsonld"}}