개발자를 위한 Agent UI

앱은 AI가 만들고, 코드는 원할 때 언제든 여세요. 모든 앱에는 전용 MCP 서버가 함께 제공되며, CLI로 앱을 에디터로 가져와 코딩 어시스턴트와 작업하고 다시 게시할 수 있습니다.

npm install -g @agentuiai/cli

Node.js 22 이상이 필요합니다.

$ agentui auth login
✓ Signed in as you@acme.com
$ agentui project sync <workflow-id>
✓ entities/ pages/ components/ functions/ mcp/
$ claude "add a reorder button to the stock page"
$ agentui validate --all
✓ No problems found
$ agentui project push --build
✓ Build finished · development
함께 쓰는 도구
  • Claude Code
  • Cursor
  • Codex
  • VS Code Copilot
  • ChatGPT
  • Windsurf
기본 제공

모든 앱에 전용 MCP 서버가 있습니다.

켜기만 하면 Claude, ChatGPT, Cursor 등 모든 MCP 클라이언트가 사용자를 대신해 앱 데이터를 조회하고 변경할 수 있습니다. 그 사람에게 허용된 데이터만 볼 수 있습니다. 호스팅할 서버도, 작성할 코드도 없습니다.

  • 모든 테이블에 list, get, count, create, update, delete 데이터 도구 자동 생성
  • 환경마다 주소 하나, 직접 켜기 전까지는 꺼져 있음
  • 읽기 전용 또는 읽기·쓰기 연결, 언제든 해제 가능
  • 모든 호출마다 Data Security 규칙 확인
  • 어시스턴트에게 업무 절차를 알려 주는 가이드와 맞춤 도구
MCP 켜는 방법
  • data_orders_list
  • data_orders_get
  • data_orders_count
  • data_orders_create
  • data_orders_update
  • data_orders_delete
  • tool_summarize_overdue_invoices

앱은 그냥 폴더입니다

앱을 동기화하면 실제 코드를 받습니다. JSON 형식의 데이터 테이블, 페이지, 컴포넌트, 백엔드 함수, 맞춤 AI 도구까지. AGENTS.md와 CLAUDE.md가 코딩 어시스턴트에게 Agent UI 앱의 구조를 알려 줍니다.

  • 어떤 에디터에서든 수정
  • 플랫폼과 같은 검증기로 확인
  • 명령어 하나로 게시하고 다시 빌드
acme-stock/
entities/ JSON 형식의 데이터 테이블
pages/
components/
functions/ → /api/<name>
mcp/ 맞춤 AI 도구
Layout.jsx
AGENTS.md
.claude/CLAUDE.md

수정 루프

파일을 직접 바꾸거나 어시스턴트에게 맡기세요. 확인하고, 비교하고, 원하는 환경에 게시하세요. 환경마다 별도의 데이터베이스가 있습니다.

  • agentui validate --all
  • agentui project diff
  • agentui project push --build
$ agentui project diff
  M pages/Stock.jsx
  A functions/reorder.js
$ agentui project push --build
✓ Uploaded 2 files
✓ Build finished · development

MCP로 어시스턴트를 연결하세요

Agent UI의 MCP 서버로 Claude, ChatGPT, Cursor, VS Code에서 앱과 테이블을 만들고, 레코드를 읽고 수정하고, 앱의 업무 절차를 실행할 수 있습니다. 항상 로그인한 사람의 권한으로 작동합니다. 설치할 것도, 복사할 API 키도 없습니다.

Agent UI Apps

데이터 전용 앱을 만들고, 테이블 구조를 잡고, 레코드를 최신으로 유지하세요.

https://api.agentui.ai/mcp/apps

내 앱

환경마다 주소 하나, 앱의 AI 어시스턴트 패널에서 복사하세요. 로그인한 사용자에게 허용된 것만 봅니다.

켜는 방법 →
$ claude mcp add --transport http agentui-apps https://api.agentui.ai/mcp/apps

이렇게 요청해 보세요

  • Visits 테이블이 있는 Field Visits라는 데이터 앱을 만들어 줘
  • planned, done, cancelled 값만 가질 수 있는 status 필드를 추가해 줘
  • 붙여 넣은 스프레드시트에서 이 40개 행을 가져와 줘
  • 500을 넘는 미처리 주문을 모두 보여 줘
  • 지난달 미처리 주문을 지연으로 표시해 줘
  • 이 고객의 연체된 청구서를 요약해 줘

맞춤 MCP 도구

연체 청구서 요약, 티켓 종료 후 담당자 알림처럼 앱의 업무 절차를 어시스턴트에게 알려 주세요. 앱 채팅에서 요청하면 Agent UI가 앱의 mcp 폴더에 도구 파일을 작성합니다.

  • 로그인한 앱 사용자 권한으로 실행
  • Data Security 규칙은 그대로 적용
  • 도구마다 켜고 끄기 가능
  • 파일은 Agent UI가 작성
import { defineTool } from "@/mcp";
import { Invoice } from "@/entities/Invoice";

export default defineTool({
  description: "Summarize a customer's overdue invoices",
  input: { /* JSON Schema: customerId */ },
  annotations: { readOnlyHint: true },

  async run({ customerId }) {
    const rows = await Invoice.filter({
      customer_id: customerId,
      status: "overdue",
    });
    return { count: rows.length };
  },
});

백엔드 함수, API, 앱 신호

functions/ 안의 모든 파일은 /api/<name>으로 호출할 수 있습니다. Agent UI가 아직 지원하지 않는 API를 연결하고, 키는 시크릿에 보관하고, console.human으로 실행 중인 앱에서 빌드 채팅으로 바로 메시지를 보내세요.

  • CLI에서 함수를 테스트하고 로그 확인
  • 시크릿 값은 서버에만 보관
  • 개발, 스테이징, 프로덕션 환경 분리
import { Stock } from "@/entities/Stock";

export default async function (ctx) {
  const item = await Stock.get(ctx.body.id);
  await Stock.update(item.key, { reorder: true });

  return { ok: true };
}

개발자 도구

CLI를 설치하고 첫 앱을 가져오세요.

npm install -g @agentuiai/cli무료, MIT 라이선스. Node.js 22 이상이 필요합니다.

CLI 문서 읽기무료로 만들기 시작

만들고 싶은 도구로 찾아보세요

아래의 모든 도구는 이미 가진 데이터 위에서 작동합니다. 역할별 접근 권한, 전체 감사 기록, 그리고 실제 담당자가 함께합니다.

모든 활용 사례 보기 →