> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/ai-vibe-coding/zh/intro.md).
# 创建迷你应用
只要有“要是有这样的 App 就好了”这样的想法就足够了。即使不会写代码，只要用语言向 AI 说明你想要的内容，AI 就会代你编写代码。
本文将从头到尾按顺序，完整介绍如何一边与 Claude、Codex 等 AI 工具对话，一边把想法做成真正能运行的 Toss Mini App。
{% hint style="info" %}
**适合这些人**
* 从来没有写过代码的人
* 有 App 想法，但不知道该从哪里开始的人
* 想在 AI 的帮助下快速制作一个小程序的人
{% endhint %}
如果你已经有 Web 项目 [现有 Web 项目开发指南](/ai-vibe-coding/zh/tutorials/webview.md)，如果你想用 React Native 开发 [React Native 开发指南](/ai-vibe-coding/zh/tutorials/react-native.md)请参考。
***
### 1. 准备
先安装会代你制作 App 的 AI 工具，并准备开发所需的程序。
#### 1-1. 安装 AI 工具
请在 Claude 和 Codex 中选择你更熟悉的工具并安装。
{% tabs %}
{% tab title="Claude" %}
[Claude 下载页面](https://claude.com/ko/download)下载适用于你正在使用的操作系统（macOS·Windows）的安装文件并完成安装。
安装完成后，请启动 Claude 应用并登录。点击左上角的“Code”。
{% endtab %}
{% tab title="Codex" %}
[Codex 应用介绍页面](https://openai.com/ko-KR/index/introducing-the-codex-app/)下载 Codex 应用并完成安装。
安装完成后，请启动 Codex 应用并登录。
{% endtab %}
{% endtabs %}
#### 1-2. 安装 Node.js
制作 App 需要一个叫 Node.js 的程序。有了它，后续要用的开发工具才能正常运行。
你可以在 Claude 或 Codex 的聊天框里这样请求。AI 会帮你确认是否已安装，必要时会自动安装。如果 AI 回复中告诉你版本信息（例如 v22.12.0），就说明安装正常。
```
请确认是否已安装 Node.js，如果没有就帮我安装。
安装完成后也请告诉我版本信息。
```
通过视频查看安装 Node.js 的过程
{% embed url="" %}
***
### 2. 连接 앱인토스 功能
这是连接 MCP，让 AI 能准确使用 앱인토스 功能的步骤。
MCP 是提前向 AI 告知 앱인토스 信息的连接桥梁。连接后，AI 会准确了解 앱인토스 的规则和使用方法再开始。若不连接，AI 可能在不了解的情况下凭猜测制作，结果会出错。
#### 2-1. 连接 앱인토스 MCP
连接 앱인토스 MCP 后，AI 会按照本文介绍的方法制作 App。如果在进行过程中有疑问，直接问 AI 就行，它会查阅 앱인토스 文档后回答你。
请像下面这样请求。之后所需程序的安装和连接过程都会由 AI 全部自动处理。中途如果问你是否可以继续安装，请确认并批准。
```
请安装 ax CLI 并连接 앱인토스 开发 MCP。
为了文档搜索，也请添加下面这个 MCP。
https://developers-apps-in-toss.toss.im/~gitbook/mcp
```
请像下面这样请求，确认是否连接成功。若 AI `apps-in-toss`, `apps-in-toss-docs`告知它们在列表中，就说明连接正常。
```
显示已连接的 MCP 列表
```
通过视频查看连接 앱인토스 MCP 的过程
{% embed url="" %}
#### 2-2. 连接控制台操作用 MCP
控制台是 앱인토스 用于注册和管理 App 的网站。连接这个 MCP 后，你无需直接进入控制台网站，只要向 AI 提出请求，就能进行 App 注册或管理操作。
请像下面这样请求。
```
请添加用于控制台操作的 MCP。
URL: https://mcp.toss.im/adapters/apps-in-toss-console/mcp
Client ID: mcp-gateway
连接后也请继续进行认证。
```
连接 MCP 后如果出现登录窗口，请按照提示完成认证。完成后可以像下面这样确认。若 AI 告诉你已正常连接并完成认证，就表示完成了。
```
请帮我确认控制台 MCP 是否已正确连接
```
通过视频查看连接 앱인토스 控制台 MCP 的过程
{% embed url="" %}
***
### 3. 开发
#### 3-1. 规划
请把你想制作的 Mini App 想法告诉 AI。像下面这样请求时，AI 会帮你确认是否符合 앱인토스 政策，并整理需要的页面和功能并提出建议。如果你满意这个建议，就直接继续；如果和你的想法不同，也可以重新请求调整。
```
我想制作一个叫[想制作的 App 描述]的 App。
1. 请确认这是否符合 앱인토스 开放政策的想法
2. 请整理并展示需要哪些页面和功能
3. 在后续开发过程中，如果有不符合 앱인토스 指南的部分，请提前告诉我
```
把你喜欢的设计告诉 AI，它会尽量做得相似。请在下面的网站中按 App 的核心关键词搜索，然后把喜欢的图片或链接复制给 AI。
* 推荐参考的网站： [Dribbble](https://dribbble.com/shots/popular/mobile), [Mobbin](https://mobbin.com/discover/apps/ios/latest), [Pinterest](https://kr.pinterest.com/search/pins/?q=mobile%20ui\&rs=typed)
#### 3-2. 制作 Mini App
会把 Mini App 注册到 앱인토스，并同时创建存放代码的空间。请像下面这样请求。 `{미니앱이름}` 这里请随意起一个你想要的名字填入。
```
请以{미니앱이름}这个名字制作一个 Mini App。
```
#### 3-3. 请求想要的功能
现在该逐个向 AI 请求你想要的功能了。只要告诉它需要什么功能，AI 就会自动帮你实现。也可以参考 앱인토스 提供的 [功能文档](/documentation/api-and-sdk-zh/overview.md)。
```
Mini App 访问时请发放用户识别键，并按用户保存数据。
请基于用户识别键随机生成昵称。
请在主屏幕底部接入横幅广告。
请在关卡结束后添加发放积分的促销活动。
```
{% hint style="info" %}
**如何向 AI 提出好的请求**
* 尽量说得具体
* 比起“帮我做个按钮”，像“在屏幕中央做一个开始按钮，点击后接入奖励广告显示”这样表达会更准确。
* 一次做得不完美也没关系
* 如果有不满意的地方，像“请把这里改成这样”一样轻松地重新请求就可以。AI 会马上修改。
{% endhint %}
通过视频查看制作 Mini App 的过程
{% embed url="" %}
#### 3-4. 接入外部存储服务
Mini App 本身没有持续保存数据的功能。比如用户发布的帖子、收藏的商品列表、保存的昵称这类以后还要再次查看的数据，就可以连接外部存储服务。并不是所有 Mini App 都需要这一步。如果没有要保存的数据，可以跳过这个步骤。
常见会使用以下服务。
* [Supabase](https://supabase.com/)：基于开源，并同时提供数据库和登录功能。
* [Firebase](https://firebase.google.com/?hl=ko)：Google 提供的服务，擅长实时更新和推送通知等附加功能。
* [Cloudflare](https://www.cloudflare.com/ko-kr/)：响应速度快，适合存储轻量数据。
注册你想要的服务并创建项目后，把获得的连接信息（URL、API Key 等）告诉 AI，其余部分 AI 会自动帮你连接。
```
请连接{서비스명}。
{복사한 연결 정보}
然后请帮我创建一个功能，用于保存和读取[想保存的数据，例如：用户名称]。
```
在 Supabase 中查找连接信息的方法
1. 在 Supabase 仪表板中选择项目。
2. 在左侧菜单的 Settings 中选择与 API 相关的项目。
3. 可以确认 Project URL 和 Publishable key 的值。
4. 把这两个值复制后告诉 AI 就行。
{% hint style="warning" %}
**请确认安全设置**
外部存储默认情况下往往处于任何人都可访问数据的状态。
如果向 AI 请求“也请确认安全设置”，它会指导你如何安全地进行设置。
有些部分需要在服务仪表板中手动开启，请按照 AI 的指引操作。
{% endhint %}
***
### 4. 测试与发布
Mini App 不是只能在全部完成后才能测试。开发过程中，只要想确认某个界面，随时都可以边做边测。
#### 4-1. 使用 Toss App 测试
你可以在 Toss App 中测试 Mini App。像下面这样请求即可。AI 处理请求后，Toss App 会收到推送通知。点击通知后，Mini App 会直接在实际的 Toss App 中启动。
```
我想测试 Mini App，请给我发送可测试的推送。
```
可接收测试推送的条件
* 需要已登录 Toss App。
* 需要是工作区成员。
* 需要年满 19 岁。
如果看到错误或奇怪的界面，请截图给 AI 看。AI 无法直接看到真实设备画面，所以配合截图和说明，它会修得更准确。（例如：配合截图说“我点了支付按钮却没有任何反应”）
如果结果不是你想要的，也可以像“请把这里改成这样”一样轻松地重新请求。修改后再测试即可。（例如：“请把主界面的横幅广告再往下移一点”）
如果想提前预防错误 [请尝试接入 Sentry](/ai-vibe-coding/zh/integration/pei-zhi-sentry.md)。出错时 AI 可以直接查看日志，因此能更快、更准确地找到原因。
通过视频查看在 Toss App 中测试的过程
{% embed url="" %}
#### 4-2. 发布
要发布 Mini App，首先需要通过 앱인토스 团队的审核。审核是确认 Mini App 是否遵守政策和指南的流程。测试结束后，请申请审核。
```
我想发布 Mini App。请帮我申请审核。
```
审核结果会通过控制台和电子邮件通知你。审核通过后，需要点击控制台中的“发布”按钮，Mini App 才会对用户公开。发布后 1 小时内就会立即反映到 Toss Mini App 列表中。
在制作完 App 之后，为了接触用户， [营销指南](https://appsintoss.gitbook.io/appsintoss-docs/guide/marketing)也请一并参考。
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developers-apps-in-toss.toss.im/ai-vibe-coding/zh/intro.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.