지속 가능한 스레드를 지원하는 채팅 중심 앱에서 AI agent가 공유 액션을 실행하고 사용자와 대화할 수 있도록 합니다.
다른 이름 BuilderIO/agent-native, agent-native-chat
- 스타
- 7,707
- Tools
- —
- 다운로드, 30일
- —
- 최신 버전
- 1.0.0
- 마지막 커밋
- 2026년 11월 15일
- 라이선스
- MIT
Agent-Native Chat MCP란?
Agent-Native Chat은(는) MCP server입니다. 지속 가능한 스레드를 지원하는 채팅 중심 앱에서 AI agent가 공유 액션을 실행하고 사용자와 대화할 수 있도록 합니다.
프로젝트 README에서 생성된 요약
Agent-Native Chat MCP server 정보
이 오픈 소스 TypeScript 프레임워크를 사용하면 자율적인 작업과 목적에 맞게 설계된 인터페이스를 결합한 agent를 구축할 수 있습니다. 개발자는 기능을 공유 액션으로 정의할 수 있으며, 이 액션은 AI agent를 위한 tool인 동시에 사용자 인터페이스 내에서 호출 가능한 코드로 동시에 작동합니다. 이를 통해 agent가 수행하는 모든 작업은 사용자에게 표시되며, UI에서 수행된 모든 수동 변경 사항은 공유 데이터 레이어를 통해 agent가 즉시 사용할 수 있습니다.
개발자는 PGlite를 사용하여 로컬에서 구현하거나 PostgreSQL 백엔드를 사용하여 프로덕션에 배포할 수 있습니다. 이 프레임워크는 agent에게 재사용 가능한 전문 지식을 부여하기 위해 인증, 권한 및 지속성 메모리 기능을 포함합니다. 또한 agent 팀을 지원하여 워크스페이스 전반에서 전문가들이 협업할 수 있도록 합니다. UI, HTTP, MCP 및 CLI에 동일한 액션 레이어를 사용함으로써 시스템은 모든 애플리케이션 로직과 상태에 대한 단일 진실 공급원(single source of truth)을 유지합니다.
활용 사례
- 1공유 애플리케이션 상태 유지agent가 사용자가 인터페이스에서 현재 보고 있는 특정 페이지나 레코드를 이해하도록 합니다.
- 2반복적인 agent 작업 자동화정해진 일정이나 특정 트리거에 따라 agent가 특정 임무를 수행하는 워크플로우를 설정합니다.
- 3시각적 애플리케이션 편집 수행채팅 인터페이스를 사용하여 캔버스에 실행 중인 애플리케이션의 특정 디자인 변경을 요청합니다.
프로젝트의 README를 바탕으로 작성되었습니다. 모든 활용 사례는 해당 내용의 인용문과 대조하여 확인합니다.
Agent-Native Chat MCP 설치 방법
형식 확인: 2026년 11월 10일Cursor에 추가Goose에 추가Claude Code에 Agent-Native Chat MCP 설치
$ claude mcp add --transport http agent-native-chat https://starter.agent-native.com/mcpCursor에 Agent-Native Chat MCP 설치
~/.cursor/mcp.json
{
"mcpServers": {
"agent-native-chat": {
"url": "https://starter.agent-native.com/mcp"
}
}
}VS Code에 Agent-Native Chat MCP 설치
.vscode/mcp.json
{
"servers": {
"agent-native-chat": {
"type": "http",
"url": "https://starter.agent-native.com/mcp"
}
}
}VS Code CLI에 Agent-Native Chat MCP 설치
$ code --add-mcp '{"name":"agent-native-chat","type":"http","url":"https://starter.agent-native.com/mcp"}'Codex에 Agent-Native Chat MCP 설치
$ codex mcp add agent-native-chat --url https://starter.agent-native.com/mcpCodex config.toml에 Agent-Native Chat MCP 설치
~/.codex/config.toml
[mcp_servers.agent-native-chat] url = "https://starter.agent-native.com/mcp"
Gemini CLI에 Agent-Native Chat MCP 설치
$ gemini mcp add -s user --transport http agent-native-chat https://starter.agent-native.com/mcpGemini settings.json에 Agent-Native Chat MCP 설치
~/.gemini/settings.json
{
"mcpServers": {
"agent-native-chat": {
"url": "https://starter.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 Chat MCP 질문
Agent-Native Chat MCP를 Claude Code에 추가하려면 어떻게 하나요?
터미널에서 claude mcp add --transport http agent-native-chat https://starter.agent-native.com/mcp를 실행합니다. 모든 프로젝트에서 사용할 수 있게 하려면 --scope user를 추가합니다.
Agent-Native Chat MCP를 Cursor에 추가하려면 어떻게 하나요?
~/.cursor/mcp.json를 열고 mcpServers 아래에 서버를 추가합니다. 위 설치 섹션에 표시된 Cursor 구성을 사용합니다.
Agent-Native 채팅 앱은 어떻게 만드나요?
chat 템플릿과 함께 create 명령어를 실행하여 독립형 프로젝트를 구성할 수 있습니다.
액션이 agent와 UI 모두에서 어떻게 작동하나요?
defineAction으로 액션을 한 번만 정의하면, agent는 이를 tool로 수신하고 React는 동일한 함수를 호출합니다.
Agent-Native는 어떤 데이터베이스를 사용하나요?
프로덕션 환경에서는 PostgreSQL을 사용하며, 로컬 개발 시에는 PGlite를 사용합니다.