> 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/en/intro.md). # Creating a Mini App Even just having the idea “I wish there were an app like this” is enough. Even if you don’t know how to code, just explain what you want to AI in words, and AI will write the code for you. This document walks you through the entire process, from start to finish, of talking with AI tools like Claude Code and Codex to turn your idea into a working Apps in Toss mini app. {% hint style="info" %} **Helpful for these people** * People who have never coded at all * People who have an app idea but don’t know how to get started * People who want to quickly build a mini app with AI’s help {% endhint %} If you already have a web project, see the existing [Web project development guide](/ai-vibe-coding/en/tutorials/webview.md)If you want to develop with React Native, see the [React Native development guide](/ai-vibe-coding/en/tutorials/react-native.md). *** ### 1. Install an AI tool First, install an AI tool that can build the app for you, and prepare the basic development environment you need. Follow the steps that match the MCP client you use. If you already use an AI tool, you can skip this step. {% tabs %} {% tab title="Claude Code" icon="claude" %} Claude Code is an AI development tool used in the terminal. \ First, check on your computer whether you can use the `claude` command. **macOS** 1. On the keyboard, `Command(⌘) + Space`to open Spotlight Search. 2. `Terminal`type it and press Enter. 3. When the Terminal window opens, enter the command below and press Enter. ```bash claude ``` **Windows** 1. In the Start menu, `PowerShell`search for it and open it. 2. When the PowerShell window opens, enter the command below and press Enter. ```powershell claude ``` When Claude Code runs, complete the login as well. `claude`If a message appears saying it can’t be found, [Claude Code installation guide](https://code.claude.com/docs/en/quickstart)open it and install the Claude Code CLI according to your operating system. \ After installation is complete, reopen Terminal or PowerShell and run `claude`again. {% endtab %} {% tab title="Codex" icon="openai" %} Codex can be used in the ChatGPT desktop app. [ChatGPT app download page](https://chatgpt.com/download/)download and install the installer for your operating system (macOS·Windows). After installation is complete, launch the ChatGPT app and log in. \ In the upper left, press the `ChatGPT` button and `Codex`select it. {% embed url="" %} {% endtab %} {% endtabs %} *** ### 2. Connect the plugin for Apps in Toss development To let AI look up the Apps in Toss documentation, build mini apps, and register them in the console, install the `apps-in-toss` plugin. #### 2-1. Install Git You need Git before installing the plugin. First, install Git according to the operating system you use. {% tabs %} {% tab title="macOS" %} [Git macOS download page](https://git-scm.com/downloads/mac)open it and install it by following the instructions. On macOS, you only need to install Xcode Command Line Tools, which include Git. 1. On the keyboard, `Command(⌘) + Space`to open Spotlight Search. 2. `Terminal`type it and press Enter. 3. When the Terminal window opens, paste the command below and press Enter. ```bash xcode-select --install ``` 4. When the installation window appears, complete the installation by following the instructions. 5. When installation is finished, turn your AI tool off and on again. {% endtab %} {% tab title="Windows" %} [Git for Windows download page](https://git-scm.com/downloads/win)open it, download the installer, and run it. Most Windows PCs can select the item below. `Git for Windows/x64 Setup` Only if you’re using an ARM-based Windows device, select the item below. `Git for Windows/ARM64 Setup` When installation is finished, turn your AI tool off and on again. {% endtab %} {% endtabs %} If you want to check whether it was installed correctly or get stuck midway, ask Claude Code or Codex like this: ``` Check whether Git is installed. If it isn’t installed, help me follow along. ``` #### 2-2. Install the apps-in-toss plugin Follow the steps that match your MCP client `apps-in-toss` to install the plugin. {% tabs %} {% tab title="Codex" icon="openai" %} In Codex, from the Plugins screen in the ChatGPT desktop app, `apps-in-toss` plugin. {% embed url="" %} 1. Open the ChatGPT desktop app. 2. In the upper left, `ChatGPT` button and `Codex`switch to it. 3. Open the Plugins settings on the Codex screen. 4. Click the Add to Marketplace button. 5. In the `source`field, `enter toss/apps-in-toss-harness` and add it. 6. In the newly added `apps-in-toss` plugin. 7. `apps-in-toss-console` on the Personal tab, complete the login. 8. `/ait:welcome` type it in. {% endtab %} {% tab title="Claude Code" icon="claude" %} In Claude Code, install the plugin with Claude CLI. First, open Terminal on macOS or PowerShell on Windows, and `claude`type it to check whether Claude Code runs. ```bash claude ``` `claude` If the command is not recognized, [Claude Code installation guide](https://code.claude.com/docs/en/quickstart)install the Claude Code CLI on and then continue again. {% embed url="" %} ```bash claude plugin marketplace add toss/apps-in-toss-harness claude plugin install ait@apps-in-toss -y claude ``` In the Claude conversation, `/mcp`enter it and `apps-in-toss-console` log in to it.
`/ait:welcome` enter it to check whether the plugin was installed correctly. {% endtab %} {% endtabs %} *** ### 3. Develop From here on, you don’t need to memorize complicated commands. Just tell AI in words what app you want to make, what features you want to add, and what situations you want to test. {% hint style="info" %} **Proceed in this order** 1. Describe the app you want to build. 2. AI organizes the app structure and the features you need. 3. Build the mini app and prepare the code. 4. Add the needed features one by one. 5. Test it in the Toss app on my phone. 6. If there’s a problem, ask to fix it again with a screenshot. 7. When preparation is complete, request a review. {% endhint %} #### 3-1. Plan Try explaining the mini app idea you want to build to AI. If you make a request like the one below, AI will check whether it matches the Apps in Toss policy and organize and suggest the screens and features you need.\ If you like the suggestion, proceed as is; if it’s not the direction you want, you can ask again and refine it. ``` I want to build [describe the app you want to make]. 1. Check whether it fits the Apps in Toss open policy. 2. Organize what screens and features are needed. 3. While developing, let me know in advance if there are any parts that go against the Apps in Toss guide. ``` #### 3-2. Build the mini app A mini app is registered in Apps in Toss, and a space for the code is created together as well. Try making a request like the one below.\ `{miniAppName}` In the placeholder, freely make up the name you want and enter it. ``` Create an Apps in Toss mini app named {miniAppName}. ``` #### 3-3. Request the features you want Now it’s time to ask AI for the features you want, one by one.\ Just tell it what features you need, and AI will build them while checking the Apps in Toss documentation.\ You can also refer to the [feature documentation](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-en/)provided by Apps in Toss. ``` I want to use Toss login to distinguish users. Save each user’s nickname and score. Add a banner ad to the bottom of the main screen. Let users buy items that require payment. Show nearby stores based on the current location. Save favorite items. ``` {% hint style="info" %} **How to ask AI effectively** * Be as specific as possible * Instead of saying “Make a button,” it’s more accurate to say something like, “Make a Start button in the center of the screen, and when it’s tapped, show a rewarded ad.” * It’s okay if it isn’t perfect the first time * If there’s something you don’t like, just ask again casually, like “Change this part like this.” {% endhint %}
Watch the mini app being built in a video {% embed url="" %}
#### 3-4. Connect an external storage service In mini apps, [Storage API](broken://spaces/pKzGxtCGPMEzZAbz7TSP/pages/bP6r4B11x05DL7f8lkSv)can be used to store data. However, because this data is stored in the user’s device environment, it may disappear if the device is changed or the app data is reset. If you have data that needs to be checked again on another device or kept for a long time, such as posts left by users, saved product lists, or stored nicknames, connect an external storage service.\ If you don’t have data that must remain after switching devices, you can skip this step. For external storage, you can use services like Supabase, Firebase, and Cloudflare.\ There are free tiers you can start with, but costs may arise as usage increases or paid features are used.\ Before applying it for real, check each service’s latest pricing plans, limitations, and whether mini app integration is possible. * [Supabase](https://supabase.com/): A backend service that provides a PostgreSQL-based database. It can be used to store structured data such as posts, user settings, and favorite lists. * [Firebase](https://firebase.google.com/?hl=ko): A backend service provided by Google. You can use Firestore or Realtime Database to store app data externally. * [Cloudflare](https://www.cloudflare.com/ko-kr/): Provides infrastructure services with fast response times. You can use Workers KV, D1, R2, and more to store relatively light data or files. {% hint style="warning" %} **Please check the security settings** External storage is often configured so that anyone can access the data by default. If you ask AI, “Please check the security settings too,” it will guide you on how to set it up safely. Some parts need to be done directly in the service dashboard, so follow AI’s instructions. {% endhint %} *** ### 4. Test and launch You don’t have to wait until the mini app is completely finished to test it. It’s okay to test it little by little whenever you’re curious about the screen during development. #### 4-1. Test in the Toss app You can test the mini app in the Toss app on your phone. Try making a request like the one below. AI will prepare it in a testable state and guide you on how to open it on your phone. ``` I want to check the mini app I made in the Toss app on my phone. Send a push message so I can test it. ```
Conditions needed for testing * You must be logged in to the Toss app. * You must be a workspace member. * You must be at least 19 years old.
If you see an error or a strange screen, take a screenshot and show it to AI. Since AI can’t see the actual device screen, it can fix things more accurately if you explain along with the screenshot. ``` I tapped the payment button on this screen, but nothing happens. Find the cause from the screenshot and fix it. ``` If it doesn’t work the way you want, ask again casually, like “Change this part like this.” You can test it again after making changes. (For example: “Move the banner ad on the main screen a little lower.”) If you want to prevent errors in advance, ask to integrate Sentry.\ When an error happens, AI can check the logs directly, so it finds the cause faster and more accurately.
Watch a video of testing in the Toss app {% embed url="" %}
#### 4-2. Launch To launch a mini app, it must first pass review by the Apps in Toss team.\ Review is the process of checking whether the mini app follows the policy and guidelines well. Once testing is done, request a review. ``` I want to launch the mini app. Please request a review. ``` Review results are shared in the console and by email.\ If the review is approved, you must press the “Launch” button in the console for the mini app to be made public to users.\ After launch, it will be reflected immediately in the Toss mini app list after 1 hour. If you want to show your app to more people, check Toss’s [new exposure policy and guide](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 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/en/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.