build-on-agent-native
Build an application on Builder.io's open-source Agent-Native framework (@agent-native/core), where the agent acts inside the app as a peer to the UI, sharing one set of actions and one database with the interface. Covers actions as the single source of truth, SQL-backed shared state, real-time sync, context-awareness, agent-to-agent calls, automations, the skills convention, and the CLI and template workflow. Use when someone says "build an agent-native app", "use the agent-native framework", "defineAction", "@agent-native/core", "clone an agent-native template", "make the agent a peer to my UI", or "an app where the agent and the UI call the same actions". Do NOT use for authoring generic SKILL.md files (use skill-creator), a standalone MCP server unrelated to this framework, or plain Next.js/React scaffolding with no agent runtime.
- License 许可
- MIT
- 最近更新
- 2026-10-14
- Stars
- ★ 25
- Forks
- 3
01 前言 Front Matter
- name
- build-on-agent-native
- metadata
- { "title": "Build on Agent-Native" }
- description
- Build an application on Builder.io's open-source Agent-Native framework (@agent-native/core), where the agent acts inside the app as a peer to the UI, sharing one set of actions and one database with the interface. Covers actions as the single source of truth, SQL-backed shared state, real-time sync, context-awareness, agent-to-agent calls, automations, the skills convention, and the CLI and template workflow. Use when someone says "build an agent-native app", "use the agent-native framework", "defineAction", "@agent-native/core", "clone an agent-native template", "make the agent a peer to my UI", or "an app where the agent and the UI call the same actions". Do NOT use for authoring generic SKILL.md files (use skill-creator), a standalone MCP server unrelated to this framework, or plain Next.js/React scaffolding with no agent runtime.
03 SKILL.md 正文
Build on Agent-Native
Agent-Native (open-source, MIT, by Builder.io - @agent-native/core) is a framework for apps where the agent acts inside the product, not in a chat box beside it. The agent and the UI are equal citizens of one system: the same action that a button calls, the agent calls as a tool, over the same database and shared state. Use this skill to build on it correctly instead of bolting a chatbot onto a normal app.
When to reach for it
Choose Agent-Native when the agent needs to do real work in the product - read and mutate app data, edit the same document a human is editing, coordinate with other agents - and you want one implementation serving UI, agent, HTTP, MCP, A2A, and CLI. If you only need a chat assistant next to an otherwise-normal app, you do not need this framework; say so.
Core primitives
Actions are the single source of truth. Define each operation once with defineAction (a Zod schema plus a run function). That one definition is callable from the agent as a tool, from the UI via useActionQuery / useActionMutation, and from HTTP, MCP, A2A, and the CLI (pnpm action <name>). Do not add /api/* pass-through routes whose only job is to call an action - call the action directly.
Keep the action surface small and orthogonal. Every agent-exposed action is a tool in the model's context window, and more tools degrade tool-selection quality - past roughly 15-20 agent-visible tools, expect noticeably worse selection, so consolidate before you get there. Prefer one patch-style update-<thing> over many per-field actions (an app exposing 40 per-field setters where 5 patch actions would do is the canonical smell). Hide UI-only or programmatic actions from the model with agentTool: false (still callable from the UI/HTTP, just not a tool the agent sees). Note that agentTool: false (hidden from the model entirely) is not toolCallable: false (blocks only the sandboxed extension iframe bridge) - use the latter for high-blast-radius operations, not for trimming the tool list.
SQL-backed shared state. Bring your own Drizzle-supported SQL database and a Nitro-compatible host. One database, one state - changes from the agent or the UI show up instantly on the other via real-time sync. This is what makes human-and-agent multiplayer editing work.
Context-awareness. The agent knows what the user is looking at. Surface UI state to it deliberately so "summarize this" and Cmd+I-style "do this to the selection" work.
Agent-to-agent (A2A) and external agents. Agents tag and call other agents over A2A; the framework also speaks MCP (as server and via MCP-apps). Reach for these for cross-app coordination rather than hardcoding integrations.
Automations and recurring jobs. Scheduled and triggered work runs through the framework's automations/jobs primitives, not ad-hoc cron glued on the side.
The skills convention. Agent instructions live as SKILL.md files under .agents/skills/. Author them with trigger-precise descriptions and imperative bodies (see the skills-guide and writing-agent-instructions docs).
Start from a template, don't scaffold
Each official template is a complete, free, open-source SaaS app you clone and own - not a thin scaffold. Pick the closest one and customize: Calendar, Content (MDX), Plans, Mail, Chat, Forms, Slides, Videos, Clips, Brain, Analytics, Design, Dispatch, and more. Starting from the nearest template saves you the wiring and shows the conventions in context.
Read version-matched docs - do not trust memory
The framework moves; a generated app may be on a different version than public docs or model memory. The installed package is the source that matches the app in front of you. From a generated app directory:
pnpm action docs-search --query "<feature>" # search
pnpm action docs-search --slug <slug> # read one doc
pnpm action docs-search --list # list slugs
Useful slugs: actions, client, database, authentication, security, sharing, context-awareness, automations, recurring-jobs, a2a-protocol, external-agents, mcp-protocol, mcp-apps, skills-guide, writing-agent-instructions. If the action runner is unavailable, read node_modules/@agent-native/core/docs/AGENTS.md and the files under docs/content/ directly. Confirm any non-trivial API against these before implementing.
Deliverable
Produce a working Agent-Native app (or feature within one) consisting of:
- The action layer - each operation defined once with
defineAction(Zod schema +run), with agent visibility deliberately set per action (agentTool/toolCallable) and the agent-visible tool count kept small. - The UI wired through the same actions - components using
useActionQuery/useActionMutation, with zero/api/*wrapper routes whose only job is to call an action. - The database schema - Drizzle models backing the shared state that both the agent and UI mutate, with real-time sync verified in both directions.
- Agent instructions -
SKILL.mdfiles under.agents/skills/covering the app's domain conventions, with trigger-precise descriptions. - A note of which template it started from and which version-matched doc slugs were consulted for every non-trivial API used.
Quality bar
- Every operation exists exactly once as an action; the UI, agent, HTTP, and CLI all route through it - zero pass-through API wrappers.
- The agent-visible tool list stays under roughly 15-20 actions; per-field setters are consolidated into patch-style actions.
- A change made by the agent appears in the open UI without a refresh, and vice versa.
- Every non-trivial framework API in the code was confirmed against the installed package's docs (
docs-search), not memory. - High-blast-radius operations are gated with
toolCallable: false, not merely hidden withagentTool: false.
Don't
- Don't add REST/API routes that merely wrap an action - call the action.
- Don't mint a new read action for every query shape; reach for a generic query /
provider-apiescape hatch first. - Don't expose UI-only or high-blast-radius actions to the model - use
agentTool: false/toolCallable: falseappropriately. - Don't answer framework API questions from memory when version-matched package docs are present -
docs-searchfirst. - Don't use this skill to author standalone SKILL.md files (skill-creator) or to build an unrelated MCP server (MCP-builder).
04 同仓库更多 Skills
有氧运动计划
zone-2-cardio-plan
当有人要求制定稳态有氧训练计划、进行有氧基础训练或达到第二区间、安排轻松或耐力型的每周有氧训练、按心率区间训练,或提高静息心率、最大摄氧量或耐力时,可以使用此方案。该方案构建了一个包含训练计划结构、训练方式选择和进度安排的心率区间有氧训练模块。本方案仅提供一般健身指导,不构成医疗建议。请勿用于设计力量或举重训练计划(请使用力量训练计划)、高强度间歇训练 (HIIT) 或循环训练(请使用体能训练和 HIIT 计划),或灵活性/柔韧性训练(请使用灵活性训练计划)。
youtube-script-writer
Writes retention-engineered long-form YouTube scripts on a hook/body/payoff architecture - a first-30-seconds hook that survives the retention cliff, a beat-sheet body with mini-hooks and bridges, timed pattern interrupts, and a payoff that over-delivers - with B-roll and editing cues marked inline. Use when someone says "script my next video", "my retention graph dies at the start", "tighten this draft", or "outline a video on X". Do NOT use for the 3-second opener of TikTok, Reels, or Shorts - use video-hook-writer instead; do NOT use for spoken voiceover synced to on-screen tutorial actions - use narration-script instead; do NOT use for a sales demo built on a buyer's discovery notes - use demo-script instead; do NOT use to design the thumbnail and title - use thumbnail-concept instead.
win-back-campaign
Designs segmented win-back email sequences for dormant users - dormancy tiers, a three-beat sequence with a single proportional incentive, and a suppression rule - and measures success by re-activation, not opens. Use when someone says "our users went quiet", "design a win-back campaign", "how do I re-engage lapsed customers", "should we email people who haven't logged in for months", or lifecycle messaging has stopped landing with a lapsed segment. Do NOT use for recovering an unfinished checkout - use abandoned-cart-sequence instead. Do NOT use for diagnosing and fixing why active customers cancel - use churn-reduction instead. Do NOT use for building always-on onboarding or nurture flows - use email-drip-builder instead.
wikipedia-style
Writes neutral, verifiable, encyclopedic prose following Wikipedia's core content policies and manual of style - NPOV, inline citations, notability-backed claims, and a strict ban on promotional language. Use when someone asks "write this like a Wikipedia article", "draft a Wikipedia page for this company or person", "make this neutral and encyclopedic", or "why does my article draft keep getting rejected". Do NOT use for persuasive or opinion writing - use op-ed-writer instead; for thesis-driven academic papers, use academic-essay; for verifying claims in existing text, use fact-checker.
whitepapers
Structures and writes authoritative B2B whitepapers - a standalone executive summary, a data-sized problem statement, methodology, evidence-driven findings, recommendations, and a soft call to action - flagging every claim that needs a real citation. Use when a marketer asks "write a whitepaper on this topic", "turn our research into a lead-gen asset", "make this credible enough for executives", or a draft reads like a product pitch instead of analysis. Do NOT use for customer-story-driven proof - use case-study-builder instead; for policy audiences, use policy-brief.
white-space-analysis
Finds unmet market gaps by ranking jobs-to-be-done on importance versus satisfaction, overlaying them against current solutions and workarounds, and validating that each gap is real, winnable, and worth winning. Use when someone asks "where are the gaps in this market", "what's underserved here", "where should we play next", or is hunting for product, feature, or market-entry opportunities. Do NOT use for profiling competitors and building battle cards - use competitive-intelligence instead; for putting a dollar figure on an identified opportunity - use market-sizing instead; for extracting jobs-to-be-done from raw customer interviews - use jtbd-extractor instead.