> 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). # Building a Mini App Even just an idea like “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 the AI will write the code for you. This document walks you through the entire process, step by step from start to finish, of turning an idea into a working app-in-toss mini app by talking with AI tools like Claude and Codex. {% 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 [Existing Web Project Development Guide](/ai-vibe-coding/en/tutorials/webview.md)If you want to develop with React Native, [React Native Development Guide](/ai-vibe-coding/en/tutorials/react-native.md)please refer to it. *** ### 1. Preparation First, install the AI tool that will make the app for you, and prepare the programs needed for development. #### 1-1. Install an AI tool Choose and install the tool you’re most familiar with, Claude or Codex. {% tabs %} {% tab title="Claude" %} [Claude download page](https://claude.com/ko/download)Download and install the installer for your operating system (macOS or Windows). After installation is complete, launch the Claude app and log in. Click 'Code' at the top left.
{% endtab %} {% tab title="Codex" %} [Codex app introduction page](https://openai.com/ko-KR/index/introducing-the-codex-app/)Download and install the Codex app from the page. After installation is complete, launch the Codex app and log in.
{% endtab %} {% endtabs %} #### 1-2. Install Node.js To build an app, you need a program called Node.js. This is required for the development tools used later to work properly. Try asking Claude or Codex in the chat like this. The AI will check whether it’s installed, and if needed, install it for you automatically. If the AI responds with version information such as v22.12.0, it means it’s installed correctly. ``` Check whether Node.js is installed, and install it if it isn’t. Also tell me the version after installation is complete. ```
Watch a video of Node.js installation {% embed url="" %}
*** ### 2. Connect app-in-toss features This is the step where you connect MCP so the AI can use app-in-toss features correctly. MCP is a bridge that tells the AI information about app-in-toss in advance. If you connect it, the AI starts with a correct understanding of app-in-toss rules and usage. If you don’t, the AI may guess and create something off the mark. #### 2-1. Connect the app-in-toss MCP If you connect the app-in-toss MCP, the AI will build the app the way this document explains. If you have questions while working, you can just ask the AI, and it will look up the app-in-toss docs and answer you. Ask like this. The AI will handle the necessary program installation and connection process on its own. If it asks for permission during installation, confirm and approve it. ``` Install the ax CLI and connect the app-in-toss development MCP. Also add the MCP below for document search. https://developers-apps-in-toss.toss.im/~gitbook/mcp ``` Ask like this to check whether the connection worked. If the AI says `apps-in-toss`, `apps-in-toss-docs`is in the list, then the connection is successful. ``` Show me the list of connected MCPs ```
Watch a video of connecting the app-in-toss MCP {% embed url="" %}
#### 2-2. Connect MCP for console work The console is the app-in-toss website where you register and manage apps. If you connect this MCP, you can register or manage apps just by asking the AI, without going directly into the console site. Try asking like this. ``` Add an MCP for console tasks. URL: https://mcp.toss.im/adapters/apps-in-toss-console/mcp Client ID: mcp-gateway After connecting, please proceed with authentication too. ``` If a login window appears after connecting the MCP, complete authentication following the instructions. When finished, check like below. If the AI says the connection and authentication are complete successfully, then it’s done. ``` Check whether the console MCP is connected properly ```
Watch a video of connecting the app-in-toss console MCP {% embed url="" %}
*** ### 3. Development #### 3-1. Planning Explain your mini app idea to the AI. If you ask like below, the AI will check whether it complies with app-in-toss policy and organize the required screens and features for you. If you like the suggestion, continue as is; if not, you can ask again and refine it. ``` I want to build [describe the app you want to make]. 1. Check whether this idea fits the app-in-toss open policy 2. Organize and show me what screens and features are needed 3. If there are any parts that go against the app-in-toss guide during future development, let me know in advance ``` If you tell the AI a design you like, it will make something similar. Search on the sites below using the app’s core keywords, then copy an image or link you like and tell the AI. * Good reference sites: [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. Build the mini app Register the mini app in app-in-toss, and a space for the code will also be created. Ask like this. `{mini app name}` You can freely choose any name you want and put it in that spot. ``` Create a mini app named {mini app name}. ``` #### 3-3. Request the features you want Now it’s time to ask the AI for the features you want one by one. Just tell it what you need, and the AI will build it for you. You can also refer to the [feature documentation](/documentation/api-and-sdk-en/overview.md)provided by app-in-toss. ``` When a user accesses the mini app, issue a user identifier key and store data per user. Generate a nickname randomly based on the user identifier key. Connect banner ads at the bottom of the main screen. Add a point reward promotion after the stage ends. ``` {% hint style="info" %} **How to ask the AI well** * Be as specific as possible * Instead of saying “Make a button,” it’s more accurate to say something like “Create a Start button in the center of the screen, and connect it so a rewarded ad appears when it’s pressed.” * It’s okay if it isn’t perfect the first time * If there’s something you don’t like, you can simply ask again, like “Change this part like this.” The AI will fix it right away. {% endhint %}
Watch a video of building a mini app {% embed url="" %}
#### 3-4. Connect an external storage service A mini app itself doesn’t have a built-in way to keep storing data. For example, if you have data that needs to be seen again later, such as posts written by users, saved product favorites, or stored nicknames, you can connect an external storage service. Not every mini app needs this. If you don’t have any data to store, you can skip this step. Commonly used services include: * [Supabase](https://supabase.com/): An open-source-based service that provides both a database and login features. * [Firebase](https://firebase.google.com/?hl=ko): A service made by Google, with strengths in extra features like real-time updates and push notifications. * [Cloudflare](https://www.cloudflare.com/ko-kr/): It has fast response times and is suitable for storing lightweight data. Sign up for the service you want and create a project, then tell the AI the connection details you received, such as the URL and API key, and the AI will connect the rest for you. ``` Connect {service name}. {copied connection info} And create a feature that stores and retrieves [data you want to save, e.g. user name]. ```
How to find connection information in Supabase 1. Select the project in the Supabase dashboard. 2. In the left menu, choose the API-related item under Settings. 3. You can find the Project URL and Publishable key values. 4. Just copy the two values and tell the AI.
{% hint style="warning" %} **Please check the security settings** External storage services are often set up so that anyone can access the data by default. If you ask the AI, “Please check the security settings too,” it will guide you on how to configure them safely. Some parts must also be enabled directly in the service dashboard, so please follow the AI’s instructions. {% endhint %} *** ### 4. Test and release You don’t have to wait until the mini app is completely finished to test it. You can test it whenever you’re curious about a screen while developing. #### 4-1. Test with the Toss app You can test the mini app in the Toss app. Ask like this. When the AI processes the request, you’ll get a push notification in the Toss app. Tap the notification, and the mini app will launch immediately in the actual Toss app. ``` I want to test the mini app. Please send a push so I can test it. ```
Conditions for receiving test pushes * You must be logged in to the Toss app. * You must be a workspace member. * You must be 19 years or older.
If you see an error or a strange screen, take a screenshot and show it to the AI. Since the AI can’t see the actual device screen, it can fix things more accurately if you explain it together with a screenshot. (For example, with a screenshot: “I pressed the payment button, but nothing happened.”) If it doesn’t work the way you want, feel free to ask again, like “Change this part like this.” You can test 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, [Sentry integration](/ai-vibe-coding/en/integration/setting-up-sentry.md)Try asking for it. When an error occurs, the AI can check the logs directly, so it can find the cause faster and more accurately.
Watch a video of testing in the Toss app {% embed url="" %}
#### 4-2. Release To release the mini app, it must first pass the app-in-toss team’s review. The review is the process of checking whether the mini app follows the policy and guidelines properly. Once testing is complete, request a review. ``` I want to release the mini app. Please request a review. ``` Review results will be sent through the console and email. If the review is approved, you must press the 'Release' button in the console for the mini app to become available to users. After release, it will be reflected in the Toss mini app list within 1 hour. After building the app, to reach users, [marketing guide](https://appsintoss.gitbook.io/appsintoss-docs/guide/marketing)please refer to it as well. --- # 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.