AI 클라이언트가 전용 agent UI를 통해 로컬 MDX 문서를 편집하고 공유된 action을 실행할 수 있게 합니다.
다른 이름 BuilderIO/agent-native, agent-native-content
- 스타
- 7,707
- Tools
- —
- 다운로드, 30일
- —
- 최신 버전
- 1.0.0
- 마지막 커밋
- 2026년 11월 15일
- 라이선스
- MIT
Agent-Native MCP란?
Agent-Native은(는) MCP server입니다. AI 클라이언트가 전용 agent UI를 통해 로컬 MDX 문서를 편집하고 공유된 action을 실행할 수 있게 합니다.
프로젝트 README에서 생성된 요약
Agent-Native MCP server 정보
전용 사용자 인터페이스를 갖춘 자율 agent를 구축하는 개발자는 이 TypeScript framework를 사용하여 AI 도구와 시각적 애플리케이션 레이어 사이의 간극을 메울 수 있습니다. 기능을 공유된 action으로 한 번만 정의하면, agent를 위한 도구이자 UI 내에서 호출 가능한 함수로 작동합니다. 이를 통해 사람 사용자와 AI가 동일한 validation, 권한 및 구현 로직을 사용하여 작동하도록 보장합니다.
시스템은 공유 데이터와 애플리케이션 상태를 유지하므로 agent가 수행한 작업이 UI에 즉시 표시되며, 인터페이스에서의 수동 변경 사항을 agent가 접근할 수 있습니다. 프로덕션 환경을 위한 PostgreSQL 백엔드와 로컬 개발을 위한 PGlite를 지원합니다. 이 framework를 사용하면 콘텐츠 관리, 인터페이스 디자인, 데이터 분석과 같은 작업을 위한 특화된 agent를 구축하는 동시에, 사용자에게 agent의 작업을 검토하고 승인할 수 있는 익숙한 방식을 제공할 수 있습니다.
활용 사례
- 1시각적 애플리케이션 편집개발자는 visual edit command를 사용하여 소스 코드에 변경 사항을 적용하기 전에 캔버스에서 버튼 색상이나 간격과 같은 UI 요소를 조정할 수 있습니다.
- 2자동화된 지식 작업사용자는 지속성 메모리와 skills를 사용하여 공유 워크스페이스 내에서 작동하는 전문 agent에게 복잡한 작업을 위임할 수 있습니다.
프로젝트의 README를 바탕으로 작성되었습니다. 모든 활용 사례는 해당 내용의 인용문과 대조하여 확인합니다.
Agent-Native MCP 설치 방법
형식 확인: 2026년 11월 10일Cursor에 추가Goose에 추가Claude Code에 Agent-Native MCP 설치
$ claude mcp add --transport http agent-native-content https://content.agent-native.com/mcpCursor에 Agent-Native MCP 설치
~/.cursor/mcp.json
{
"mcpServers": {
"agent-native-content": {
"url": "https://content.agent-native.com/mcp"
}
}
}VS Code에 Agent-Native MCP 설치
.vscode/mcp.json
{
"servers": {
"agent-native-content": {
"type": "http",
"url": "https://content.agent-native.com/mcp"
}
}
}VS Code CLI에 Agent-Native MCP 설치
$ code --add-mcp '{"name":"agent-native-content","type":"http","url":"https://content.agent-native.com/mcp"}'Codex에 Agent-Native MCP 설치
$ codex mcp add agent-native-content --url https://content.agent-native.com/mcpCodex config.toml에 Agent-Native MCP 설치
~/.codex/config.toml
[mcp_servers.agent-native-content] url = "https://content.agent-native.com/mcp"
Gemini CLI에 Agent-Native MCP 설치
$ gemini mcp add -s user --transport http agent-native-content https://content.agent-native.com/mcpGemini settings.json에 Agent-Native MCP 설치
~/.gemini/settings.json
{
"mcpServers": {
"agent-native-content": {
"url": "https://content.agent-native.com/mcp",
"type": "http"
}
}
}자동 검사
2026년 11월 12일에 실행됨전체 보고서 →자동 검사를 통과했습니다. 이는 보안 감사가 아닙니다. 코드를 직접 읽고 서버에 필요한 최소한의 권한만 부여하십시오. 검사 방식
- 소스 저장소 연결 및 접근 가능통과
- 오픈 소스 라이선스 (OSI)통과
- 최근 1년 내 커밋 또는 릴리스통과
- 패키지 이름이 인기 패키지와 유사하지 않음검사되지 않음
- 원격 엔드포인트가 HTTPS 사용통과
- 파괴적인 도구에 라벨 표시됨검사되지 않음
- 모델에 대한 숨겨진 지침 없음통과
- 패키지 및 해당 종속성에 중요한 보안 권고 없음검사되지 않음
README
GitHub에서 보기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. 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
Agent-Native MCP 질문
Agent-Native MCP를 Claude Code에 추가하려면 어떻게 하나요?
터미널에서 claude mcp add --transport http agent-native-content https://content.agent-native.com/mcp를 실행합니다. 모든 프로젝트에서 사용할 수 있게 하려면 --scope user를 추가합니다.
Agent-Native MCP를 Cursor에 추가하려면 어떻게 하나요?
~/.cursor/mcp.json를 열고 mcpServers 아래에 서버를 추가합니다. 위 설치 섹션에 표시된 Cursor 구성을 사용합니다.
Agent-Native란 무엇인가요?
자율적인 작업과 전용 UI를 결합한 agent를 구축하기 위한 오픈 소스 TypeScript framework입니다. 기능은 agent와 UI가 모두 사용하는 action으로 한 번만 정의하면 됩니다.
agent는 UI와 어떻게 상호작용하나요?
agent가 UI를 직접 클릭하는 방식이 아닙니다. UI와 동일한 action layer를 통해 작동하며, validation, 권한, 구현 로직을 공유합니다.
Agent-Native는 어떤 백엔드 데이터베이스를 사용하나요?
프로덕션 환경에서는 PostgreSQL을 사용하며, Nitro 호환 호스트에서의 로컬 개발에는 PGlite를 사용합니다.
새로운 agent 프로젝트를 어떻게 만드나요?
npx로 create command를 실행하면 chat과 같은 템플릿을 기반으로 프로젝트 스캐폴딩을 수행합니다.
어떤 인터페이스를 통해 action을 노출할 수 있나요?
단일 action 정의를 UI, agent, HTTP, MCP, A2A, CLI를 통해 노출할 수 있습니다.