@agent-native/core 0.84.35 → 0.84.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -51
- package/corpus/core/CHANGELOG.md +12 -0
- package/corpus/core/docs/content/actions.mdx +17 -24
- package/corpus/core/docs/content/agent-surfaces.mdx +59 -56
- package/corpus/core/docs/content/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/faq.mdx +4 -4
- package/corpus/core/docs/content/getting-started.mdx +246 -204
- package/corpus/core/docs/content/key-concepts.mdx +9 -9
- package/corpus/core/docs/content/locales/ar-SA/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/ar-SA/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/ar-SA/getting-started.mdx +148 -214
- package/corpus/core/docs/content/locales/ar-SA/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/ar-SA/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/ar-SA/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/de-DE/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/de-DE/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/de-DE/getting-started.mdx +145 -211
- package/corpus/core/docs/content/locales/de-DE/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/de-DE/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/de-DE/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/es-ES/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/es-ES/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/es-ES/getting-started.mdx +148 -214
- package/corpus/core/docs/content/locales/es-ES/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/es-ES/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/es-ES/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/fr-FR/cloneable-saas.mdx +2 -2
- package/corpus/core/docs/content/locales/fr-FR/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/fr-FR/getting-started.mdx +146 -212
- package/corpus/core/docs/content/locales/fr-FR/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/fr-FR/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/fr-FR/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/hi-IN/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/hi-IN/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/hi-IN/getting-started.mdx +149 -215
- package/corpus/core/docs/content/locales/hi-IN/pure-agent-apps.mdx +8 -13
- package/corpus/core/docs/content/locales/hi-IN/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/hi-IN/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/ja-JP/cloneable-saas.mdx +2 -2
- package/corpus/core/docs/content/locales/ja-JP/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/ja-JP/getting-started.mdx +144 -210
- package/corpus/core/docs/content/locales/ja-JP/pure-agent-apps.mdx +8 -13
- package/corpus/core/docs/content/locales/ja-JP/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/ja-JP/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/ko-KR/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/ko-KR/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/ko-KR/getting-started.mdx +146 -212
- package/corpus/core/docs/content/locales/ko-KR/pure-agent-apps.mdx +8 -13
- package/corpus/core/docs/content/locales/ko-KR/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/ko-KR/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/pt-BR/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/pt-BR/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/pt-BR/getting-started.mdx +145 -211
- package/corpus/core/docs/content/locales/pt-BR/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/pt-BR/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/pt-BR/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/zh-CN/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/zh-CN/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/zh-CN/getting-started.mdx +158 -209
- package/corpus/core/docs/content/locales/zh-CN/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/zh-CN/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/zh-CN/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/locales/zh-TW/cloneable-saas.mdx +3 -3
- package/corpus/core/docs/content/locales/zh-TW/faq.mdx +4 -4
- package/corpus/core/docs/content/locales/zh-TW/getting-started.mdx +158 -212
- package/corpus/core/docs/content/locales/zh-TW/pure-agent-apps.mdx +4 -9
- package/corpus/core/docs/content/locales/zh-TW/template-chat.mdx +2 -2
- package/corpus/core/docs/content/locales/zh-TW/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/native-chat-ui.mdx +17 -32
- package/corpus/core/docs/content/pure-agent-apps.mdx +46 -26
- package/corpus/core/docs/content/template-chat.mdx +8 -8
- package/corpus/core/docs/content/using-your-agent.mdx +2 -2
- package/corpus/core/docs/content/what-is-agent-native.mdx +6 -6
- package/corpus/core/package.json +1 -1
- package/corpus/core/src/cli/skills.ts +7 -9
- package/corpus/core/src/client/MultiTabAssistantChat.tsx +2 -0
- package/corpus/core/src/client/RunStuckBanner.tsx +172 -18
- package/corpus/core/src/client/blocks/library/wireframe-kit.tsx +57 -9
- package/corpus/core/src/client/blocks/library/wireframe.tsx +3 -18
- package/corpus/core/src/client/chat/widgets/builtin-tool-renderers.tsx +28 -32
- package/corpus/core/src/db/schema.ts +5 -0
- package/corpus/core/src/styles/blocks.css +27 -6
- package/corpus/templates/analytics/app/components/layout/Sidebar.tsx +1 -4
- package/corpus/templates/content/actions/list-trashed-content-databases.ts +1 -1
- package/corpus/templates/plan/.agents/skills/visual-plan/references/wireframe.md +7 -9
- package/corpus/templates/plan/.agents/skills/visual-recap/references/wireframe.md +7 -9
- package/dist/cli/skills.d.ts +1 -1
- package/dist/cli/skills.d.ts.map +1 -1
- package/dist/cli/skills.js +7 -9
- package/dist/cli/skills.js.map +1 -1
- package/dist/client/MultiTabAssistantChat.d.ts.map +1 -1
- package/dist/client/MultiTabAssistantChat.js +1 -1
- package/dist/client/MultiTabAssistantChat.js.map +1 -1
- package/dist/client/RunStuckBanner.d.ts +13 -1
- package/dist/client/RunStuckBanner.d.ts.map +1 -1
- package/dist/client/RunStuckBanner.js +123 -16
- package/dist/client/RunStuckBanner.js.map +1 -1
- package/dist/client/blocks/library/wireframe-kit.d.ts +6 -6
- package/dist/client/blocks/library/wireframe-kit.d.ts.map +1 -1
- package/dist/client/blocks/library/wireframe-kit.js +52 -5
- package/dist/client/blocks/library/wireframe-kit.js.map +1 -1
- package/dist/client/blocks/library/wireframe.d.ts.map +1 -1
- package/dist/client/blocks/library/wireframe.js +1 -11
- package/dist/client/blocks/library/wireframe.js.map +1 -1
- package/dist/client/chat/widgets/builtin-tool-renderers.d.ts.map +1 -1
- package/dist/client/chat/widgets/builtin-tool-renderers.js +27 -31
- package/dist/client/chat/widgets/builtin-tool-renderers.js.map +1 -1
- package/dist/collab/routes.d.ts +2 -2
- package/dist/db/schema.d.ts +2 -1
- package/dist/db/schema.d.ts.map +1 -1
- package/dist/db/schema.js +3 -2
- package/dist/db/schema.js.map +1 -1
- package/dist/resources/handlers.d.ts +3 -3
- package/dist/server/transcribe-voice.d.ts +1 -1
- package/dist/styles/blocks.css +27 -6
- package/docs/content/actions.mdx +17 -24
- package/docs/content/agent-surfaces.mdx +59 -56
- package/docs/content/cloneable-saas.mdx +3 -3
- package/docs/content/faq.mdx +4 -4
- package/docs/content/getting-started.mdx +246 -204
- package/docs/content/key-concepts.mdx +9 -9
- package/docs/content/locales/ar-SA/cloneable-saas.mdx +3 -3
- package/docs/content/locales/ar-SA/faq.mdx +4 -4
- package/docs/content/locales/ar-SA/getting-started.mdx +148 -214
- package/docs/content/locales/ar-SA/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/ar-SA/template-chat.mdx +2 -2
- package/docs/content/locales/ar-SA/using-your-agent.mdx +2 -2
- package/docs/content/locales/de-DE/cloneable-saas.mdx +3 -3
- package/docs/content/locales/de-DE/faq.mdx +4 -4
- package/docs/content/locales/de-DE/getting-started.mdx +145 -211
- package/docs/content/locales/de-DE/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/de-DE/template-chat.mdx +2 -2
- package/docs/content/locales/de-DE/using-your-agent.mdx +2 -2
- package/docs/content/locales/es-ES/cloneable-saas.mdx +3 -3
- package/docs/content/locales/es-ES/faq.mdx +4 -4
- package/docs/content/locales/es-ES/getting-started.mdx +148 -214
- package/docs/content/locales/es-ES/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/es-ES/template-chat.mdx +2 -2
- package/docs/content/locales/es-ES/using-your-agent.mdx +2 -2
- package/docs/content/locales/fr-FR/cloneable-saas.mdx +2 -2
- package/docs/content/locales/fr-FR/faq.mdx +4 -4
- package/docs/content/locales/fr-FR/getting-started.mdx +146 -212
- package/docs/content/locales/fr-FR/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/fr-FR/template-chat.mdx +2 -2
- package/docs/content/locales/fr-FR/using-your-agent.mdx +2 -2
- package/docs/content/locales/hi-IN/cloneable-saas.mdx +3 -3
- package/docs/content/locales/hi-IN/faq.mdx +4 -4
- package/docs/content/locales/hi-IN/getting-started.mdx +149 -215
- package/docs/content/locales/hi-IN/pure-agent-apps.mdx +8 -13
- package/docs/content/locales/hi-IN/template-chat.mdx +2 -2
- package/docs/content/locales/hi-IN/using-your-agent.mdx +2 -2
- package/docs/content/locales/ja-JP/cloneable-saas.mdx +2 -2
- package/docs/content/locales/ja-JP/faq.mdx +4 -4
- package/docs/content/locales/ja-JP/getting-started.mdx +144 -210
- package/docs/content/locales/ja-JP/pure-agent-apps.mdx +8 -13
- package/docs/content/locales/ja-JP/template-chat.mdx +2 -2
- package/docs/content/locales/ja-JP/using-your-agent.mdx +2 -2
- package/docs/content/locales/ko-KR/cloneable-saas.mdx +3 -3
- package/docs/content/locales/ko-KR/faq.mdx +4 -4
- package/docs/content/locales/ko-KR/getting-started.mdx +146 -212
- package/docs/content/locales/ko-KR/pure-agent-apps.mdx +8 -13
- package/docs/content/locales/ko-KR/template-chat.mdx +2 -2
- package/docs/content/locales/ko-KR/using-your-agent.mdx +2 -2
- package/docs/content/locales/pt-BR/cloneable-saas.mdx +3 -3
- package/docs/content/locales/pt-BR/faq.mdx +4 -4
- package/docs/content/locales/pt-BR/getting-started.mdx +145 -211
- package/docs/content/locales/pt-BR/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/pt-BR/template-chat.mdx +2 -2
- package/docs/content/locales/pt-BR/using-your-agent.mdx +2 -2
- package/docs/content/locales/zh-CN/cloneable-saas.mdx +3 -3
- package/docs/content/locales/zh-CN/faq.mdx +4 -4
- package/docs/content/locales/zh-CN/getting-started.mdx +158 -209
- package/docs/content/locales/zh-CN/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/zh-CN/template-chat.mdx +2 -2
- package/docs/content/locales/zh-CN/using-your-agent.mdx +2 -2
- package/docs/content/locales/zh-TW/cloneable-saas.mdx +3 -3
- package/docs/content/locales/zh-TW/faq.mdx +4 -4
- package/docs/content/locales/zh-TW/getting-started.mdx +158 -212
- package/docs/content/locales/zh-TW/pure-agent-apps.mdx +4 -9
- package/docs/content/locales/zh-TW/template-chat.mdx +2 -2
- package/docs/content/locales/zh-TW/using-your-agent.mdx +2 -2
- package/docs/content/native-chat-ui.mdx +17 -32
- package/docs/content/pure-agent-apps.mdx +46 -26
- package/docs/content/template-chat.mdx +8 -8
- package/docs/content/using-your-agent.mdx +2 -2
- package/docs/content/what-is-agent-native.mdx +6 -6
- package/package.json +1 -1
|
@@ -1,259 +1,193 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: "시작하기"
|
|
3
|
-
description: "
|
|
3
|
+
description: "채팅 우선 agentic app을 만들고, action을 추가하고, 구조화된 결과를 인라인으로 렌더링한 뒤 agent가 열 수 있는 영구 페이지로 확장합니다."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# 시작하기
|
|
7
7
|
|
|
8
|
-
Agent-Native
|
|
9
|
-
상태. 기본 에이전트는 이를 안내하는 지침, 가르치는 skills를 통해 만들어집니다.
|
|
10
|
-
반복 가능한 동작과 실제 작업을 수행할 수 있는 actions
|
|
11
|
-
|
|
12
|
-
**완벽한 앱을 원하시나요?** 다양한 템플릿 중 하나를 복제하세요 —
|
|
13
|
-
[Chat](/docs/template-chat), [Mail](/docs/template-mail),
|
|
14
|
-
[Calendar](/docs/template-calendar), [Content](/docs/template-content),
|
|
15
|
-
[Analytics](/docs/template-analytics) 및 [many more](/docs/cloneable-saas) —
|
|
16
|
-
모든 기능을 갖춘 앱을 사용자 정의하세요.
|
|
17
|
-
|
|
18
|
-
처음부터 새로 짓나요? 유일한 선택은 UI를 원하는지 여부입니다 —
|
|
19
|
-
이후의 모든 것(명령 작성, skills 추가, actions 정의, 실행
|
|
20
|
-
에이전트)는 어느 쪽이든 동일합니다.
|
|
21
|
-
|
|
22
|
-
<FileTree
|
|
23
|
-
id="doc-block-1ttoo6q"
|
|
24
|
-
title={"기본 Agent-Native 에이전트"}
|
|
25
|
-
entries={[
|
|
26
|
-
{
|
|
27
|
-
path: "AGENTS.md",
|
|
28
|
-
note: "항상 적용되는 지침: 목적, 규칙, 톤, 에이전트가 할 수 있는 일의 지도",
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
path: ".agents/skills/customer-research/SKILL.md",
|
|
32
|
-
note: "작업이 일치할 때 에이전트가 로드하는 재사용 가능한 playbook",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
path: "actions/summarize-week.ts",
|
|
36
|
-
note: "에이전트, UI, CLI, HTTP, MCP, A2A, jobs, webhooks가 실행할 수 있는 typed code",
|
|
37
|
-
},
|
|
38
|
-
]}
|
|
39
|
-
/>
|
|
40
|
-
|
|
41
|
-
채팅 UI, 헤드리스 에이전트, 전체 앱으로 시작하든 마찬가지입니다.
|
|
42
|
-
UI는 표면을 변경합니다. 지침, skills 및 actions는 에이전트에게
|
|
43
|
-
지도 및 행동.
|
|
44
|
-
|
|
45
|
-
## 1. 앱 만들기
|
|
46
|
-
|
|
47
|
-
[Node.js 22+](https://nodejs.org) 및 [pnpm](https://pnpm.io)가 필요합니다.
|
|
48
|
-
|
|
49
|
-
플래그 없이 `create`를 실행하면 시작할 방법을 묻습니다(전체 템플릿,
|
|
50
|
-
채팅 또는 Headless)보다 먼저:
|
|
8
|
+
Agent-Native는 agentic applications를 만들기 위한 프레임워크입니다. AI agent와 UI는 같은 [actions](/docs/actions), SQL 데이터, application state를 공유합니다. 기본 경로는 headless agent가 아니라 사용자가 즉시 대화할 수 있는 Chat app에서 시작한 뒤 필요한 앱 화면을 추가하는 것입니다.
|
|
51
9
|
|
|
52
|
-
|
|
53
|
-
npx @agent-native/core@latest create my-app
|
|
54
|
-
```
|
|
10
|
+
권장 흐름:
|
|
55
11
|
|
|
56
|
-
|
|
12
|
+
1. Chat app을 만듭니다.
|
|
13
|
+
2. action을 하나 추가합니다.
|
|
14
|
+
3. action 결과를 채팅 안의 native inline UI로 렌더링합니다.
|
|
15
|
+
4. 데이터를 SQL에 저장합니다.
|
|
16
|
+
5. 시각적으로 확인해야 할 때 agent가 열 수 있는 페이지를 추가합니다.
|
|
57
17
|
|
|
58
|
-
|
|
59
|
-
|
|
18
|
+
## 1. Chat app 만들기 {#create-your-app}
|
|
19
|
+
|
|
20
|
+
[Node.js 22+](https://nodejs.org)와 [pnpm](https://pnpm.io)이 필요합니다.
|
|
60
21
|
|
|
61
22
|
```bash
|
|
62
23
|
npx @agent-native/core@latest create my-app --template chat
|
|
24
|
+
cd my-app
|
|
25
|
+
pnpm install
|
|
26
|
+
pnpm dev
|
|
63
27
|
```
|
|
64
28
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
29
|
+
이 템플릿에는 durable chat threads, auth, live sync, `actions/` 디렉터리, 표준 `view-screen` 및 `navigate` actions, 확장 가능한 React app이 포함됩니다.
|
|
30
|
+
|
|
31
|
+
## 2. action 추가하기 {#add-an-action}
|
|
32
|
+
|
|
33
|
+
action은 agent와 UI가 함께 호출하는 typed operation입니다. 이 흐름에서는 `actions/analyze-responses.ts`를 만들고, 폼 응답을 분석해 custom chat chart를 위한 검증된 형태를 반환합니다.
|
|
34
|
+
|
|
35
|
+
{/* prettier-ignore */}
|
|
36
|
+
```ts
|
|
37
|
+
// actions/analyze-responses.ts
|
|
38
|
+
import { defineAction } from "@agent-native/core/action";
|
|
39
|
+
import { z } from "zod";
|
|
40
|
+
|
|
41
|
+
const responseChartResultSchema = z.object({
|
|
42
|
+
title: z.string(),
|
|
43
|
+
points: z.array(z.object({ day: z.string(), responses: z.number() })),
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
export default defineAction({
|
|
47
|
+
description: "Analyze recent form responses and render a custom chart.",
|
|
48
|
+
schema: z.object({
|
|
49
|
+
formId: z.string().default("demo")
|
|
50
|
+
}),
|
|
51
|
+
outputSchema: responseChartResultSchema,
|
|
52
|
+
chatUI: {
|
|
53
|
+
renderer: "responses.response-chart",
|
|
54
|
+
title: "응답 차트"
|
|
55
|
+
},
|
|
56
|
+
readOnly: true,
|
|
57
|
+
run: async ({ formId }) => ({
|
|
58
|
+
title: `Responses for ${formId}`,
|
|
59
|
+
points: [{ day: "Mon", responses: 12 }, { day: "Tue", responses: 18 }, { day: "Wed", responses: 24 }, { day: "Thu", responses: 21 }],
|
|
60
|
+
}),
|
|
61
|
+
});
|
|
70
62
|
```
|
|
71
63
|
|
|
72
|
-
|
|
64
|
+
직접 실행할 수 있습니다.
|
|
73
65
|
|
|
74
66
|
```bash
|
|
75
|
-
|
|
76
|
-
pnpm install
|
|
67
|
+
pnpm action analyze-responses --formId demo
|
|
77
68
|
```
|
|
78
69
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
## 2. 작업 추가
|
|
82
|
-
|
|
83
|
-
액션은 에이전트와 UI가 호출할 수 있는 작업 중 하나입니다. 양쪽 비계
|
|
84
|
-
다음 예와 함께 제공:
|
|
85
|
-
|
|
86
|
-
<AnnotatedCode
|
|
87
|
-
id="doc-block-2iu6e7"
|
|
88
|
-
title={"첫 번째 action"}
|
|
89
|
-
filename="actions/hello.ts"
|
|
90
|
-
language="ts"
|
|
91
|
-
code={
|
|
92
|
-
'import { defineAction } from "@agent-native/core/action";\nimport { z } from "zod";\n\nexport default defineAction({\n description: "로컬 에이전트에서 인사합니다.",\n schema: z.object({\n name: z.string().default("world"),\n }),\n http: { method: "GET" },\n readOnly: true,\n run: async ({ name }) => {\n return { message: `Hello, ${name}!` };\n },\n});'
|
|
93
|
-
}
|
|
94
|
-
annotations={[
|
|
95
|
-
{
|
|
96
|
-
lines: "5",
|
|
97
|
-
label: "도구 설명",
|
|
98
|
-
note: "에이전트는 `description`을 읽고 언제 도구로 호출할지 판단합니다.",
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
lines: "6-8",
|
|
102
|
-
label: "타입 계약",
|
|
103
|
-
note: "하나의 zod `schema`가 에이전트, UI, HTTP, MCP, A2A의 모든 입력을 검증합니다.",
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
lines: "9",
|
|
107
|
-
label: "HTTP 동사",
|
|
108
|
-
note: "이 액션을 자동으로 마운트되는 HTTP 엔드포인트로 노출합니다.",
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
lines: "10",
|
|
112
|
-
label: "읽기 전용",
|
|
113
|
-
note: "`readOnly`는 이 액션이 승인 없이 안전하게 호출될 수 있고 쿼리용으로 캐시될 수 있음을 표시합니다.",
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
lines: "11-13",
|
|
117
|
-
label: "하나의 구현",
|
|
118
|
-
note: "`run` 본문은 모든 표면이 실행하는 단일 진실 공급원입니다.",
|
|
119
|
-
},
|
|
120
|
-
]}
|
|
121
|
-
/>
|
|
122
|
-
|
|
123
|
-
`hello`를 도메인의 첫 번째 실제 작업으로 바꾸세요. 한 번만 정의하면 됩니다.
|
|
124
|
-
모든 표면이 이를 포착합니다.
|
|
125
|
-
|
|
126
|
-
매 턴마다 적용해야 하는 안내를 위해 `AGENTS.md`를 사용하세요. 다음과 같은 경우 스킬을 사용하세요.
|
|
127
|
-
에이전트에는 재사용 가능한 워크플로 또는 도메인 절차가 필요합니다. 다음과 같은 경우 작업을 사용하세요.
|
|
128
|
-
에이전트는 데이터를 읽고, 쓰고, API를 호출하거나
|
|
129
|
-
승인을 수행합니다.
|
|
130
|
-
|
|
131
|
-
## 3. 실행해 보세요
|
|
132
|
-
|
|
133
|
-
작업을 직접 호출:
|
|
70
|
+
또는 브라우저에서 agent에게 요청합니다.
|
|
134
71
|
|
|
135
|
-
|
|
136
|
-
pnpm action hello --name Steve
|
|
137
|
-
```
|
|
72
|
+
> 데모 양식의 최근 응답을 분석해 주세요.
|
|
138
73
|
|
|
139
|
-
|
|
74
|
+
## 3. 채팅 안에 결과 렌더링하기 {#render-inline}
|
|
140
75
|
|
|
141
|
-
|
|
142
|
-
pnpm agent "Call the hello action for Steve and explain what happened."
|
|
143
|
-
```
|
|
76
|
+
action이 `outputSchema`와 제품별 `chatUI.renderer`를 선언하므로 transcript가 구조화된 데이터를 긴 텍스트로 바꾸지 않습니다. 그런 다음 app startup에서 정확히 같은 renderer id에 대한 React component를 등록합니다. 예를 들어 `app/root.tsx`에서 `app/chat-renderers.tsx`를 한 번 import합니다.
|
|
144
77
|
|
|
145
|
-
|
|
146
|
-
|
|
78
|
+
{/* prettier-ignore */}
|
|
79
|
+
```tsx
|
|
80
|
+
import { registerActionChatRenderer, type ToolRendererProps,} from "@agent-native/core/client/chat";
|
|
81
|
+
|
|
82
|
+
type ResponseChartResult = {
|
|
83
|
+
title: string;
|
|
84
|
+
points: Array<{ day: string; responses: number }>;
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
function ResponseChart({ context }: ToolRendererProps) {
|
|
88
|
+
const result = context.resultJson as ResponseChartResult;
|
|
89
|
+
const max = Math.max(...result.points.map((point) => point.responses), 1);
|
|
90
|
+
return (
|
|
91
|
+
<section className="rounded-lg border bg-card p-4">
|
|
92
|
+
<h3 className="text-sm font-medium">{result.title}</h3>
|
|
93
|
+
<div className="mt-4 flex h-32 items-end gap-2">
|
|
94
|
+
{result.points.map((point) => (
|
|
95
|
+
<div key={point.day} className="flex flex-1 flex-col items-center gap-2">
|
|
96
|
+
<div className="w-full rounded-t bg-primary" style={{ height: `${(point.responses / max) * 100}%` }} />
|
|
97
|
+
<span className="text-xs text-muted-foreground">{point.day}</span>
|
|
98
|
+
</div>
|
|
99
|
+
))}
|
|
100
|
+
</div>
|
|
101
|
+
</section>
|
|
102
|
+
);
|
|
103
|
+
}
|
|
147
104
|
|
|
148
|
-
|
|
149
|
-
|
|
105
|
+
registerActionChatRenderer({
|
|
106
|
+
id: "responses.response-chart",
|
|
107
|
+
renderer: "responses.response-chart",
|
|
108
|
+
Component: ResponseChart,
|
|
109
|
+
});
|
|
150
110
|
```
|
|
151
111
|
|
|
152
|
-
|
|
153
|
-
예약된 작업 및 webhooks. 한 번 정의하면 어디에서나 전화할 수 있습니다.
|
|
154
|
-
|
|
155
|
-
<Diagram id="doc-block-1gct831" title={"하나의 작업, 모든 표면"} summary={"추가 배선 없이 단일 defineAction 파일이 모든 소비자에게 전달됩니다."}>
|
|
156
|
-
|
|
157
|
-
```html
|
|
158
|
-
<div class="diagram-fan">
|
|
159
|
-
<div class="diagram-box" data-rough>defineAction</div>
|
|
160
|
-
<div class="diagram-arrow diagram-muted" aria-hidden="true">→</div>
|
|
161
|
-
<div class="diagram-surfaces">
|
|
162
|
-
<span class="diagram-pill">채팅 UI</span
|
|
163
|
-
><span class="diagram-pill">CLI</span><span class="diagram-pill">HTTP</span
|
|
164
|
-
><span class="diagram-pill">MCP</span><span class="diagram-pill">A2A</span
|
|
165
|
-
><span class="diagram-pill">예약된 작업</span
|
|
166
|
-
><span class="diagram-pill">Webhooks</span>
|
|
167
|
-
</div>
|
|
168
|
-
</div>
|
|
169
|
-
```
|
|
112
|
+
재사용 가능한 generic output에는 framework 내장 `data-chart`와 `data-table` renderer도 사용할 수 있고, `data-insights`는 summary/chart/table이 결합된 카드에 사용합니다. 자세한 내용은 [Native Chat UI](/docs/native-chat-ui)를 참조하세요.
|
|
170
113
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
display: flex;
|
|
180
|
-
flex-wrap: wrap;
|
|
181
|
-
gap: 8px;
|
|
182
|
-
max-width: 420px;
|
|
183
|
-
}
|
|
184
|
-
.diagram-fan .diagram-arrow {
|
|
185
|
-
font-size: 22px;
|
|
186
|
-
line-height: 1;
|
|
187
|
-
}
|
|
188
|
-
```
|
|
114
|
+
<WireframeBlock id="doc-block-inline-result-wireframe-ko">
|
|
115
|
+
<Screen
|
|
116
|
+
surface="desktop"
|
|
117
|
+
html={
|
|
118
|
+
"<div style='min-height:340px;box-sizing:border-box;padding:24px;display:flex;justify-content:center;align-items:center;background:var(--wf-bg)'><div style='width:min(530px,100%);display:flex;flex-direction:column;gap:14px'><div class='wf-card' data-rough style='align-self:flex-end;max-width:70%;padding:12px 14px'><strong>User</strong><p style='margin:6px 0 0'>데모 응답을 분석해 주세요.</p></div><div class='wf-card' data-rough style='align-self:flex-start;width:min(370px,100%);padding:14px'><strong>Agent</strong><p class='wf-muted' style='margin:6px 0 12px'>responses.response-chart로 렌더링됨.</p><section class='wf-card' data-rough style='padding:14px'><h3 style='margin:0 0 12px;font-size:14px'>응답 차트</h3><div data-rough='line:bottom' style='height:104px;display:flex;align-items:end;gap:8px;border-bottom:1.4px solid var(--wf-line);padding-bottom:4px'><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:38px;width:100%;background:color-mix(in srgb, var(--wf-accent) 24%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>월</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:62px;width:100%;background:color-mix(in srgb, var(--wf-accent) 30%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>화</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:86px;width:100%;background:color-mix(in srgb, var(--wf-accent) 36%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>수</span></div><div style='flex:1;display:flex;flex-direction:column;align-items:center;gap:6px'><div data-rough style='height:54px;width:100%;background:color-mix(in srgb, var(--wf-accent) 42%, transparent);border:1.4px solid var(--wf-accent);border-radius:8px 8px 3px 3px'></div><span class='wf-muted'>목</span></div></div></section></div></div></div>"
|
|
119
|
+
}
|
|
120
|
+
/>
|
|
121
|
+
</WireframeBlock>
|
|
189
122
|
|
|
190
|
-
|
|
123
|
+
## 4. SQL에 데이터 저장하기 {#persist-data}
|
|
191
124
|
|
|
192
|
-
|
|
125
|
+
결과를 다시 보거나 비교하거나 업데이트해야 한다면 SQL에 저장하고 읽기/쓰기를 actions 뒤에 둡니다.
|
|
193
126
|
|
|
194
|
-
|
|
195
|
-
실행 기록 및 자격 증명은 모두 SQL에 있습니다. 지역적으로는
|
|
196
|
-
`data/app.db`; 프로덕션에서는 `DATABASE_URL`를 설정합니다. 참조
|
|
197
|
-
[Deployment](/docs/deployment).
|
|
127
|
+
테이블은 `drizzle-orm/sqlite-core` 또는 `drizzle-orm/pg-core`에서 가져오지 말고 framework의 portable helper로 정의합니다.
|
|
198
128
|
|
|
199
|
-
|
|
129
|
+
```ts
|
|
130
|
+
// server/db/schema.ts
|
|
131
|
+
import { integer, now, table, text } from "@agent-native/core/db/schema";
|
|
200
132
|
|
|
201
|
-
|
|
133
|
+
export const responseInsights = table("response_insights", {
|
|
134
|
+
id: text("id").primaryKey(),
|
|
135
|
+
formId: text("form_id").notNull(),
|
|
136
|
+
title: text("title").notNull(),
|
|
137
|
+
summary: text("summary").notNull(),
|
|
138
|
+
responseCount: integer("response_count").notNull(),
|
|
139
|
+
createdAt: text("created_at").notNull().default(now()),
|
|
140
|
+
updatedAt: text("updated_at").notNull().default(now()),
|
|
141
|
+
});
|
|
142
|
+
```
|
|
202
143
|
|
|
203
|
-
|
|
144
|
+
이 helper들은 설정된 SQL backend를 선택하므로 같은 schema가 로컬 SQLite와 프로덕션의 Postgres, Turso/libSQL, D1 또는 다른 지원 SQL provider에서 실행될 수 있습니다.
|
|
204
145
|
|
|
205
|
-
|
|
146
|
+
- `create-response-insight`는 새 insight를 씁니다.
|
|
147
|
+
- `list-response-insights`는 페이지 데이터를 읽습니다.
|
|
148
|
+
- `update-response-insight`는 레코드를 업데이트합니다.
|
|
149
|
+
- `analyze-responses`는 계속 채팅용 native widget을 반환합니다.
|
|
206
150
|
|
|
207
|
-
|
|
208
|
-
`<AgentChatSurface>` 구성 요소를 기반으로 구축된 하나의 작은 경로입니다.
|
|
151
|
+
브라우저 전용 중복 REST route를 만들지 말고 UI와 agent가 actions를 공유하게 하세요.
|
|
209
152
|
|
|
210
|
-
|
|
211
|
-
// app/routes/_index.tsx
|
|
212
|
-
import { AgentChatSurface } from "@agent-native/core/client";
|
|
153
|
+
## 5. agent가 열 수 있는 페이지 추가하기 {#add-a-page}
|
|
213
154
|
|
|
214
|
-
|
|
215
|
-
return <AgentChatSurface mode="page" className="h-full" />;
|
|
216
|
-
}
|
|
217
|
-
```
|
|
155
|
+
`/response-insights` route를 추가하고 `useActionQuery("list-response-insights")`, `useActionMutation("create-response-insight")`를 사용합니다. 이 페이지는 SQL state의 투영이며 데이터는 같은 actions로 계속 쓰입니다.
|
|
218
156
|
|
|
219
|
-
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
-
|
|
224
|
-
|
|
225
|
-
|
|
157
|
+
<WireframeBlock id="doc-block-response-insights-page-wireframe-ko">
|
|
158
|
+
<Screen
|
|
159
|
+
surface="desktop"
|
|
160
|
+
html={
|
|
161
|
+
"<main style='min-height:440px;box-sizing:border-box;padding:28px;background:var(--wf-bg)'><section style='max-width:960px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;align-items:stretch'><section class='wf-card' data-rough style='display:flex;flex-direction:column;gap:16px'><header><h2 style='margin:0 0 4px;font-size:28px'>응답 인사이트</h2><p class='wf-muted' style='margin:0'>에이전트가 양식 응답에서 만든 인사이트입니다.</p></header><button class='primary' data-rough style='align-self:flex-start'>데모 양식 분석</button><section style='display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px'><article class='wf-box' data-rough style='padding:12px'><strong>가격 책정 주제</strong><p class='wf-muted' style='margin:8px 0 0'>사용자가 팀 요금제를 요청합니다.</p></article><article class='wf-box' data-rough style='padding:12px'><strong>온보딩 이탈</strong><p class='wf-muted' style='margin:8px 0 0'>세 단계에 더 명확한 문구가 필요합니다.</p></article></section><section class='wf-card' data-rough style='display:flex;flex-direction:column;gap:10px'><div class='wf-row wf-box' data-rough style='padding:10px 12px;gap:12px;justify-content:space-between'><strong>데모 양식</strong><span class='wf-muted'>42개 응답 분석됨</span></div><div class='wf-row wf-box' data-rough style='padding:10px 12px;gap:12px;justify-content:space-between'><strong>다음 단계</strong><span class='wf-muted'>인사이트 초안 두 개 검토</span></div></section></section><aside class='wf-card' data-rough style='height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:12px'><strong>채팅</strong><div class='wf-box' data-rough style='align-self:flex-end;max-width:210px;padding:10px 12px'><span class='wf-muted'>나</span><p style='margin:4px 0 0'>응답 인사이트 열기.</p></div><div class='wf-box' data-rough style='align-self:flex-start;max-width:210px;padding:10px 12px'><span class='wf-muted'>Agent</span><p style='margin:4px 0 0'>응답 인사이트를 열었습니다.</p></div></aside></section></main>"
|
|
162
|
+
}
|
|
163
|
+
/>
|
|
164
|
+
</WireframeBlock>
|
|
226
165
|
|
|
227
|
-
|
|
228
|
-
작업 결과를 테이블로 렌더링하는 [Native 채팅 UI](/docs/native-chat-ui)
|
|
229
|
-
일반 텍스트 대신 차트 및 입력된 카드
|
|
166
|
+
`view-screen`과 `navigate`를 확장해 agent가 현재 route를 알고 `/response-insights`를 열 수 있게 합니다. 결과에 `href: "/response-insights"`를 넣으면 채팅에 "응답 인사이트 열기" 버튼을 표시할 수 있습니다.
|
|
230
167
|
|
|
231
|
-
|
|
232
|
-
`app/` 레이어(React 라우터 + Vite)는 정확히 헤드리스 스캐폴드입니다.
|
|
233
|
-
떠납니다. 가장 깔끔한 조치는 채팅에서 시작(또는 다시 스캐폴드)하는 것입니다.
|
|
234
|
-
템플릿; `actions/`, 에이전트 및 SQL 상태는 변경되지 않고 그대로 유지됩니다. 참조
|
|
235
|
-
그 사이의 모든 표면에 [Agent Surfaces](/docs/agent-surfaces)가 적용됩니다.
|
|
168
|
+
전체 페이지 chat에서 app 페이지를 열 때는 [Agent Surfaces](/docs/agent-surfaces#rich-chat)의 `AgentChatSurface`, `AgentSidebar`, `useAgentChatHomeHandoff`, `useAgentChatHomeHandoffLinks`, `chatViewTransition`을 사용해 같은 thread를 유지한 채 chat을 사이드바로 이동시킵니다.
|
|
236
169
|
|
|
237
|
-
## 프로젝트 구조
|
|
170
|
+
## 프로젝트 구조 {#project-structure}
|
|
238
171
|
|
|
239
172
|
```text
|
|
240
173
|
my-app/
|
|
241
|
-
actions/ #
|
|
242
|
-
app/ # React
|
|
243
|
-
server/ # Nitro
|
|
244
|
-
AGENTS.md #
|
|
245
|
-
.agents/ # 필요할 때 에이전트가
|
|
246
|
-
data/app.db # DATABASE_URL이
|
|
174
|
+
actions/ # 에이전트와 UI에서 호출할 수 있는 작업
|
|
175
|
+
app/ # React 라우트, 페이지, 채팅 화면
|
|
176
|
+
server/ # Nitro 서버와 SQL 스키마
|
|
177
|
+
AGENTS.md # 앱 에이전트를 위한 상시 지침
|
|
178
|
+
.agents/ # 필요할 때 에이전트가 불러오는 스킬
|
|
179
|
+
data/app.db # DATABASE_URL이 설정되지 않았을 때의 로컬 SQLite 상태
|
|
247
180
|
```
|
|
248
181
|
|
|
249
|
-
##
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
- **[
|
|
256
|
-
|
|
257
|
-
- **[
|
|
258
|
-
- **[
|
|
259
|
-
- **[
|
|
182
|
+
## 완성도 높은 Analytics 시작점이 필요하다면 {#analytics-starting-point}
|
|
183
|
+
|
|
184
|
+
위 응답 인사이트 예시는 framework 조각을 보여주기 위해 일부러 작게 만들었습니다. 실제 analytics product를 만들고 있다면 [Analytics](/docs/template-analytics)에서 시작하세요. providers를 연결하고, 기존 dashboards와 agent actions를 사용한 뒤, 거기서부터 커스터마이즈할 수 있는 강력한 시작점입니다.
|
|
185
|
+
|
|
186
|
+
## 다음 단계 {#next}
|
|
187
|
+
|
|
188
|
+
- **[Actions](/docs/actions)** — schemas, auth, approvals, hooks, transport.
|
|
189
|
+
- **[Native Chat UI](/docs/native-chat-ui)** — action 결과를 테이블, 차트, typed cards로 렌더링.
|
|
190
|
+
- **[Chat Template](/docs/template-chat)** — 최소 chat-first app.
|
|
191
|
+
- **[Analytics Template](/docs/template-analytics)** — 강력한 analytics app 시작점. providers를 연결하고 커스터마이즈하세요.
|
|
192
|
+
- **[Context Awareness](/docs/context-awareness)** — `view-screen`, `navigate`, route state, 선택된 객체.
|
|
193
|
+
- **[Agent Surfaces](/docs/agent-surfaces)** — chat, inline UI, app pages, embedded sidecars, automation, 외부 agent.
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
-
title: "
|
|
3
|
-
description: "
|
|
2
|
+
title: "Automation-First Apps"
|
|
3
|
+
description: "scheduled jobs, queues, scripts, integration workers, external agents를 위한 브라우저 없는 Agent-Native apps."
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
#
|
|
6
|
+
# Automation-First Apps
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
대시보드가 아닌 제품입니다. 터미널, Slack, 이메일, a
|
|
10
|
-
예정된 작업, 다른 상담원 또는 채팅 — "읽지 않은 이메일 요약", "게시
|
|
11
|
-
Slack"에 대한 일일 측정항목 - 에이전트는 어디에서나 작동하고 결과를 반환합니다.
|
|
12
|
-
속합니다. actions, 세션, 앱 상태, 기록 등은 여전히 실제 앱입니다.
|
|
13
|
-
설정, 자격 증명 및 공유 기록은 모두 SQL에 있습니다.
|
|
8
|
+
Automation-first app은 scheduled jobs, queues, scripts, integration workers, external agents를 위한 브라우저 없는 Agent-Native app입니다. Getting Started의 기본 경로는 아니지만 workflow가 아직 page를 필요로 하지 않을 때 유용합니다. 이것은 여전히 실제 app입니다: actions, sessions, application state, run history, settings, credentials, 공유 기록은 모두 SQL에 있습니다.
|
|
14
9
|
|
|
15
10
|
<Diagram id="doc-block-l28sgj" title={"앱 에이전트 루프는 정문입니다"} summary={"많은 진입점이 SQL-backed 작업 및 상태에 대해 하나의 에이전트 루프에 도달합니다. 결과는 요청이 발생한 곳으로 반환됩니다. UI는 사람이 감독해야 하는 경우에만 추가됩니다."}>
|
|
16
11
|
|
|
@@ -64,7 +59,7 @@ Slack"에 대한 일일 측정항목 - 에이전트는 어디에서나 작동하
|
|
|
64
59
|
작업이 백그라운드에서 실행될 때 이 모양에 도달하면 출력이
|
|
65
60
|
앱, 도메인은 일회성이거나 프로토타입을 만드는 중입니다. 상담원은 여전히 UI가 필요합니다 —
|
|
66
61
|
대시보드가 아니라 사람이 감독하고 구성하고 조종하는 장소 —
|
|
67
|
-
이것이
|
|
62
|
+
이것이 automation-first apps도 일반적으로 내장된 Chat 셸을 마운트하는 이유입니다.
|
|
68
63
|
|
|
69
64
|
**헤드리스** 제품 형태입니다. 전체 결정 가이드, 제공되는 내용
|
|
70
65
|
상자, 비계, 저장소 액세스 및 실행 공유가 이제 한 곳에서 제공됩니다.
|
|
@@ -74,8 +69,8 @@ Slack"에 대한 일일 측정항목 - 에이전트는 어디에서나 작동하
|
|
|
74
69
|
## 다음 단계
|
|
75
70
|
|
|
76
71
|
- [**Agent Surfaces — Headless**](/docs/agent-surfaces#headless) — 전체 헤드리스 의사 결정 가이드 및 API
|
|
77
|
-
- [**Getting Started**](/docs/getting-started) —
|
|
78
|
-
- [**Dispatch**](/docs/template-dispatch) —
|
|
72
|
+
- [**Getting Started**](/docs/getting-started) — 먼저 chat-first app을 만들고 actions, inline results, pages로 확장
|
|
73
|
+
- [**Dispatch**](/docs/template-dispatch) — automation-first workflows에 적합한 workspace template
|
|
79
74
|
- [**Messaging the agent**](/docs/messaging) — 사용자가 웹, Slack, 텔레그램, 이메일을 통해 에이전트와 대화하는 방법
|
|
80
75
|
- [**Recurring Jobs**](/docs/recurring-jobs) — 에이전트가 자체적으로 실행되는 예약된 프롬프트
|
|
81
|
-
- [**Actions**](/docs/actions) —
|
|
76
|
+
- [**Actions**](/docs/actions) — automation-first app이 호출할 도구
|
|
@@ -7,7 +7,7 @@ description: "최소 채팅 우선 에이전트 기본 앱: 내구성 있는 채
|
|
|
7
7
|
|
|
8
8
|
채팅은 기본 에이전트 기반 앱의 시작점입니다. 중앙에 채팅이 있는 깔끔한 ChatGPT 스타일 셸, 왼쪽에 스레드 목록, 표준 앱 탐색, 인증, 라이브 동기화, actions 및 하나의 예제 작업이 제공됩니다. 도메인 템플릿을 적용하지 않고도 구축할 수 있는 실제 브라우저 앱을 원한다면 여기에서 시작하세요.
|
|
9
9
|
|
|
10
|
-
브라우저 UI
|
|
10
|
+
브라우저 UI 없는 automation-first runtime을 원한다면 [Automation-First Apps](/docs/pure-agent-apps)로 시작하세요. 완성된 도메인 제품 형태를 원한다면 [Calendar](/docs/template-calendar), [Mail](/docs/template-mail), [Content](/docs/template-content), [Forms](/docs/template-forms), [Analytics](/docs/template-analytics) 또는 다른 도메인 템플릿에서 시작하세요.
|
|
11
11
|
|
|
12
12
|
<WireframeBlock id="doc-block-ljnm1j">
|
|
13
13
|
<Screen
|
|
@@ -198,4 +198,4 @@ export default function ChatRoute() {
|
|
|
198
198
|
- [**Agent Surfaces**](/docs/agent-surfaces) — 헤드리스, 채팅, 임베디드 및 전체 앱 패턴
|
|
199
199
|
- [**Actions**](/docs/actions) — 액션 시스템 채팅과 UI 모두 호출
|
|
200
200
|
- [**Native 채팅 UI**](/docs/native-chat-ui) — 채팅 화면 기본 요소 및 런타임 옵션
|
|
201
|
-
- [**
|
|
201
|
+
- [**Automation-First Apps**](/docs/pure-agent-apps) — 브라우저 UI 없는 automations, queues, scripts, external agent workflows
|
|
@@ -99,7 +99,7 @@ description: "에이전트와 함께 작업하는 일상적인 루프: 에이전
|
|
|
99
99
|
|
|
100
100
|
모든 앱에 전체 대시보드가 필요한 것은 아닙니다. 상담원이 제품인 경우 대부분의 맞춤 UI를 건너뛸 수 있습니다. 앱을 열고 원하는 것을 요청하면 상담원이 나머지 작업을 수행하게 됩니다. 에이전트에는 여전히 기록, 작업 공간, 설정 등 관리 영역이 있지만 주요 상호 작용은 클릭이 아닌 대화입니다.
|
|
101
101
|
|
|
102
|
-
→ [**
|
|
102
|
+
→ [**Automation-First Apps**](/docs/pure-agent-apps) — jobs, queues, scripts, external agents를 위한 브라우저 없는 앱
|
|
103
103
|
|
|
104
104
|
## 함께 편집하세요 {#you-co-edit}
|
|
105
105
|
|
|
@@ -113,5 +113,5 @@ description: "에이전트와 함께 작업하는 일상적인 루프: 에이전
|
|
|
113
113
|
- [**Agent Mentions**](/docs/agent-mentions) — `@` 언급으로 지시
|
|
114
114
|
- [**Voice Input**](/docs/voice-input) — 말로 지시
|
|
115
115
|
- [**Drop-in Agent**](/docs/drop-in-agent) — 모든 React 앱에 삽입
|
|
116
|
-
- [**
|
|
116
|
+
- [**Automation-First Apps**](/docs/pure-agent-apps) — jobs, queues, scripts, external agents를 위한 브라우저 없는 앱
|
|
117
117
|
- [**Real-Time Collaboration**](/docs/real-time-collaboration) — 동일한 문서를 함께 공동 편집
|
|
@@ -30,7 +30,7 @@ Cada um é um aplicativo real que você pode usar hoje e a plataforma de lançam
|
|
|
30
30
|
| [**Plan**](/docs/template-plan) | Planos visuais e recapitulações de relações públicas com diagramas, wireframes e anotações. |
|
|
31
31
|
| [**Dispatch**](/docs/template-dispatch) | O plano de controle do espaço de trabalho: segredos compartilhados, integrações reutilizáveis, Slack/Telegram, trabalhos agendados. |
|
|
32
32
|
|
|
33
|
-
Não quer um app de domínio? Use [Chat](/docs/template-chat) quando quiser um aplicativo básico com o qual os usuários possam conversar imediatamente
|
|
33
|
+
Não quer um app de domínio? Use [Chat](/docs/template-chat) quando quiser um aplicativo básico com o qual os usuários possam conversar imediatamente e que possa crescer com actions, resultados nativos e telas. Use [Automation-First Apps](/docs/pure-agent-apps) apenas quando o fluxo ainda não precisar de UI no navegador.
|
|
34
34
|
|
|
35
35
|
Veja o catálogo completo em [Apps](/apps) ou vá direto para um. Por exemplo, [Dispatch](/docs/template-dispatch) é um ótimo lugar para começar se você quiser um aplicativo estilo espaço de trabalho.
|
|
36
36
|
|
|
@@ -168,7 +168,7 @@ Não está pronto para montar o andaime? Você pode adicionar superpoderes nativ
|
|
|
168
168
|
|
|
169
169
|
## Com base nisso
|
|
170
170
|
|
|
171
|
-
- [**Getting Started**](/docs/getting-started) — crie
|
|
171
|
+
- [**Getting Started**](/docs/getting-started) — crie uma app chat-first, adicione uma action, renderize resultado estruturado e evolua para uma página
|
|
172
172
|
- [**Messaging the agent**](/docs/messaging) — como os usuários (e você) conversam com o agente que acompanha cada modelo
|
|
173
173
|
- [**Multi-App Workspace**](/docs/multi-app-workspace) — agrupa vários modelos em um espaço de trabalho que compartilha autenticação, marca e agente
|
|
174
174
|
- [**Dispatch**](/docs/template-dispatch) — o modelo do plano de controle do espaço de trabalho
|
|
@@ -182,7 +182,7 @@ Se você estiver montando um andaime agora, o comando CLI é:
|
|
|
182
182
|
npx @agent-native/core@latest create my-platform
|
|
183
183
|
```
|
|
184
184
|
|
|
185
|
-
Você receberá um seletor de seleção múltipla. Escolha um aplicativo (autônomo) ou vários (espaço de trabalho — os aplicativos compartilham autenticação, marca, configuração do agente e banco de dados). Cada modelo escolhido é estruturado em `apps/<name>/` com todos os arquivos que você precisa. Para
|
|
185
|
+
Você receberá um seletor de seleção múltipla. Escolha um aplicativo (autônomo) ou vários (espaço de trabalho — os aplicativos compartilham autenticação, marca, configuração do agente e banco de dados). Cada modelo escolhido é estruturado em `apps/<name>/` com todos os arquivos que você precisa. Para uma automação sem UI no navegador em vez de um modelo UI, use `npx @agent-native/core@latest create my-agent --headless`.
|
|
186
186
|
|
|
187
187
|
Preencha `.env` (principalmente `ANTHROPIC_API_KEY` e `DATABASE_URL`), `pnpm install`, `pnpm dev` e funciona. Sem "TODO: implementar login", sem rotas de espaço reservado.
|
|
188
188
|
|
|
@@ -11,15 +11,15 @@ Perguntas comuns sobre agente nativo, organizadas de "Estou apenas olhando" até
|
|
|
11
11
|
|
|
12
12
|
### O que é agente nativo? {#what-is-agent-native}
|
|
13
13
|
|
|
14
|
-
Agent-native é uma estrutura para criar aplicativos onde o agente de IA e a superfície do produto ao seu redor são parceiros iguais.
|
|
14
|
+
Agent-native é uma estrutura para criar aplicativos onde o agente de IA e a superfície do produto ao seu redor são parceiros iguais. O caminho comum começa com chat, adiciona actions tipadas, renderiza resultados estruturados inline e cresce para páginas duráveis sobre o mesmo estado SQL. A invariante é que agentes e humanos compartilham o mesmo actions, banco de dados e estado. Consulte [What Is Agent-Native?](/docs/what-is-agent-native) para obter a explicação completa.
|
|
15
15
|
|
|
16
16
|
### Para quem é isso? {#who-is-this-for}
|
|
17
17
|
|
|
18
18
|
Agente nativo é para pessoas que desejam que um aplicativo real e um agente de IA trabalhem a partir dos mesmos dados e actions. Os caminhos comuns são:
|
|
19
19
|
|
|
20
20
|
- **Use um aplicativo hospedado** se quiser Mail, Calendário, Formulários, Plano ou outro modelo finalizado sem configuração. Comece no [template gallery](/templates).
|
|
21
|
-
- **Comece com bate-papo** se quiser
|
|
22
|
-
- **
|
|
21
|
+
- **Comece com bate-papo** se quiser o caminho padrão do zero: usuários falam com o agent imediatamente, e você estende com actions, resultados nativos e telas — comece com [Getting Started](/docs/getting-started) ou [Chat](/docs/template-chat).
|
|
22
|
+
- **Comece automation-first** se estiver criando tarefas agendadas, filas, scripts, integration workers ou fluxos de agents externos sem UI de navegador ainda — comece com [Automation-First Apps](/docs/pure-agent-apps).
|
|
23
23
|
- **Bifurque e personalize um modelo** se desejar seu próprio produto SaaS com autenticação, banco de dados, UI e agente actions já conectados — consulte [Templates](/docs/cloneable-saas).
|
|
24
24
|
- **Compile do zero** se quiser as primitivas da estrutura para um novo produto orientado por agente — comece com [Getting Started](/docs/getting-started).
|
|
25
25
|
- **Conecte outro agente ou ferramenta de código** se desejar que Claude, ChatGPT, Codex, Cursor ou GitHub Copilot / VS Code usem um aplicativo nativo do agente — consulte [External Agents](/docs/external-agents) e [Skills Guide](/docs/skills-guide).
|
|
@@ -130,7 +130,7 @@ Esse é o ponto principal. Bifurque um modelo e personalize-o perguntando ao age
|
|
|
130
130
|
|
|
131
131
|
### Posso criar algo que os modelos não cobrem? {#build-from-scratch}
|
|
132
132
|
|
|
133
|
-
Sim. Se você deseja
|
|
133
|
+
Sim. Se você deseja uma app agentic básica, execute `npx @agent-native/core@latest create my-chat-app --template chat`; você obtém threads de bate-papo duráveis, actions, autenticação, estado de tempo de execução apoiado por SQL, renderização nativa inline e espaço para adicionar suas próprias telas. Se estiver criando uma automation sem navegador, execute `npx @agent-native/core@latest create my-agent --headless`. Consulte [Getting Started](/docs/getting-started), [Automation-First Apps](/docs/pure-agent-apps) e [Chat](/docs/template-chat).
|
|
134
134
|
|
|
135
135
|
### Posso experimentar sem bifurcar um modelo? {#try-with-a-skill}
|
|
136
136
|
|