Lets an AI client create, edit, and manage dynamic forms through a shared action layer.
Juga dikenal sebagai BuilderIO/agent-native, agent-native-forms
- Stars
- 7.696
- Tools
- —
- Unduhan, 30 hari
- —
- Versi terbaru
- 1.0.0
- Commit terakhir
- 13 Nov 2026
- Lisensi
- MIT
Apa itu Agent-Native Forms MCP?
Agent-Native Forms adalah MCP server. Lets an AI client create, edit, and manage dynamic forms through a shared action layer.
Ringkasan dibuat dari README proyek
Tentang Agent-Native Forms MCP server
Building autonomous agents that interact with a purpose-built user interface is the core function of this TypeScript framework. Developers can define capabilities as shared actions that serve simultaneously as tools for an AI client and as callable functions within a UI. This approach ensures that both the agent and the human user operate on the same validation, permissions, and implementation layers.
Users can manage their work through a variety of interfaces including an agent chat, a command line interface, and HTTP endpoints. The framework provides a PostgreSQL backend for production and PGlite for local development. It includes built-in features for authentication, permissions, and persistent memory to give agents reusable expertise. By connecting an LLM to a shared data layer, the work performed by an agent becomes immediately visible and editable within the application interface.
Apa yang bisa Anda lakukan dengannya
- 1Visual application editingModify a running application's interface on a canvas instead of using text prompts for every change.
- 2Manage shared application stateEnsure an AI agent understands the current context of the user interface like the active view or selected record.
- 3Automate agentic workflowsTrigger agent tasks based on specific events or on a set schedule.
Ditulis berdasarkan README proyek. Setiap use case diperiksa terhadap kutipan dari README tersebut.
Cara menginstal Agent-Native Forms MCP
Format diverifikasi 10 Nov 2026Instal Agent-Native Forms MCP di Claude Code
$ claude mcp add --transport http agent-native-forms https://forms.agent-native.com/mcpInstal Agent-Native Forms MCP di Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"agent-native-forms": {
"url": "https://forms.agent-native.com/mcp"
}
}
}Instal Agent-Native Forms MCP di VS Code
.vscode/mcp.json
{
"servers": {
"agent-native-forms": {
"type": "http",
"url": "https://forms.agent-native.com/mcp"
}
}
}Instal Agent-Native Forms MCP di Codex
~/.codex/config.toml
[mcp_servers.agent-native-forms] url = "https://forms.agent-native.com/mcp"
Instal Agent-Native Forms MCP di Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"agent-native-forms": {
"httpUrl": "https://forms.agent-native.com/mcp"
}
}
}Pengecekan otomatis
Berjalan 12 Nov 2026Laporan lengkap →Lolos checks otomatis kami. Ini bukan audit keamanan: baca kodenya dan berikan server akses paling terbatas yang dibutuhkannya. Cara kerja checks
- Source repository terhubung dan dapat dijangkauLolos
- Lisensi open source (OSI)Lolos
- Ada commit atau release dalam satu tahun terakhirLolos
- Nama package tidak mirip dengan package populerTidak diperiksa
- Remote endpoint menggunakan HTTPSLolos
- Tools yang bersifat destruktif telah diberi labelTidak diperiksa
- Tidak ada instruksi tersembunyi untuk modelLolos
- Tidak ada advisory kritis di paket maupun dependensinyaTidak diperiksa
README
Lihat di GitHubAgent-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. For a source-to-answer architecture example, see Brain’s visual overview.
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
Want to send a change back? Start with CONTRIBUTING.md. DEVELOPMENT.md covers local setup, workspace structure, and guard scripts.
License
MIT
Pertanyaan tentang Agent-Native Forms MCP
Bagaimana cara menambahkan Agent-Native Forms MCP ke Claude Code?
Jalankan claude mcp add --transport http agent-native-forms https://forms.agent-native.com/mcp di terminal Anda. Tambahkan --scope user agar tersedia di semua proyek.
Bagaimana cara menambahkan Agent-Native Forms MCP ke Cursor?
Buka ~/.cursor/mcp.json dan tambahkan server di bawah mcpServers, menggunakan config Cursor yang ditunjukkan di bagian instalasi di atas.
What does Agent-Native Forms let an agent do?
The agent works through the same action layer as the UI to create, edit, and manage forms, giving people familiar ways to inspect, edit, approve, and share its work.
How do the agent and the UI share capabilities?
Each capability is defined once as an action; the agent calls it as a tool and the UI calls it from code, using the same validation, permissions, and implementation.
Does the agent interact by clicking through the UI?
No, it works through the same shared action layer the UI uses rather than driving the interface.
What backend does it use?
It uses PostgreSQL in production and PGlite for local development on any Nitro-compatible host.
What language and framework is it built with?
It is an open-source TypeScript framework for building agents that pair autonomous work with a purpose-built UI.