> 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).
# 创建迷你应用
即使只有“要是有这样的应用就好了”这样的想法也足够了。即使不会写代码，只要把想要的内容用语言告诉 AI，AI 就会代替你编写代码。
本文会从头到尾，按顺序 안내你完成整个流程：一边与 Claude Code、Codex 这类 AI 工具对话，一边把想法做成真正可运行的 Apps in Toss mini app。
{% hint style="info" %}
**适合以下人群**
* 从未写过代码的人
* 有应用想法，但不知道该从哪里开始的人
* 想借助 AI 快速做出 mini app 的人
{% endhint %}
如果你已经有 Web 项目，那么现有 [Web 项目开发指南](/ai-vibe-coding/zh/tutorials/webview.md)；如果想用 React Native 开发， [React Native 开发指南](/ai-vibe-coding/zh/tutorials/react-native.md)请参考这些内容。
***
### 1. 安装 AI 工具
先安装会代替你开发应用的 AI 工具，并准备好开发所需的基本环境。
请按照你所使用的 MCP 客户端对应的步骤进行。
如果你已经在使用其他 AI 工具，也可以跳过这一步。
{% tabs %}
{% tab title="Claude Code" icon="claude" %}
Claude Code 是在终端中使用的 AI 开发工具。\
首先请确认在你的电脑上 `claude` 命令是否可用。
**macOS**
1. 在键盘上按 `Command(⌘) + Space`打开 Spotlight 搜索。
2. `终端`，然后按 Enter。
3. 终端窗口打开后，输入下面的命令并按 Enter。
```bash
claude
```
**Windows**
1. 在开始菜单中 `PowerShell`，搜索并打开。
2. PowerShell 窗口打开后，输入下面的命令并按 Enter。
```powershell
claude
```
Claude Code 启动后，请完成登录。
`claude`如果出现找不到 [Claude Code 安装指南](https://code.claude.com/docs/en/quickstart)的提示，请打开该指南，并根据你正在使用的操作系统安装 Claude Code CLI。\
安装完成后，请重新打开终端或 PowerShell，再次运行 `claude`。
{% endtab %}
{% tab title="Codex" icon="openai" %}
Codex 可以在 ChatGPT 桌面应用中使用。
[ChatGPT 应用下载页面](https://chatgpt.com/download/)请下载与你所使用的操作系统（macOS·Windows）相匹配的安装文件并完成安装。
安装完成后，启动 ChatGPT 应用并登录。\
点击左上角的 `ChatGPT` 按钮， `Codex`并选择它。
{% embed url="" %}
{% endtab %}
{% endtabs %}
***
### 2. 连接用于 Apps in Toss 开发的插件
为了让 AI 能够查阅 Apps in Toss 文档、创建 mini app 并注册到控制台， `apps-in-toss` 插件。
#### 2-1. 安装 Git
安装插件之前需要 Git。请先根据你正在使用的操作系统安装 Git。
{% tabs %}
{% tab title="macOS" %}
[Git macOS 下载页面](https://git-scm.com/downloads/mac)并按照提示完成安装。
在 macOS 上，只需安装包含 Git 的 Xcode Command Line Tools 即可。
1. 在键盘上按 `Command(⌘) + Space`打开 Spotlight 搜索。
2. `终端`，然后按 Enter。
3. 终端窗口打开后，粘贴下面的命令并按 Enter。
```bash
xcode-select --install
```
4. 安装窗口弹出后，请按提示完成安装。
5. 安装完成后，请将正在使用的 AI 工具关闭后重新打开。
{% endtab %}
{% tab title="Windows" %}
[Git for Windows 下载页面](https://git-scm.com/downloads/win)请打开它，下载安装文件并运行。
大多数 Windows 电脑选择下面这一项即可。
`Git for Windows/x64 Setup`
仅在使用基于 ARM 的 Windows 设备时，选择下面这一项。
`Git for Windows/ARM64 Setup`
安装完成后，请将正在使用的 AI 工具关闭后重新打开。
{% endtab %}
{% endtabs %}
如果你想确认是否安装成功，或者中途卡住了，可以向 Claude Code 或 Codex 这样请求：
```
帮我确认 Git 是否已经安装。
如果还没安装，请帮我完成到我能照着做的程度。
```
#### 2-2. 安装 apps-in-toss 插件
请按照你正在使用的 MCP 客户端对应的步骤， `apps-in-toss` 安装插件。
{% tabs %}
{% tab title="Codex" icon="openai" %}
在 Codex 中，可以从 ChatGPT 桌面应用的 Plugins 界面 `apps-in-toss` 插件。
{% embed url="" %}
1. 打开 ChatGPT 桌面应用。
2. 点击左上角的 `ChatGPT` 按钮， `Codex`切换过去。
3. 在 Codex 界面中打开 Plugins 设置。
4. 点击 Add Marketplace 按钮。
5. 在屏幕的 `来源`中 `toss/apps-in-toss-harness` ，输入并添加。
6. 在 Personal（个人）标签页中新添加的 `apps-in-toss` 插件。
7. `apps-in-toss-console` 登录完成。
8. `/ait:welcome` 。
{% endtab %}
{% tab title="Claude Code" icon="claude" %}
在 Claude Code 中，通过 Claude CLI 安装插件。
先在 macOS 上打开终端、在 Windows 上打开 PowerShell， `claude`输入以确认 Claude Code 是否能运行。
```bash
claude
```
`claude` 如果命令无法识别， [Claude Code 安装指南](https://code.claude.com/docs/en/quickstart)请先在安装 Claude Code CLI 后再继续。
如果 Claude Code 已准备好，请按顺序执行下面的命令。
{% embed url="" %}
```bash
claude plugin marketplace add toss/apps-in-toss-harness
claude plugin install ait@apps-in-toss -y
claude
```
在 Claude 对话中 `/mcp`，输入 `apps-in-toss-console` 并登录。
`/ait:welcome` 输入以确认插件是否已成功安装。
{% endtab %}
{% endtabs %}
***
### 3. 开发
从现在开始，你不必记住复杂的命令。只要用语言向 AI 说出你想做的应用、想加入的功能、想测试的场景就可以了。
{% hint style="info" %}
**按这样的顺序进行**
1. 说明你想做的应用。
2. AI 会整理应用结构和所需功能。
3. 创建 mini app 并准备代码。
4. 逐个添加所需功能。
5. 在自己手机上的 Toss 应用中测试。
6. 如果有问题，就连同截图一起让它重新修正。
7. 准备完成后，申请审核。
{% endhint %}
#### 3-1. 规划
把你想做的 mini app 点子告诉 AI 吧。像下面这样请求后，AI 会帮你确认是否符合 Apps in Toss 政策，并整理需要的页面和功能后提出建议。\
如果你喜欢这个建议，就直接继续；如果和你想要的方向不同，也可以重新请求并进行调整。
```
我想做一个名为[想做的应用说明]的应用。
1. 请确认它是否符合 Apps in Toss 开放政策的想法。
2. 请整理需要哪些页面和功能。
3. 开发过程中如果有不符合 Apps in Toss 指南的部分，请提前告诉我。
```
#### 3-2. 创建 mini app
会在 Apps in Toss 中注册 mini app，并一并创建存放代码的空间。请像下面这样请求。\
`{mini app 名称}` 位置请自由想一个你喜欢的名字填进去。
```
请创建一个名为 {mini app 名称} 的 Apps in Toss mini app。
```
#### 3-3. 请求想要的功能
现在轮到逐个向 AI 请求你想要的功能了。\
只要告诉它你需要什么功能，AI 就会一边查看 Apps in Toss 文档一边帮你实现。\
也可以参考 Apps in Toss 提供的 [功能文档](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-zh/)。
```
我想使用 Toss 登录来区分用户。
请为每个用户保存昵称和积分。
请在主屏幕底部加入横幅广告。
请让我可以购买需要付费的商品。
请基于当前位置显示附近的商店。
请保存收藏的项目。
```
{% hint style="info" %}
**向 AI 好好提需求的方法**
* 尽量说得具体些
* 比起“帮我做个按钮”，像“在屏幕中央做一个开始按钮，点按后显示激励广告”这样说会更准确。
* 一次不用做到完美也没关系
* 如果有不满意的地方，可以像“把这里改成这样”一样轻松再次请求。
{% endhint %}
通过视频查看制作 mini app 的过程
{% embed url="" %}
#### 3-4. 连接外部存储服务
在 mini app 中， [Storage API](broken://spaces/pKzGxtCGPMEzZAbz7TSP/pages/bP6r4B11x05DL7f8lkSv)可以用来存储数据。不过，这些数据会保存在用户的设备环境中，因此如果更换设备或应用数据被初始化，可能会消失。
如果有需要在其他设备上也能再次查看，或需要长期保存的数据，例如用户发布的帖子、收藏的商品列表、保存的昵称等，请连接外部存储服务。\
如果没有需要在更换设备后仍需保留的数据，那么可以跳过这一步。
外部存储可以使用 Supabase、Firebase、Cloudflare 等服务。\
虽然有可以免费开始使用的区间，但随着使用量增加或使用付费功能，可能会产生费用。\
实际应用之前，请确认各服务的最新套餐、限制事项以及是否可与 mini app 连接。
* [Supabase](https://supabase.com/)：提供基于 PostgreSQL 的数据库的后端服务。可用于存储帖子、用户设置、收藏列表等结构化数据。
* [Firebase](https://firebase.google.com/?hl=ko)：Google 提供的后端服务。可使用 Firestore 或 Realtime Database 将应用所需数据存储到外部。
* [Cloudflare](https://www.cloudflare.com/ko-kr/)：提供响应速度很快的基础设施服务。可使用 Workers KV、D1、R2 等来存储相对轻量的数据或文件。
{% hint style="warning" %}
**请确认安全设置**
外部存储通常默认处于任何人都可以访问数据的状态。
如果让 AI“也帮我确认安全设置”，它会告诉你如何安全地进行配置。
有些部分需要直接在服务控制台中操作，所以请按照 AI 的指引进行。
{% endhint %}
***
### 4. 测试并发布
mini app 并不是只能在全部完成后才能测试。开发过程中，只要想看某个页面，随时都可以边做边测试。
#### 4-1. 用 Toss 应用测试
你可以在自己手机上的 Toss 应用中测试 mini app。像下面这样请求即可。AI 会帮你准备到可以测试的状态，并说明如何在手机上打开。
```
我想在自己手机上的 Toss 应用里确认一下做好的 mini app。
请发送让我可以测试的推送消息。
```
测试时需要的条件
* 必须已经登录 Toss 应用。
* 必须是工作区成员。
* 必须年满 19 岁。
如果看到错误或奇怪的画面，请截图给 AI 看。因为 AI 看不到真实设备上的画面，所以配合截图和说明会修得更准确。
```
在这个页面点了支付按钮，却没有任何反应。
请看截图，找出原因并修复。
```
如果没有按你想要的方式运行，就像“把这里改成这样”一样轻松再次请求即可。修改后再测试就行。（例如：“把主屏幕的横幅广告再往下移一点”）
如果你想提前预防错误，可以请求接入 Sentry。\
发生错误时，AI 可以直接查看日志，因此能更快、更准确地找到原因。
通过视频查看在 Toss 应用中测试的样子
{% embed url="" %}
#### 4-2. 发布
要发布 mini app，首先必须通过 Apps in Toss 团队的审核。\
审核是确认 mini app 是否遵守政策和指南的流程。测试结束后，请申请审核。
```
我想发布 mini app。请帮我申请审核。
```
审核结果会通过控制台和电子邮件通知你。\
审核通过后，必须点击控制台中的“发布”按钮，mini app 才会向用户公开。\
发布后 1 小时内就会立即反映到 Toss mini app 列表中。
如果你想让更多人看到你的应用，请查看 Toss 的 [新的曝光政策和指南](https://developers-apps-in-toss.toss.im/guide/exposure)。
---
# 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 following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `build a script that syncs our docs to a CMS` lets GitBook tailor the answer to that use case.
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.
