diff --git a/custom-gpt.mdx b/custom-gpt.mdx index 772d03d..f5bde50 100644 --- a/custom-gpt.mdx +++ b/custom-gpt.mdx @@ -3,8 +3,6 @@ title: "App Idea Generator" description: "Use our Custom GPT to brainstorm and refine your app idea" --- -# App Idea Generator - ## Vibecode Custom GPT Struggling to articulate your app idea? Our custom GPT is designed to help you clarify and refine your vision. @@ -27,3 +25,14 @@ The App Idea Generator Custom GPT uses a conversational approach to help you dev - **Optimized for Vibecode** - The generated prompt is specifically tailored for Vibecode's AI capabilities Simply have a conversation with the GPT, and it will produce a prompt you can immediately paste into Vibecode to start building your app! + +## Next Steps + + + + Take your generated prompt and start building + + + More prompt templates and tips + + diff --git a/deploying/guide.mdx b/deploying/guide.mdx index 9932a5b..2ca7728 100644 --- a/deploying/guide.mdx +++ b/deploying/guide.mdx @@ -254,3 +254,14 @@ If a payment fails, you have a **7-day grace period** to update your payment inf community](https://discord.gg/qXyWYYX5Ts) to connect with other Vibecode builders. + +## Next Steps + + + + Publish your mobile app to the App Store + + + Use your own domain name + + diff --git a/deploying/overview.mdx b/deploying/overview.mdx new file mode 100644 index 0000000..6e01e5d --- /dev/null +++ b/deploying/overview.mdx @@ -0,0 +1,73 @@ +--- +title: "Choose Your Deployment Path" +description: "Compare deployment options and pick the right one for your app" +--- + +Vibecode gives you multiple ways to get your app into users' hands. Here's how to pick the right one. + +## Deployment Options at a Glance + +| | App Clips | Web Deploy | App Store | +|---|---|---|---| +| **Best for** | Sharing with friends, demos, quick testing | Public websites and web apps | Wide distribution on iOS | +| **Setup time** | Instant | ~2 minutes | 15-30 minutes + Apple review | +| **Requires** | Any Vibecode plan | Plus plan or above | Plus plan or above + Apple Developer ($99/yr) + Expo account | +| **How users access** | Tap a link — no install needed | Visit a URL in any browser | Download from the App Store | +| **Updates** | Automatic | Redeploy in one click | Submit new build + Apple review | + +## App Clips — Share Instantly + +App Clips let anyone try your app by tapping a link. No download, no App Store. This is the fastest way to share what you've built. + +**Use App Clips when:** +- You want to share your app with friends or testers +- You're demoing your app +- You want instant access without friction + + + Set up sharing and get your App Clip link + + +## Web Deploy — Put Your App Online + +Deploy your app (or just the backend) to a public URL. Your app gets a `yourapp.vibecode.app` address that works in any browser. You can also connect a custom domain. + +**Use Web Deploy when:** +- You're building a web app or website +- You need a live backend for your mobile app +- You want a public URL anyone can visit + + + Step-by-step deployment walkthrough + + +## App Store — Publish to the World + +Submit your app to the Apple App Store for anyone to download. Vibecode handles the build process — you just sign in with your Apple Developer credentials and follow the wizard. + +**Use App Store when:** +- You want your app available to the public on iOS +- You need TestFlight beta testing +- You're launching a product or business + +**Requirements:** +- [Apple Developer Program](https://developer.apple.com/programs/) membership ($99/year) +- [Expo account](https://expo.dev/signup) (free) +- Plus plan or above + + + Full App Store submission guide + + +## Not Sure? Start with App Clips + +App Clips require no setup, no paid accounts, and work on any plan. Start there, get feedback, and upgrade to Web Deploy or App Store when you're ready. + + + + Compare plans and features + + + Add your app to the home screen + + diff --git a/docs.json b/docs.json index 7d538fd..285aeef 100644 --- a/docs.json +++ b/docs.json @@ -14,109 +14,53 @@ "tab": "Getting Started", "groups": [ { - "group": "Introduction", - "pages": [ - "index", - "getting-started/plans-and-credits", - "getting-started/creating-first-app", - "getting-started/claude-code", - "getting-started/web-app" - ] + "group": "Welcome", + "pages": ["index", "getting-started/plans-and-credits"] }, { - "group": "Sharing & Publishing", - "pages": [ - "getting-started/sharing-app", - "getting-started/home-screen-widgets", - "getting-started/deploy-app-store" - ] + "group": "Build Your First App", + "pages": ["getting-started/creating-first-app"] + }, + { + "group": "Building on Web", + "pages": ["getting-started/web-app"] }, { "group": "Vibecode Tools", - "pages": [ - "getting-started/pinch-to-build", - "getting-started/export-ssh", - "getting-started/download-code", - "getting-started/integrations" - ] + "pages": ["getting-started/pinch-to-build", "getting-started/export-ssh", "getting-started/download-code"] }, { - "group": "Prompting Tips", - "pages": [ - "getting-started/web-to-mobile", - "getting-started/native-ui-components" - ] + "group": "Prompt Templates", + "pages": ["getting-started/web-to-mobile", "getting-started/native-ui-components"] }, { - "group": "Use Cases", - "pages": [ - "getting-started/use-case-1", - "getting-started/use-case-2" - ] + "group": "Example Projects", + "pages": ["getting-started/use-case-1", "getting-started/use-case-2"] } ] }, { - "tab": "Backend & Features", + "tab": "Features", "groups": [ { - "group": "Backend & Data", - "pages": [ - "features/backend-auth", - "features/api-integrations", - "features/vibecode-cloud" - ] + "group": "How It Works", + "pages": ["getting-started/claude-code"] }, { - "group": "App Capabilities", - "pages": [ - "features/haptics", - "features/sound-generation", - "features/image-generation" - ] - } - ] - }, - { - "tab": "Payments", - "groups": [ - { - "group": "Payments", - "pages": [ - "payments/revenuecat-setup", - "payments/stripe-setup" - ] - } - ] - }, - { - "tab": "Google Login", - "groups": [ + "group": "Backend & Data", + "pages": ["features/vibecode-cloud", "features/backend-auth"] + }, { - "group": "Google Sign-In (Better Auth)", - "pages": [ - "google-login/setup" - ] - } - ] - }, - { - "tab": "Deploying", - "groups": [ + "group": "Authentication", + "pages": ["google-login/setup"] + }, { - "group": "Web Apps", - "pages": [ - "deploying/guide", - "deploying/custom-domain" - ] + "group": "Monetization", + "pages": ["payments/revenuecat-setup", "payments/stripe-setup"] }, { - "group": "Mobile Apps", - "pages": [ - "getting-started/sharing-app", - "getting-started/home-screen-widgets", - "getting-started/deploy-app-store" - ] + "group": "App Capabilities", + "pages": ["features/haptics", "features/sound-generation", "features/image-generation"] } ] }, @@ -125,53 +69,44 @@ "groups": [ { "group": "Overview", - "pages": [ - "integrations/index" - ] + "pages": ["integrations/index"] }, { "group": "Text Generation", - "pages": [ - "integrations/openai-gpt-5-mini", - "integrations/grok-4-fast", - "integrations/google-gemini" - ] + "pages": ["integrations/openai-gpt-5-mini", "integrations/grok-4-fast", "integrations/google-gemini"] }, { "group": "Audio", - "pages": [ - "integrations/gpt-4o-audio-transcription", - "integrations/elevenlabs-tts", - "integrations/elevenlabs-sound-effects", - "integrations/elevenlabs-music" - ] + "pages": ["integrations/gpt-4o-audio-transcription", "integrations/elevenlabs-tts", "integrations/elevenlabs-sound-effects", "integrations/elevenlabs-music"] }, { "group": "Image Generation", - "pages": [ - "integrations/openai-gpt-image-1", - "integrations/nano-banana", - "integrations/ideogram-3" - ] + "pages": ["integrations/openai-gpt-image-1", "integrations/nano-banana", "integrations/ideogram-3"] }, { "group": "Data APIs", - "pages": [ - "integrations/apple-maps", - "integrations/tmdb", - "integrations/openweather-api", - "integrations/stock-market-data", - "integrations/crypto-market-data", - "integrations/runtime-logs", - "integrations/haptic-feedback" - ] + "pages": ["integrations/apple-maps", "integrations/tmdb", "integrations/openweather-api", "integrations/stock-market-data", "integrations/crypto-market-data", "integrations/runtime-logs", "integrations/haptic-feedback"] }, { "group": "Communication", - "pages": [ - "integrations/resend-email", - "integrations/expo-push-notifications" - ] + "pages": ["integrations/resend-email", "integrations/expo-push-notifications"] + } + ] + }, + { + "tab": "Deploying", + "groups": [ + { + "group": "Choose Your Path", + "pages": ["deploying/overview"] + }, + { + "group": "Web Apps", + "pages": ["deploying/guide", "deploying/custom-domain"] + }, + { + "group": "Mobile Apps", + "pages": ["getting-started/sharing-app", "getting-started/home-screen-widgets", "getting-started/deploy-app-store"] } ] }, @@ -179,15 +114,16 @@ "tab": "Resources", "groups": [ { - "group": "Resources", - "pages": [ - "custom-gpt", - "resources", - "updates", - "resources/community", - "resources/glossary", - "support" - ] + "group": "Help", + "pages": ["faqs", "troubleshooting", "support"] + }, + { + "group": "Community", + "pages": ["resources/community", "custom-gpt"] + }, + { + "group": "Reference", + "pages": ["resources/glossary", "updates"] } ] } @@ -277,7 +213,39 @@ }, { "source": "/features/integrations", - "destination": "/getting-started/integrations" + "destination": "/integrations/index" + }, + { + "source": "/quickstart", + "destination": "/getting-started/creating-first-app" + }, + { + "source": "/getting-started/integrations", + "destination": "/integrations/index" + }, + { + "source": "/features/api-integrations", + "destination": "/integrations/index" + }, + { + "source": "/resources", + "destination": "/resources/community" + }, + { + "source": "/faq/:slug*", + "destination": "/faqs" + }, + { + "source": "/google-login/setup-guide", + "destination": "/google-login/setup" + }, + { + "source": "/google-login/implementation", + "destination": "/google-login/setup" + }, + { + "source": "/google-login/code-reference", + "destination": "/google-login/setup" } ], "footer": { diff --git a/faq/app-ideas.mdx b/faq/app-ideas.mdx deleted file mode 100644 index 1dcf3f6..0000000 --- a/faq/app-ideas.mdx +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: "App Ideas" -description: "Inspiration and tips for creating your first app" ---- - -# Coming up with App Ideas - -## What kind of app should I build? - -The best app idea is one that solves a problem you or someone you know experiences. Think about daily frustrations, activities you enjoy, or tasks you'd like to automate. Vibecode can help you build it quickly, regardless of complexity. - -## Can I build a real business app? - -Absolutely! Many successful apps started as small projects. With Vibecode's backend capabilities through Vibecode Cloud, you can build production-ready apps with user authentication, databases, and integrations right from the start. - -## How do I find inspiration? - -Look at the app stores, browse social media, read product hunt, or ask friends what they wish existed. Often the best ideas come from personal needs or gaps you notice in existing solutions. \ No newline at end of file diff --git a/faq/building-tips.mdx b/faq/building-tips.mdx deleted file mode 100644 index edca56e..0000000 --- a/faq/building-tips.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: 'Building Tips & Best Practices' -description: 'Learn how to build efficiently and effectively with Vibecode' ---- - -## How do I build efficiently with Vibecode? - -We recommend starting by simplifying your idea into the essential features, then build from there. It also helps to have an initial prompt that details the expected outcome in terms of the look, feel, etc. of your app idea. - -## How should I structure my prompts for the best results? - -Our AI Agent is pretty good at coming up with what is needed for building your app regardless of the prompt, but for specific features it is best to be as specific as possible. You can even suggest examples (e.g., "An app that is designed like Duolingo" or "make the app have the Google color scheme"). The models will continue to get better (and are already crazy good), so prompting will only get easier. - -## What should I do when I hit an error? - -Either copy and paste the error back into the chat, or tell the AI agent that you got an error and it should try to resolve it. - -## How long does it take to complete a project? - -It depends on complexity. By breaking tasks into smaller steps, planning ahead, and refining based on feedback, you can move quickly while ensuring quality. diff --git a/faq/data-integrations.mdx b/faq/data-integrations.mdx deleted file mode 100644 index 6f4bf46..0000000 --- a/faq/data-integrations.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: 'Data & Integrations' -description: 'Questions about backends, APIs, and data storage' ---- - -## Can I connect my project to a backend to store data? - -This is a feature that is coming very soon. - -## Can I add login to my app? - -We currently do not support Auth/DB, so we do not recommend adding this feature even though it is possible. If it is added, there is a chance you could lock yourself out of your own app without being able to recover it since there is no database functionality (yet). - -## Can I add third-party APIs to my project? - -Yes, you can add authentication by integrating with Vibecode Cloud (currently in beta). Simply prompt the AI to add it and follow the instructions. - -## Can I store sensitive API keys in Vibecode? - -If you're integrating with an API, we recommend you use Vibecode app ENV tab to store your API keys. However, remember if your keys are prefixed with "EXPO_PUBLIC_", they are public. diff --git a/faq/getting-started.mdx b/faq/getting-started.mdx deleted file mode 100644 index 1377f35..0000000 --- a/faq/getting-started.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 'Getting Started with Vibecode' -description: 'Learn the basics about Vibecode and what you can build' ---- - -## What is Vibecode? - -Vibecode is the easiest way to build beautiful mobile apps. You can simply generate apps with prompting, view and test your app on your phone, improve and complete the development of your app, and share with anyone in 1-click using App Clips. - -Vibecoding allows you to create anything you imagine, and Vibecode is the first ever mobile app that brings the power of Vibecoding to the masses. - -## What can I build with Vibecode? - -Mobile apps for iOS devices. The world is your oyster—you can build whatever comes to your mind. - -## Do I need coding experience to build with Vibecode? - -No. Vibecode is designed for all levels of experience. Whether you're a developer or a non-technical user, you can create apps using Vibecode. - -## Can I start from templates? - -We have this feature coming very soon. Check back in a few weeks! diff --git a/faq/tips-tricks.mdx b/faq/tips-tricks.mdx deleted file mode 100644 index 35340d9..0000000 --- a/faq/tips-tricks.mdx +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: 'Tips & Tricks' -description: 'Pro tips for getting the most out of Vibecode' ---- - -# Tips & Tricks - -## Write detailed prompts - -The more specific your instructions, the better the output. Instead of "make a button," try "create a green button with rounded corners that says 'Get Started' and triggers a success sound." - -## Iterate quickly - -Build your app in small increments. Make one feature, test it, then move to the next. This approach helps you catch issues early and refine your vision as you go. - -## Use Vibecode Cloud for real apps - -If you want to build an app with user data, authentication, or backend logic, use Vibecode Cloud. It handles all the infrastructure so you can focus on your app's core features. diff --git a/faqs.mdx b/faqs.mdx index 040c28c..0763885 100644 --- a/faqs.mdx +++ b/faqs.mdx @@ -9,9 +9,7 @@ Find answers to common questions about Vibecode, our features, and how to get th - Vibecode is the easiest way to build beautiful mobile apps. You can simply generate apps with prompting, view and test your app on your phone, improve and complete the development of your app, and share with anyone in 1-click using App Clips. - - Vibecoding allows you to create anything you imagine, and Vibecode is the first ever mobile app that brings the power of Vibecoding to the masses. + Vibecode is the easiest way to build apps using natural language. Available on iOS and on the web at vibecodeapp.com, you can generate fully functional apps with prompting, test them in real-time, and share with anyone instantly. @@ -20,46 +18,42 @@ Find answers to common questions about Vibecode, our features, and how to get th - Supports one-click sharing via App Clips without requiring App Store submission - Generates native iOS/Android apps, not just web apps - Provides real-time preview and iteration capabilities - - Offers extensive integrations with popular APIs and services - - Gives you full access to export your source code + - Offers extensive [integrations](/integrations/index) with popular APIs and services + - Gives you full access to [export your source code](/getting-started/download-code) You can share your apps in multiple ways: - - **App Clips**: Share instantly with anyone via a link without requiring App Store submission - - **Export Code**: Download your complete source code and deploy it yourself - - **App Store**: Submit your app to the Apple App Store for public distribution - + - **[App Clips](/getting-started/sharing-app)**: Share instantly with anyone via a link — no App Store submission required + - **[Export Code](/getting-started/download-code)**: Download your complete source code and deploy it yourself + - **[App Store](/getting-started/deploy-app-store)**: Submit your app to the Apple App Store for public distribution + App Clips are the fastest way to share, allowing anyone to try your app immediately without installation. - Mobile apps for iOS devices. The world is your oyster—you can build whatever comes to your mind. Check out the "What You Can Build" section in our Welcome guide for inspiration on the types of apps you can create. + Mobile apps for iOS and Android, plus web apps. The world is your oyster — you can build whatever comes to your mind. Check out the [Example Projects](/getting-started/use-case-1) for inspiration. - No. Vibecode is designed for all levels of experience. Whether you're a developer or a non-technical user, you can create apps using Vibecode. + No coding experience is required! Vibecode is designed for everyone, from complete beginners to experienced developers. You simply describe what you want in natural language, and the AI handles the technical implementation. If you do have coding experience, you can [download your code](/getting-started/download-code) or [connect via SSH](/getting-started/export-ssh) for deeper customization. - We're actively working on Android support. While we can already generate Android-compatible code, the native Vibecode Android app for building on-device is coming soon. Stay tuned to our updates and community channels for the latest announcements. + We're actively working on Android support. While we can already generate Android-compatible code, the native Vibecode Android app for building on-device is coming soon. Stay tuned to our [updates](/updates) and [community channels](/resources/community) for the latest announcements. Yes! Vibecode generates production-quality code that you can use for real applications. Many users have successfully built and deployed production apps using Vibecode. You have full control over the generated code and can export it for further customization or deployment. - - No coding experience is required! Vibecode is designed for everyone, from complete beginners to experienced developers. You simply describe what you want in natural language, and the AI handles the technical implementation. However, if you do have coding experience, you can dive deeper and customize the generated code. - - Absolutely! Vibecode is suitable for both personal and professional use. Many businesses and professionals use Vibecode to: - Prototype ideas quickly - Build internal tools and apps - Create client projects - Develop commercial applications - + You own the code you generate and can use it however you like. @@ -68,7 +62,7 @@ Find answers to common questions about Vibecode, our features, and how to get th - It depends on the complexity of your app. Simple apps can be built in hours, while more complex apps with multiple features might take longer. The beauty of Vibecode is that you can iterate and refine quickly using natural language. + It depends on the complexity of your app. Simple apps can be built in minutes, while more complex apps with multiple features might take longer. The beauty of Vibecode is that you can iterate and refine quickly using natural language. @@ -76,85 +70,59 @@ Find answers to common questions about Vibecode, our features, and how to get th - We recommend starting by simplifying your idea into the essential features, then build from there. It also helps to have an initial prompt that details the expected outcome in terms of the look, feel, etc. of your app idea. + Start by simplifying your idea into the essential features, then build from there. It also helps to have an initial prompt that details the expected outcome in terms of the look, feel, and functionality. See our [Prompt Templates](/getting-started/web-to-mobile) for examples. - Our AI Agent is pretty good at coming up with what is needed for building your app regardless of the prompt, but for specific features it is best to be as specific as possible. You can even suggest examples (e.g., "An app that is designed like Duolingo" or "make the app have the Google color scheme"). The models will continue to get better (and are already crazy good), so prompting will only get easier. + Our AI Agent is pretty good at coming up with what is needed for building your app regardless of the prompt, but for specific features it is best to be as specific as possible. You can even suggest examples (e.g., "An app that is designed like Duolingo" or "make the app have the Google color scheme"). Check out our [Native UI Components](/getting-started/native-ui-components) page for copy-paste prompts. - Either copy and paste the error back into the chat, or tell the AI agent that you got an error and it should try to resolve it. - - - - It depends on complexity. By breaking tasks into smaller steps, planning ahead, and refining based on feedback, you can move quickly while ensuring quality. + Either copy and paste the error back into the chat, or tell the AI agent that you got an error and it should try to resolve it. See our [Troubleshooting guide](/troubleshooting) for common issues. ## Features - - You can integrate payment systems into your Vibecode app by prompting the AI to add payment functionality. Popular options include: - - **RevenueCat**: For in-app purchases and subscriptions - - Simply ask the AI to "integrate RevenueCat for subscriptions" - - Configure your RevenueCat account and add your API keys via Vibecode app ENV tab - - **Stripe**: For one-time payments and custom payment flows - - Prompt the AI to "add Stripe payment integration" - - Use Stripe's API with proper key management through Vibecode app ENV tab - - **Important**: Never hardcode API keys in your app. Always use environment variables or Vibecode app ENV tab for sensitive credentials. + + You can integrate payment systems into your Vibecode app. Popular options include: + + **[RevenueCat](/payments/revenuecat-setup)**: For in-app purchases and subscriptions — ask the AI to "integrate RevenueCat for subscriptions" and add your API keys via the ENV tab. + + **[Stripe](/payments/stripe-setup)**: For one-time payments and custom payment flows — prompt the AI to "add Stripe payment integration" and configure via the ENV tab. + + **Important**: Never hardcode API keys in your app. Always use environment variables via the Vibecode ENV tab. - To publish your app to the Apple App Store: - - 1. **Export your code**: Download your complete source code from Vibecode - 2. **Set up Apple Developer Account**: Enroll in the Apple Developer Program ($99/year) - 3. **Configure your app**: Update app icons, bundle ID, and metadata - 4. **Build for production**: Create a production build using Xcode or EAS Build - 5. **Submit for review**: Upload to App Store Connect and submit for review - - Check our detailed guide on "Deploy to App Store" in the Getting Started section for step-by-step instructions. + Vibecode has a built-in App Store submission flow — no need to use Xcode manually. + + 1. Open your project and tap the app name (mobile) or click Share (web) + 2. Select **Publish on App Store** / **Deploy to App Store** + 3. Follow the step-by-step wizard to sign in with your Apple Developer credentials, configure your app, and submit + + You'll need an [Apple Developer Program membership](https://developer.apple.com/programs/) ($99/year) and an [Expo account](https://expo.dev/signup) (free). + + See the full guide: [Deploy to App Store](/getting-started/deploy-app-store) - - You can add backend services by integrating with Firebase or Supabase: - - **Supabase** (Recommended): - - Prompt the AI: "Add Supabase authentication and database" - - Create a Supabase project and get your API keys - - Store credentials securely using Supabase secrets - - Use Supabase Edge Functions for server-side logic - - **Firebase**: - - Ask the AI to "integrate Firebase authentication and Firestore" - - Set up your Firebase project - - Configure authentication methods (email, Google, etc.) - - **Note**: Be careful with authentication - if implemented incorrectly, you could lock yourself out of your app. + + **[Vibecode Cloud](/features/vibecode-cloud)** is the easiest way — it gives you a database, authentication, and file storage with a single prompt. Just tell the AI "add a database and authentication to my app" and it sets everything up automatically. + + Vibecode Cloud is available on Plus plans and above. See the [Backend & Auth guide](/features/backend-auth) for details on how it works under the hood. + + You can also integrate external services like Supabase or Firebase if you prefer — just prompt the AI to add the integration. - To start a new chat session: - 1. Look for the "New Chat" or "+" button in the Vibecode workspace - 2. This will create a fresh conversation while preserving your existing chats - 3. You can always return to previous chats by selecting them from your chat history - - Starting a new chat is useful when you want to begin a completely new project or explore a different idea. + Look for the "New Chat" or "+" button in the Vibecode workspace. This creates a fresh conversation while preserving your existing chats. You can always return to previous chats by selecting them from your chat history. - To download your project code: - 1. Open your project in the Vibecode workspace - 2. Look for the "Export" or "Download Code" option in the menu - 3. Select the export format (typically a ZIP file) - 4. Your complete source code will be downloaded, including all dependencies - - The exported code is a complete React Native/Expo project that you can run locally, modify, and deploy as you wish. + Long-press on any app in your projects list and select "Download Code." Check your email for the download link. The exported code is a complete React Native/Expo project that you can run locally, modify, and deploy. + + See the full guide: [Download Your Code](/getting-started/download-code) @@ -162,15 +130,17 @@ Find answers to common questions about Vibecode, our features, and how to get th - We currently have a Vibecode Cloud feature in beta that allows you to add a backend to your app. It is not yet fully functional. + Yes! [Vibecode Cloud](/features/vibecode-cloud) provides a built-in backend for your app with database, authentication, and file storage. Just tell the AI "add a database and authentication to my app" and it sets everything up automatically. - However, you can integrate with backend services like Supabase or Firebase. Simply prompt the AI to add backend connectivity, and it will guide you through the integration process. This allows you to store user data, implement authentication, and build more complex applications. + Vibecode Cloud is available on Plus plans and above. See the [Vibecode Cloud guide](/features/vibecode-cloud) for details. + + You can also integrate with external services like Supabase or Firebase if you prefer. - We currently do not support Auth/DB, so we do not recommend adding this feature even though it is possible. If it is added, there is a chance you could lock yourself out of your own app without being able to recover it since there is no database functionality (yet). + Yes! With [Vibecode Cloud](/features/vibecode-cloud) (available on Plus plans and above), you can add user authentication to your app. Tell the AI "add login to my app" and it will set up secure email/password authentication. - We currently have a Vibecode Cloud feature in beta that allows you to add a backend to your app. It is not yet fully functional. + For Google Sign-In, see the [Google Sign-In setup guide](/google-login/setup). @@ -178,87 +148,53 @@ Find answers to common questions about Vibecode, our features, and how to get th - To connect to your app via SSH: - 1. Navigate to the Export/SSH section in your workspace - 2. Enable SSH access for your project - 3. Use the provided connection details and credentials - 4. Connect using any SSH client or terminal - - SSH access allows you to interact with your app's development environment directly, useful for advanced debugging and configuration. + Navigate to the Export/SSH section in the [Pinch to Build menu](/getting-started/pinch-to-build), or use the project dropdown. Click "Connect via SSH" and follow the instructions sent to your email. + + See the full guide: [Export and SSH](/getting-started/export-ssh) - Vibecode generates **true native mobile apps**, not web apps. Your apps are built using React Native and Expo, which compile to native iOS and Android code. This means: - - Full access to native device features (camera, sensors, notifications, etc.) - - Native performance and user experience - - Ability to publish to app stores - - Offline functionality - - While React Native uses JavaScript, the UI components are genuine native components, not web views. + Vibecode generates **true native mobile apps**, not web apps. Your apps are built using React Native and Expo, which compile to native iOS and Android code. This means full access to native device features (camera, sensors, notifications), native performance, and ability to publish to app stores. - Yes! While Vibecode primarily focuses on mobile apps, you can also build web applications. The same React Native codebase can be adapted for web using React Native Web or you can specifically request a web-focused build. - - Simply prompt the AI to "create a web app" or "make this compatible with web browsers" and it will generate the appropriate code. + Yes! While Vibecode primarily focuses on mobile apps, you can also build web applications. Simply prompt the AI to "create a web app" and it will generate the appropriate code. See [Building on Web](/getting-started/web-app) for details. -## Account +## Account & Billing - To upgrade your Vibecode account: - 1. Go to the Vibecode dashboard/workspace - 2. Navigate to Settings or Account - 3. Select "Upgrade" or "Plans" - 4. Choose your desired plan (Pro, Premium, etc.) - 5. Complete the payment process - - Upgrading gives you access to more credits, advanced features, and increased usage limits. - + **Web:** Sign into Vibecode and click Upgrade in the bottom left. - - To update your email address: - 1. Log into your Vibecode workspace - 2. Go to Account Settings - 3. Find the Email section - 4. Enter your new email address - 5. Verify the change via confirmation email - - If you have trouble updating your email, contact support for assistance. - - + **iPhone:** Click the Profile or Settings button and scroll down to "Upgrade Subscription." -## Billing & Subscription + See [Plans and Credits](/getting-started/plans-and-credits) for plan details and pricing. + - - No, you own all the code and data you create with Vibecode. We store your projects temporarily to enable the building and iteration process, but: - - You retain full ownership of your code - - You can export your code at any time - - You can delete your projects whenever you want - - We don't claim any intellectual property rights to your creations - - Your code is yours to use, modify, and distribute as you see fit. + No, you own all the code and data you create with Vibecode. You retain full ownership, can export your code at any time, and can delete your projects whenever you want. We don't claim any intellectual property rights to your creations. - To cancel your Vibecode subscription: - 1. Log into your Vibecode workspace - 2. Navigate to Account Settings or Billing - 3. Find the Subscription section - 4. Click "Cancel Subscription" - 5. Confirm the cancellation - - Your subscription will remain active until the end of your current billing period. You'll retain access to your projects and can still export your code even after cancellation. + **Web:** Go to [vibecodeapp.com/account](https://www.vibecodeapp.com/account) and click "Manage Subscription." + + **iOS:** Follow the [Apple cancellation instructions](https://support.apple.com/guide/iphone/view-or-cancel-subscriptions-iph4e3e7324f/ios). + + Your subscription remains active until the end of your billing period. ## Still have questions? -Can't find the answer you're looking for? Please reach out to our support team. +Can't find the answer you're looking for? Check the [Troubleshooting guide](/troubleshooting) or reach out to our support team. - - Get help from our support team - + + + Solutions to common issues + + + Get help from our support team + + diff --git a/features/backend-auth.mdx b/features/backend-auth.mdx index 4427448..e186d2a 100644 --- a/features/backend-auth.mdx +++ b/features/backend-auth.mdx @@ -138,9 +138,16 @@ Your database deploys with your app. You can view and manage it from the **Datab This is usually a session configuration issue. Ask the AI to verify the auth configuration—especially the cookie settings and trusted origins. - - **Need help?** Reach out via live support chat in the app for the fastest - support. You can also join our [Discord - community](https://discord.gg/qXyWYYX5Ts) to connect with other Vibecode - builders. - +## Next Steps + + + + Quick overview of cloud features + + + Add Google login to your app + + + Go live with your backend + + diff --git a/features/haptics.mdx b/features/haptics.mdx index 7121fdf..e14d932 100644 --- a/features/haptics.mdx +++ b/features/haptics.mdx @@ -24,9 +24,16 @@ Vibecode offers a range of haptic feedback options to match different interactio - **Test on real devices** - Haptics feel different across devices. Always test your patterns on actual hardware. - **Consider accessibility** - Some users may have haptic feedback disabled in their system settings. Design your app to work well with or without haptics. -## What's Next? - -Once you've added haptics to your app, you can: - -- Preview your app on a real device to feel the haptics in action -- Customize timing for more complex haptic patterns \ No newline at end of file +## Next Steps + + + + See the integration reference + + + Add audio alongside haptics + + + More native iOS patterns + + \ No newline at end of file diff --git a/features/image-generation.mdx b/features/image-generation.mdx index b613203..8cca7e1 100644 --- a/features/image-generation.mdx +++ b/features/image-generation.mdx @@ -36,4 +36,18 @@ You can also add icons. When in the image tab, select **Icons**. This will make sure you are using the best image model in the world for generating icons. -After selecting "Icon" just describe the type of icon you want to include in your app. \ No newline at end of file +After selecting "Icon" just describe the type of icon you want to include in your app. + +## Next Steps + + + + Add audio to your app + + + See all available integrations + + + Share your app with the world + + \ No newline at end of file diff --git a/features/sound-generation.mdx b/features/sound-generation.mdx index 625fa4e..0fea460 100644 --- a/features/sound-generation.mdx +++ b/features/sound-generation.mdx @@ -3,8 +3,6 @@ title: "Sound Generation" description: "Create and integrate dynamic audio experiences in your apps" --- -# Sounds and Music - Adding sound to your mobile app transforms how users experience it. A satisfying click confirms a button tap, a chime celebrates success, and ambient music sets the mood for focus or relaxation. With Vibecode, you can generate and integrate audio for any moment—whether it's feedback on user actions, voice guidance, or immersive background music. The right sounds make your app feel polished, responsive, and memorable.