VerifiedPlugin
builderio-builder-skil…
Small, composable skills for your favorite agent.
24 skills1 command+2+2+2+14.5k
@builderioAI & Agents
Plugin
agent-native
Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Define each capability once as an action: the agent uses it as a tool, and the UI calls it from code.
Plugin Signal85/100Strong
maintained100
capable58
documented100
adopted82
Install on Claude Code
> /plugin marketplace add builderio/agent-native> /plugin install agent-native@agent-native-apps
Stats
7,084
Stars
643
Forks
Active
Maintenance
TypeScript
Language
just now
Last commit
6mo ago
Created
9h ago
Added
Repo: builderio/agent-native
What's inside
Skill(10 skills)
/anOpen and operate Agent-Native workspace apps through Dispatch MCP, with inline app surfaces, browser-session authentication, and current screen state./assetsUse Agent-Native Assets for image and video generation requests, brand-safe asset search/export, and human-in-the-loop asset selection through the hosted Assets MCP app. Prefer this over generic image tools when installed.
Command(3 commands)
/sidecarSpawn a read-only sidecar subagent to investigate something in this checkout without editing files, moving branches, or touching GitHub./visual-planCreate an interactive Agent-Native visual plan for the current task./visual-recapCreate an interactive Agent-Native visual recap for a PR, branch, commit, or diff.
README
Agent-Native
Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Define each capability once as an action: the agent uses it as a tool, and the UI calls it from code.
Quick start
npx --yes @agent-native/core@latest create my-agent --standalone --template chat
Follow the getting started guide for a full intro to the framework.
Why build agents with UIs?
Coding agents work with more than a text box. Their environment provides context, tools, files, tests, and previews that make their capabilities and results visible.
Knowledge work needs that same kind of environment. A UI shows what an agent can do and gives people familiar ways to inspect, edit, approve, and share its work.
How Agent-Native works
- Shared actions. The agent calls each capability as a tool, and the UI calls it from code. Both paths use the same validation, permissions, and implementation.
- Shared data. Work done by the agent appears in the UI, and work done in the UI is available to the agent.
- Shared application state. The agent receives relevant UI state, such as the current page, selected record, or active view.
The agent does not click through the UI. It works through the same action layer as the UI.
Example: a shared action
Create actions/hello.ts:
import { defineAction } from "@agent-native/core/action";
import { z } from "zod";
// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
export default defineAction({
description: "Return a friendly greeting.",
schema: z.object({
name: z.string().default("world").describe("Name to greet"),
}),
http: { method: "GET" },
run: async ({ name }) => {
return { message: `Hello, ${name}!` };
},
});
The agent receives hello as a tool. React calls the same function with useActionQuery("hello", { name: "Alex" }). Agent-Native also exposes it through HTTP, MCP, A2A, and the CLI.
Included
- Agent chat: Let people delegate work, ask questions, and review results in the same UI.
- Authentication and permissions: Control who can access and change shared work.
- Skills and memory: Give agents reusable expertise and persistent context.
- Automations: Run agent work on schedules or events.
- Agent teams: Delegate work to specialist agents in the same workspace or across connected agents.
- PostgreSQL backend: Use PostgreSQL in production and PGlite for local development on any Nitro-compatible host.
Example: edit a running app visually
Use /visual-edit in Claude Code to edit a running app on a canvas instead of
prompting for each small UI nudge. Compare live pages together, then ask Claude
to apply the chosen edits to your source. For example:
/visual-edit the onboarding flow, plus home at every breakpoint
Review the onboarding screens alongside Home at desktop, tablet, and mobile sizes, adjust a button's color or spacing directly, then ask Claude to apply the pending edits to your source. See the Visual Edit guide for the full walkthrough and sharing details.
Bring your LLM, SQL database, tools, and infrastructure. Everything you build stays yours.
See Agent-Native in action:
https://github.com/user-attachments/assets/ef51644b-6506-46d8-8083-0af7b7e5b65c
Open-source agents
Start from one of these agents or use it as an example for your own.
Clips
Record and understand meetings, screens, and voice notes.
Design
Generate and refine interactive designs.
Slides
Create and edit on-brand presentations.
Analytics
Ask questions of your data and build dashboards.
Calendar
Find time, schedule events, and manage bookings.
Prioritize email, draft replies, and follow up.
Assets
Create and organize on-brand media.
Content
Draft, organize, and publish content.
Plans
Create and review visual plans with diagrams, wireframes, and prototypes.
Explore the full app gallery, or start with the framework guide.
Documentation and community
- Read the documentation.
- Join Discord to ask questions, share what you're building, and get help.
Contributing
Working on this repository itself? See DEVELOPMENT.md for local setup, workspace structure, and guard scripts.
License
MIT
File tree
Showing a partial view of a very large repo.
More plugins by @builderio.
View @builderio’s profile@builderioFAQ
agent-native is a Claude Code plugin with 10 hand-picked skills for ai & agents work, indexed on Flowy. Install it with the command on its page. It includes an, assets, content. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is agent-native?
- Agent-Native is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI. Define each capability once as an action: the agent uses it as a tool, and the UI calls it from code.
- How do I install agent-native?
- Run these in Claude Code: /plugin marketplace add builderio/agent-native then /plugin install agent-native@agent-native-apps. Then prompt normally.
- Does agent-native auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is agent-native free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it