# A practical tutorial for building ChatGPT & MCP Apps in minutes **Fractal** is a vibe coding platform for ChatGPT & MCP Apps using prompts. **Fractal** also helps you preview and deploy your ChatGPT & MCP App end to end in a single platform. This tutorial walks through exactly what to prompt for the three most common **Fractal** use cases: - Ecommerce companies - Web apps with APIs - Web apps built on Replit or Lovable By the end, you will know how to write prompts that create your app and shape how users discover and interact with it. --- ## Breaking Down the Anatomy of the Prompt Before diving into specific use cases, it helps to understand what a **Fractal** prompt is actually made of. Here is an example prompt: ``` Create a palette generator app using the below spec: The app is called when the user asks chatGPT to generate a color palette, or generate a [number of colors]-color palette ChatGPT will create the color palette and pass the hex and color names to the app's input The app uses the hex to generate a beautiful UI of the color palette, clearly show the colors, with the hex and name underneath ``` You can think of this prompt as having four distinct parts. ### 1. A General Description of What You Want to Build This is where you name the app and state its purpose. In this case: "Create a palette generator app." This gives the system a clear mental model of what you are trying to build before any details are introduced. ### 2. When the App Should Be Called This defines the trigger conditions. Here, the app is invoked when the user asks ChatGPT to generate a color palette, including cases like "generate a 5-color palette." This step matters because it ties the app directly to a user intent in the conversation. ### 3. What Input the App Receives from ChatGPT Next, you specify the data contract between ChatGPT and the app. In this example, ChatGPT generates the palette itself and passes the hex codes and color names into the app's input. The app does not need to reason about colors. It consumes structured data. ### 4. What the App Does with That Input Finally, you describe what the app does once it receives that input. Here, it renders a visual UI that shows the colors, with the hex values and names underneath. Other apps can do more in this fourth part, such as using the input to look up information from a spreadsheet or API, or taking an action via an API. If you want to convert your existing service to a ChatGPT & MCP App, you likely already have some kind of data. It may come from a spreadsheet or API or you may have to create an API. The sections below explain how to approach this based on the type of app you are building. --- ## Use Case 1: Ecommerce Companies If you run an ecommerce business, you can turn your product catalog into a ChatGPT shopping app. The key is to keep the prompt aligned to the four parts above. **1. General description (what you're building)** Name the app and its job: a shopping assistant for your store. **2. When the app should be called (trigger)** Define the shopping intents that should route to the app. **3. What input the app receives from ChatGPT (data contract)** Specify the structured fields ChatGPT should send. **4. What the app does with that input (use the data source)** Tell the app how it uses the spreadsheet to answer questions. ### Example Prompt for an Ecommerce Store (Anatomy-Aligned) ``` Create a shopping app for my store. The app is called when users ask to find a product for a certain skin type. Skin types can only be normal, oily, dry or combination. ChatGPT should match the user's question with the best skin type and send the user's skin type to the app. The app should use my product catalog spreadsheet at [URL link to your product catalog] to answer which product is suitable for her, skin type is in the B column. ``` --- ## Use Case 2: Web Apps with an API If you have an API, your prompt should still follow the same four-part structure. The difference is that in part four, the app uses the input to call endpoints and return results. **1. General description** Define what the app is for. **2. When the app should be called** Define when it should be invoked in conversation. **3. What input the app receives** Define what ChatGPT passes so the app can call the API cleanly. **4. What the app does with that input (API action)** Define which endpoints get called and how they are used. ### Example Prompt for a Web App ``` Create an app to find parties happening right now. The app is called when users ask questions like: - "What parties are happening tonight?" - "What's going on near me right now?" - "Find something fun this weekend" ChatGPT should pass structured input into the app including: - time window (tonight, this weekend, specific date) - location (city, neighborhood, "near me" if available) - optional filters (music type, price, age restriction) - any follow-up constraints introduced later in the conversation The app should use this API [URL link to the API documentation] to find the parties and display the parties' photos, name and location in a list. ``` --- ## Use Case 3: Web Apps Built on Replit or Lovable If your app lives on Replit or Lovable, you already have working logic and UI. The missing piece is an API that exposes a focused slice of functionality. ### Step 1: Decide What the ChatGPT & MCP App Should Do Before creating an API, decide the narrow role your ChatGPT & MCP App should play. Ask yourself: - Should it guide users to the web app? - Should it expose a single feature like search, analytics, or content generation? - Should it let users take lightweight actions without visiting the full app? You almost never want to expose your entire app. The goal is to surface a focused slice of functionality that makes sense in a chat interface. Examples: - A project management app might expose "list my tasks" and "summarize today's work," but not full workflows. - A finance dashboard might expose each dashboard as a separate tool, but not the full dashboard all at once. **IMPORTANT:** If your app exposes logged-in user data, the only way for a ChatGPT & MCP App to connect to that data is via OAuth. This allows the ChatGPT & MCP App to securely identify the user and access only their data. Providers like Auth0 or WorkOS can help. If this is too complex, you can either expose only non-logged-in data or contact **Fractal** for guidance. This decision determines what your API needs to do. ### Step 2: Create an API for That Functionality Once you know what functionality ChatGPT should access, prompt your Replit or Lovable project: ``` Create an API with an API key that exposes the following functionality: [list the specific features you want ChatGPT to access] Also generate a clear API documentation page. ``` This API becomes the bridge between your app and **Fractal**. It provides: - a stable interface to call - authentication via an API key - clear instructions on endpoints and responses You are defining boundaries. ### Step 3: Connect the API to Fractal Using the Prompt Anatomy After your API and documentation are ready, follow the same anatomy used for API-based apps. --- ## Conclusion **Fractal** is the easiest way to build ChatGPT & MCP Apps. Instead of wiring infrastructure, you describe what the app should do, when it should be called, what input it receives, and how it uses that input. The same prompt anatomy applies whether your data lives in a spreadsheet, an API, or an existing web app. If you already have data or a service, the prompt becomes the main interface you design. Everything else follows from that. If you want to go deeper into ChatGPT & MCP Apps and how they are built, I have a YouTube playlist that covers how to build ChatGPT & MCP Apps with **Fractal** here: [Watch the YouTube Playlist](https://www.youtube.com/watch?v=ipws4NK92-0&list=PLIWpfZmcbJqhc44SwCcHKQrsCNXTkHp7i) ## Ready to Build Your ChatGPT & MCP Apps? Start building with Fractal today and get your app discovered by millions of ChatGPT users.