Tools and tutorials

Tag: AI coding agents

  • Astryx: Meta’s Free Agent-Ready Design System

    Astryx: Meta’s Free Agent-Ready Design System

    The most-starred repository on GitHub today is not a new AI model, a game, or a viral utility. It is a design system — the kit of buttons, forms, tables, and themes that developers use to build interfaces — and it comes from Meta. Astryx picked up more than 3,100 stars in a single day to reach the top of GitHub's trending list, with about 21,600 stars in total and nearly 1,700 forks.

    That is an unusual thing for a design system to do. Design systems are infrastructure: necessary, unglamorous, and usually invisible to anyone who is not building a product. Astryx is trending for a specific reason, and it is written into the project's own description: "An open source design system that's fully customizable and agent ready." The agent part is doing the work. This is a component library built for a world where the person writing the interface might be an AI assistant — and Meta is giving it away for free under the MIT license.

    Eight years inside Meta, now on GitHub

    Astryx did not start as an open-source project. It grew inside Meta over the last eight years, where it became the company's most-used and largest design system, powering more than 13,000 apps. That is the kind of pedigree that matters for a design system, because these tools are only as good as the pressure they have survived. A component library that has served 13,000 internal apps has been argued over, broken, fixed, and refined by the engineers, designers, and product teams who depend on it every day.

    The project has been public since January 9, 2026, and it is actively developed: 7,302 commits, 48 releases, 106 tags, with the latest release, v0.7.12, landing about an hour before this article was written. It is, however, still in beta — a label the README carries prominently, and the first of several honest caveats worth keeping in mind.

    What you get is a system, not a pile of components. It ships more than 150 accessible components, brand-level theming, dark mode, ready-to-ship templates, and a command-line tool, all as one cohesive package. You import pre-built CSS and use typed React components. There is no build plugin to install, no styling library to adopt, no PostCSS or Babel configuration to wrestle with. The simplest setup is a few CSS imports plus a theme provider.

    What makes it different

    Most design systems make you a deal: use our components our way, or fight the system. Astryx's README lists four things it does differently, and each one is aimed at that bargain.

    First, open internals. Components are built to be composed at any level, not locked behind a closed top-level API. The building blocks you would reach for are exported directly, and when you need to go deeper, a feature called swizzle ejects a component's full source into your project so you own it. That is the opposite of the usual black-box component, and it is the feature most likely to win over experienced React developers who have been burned by a library that would not let them change one small thing.

    Second, no styling lock-in. Astryx authors its styles with StyleX, Meta's styling library — but that is invisible to consumers. You override with className using Tailwind, CSS modules, or plain CSS, whatever your project already uses. You do not have to adopt StyleX to use Astryx, which removes the biggest reason developers usually say no to a new design system.

    Third, customize without wrapping. A theme is a set of CSS custom property overrides, so a designer can make Astryx unmistakably theirs without forking or wrapping component source. Seven ready-made themes ship with it — neutral, butter, chocolate, matcha, stone, gothic, and y2k — and each is fully customizable.

    Fourth, and the one the project leads with: built for people and agents. The API, the docs, and the CLI are designed together so a person and an AI assistant build the same way, from the same reference. The repository even ships with AGENTS.md and CLAUDE.md files at its root — the machine-readable instructions that tell a coding agent how the project works. The README's phrasing is blunt: "Every change that made Astryx easier for AI made it easier for people too."

    The agent-ready part is the point

    That last claim is the reason Astryx is trending now rather than at any point in the last ten months. AI coding agents have become the way a lot of software gets built, and agents are only as good as the systems they build with. A design system with inconsistent naming, undocumented props, and components that behave differently from each other is a minefield for an agent — and, to be fair, for a human too. Astryx's answer is strong, documented conventions: every component follows the same naming, prop, and composition rules, and every one is thoroughly documented, so once you have learned a few, the rest feel familiar, and both people and AI can predict how an unfamiliar component behaves.

    The CLI is the other half of the agent story. It is not just a scaffolding tool; it gives component docs, templates, scaffolding, themes, and codemods from the command line, and it can be installed globally so that astryx works in any folder and every coding agent knows Astryx. The README recommends installing it both globally and per-project, and even includes a package.json script workaround so AI assistants invoking the CLI directly do not hit path errors. That is the level of detail you only write when you have watched agents trip over your tooling in production.

    There is also a docsite, a live Storybook, and an interactive Sandbox, all linked from the README, plus a Discord server for questions and contributions. The project is, in other words, set up to be used, not just starred.

    Installing it in about five minutes

    Astryx requires React 19 or later — react and react-dom are peer dependencies of @astryxdesign/core — so the first check is whether your project is already there. If it is, installation is three packages:

    
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

    The same commands exist for pnpm and yarn. The CLI can also be installed once globally with npm i -g @astryxdesign/cli, which is the recommended route if you want every coding agent on your machine to know Astryx. After that, astryx docs answers questions about global versus project installs, and npm run astryx -- component --list shows what is available. The core package's README covers the full guide for Next.js, Tailwind, Vite, and CDN setups.

    The cost is nothing. The system is MIT-licensed, the packages are on npm, and there is no paid tier, no account, and no API key. The only real costs are the ones that come with any design system: learning its conventions, and committing your interface to its components.

    The honest caveats

    Astryx is in beta, and beta means the API can still change. If you build a production product on it today, you should expect breaking changes and budget time for upgrades. The chart components tell the same story in miniature: @astryxdesign/vega and @astryxdesign/charts are published to npm only under the @canary dist-tag, with no stable release yet, and the experimental @astryxdesign/lab package is not published at all.

    The React 19 requirement is a real constraint too. Plenty of production apps are still on React 18, and upgrading a framework version to adopt a design system is a decision, not a chore. And the Meta pedigree cuts both ways: a system built to serve 13,000 apps inside one company is battle-tested, but it is also opinionated in ways that reflect Meta's needs. The "guidance over enforcement" principle — components give you capability rather than guardrails that fight you — is the project's answer to that, and it is a good one. But the proof is in using it, not in reading the README.

    None of that dims the reason to try it. A free, MIT-licensed design system with 150-plus components, seven themes, a CLI that speaks to AI agents, and eight years of production use inside one of the world's largest software companies is a serious offer. That it is trending on GitHub today, above every AI model and dev tool on the list, says something about where the work has moved: the bottleneck in building software is no longer the model. It is the interface. Astryx is Meta's answer to that, and now it is everyone's.

    Astryx README banner with component screenshots, the Astryx logo, and links to docs, Storybook, and Sandbox
    Screenshot: github.com/meta/astryx

    Screenshot: github.com/meta/astryx

    Also today: Claude Fable 5.2: 20% Cheaper, 30% Faster — and a Twin You Can't Have and PlayStation Portal Player: Sony's Japan-Only Handheld, With Storage It Won't Explain.

    Related: Google Skills: 186 Free Agent Skills for Google Cloud · Agent-Browser: The CLI That Gives AI Agents a Browser · Sherlock: Find Any Username Across 400+ Sites, Free

  • Agent-Browser: The CLI That Gives AI Agents a Browser

    Agent-Browser: The CLI That Gives AI Agents a Browser

    What it actually does, in one loop

    Your coding agent writes a web page. Then what? Until now, the usual answer was: you open the browser yourself, click around, and report back what you saw. Vercel Labs’ agent-browser, trending on GitHub today with about 47,000 stars, exists to close that loop — it gives an AI agent a browser it can drive one shell command at a time, so the agent can check its own work.

    The loop is deliberately simple. The agent opens a page, takes a snapshot — a compact text version of the page’s accessibility tree, with each element tagged with a reference like @e1 — acts on a reference with click @e1, then re-reads the page and repeats. The browser stays open between commands, so the agent keeps its place. When the page changes, the references go stale, and the agent takes a fresh snapshot. That’s the whole idea, and the whole point: a browser reduced to something an agent can reason about in text.

    It’s a native Rust CLI, created in January 2026 and now at version 0.41.2, released November 3. It works with Claude Code, Cursor, GitHub Copilot, OpenAI Codex, Google Gemini, opencode, and, per its docs, “any agent that can run shell commands.” That last phrase is doing a lot of work — it means there’s no plugin to install in your editor and no MCP server to configure before the first command. If your agent can run a shell command, it can drive a browser.

    Two commands and your agent has a browser

    Installation is the part that usually kills developer tools, and here it’s genuinely short:

    vercel-labs/agent-browser README Quick start commands and snapshot output
    Screenshot: github.com/vercel-labs-agent-browser — the README’s Quick start loop.

    npm install -g agent-browser
    agent-browser install

    The second command downloads Chrome for Testing the first time you run it. Homebrew users can install with brew install agent-browser instead, and you can try it without installing anything via npx agent-browser open example.com. On Linux, agent-browser install --with-deps also pulls in the browser’s system libraries. No API key, no extra browser to install, no account. The CLI is free and open source under Apache 2.0, and running browser commands locally doesn’t require any model subscription — the cost is whatever your agent already costs you.

    One thing worth correcting before it trips anyone up: some secondary write-ups list Node.js 24+, pnpm 11+, and Rust as requirements. They aren’t — those are only needed if you’re building the tool from source. A normal install needs npm or Homebrew and nothing else. The CLI auto-detects an existing Chrome, Brave, or Playwright/Puppeteer install if you have one, and can attach to a running Chrome via CDP, use the Lightpanda or Obscura engines, drive Mobile Safari in the iOS Simulator, or hand off to cloud browser providers like Browserbase or Browserless — which charge their own rates and need their own keys.

    Beyond the basic loop, there are more than 50 commands: navigation and reading, clicking and typing and scrolling, waiting, screenshots, PDFs, video recording, cookies and storage, network interception and mocking, tabs and frames, console and error inspection, React and Web Vitals tooling, and sessions with an auth vault. It can run an MCP server with agent-browser mcp — 29 tools in the default core profile, 156 with --tools all — and it ships version-matched agent skills you can install with npx skills add vercel-labs/agent-browser. Headless is the default; the daemon closes a headless browser after an hour without commands, while headed browsers are exempt from the timeout.

    Why it took off

    The number that explains the star count is a token count. A snapshot runs about 200–400 tokens, against roughly 3,000–5,000 for a full DOM dump — that’s the project’s own figure, not an independent test, but the direction is what matters, and independent users confirm the effect. Pulumi ran a self-verification test where six scenarios used about 5,500 characters through agent-browser versus about 31,000 with Playwright MCP. When every token is billed, a browser that talks in hundreds of tokens instead of thousands changes what an agent can afford to check.

    That self-verification workflow is the use case that made it spread: the agent builds a UI, opens it in a real browser, clicks through it, screenshots it, and fixes what it finds — without a human in the middle. Exploratory testing, form filling, screenshots, and scraping follow from the same loop. Around 2.5 million weekly npm downloads, per a live tracker checked November 8, suggest it’s well past the early-adopter stage. There are 191 contributors and about 1,000 projects using it, per the repo’s own card.

    The part the README doesn’t shout about

    Here’s where the honest picture gets complicated. Every security control in agent-browser is off by default. Domain allowlists, action policies, confirmation prompts, and content boundaries all have to be explicitly enabled — with flags like --allowed-domains, --action-policy, --confirm-actions, and --content-boundaries. An independent review graded the tool a B and put it bluntly: all the guardrails are opt-in. Releases 0.39.3 through 0.41.0, shipped October 25–28, fixed allowlist overrides and saved tokens being exposed to page scripts — with no security advisory published. That’s the kind of fix you want to know about before you hand an agent a browser and walk away.

    Two more practical risks come from independent testing rather than the docs. The default unnamed session is shared with every other agent on the machine and persists across conversations, so one agent can end up driving another agent’s page. And the WebMCP feature is experimental — page-provided tool descriptions are untrusted data, and an agent must not follow instructions it finds in page content. That’s a real attack surface when the agent is browsing arbitrary sites.

    There’s also a reliability caveat worth internalizing: in one controlled test, every command reported success while the setting being changed never actually changed. A click and a screenshot are not proof the outcome stuck. If your agent is verifying its own work, verify the verification — check the result independently, at least until you trust the loop. And a note for readers who’ll point this at other people’s sites: driving a browser as an agent can violate some sites’ terms of service and bot policies. The tool imposes no such limit by default, so the judgment call is yours.

    Who should install it, and who should wait

    Install it if you build with coding agents and you’re tired of being the agent’s eyes. The two-command setup, the MCP server, and the skills integration mean it slots into Claude Code or Cursor workflows with almost no configuration, and the token savings are real enough to change how often your agent checks its work. It’s also the right tool if you want an agent to do exploratory testing or form-filling that Playwright scripts would make tedious.

    Wait — or install it with the guardrails on — if you’re going to point it at anything sensitive. Turn on the domain allowlist, require confirmations for consequential actions, and give each agent its own named session instead of sharing the default. The tool is ten months old and still on 0.x releases, so expect rough edges and read the changelog before upgrading. And if you need Firefox or WebKit support, don’t assume it exists: the docs list Chrome for Testing, the Lightpanda and Obscura engines, Mobile Safari via the iOS Simulator, and cloud providers — nothing else.

    Agent-browser is the kind of tool that looks small and turns out to be load-bearing: a browser reduced to text, priced at free, with the safety left as homework. That combination explains both the 47,000 stars and the caveats. Install it, use it, and read the security flags before you let it loose.

    Featured image: vercel-labs/agent-browser GitHub repo header. Screenshot: github.com/vercel-labs/agent-browser.

    Also today: ChatGPT Images 2.6 adds looping GIFs — and quietly raises the cost of cheap images and Gemini Omni 1.2 Flash goes GA with 15-second clips and a 30% price cut. For more on the agent-skills ecosystem, see our Google Skills and Cloudflare security audit skill coverage.