# Changelog Source: https://docs.onspace.ai/changelog Stay updated with OnSpace AI's latest features, enhancements, and platform improvements. * **Sign in with Apple**: You can now enable Sign in with Apple in OnSpace Cloud, allowing users to securely and seamlessly sign in to apps and websites built with OnSpace using their Apple ID. * **Authentication Email Templates & SMTP**: You can now manage authentication emails in Cloud with customizable templates for sign-up confirmation, magic link login, password reset, email change verification, and more. We’ve also added SMTP settings, so you can use your own email service for more reliable delivery in production. * **Unpublish Your Project**: Changed your mind? You can now unpublish your project anytime — take it offline instantly with just one click. * **Disconnect GitHub**: Need a fresh start? You can now disconnect your GitHub account from your project whenever you need to. * **Better Error Messages for App Store Submissions**: When something goes wrong during your App Store submission, you'll now see cleaner, more readable error messages so you know exactly what to fix. * **AI Fix for APK & AAB Build Failures**: Hit a build error on your APK or AAB? Just click Fix and let AI sort it out for you — no debugging, no frustration. * **Publish from Chat**: No more hunting for the publish button. Just hit Publish right in the chat and your project goes live — simple as that. * **Multilingual Support**: OnSpace AI now speaks your language — literally. The platform is now available in multiple languages, so you can browse and build in whatever feels most natural to you. * **Built-in Analytics Dashboard**: Know your audience without the guesswork. Track visitors, pageviews, traffic sources, and user behavior with clean, real-time analytics built right into OnSpace. Works seamlessly across both your mobile apps and websites - see which pages perform best, where your traffic comes from, and how users interact with your projects. No third-party tools needed - just pure insights to help you build better. * **Stripe Integration**: Skip the payment setup headaches. Simply connect your Stripe account, describe your payment needs, and watch OnSpace AI generate everything - payment screens, backend logic, customer management, and secure processing. From "I need \$9.99 subscriptions" to fully functional checkout in minutes. Because building payments should be as easy as describing them. * **OnSpace Mobile App**: No-code full-stack development now fits in your pocket. Build complete web applications anywhere, anytime directly from your phone. Whether you're on the subway, at a coffee shop, or lounging at home - your next breakthrough app is just a few taps away. Because great ideas don't wait for you to get back to your desk. * **OnSpace Rewards Program**: Earn credits by sharing the love. Invite friends and get 200 credits each when they sign up, plus 2,000 bonus credits when they go Pro. Share your creations on social media and earn up to 6,000 credits for quality posts. Build cool stuff, tell the world, get rewarded - it's that simple. * **OnSpace Cloud Management**: Complete backend control at your fingertips. Manage Storage, Edge Functions, AI usage, Secrets, and Logs all from one unified dashboard. Monitor your app's performance, track AI model usage, secure your API keys, and debug with real-time logs. Full-stack visibility made simple. * **Video AI Models**: Sora2 and VEO3.1 now available for instant video generation. Create compelling video AI apps with state-of-the-art models that turn text into stunning visuals. From concept to video content in seconds - because the future of storytelling is AI-powered and effortless. * **Built-in AI**: Complete AI intelligence baked right into your development workflow. Skip the API hassle and add smart features like content analysis, chatbots, voice interfaces, and automated workflows instantly. From simple text processing to complex decision-making - all the AI power you need, zero configuration required. * **Add Existing Domain**: Add your own domain to any OnSpace AI project. Transform your staging URL into a professional brand with automatic SSL, single A-record setup, and seamless DNS management. From yourproject.onspace.app to yourapp.com in minutes - because great apps deserve memorable addresses. * **Download Android AAB**: Build and download your Android App Bundle for Google Play Console distribution. Production-ready AAB files in 2 minutes, complete with app configuration and direct Google Play upload compatibility. From OnSpace AI to Play Store in record time - because great apps deserve great distribution. * **In-App Chat Builder**: Build apps anywhere—now directly from in‑app chat. Skip the upload dance and start creating instantly. Just describe what you want, and watch your app come to life in real-time. Building apps has never been this conversational. * **Browser Notifications**: Stay in the loop with real-time notifications for version completions, APK packaging, and iOS releases. We'll ping you the moment your app is live and ready to download. * **Apple Account Login**: Sign in seamlessly with your Apple ID directly on our website. * **Publish to App Store**: Transform your OnSpace projects into live App Store apps with one-click submission. Complete Apple Developer integration handles builds, authentication, and submission automatically. From idea to App Store in under 2 minutes - no Xcode, no certificates, no headaches. We handle the technical complexity so you can focus on building amazing apps. 📱✨ * **Spaces Backend + Data Management**: Introducing OnSpace's complete serverless backend solution with visual data management. Your full-stack infrastructure materializes instantly - no setup headaches, no server configuration required. * **Cloud Agent**: Real-time monitoring and analysis of your application's runtime behavior with intelligent error detection and performance profiling. Proactive issue identification with contextual debugging insights - your code gets a guardian angel that actually knows what it's doing. * **Download Android APK**: Export your mobile apps as native APK files for direct Android installation and team sharing. Skip the app store hassles - download, install, and distribute your apps instantly to any Android device. Perfect for testing, demos, or getting feedback from your team before going live. * **QR Code Mobile Preview**: Instant mobile app testing with enhanced QR code scanning across iOS and Android. Fresh app releases with optimized web QR display for crystal-clear scanning experience. * **Intelligent File Upload**: Our AI file agent instantly converts any uploaded file into structured, AI-readable format. Now supporting .png, .jpg, .jpeg, .webp, .svg, .gif, .pdf, .docx, .pptx, .xlsx, .txt, and .md formats - seamless data processing that understands your content automatically. * **Static Syntax Detection**: Automatic detection of syntax errors ensures your code is structurally sound before deployment. * **Meet Angie, Your AI Assistant**: Our new AI assistant is now live and ready to help with any questions, troubleshooting, or guidance you need. Chat directly with Angie for instant support and personalized assistance. * **Cross-Platform Intelligence**: Enhanced agent with automatic platform detection that intelligently identifies when users attempt to create website projects. The agent now seamlessly recognizes your intent and recommends switching to the website platform for optimal project creation. * **React Native Overhaul**: Complete mobile app generation refactor with improved performance, better component architecture, and smoother iOS/Android compatibility. Your mobile apps just got a major upgrade under the hood. * **Smart Code Validation**: Real-time syntax checking catches errors, unclosed tags, and code issues before they break your build. Clean code delivered. * **Fast-Apply Intelligence**: Enhanced model reduces regeneration attempts with smarter first-try accuracy. Less waiting, more building. Your ideas flow from concept to code faster than ever. * **React Framework Support**: Websites now generate in both React and HTML. Choose React for dynamic, interactive applications or HTML for lightning-fast static sites.More powerful options for every project scenario. * **Enhanced Conversation Flow**: Streamlined chat experience with improved AI responses and smoother interaction patterns. Less friction, more creation. * **Agent Workflow Visualization**: Enhanced real-time display of agent mode progress during development. Watch your ideas come to life with crystal-clear insights into every step of the creation process. * **Code Editor Unlocked**: Full code editor access for everyone. Free users can now view, explore, and edit the clean code behind their creations. No paywalls between you and your code. * **Figma Multi-Page Support**: World's first and only platform supporting multi-page Figma imports. Upload your complete Figma designs and watch our AI transform entire projects into fully functional app. From concept to code, preserving every detail across all your pages. * **Usage-Based Credits**: Smarter credit system that charges based on actual resource consumption, not message count. Generate more ideas, iterate freely, and only pay for what you actually build. More creativity, less counting. * **Project Privacy Controls**: Members can now set projects to private or public. Keep your work confidential during development, then showcase your masterpieces when ready. Your projects, your choice, your control. Introducing our **OnSpace agent** that takes care of the technical headaches so you can focus on innovation. * **Auto-Dependency Detection**: Smart installation process automatically detects and installs required packages. No more dependency headaches or manual configuration - our agent handles it all behind the scenes. * **Autonomous Bug Fixing**: Our OnSpace agent automatically identifies and resolves bugs during task execution. Zero manual intervention required - just sit back and watch your code heal itself. * **Homepage Redesign**: Fresh new look with improved performance and cleaner navigation. 3x faster loading times because nobody likes waiting for websites about making websites. * **First App on App Store**: Our first mobile app just went live on the iOS App Store, created 100% with OnSpace AI. Nothing validates your product like using it yourself and being genuinely impressed with the results. * **Creation Replay**: Experience the complete development journey of your mobile app from start to finish. Perfect for understanding the development process or showcasing your project. * **Mobile App Preview**: Preview your generated mobile apps directly in our iOS/Android app with instant testing on real devices. Test on your mobile instantly, then easily share apps with anyone - no TestFlight hassles, no App Store approval waits. Just scan, test, and share. * **React Native Mobile Apps**: Our AI Agent now builds complete mobile apps for iOS and Android. Same simple file upload process, same AI magic, but now your apps run everywhere. One codebase, infinite possibilities. * **Stripe Payments**: Add secure payment processing to your apps with one click. All API keys stored safely on our backend - no sensitive data exposed in your frontend code. Your privacy and security are our top priorities. Ka-ching! 💰 * **Full-Stack Development**: Complete Supabase integration with database, storage, and edge functions. Build real applications with backend logic, not just pretty websites. From frontend to backend in one seamless workflow. * **View Code**: Peek under the hood and see the clean, production-ready code behind your website. * Free users can admire the craftsmanship * Members get full editing superpowers * **Custom Domains**: Members can connect their own domain with automatic SSL setup. Forgot to renew your membership? We'll keep your domain warm for 30 days. * **Auto-Renewal:** Set it and forget it. Your membership renews automatically so you can focus on creating, not admin tasks. * **Version Control:** Every successful build is automatically saved with one-click rollback. Made a mistake? Instantly restore any previous version. * **Inline Editing**: Click and edit text or images directly on your live website. What you see is what you get, instantly. No credit required. * **Select & Chat:** Highlight any element on your page and simply tell our AI what you want changed through chat. Point, describe, and watch it transform instantly. * **Link Previews:** Share your website anywhere and get beautiful previews with proper titles and images. First impressions matter. * **No Charge for Failures**: Website creation failed due to our error? We won't charge you a single credit. Fair is fair, and bugs are on us. * **Project Dashboard**: Centralized hub to manage all your websites with quick access and status overview. * **Image Upload in Chat**: Drop images directly into chat while editing your site. Visual feedback makes communication crystal clear. * **AI Fix**: Website acting up? Hit "Fix now" and let our AI automatically debug and resolve issues. No technical skills required. * **Credit Usage**: Real-time tracking of your credit consumption with detailed breakdowns. Know exactly where your budget goes. * **Privacy Controls**: Free users enjoy public sites perfect for showcasing and sharing. Members unlock private sites—ideal for client previews and work-in-progress projects. * **Ad-free for Members**: Members get clean, distraction-free websites with zero branding from us. It's your vision, your brand, your spotlight. * **Live Preview:** Watch your changes come to life instantly as you build. Say goodbye to the endless refresh-and-hope cycle. * **Custom Domains**: Each website gets its own unique domain with automatic HTTPS. Professional URLs for professional projects. * **Profile Avatar**: Upload your photo, company logo, or even your pet's picture. Your creativity, your rules. We're just here to make it shine online. * **Mobile Support**: Fully responsive interface optimized for smartphones and tablets. Create and edit websites on the go with touch-friendly controls. * **Chat-based Editing**: Natural language website editing - just describe what you want changed and our AI handles the implementation. No coding vocabulary required. * **File to Website Converter**: Upload any file and get a complete, responsive website in seconds. Zero coding required, maximum results delivered. * **Documents**: PDF, DOCX, TXT, MD, PPTX, XLSX * **Images**: PNG, JPG, JPEG, WEBP, SVG, GIF * **Magic**: Included # Download Andriod AAB Source: https://docs.onspace.ai/features/aab Build and download your Android App Bundle for Google Play Console distribution ### **What is Android AAB?** Android App Bundle (AAB) is Google's publishing format that lets you deliver optimized APKs for each user's device configuration. OnSpace AI generates production-ready AAB files that you can directly upload to Google Play Console. AAB downloads are available for **Pro users only** ### **How to Download Android AAB** #### **Step 1: Access Download Menu** Navigate to your project in OnSpace AI and click the **Download** button in the top-right corner. From the dropdown menu, select **Download AAB**. Hero Dark #### **Step 2: Start the Build Process** Click the **Build** button to begin generating your Android App Bundle. Hero Dark #### **Step 3: Configure Your App Details** Before building, you'll need to provide: * **Upload App Icon**: Choose an icon file for your application * **App Name**: We'll auto-generate this, but you can edit it * **App Version**: Customize your version number if needed * **Android Application ID**: Modify the unique identifier for your app（Required to use only underscores (\_), lowercase letters (a-z), periods (.), and numbers, beginning with a letter.） Hero Dark #### **Step 4: Build Your AAB** Click **Build New AAB** to start the generation process. * Build time: Approximately **2 minutes** - Cost: **500 credits** per build Hero Dark #### **Step 5: Download Your AAB File** Once the build is complete, you have three download options: 1. **Direct Download**: Click the download button to get your .aab file immediately 2. **QR Code**: Scan the QR code with your mobile device 3. **Share Link**: Copy the direct link to share with others or download later Hero Dark ### **Publishing to Google Play Console** After downloading your AAB file, follow these steps to publish your app: #### **Step 1: Access Google Play Console** 1. Go to [Google Play Console](https://play.google.com/console) 2. Sign in with your Google Developer account 3. If you don't have a developer account, you'll need to register and pay the one-time \$25 registration fee #### **Step 2: Create a New App** 1. Click **Create app** in Google Play Console 2. Fill in your app details: * App name * Default language * App or game selection * Free or paid status 3. Accept the declarations and click **Create app** #### **Step 3: Upload Your AAB File** 1. Navigate to **Production** in the left sidebar 2. Click **Create new release** 3. Upload the .aab file you downloaded from OnSpace AI 4. Fill in the release details and notes #### **Step 4: Complete Store Listing** Before publishing, ensure you complete: * Store listing (screenshots, descriptions) * Content rating questionnaire * Target audience and content * Privacy policy * App signing (Google Play will handle this automatically) #### **Step 5: Review and Publish** 1. Review all sections in the Google Play Console dashboard 2. Submit for review when all requirements are met 3. Google will review your app (typically takes 1-3 days) 4. Once approved, your app will be live on the Google Play Store ### **Testing Your App** Before publishing, we recommend: - Testing the AAB on multiple Android devices - Using Google Play Console's **Internal Testing** feature - Checking app performance and functionality ### **Troubleshooting** **Build Failed?** * Ensure your project compiles successfully in OnSpace AI * Check that all required dependencies are properly configured * Verify your icon meets Android requirements (should be high resolution PNG) **Upload Issues to Google Play Console?** * Verify the AAB file isn't corrupted during download * Ensure your Google Developer account is in good standing * Check that your Application ID is unique and follows proper naming conventions ### **Next Steps** Once your app is live on Google Play Store, you can: * Track downloads and user engagement * Push updates by building new AAB versions in OnSpace AI * Monetize your app through Google Play's billing system * Gather user feedback and iterate on your product # OnSpace AI Source: https://docs.onspace.ai/features/ai Build smarter apps with integrated AI - zero setup required ### **What's OnSpace AI?** OnSpace AI transforms how you build intelligent applications. Instead of wrestling with API keys, provider configurations, and complex integrations, you get instant access to cutting-edge AI models directly in your development workflow. ### **Smart Features You Can Add Instantly** **Content Intelligence** * **Smart Summarization** – Turn lengthy content into digestible insights * **Language Detection & Translation** – Go global with automatic multilingual support * **Content Analysis** – Extract meaning and sentiment from user inputs **Conversational AI** * **Interactive Chatbots** – Create helpful AI assistants for your users * **Voice Interfaces** – Add speech-to-text and natural language processing * **Q\&A Systems** – Let users query your content naturally **Creative & Generative** * **Content Generation** – AI-powered writing, brainstorming, and ideation * **Visual Creation** – Generate images and visual content on demand * **Code Assistance** – Smart code completion and optimization suggestions **Automation & Workflows** * **Process Automation** – Streamline repetitive tasks with intelligent workflows * **Decision Making** – AI-powered logic for complex business rules * **Data Processing** – Analyze and interpret documents, images, and structured data ### **Getting Started** OnSpace AI is **enabled by default** in your workspace - no additional setup required. When you request AI functionality in your project, OnSpace automatically handles the integration. **Managing AI Settings:** 1. Navigate to **Settings → Integrations → OnSpace AI** 2. Find the **AI** section (shows as "enabled" when active) 3. Choose your preferred behavior from the dropdown menu AI Tools Settings ### **Pricing & Usage** OnSpace AI uses **transparent, pay-as-you-go pricing** model. **Free Tier Included:** * Every workspace gets **300 monthly AI tokens** * Perfect for testing and small projects * No commitments or setup fees **Usage Tracking:** Monitor your AI consumption and manage your balance through **Settings → Account → AI Balance** ### **Available AI Models** OnSpace AI gives you access to the latest models from leading providers: | **Model** | **Key Strengths** | **Best For** | | :----------------------------- | :-------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------- | | **GPT-5.1** | Frontier-grade general-purpose reasoning, adaptive computation, clearer explanations, superior instruction adherence. | Complex problem-solving, advanced conversational AI, reliable multi-step analysis, next-gen applications. | | **GPT-5** | Highest-quality reasoning, complex decision-making, deep understanding. | Critical decision-making, advanced content creation, strategic analysis. | | **Gemini 2.5 Pro** | Deep reasoning, advanced coding, multi-modal analysis, long context understanding. | Complex R\&D, sophisticated agent development, cross-modal tasks. | | **GPT-5 Mini** | Strong performance for general tasks, good speed, cost-effective. | Business workflows, mid-complexity tasks, efficient data processing. | | **Gemini 2.5 Flash** (default) | Excellent balance of performance, high speed, good cost-efficiency for general tasks. | General development, balanced workflows, rapid prototyping. | | **Gemini 2.5 Flash Image** | Specialized for rapid image generation, visual outputs, creative assets. | AI-powered image creation, visual content generation, creative design tools. | | **Gemini 2.5 Flash Lite** | Extremely high speed, very low cost, efficient for high-volume simple tasks. | Large-scale simple tasks, data preprocessing, lightweight embeddings. | | **GPT-5 Nano** | Very high speed, extremely low cost, basic functionality. | Simple responses, data extraction, basic chatbots. | | **Gemini 3 Pro Preview** | Cutting-edge multi-modal reasoning, highest intelligence, advanced R\&D, pioneering capabilities. | Next-generation AI applications, academic research, pioneering multi-modal experiences. | | **Gemini 3 Pro Image Preview** | Next-gen visual synthesis, ultra-high fidelity image generation, advanced prompt adherence, complex visual reasoning. | High-end graphic design, photorealistic asset creation, complex visual interpretation tasks. | **Video Generation Models** | **Model** | **Key Strengths** | **Best For** | | :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | | **Sora 2** | OpenAI's Flagship video generation with synced audio. | General video generation, creative content with audio synchronization. | | **Sora 2 Pro** | OpenAI's Most advanced synced-audio video generation, highest performance. | Professional video production, high-fidelity synchronized audio-video experiences. | | **Veo 3** | Google’s flagship text-to-video model, with synced audio, highest performance. | Advanced video creation, detailed narrative-driven video content with audio. | | **Veo 3.1** | New and improved version of Veo 3, with higher-fidelity video, context-aware audio, and last frame support. | Advanced video creation, nuanced narrative, high-fidelity visual and audio output. | | **Veo 3 Fast** | A faster and cheaper version of Google’s Veo 3 video model, with audio. Good balance of speed and cost. | Rapid video prototyping, cost-efficient video content generation. | | **Veo 3.1 Fast** | New and improved version of Veo 3 Fast, with higher-fidelity video, context-aware audio, and last frame support, excellent speed and cost-efficiency. | Efficient, high-quality video generation, dynamic content with context-aware audio. | ### **Quick Recommendations** * **Just Starting?** Use **Gemini 2.5 Flash** (default) * **Need Maximum Quality?** Choose **GPT-5** or **Gemini 2.5 Pro** * **Building at Scale?** Go with **Gemini 2.5 Flash Lite** or **GPT-5 Nano** * **Creating Images?** Use **Gemini 2.5 Flash Image** * **Making Videos?** Start with Sora 2 (default) for best value, or upgrade to Sora 2 Pro for higher quality # Download Andriod APK Source: https://docs.onspace.ai/features/apk Download Android APK and share with others ### Overview Turn your React Native project into a downloadable Android APK file that you can share with friends, colleagues. ### Step-by-Step Guide #### 1. Navigate to Download Options * Open your completed project in OnSpace * Locate the **Download** button in the top-right corner * Click **Download** and select **Download APK** from the menu Hero Dark #### 2. Initialize APK Build Click the **"Build APK"** button to start the process. Hero Dark Hero Dark #### 3. Customize Your App (Optional) Want to make it uniquely yours? * Click **"Edit"** to access customization options * Update your app's logo/icon * Change the app name to something memorable Hero Dark #### 4. Generate Your APK * After customizing (or if you prefer the defaults), click **"Build New APK"** * **Build Cost:** 500 credits per APK * **Processing Time:** \~2 minutes Hero Dark Hero Dark #### 5. Download & Share Once the build completes, hit **Download** to get your APK file ready for distribution. Hero Dark ### 🚨 Critical Reminder **Version Management Alert** Always download your current APK before building a new one! Each new build overwrites the previous version permanently. **Best Practice:** Create a backup folder for your APK versions with clear naming like `MyApp_v1.0.apk`, `MyApp_v2.0.apk`, etc. ### Pro Tip Test your APK on multiple Android devices before major distribution to ensure compatibility across different screen sizes and Android versions. # Publish to App Store Source: https://docs.onspace.ai/features/appstore Publish your OnSpace projects directly to the App Store with one-click submission ### What's New We're excited to announce seamless App Store publishing! Now you can take your project from idea to live app store listing in just a few clicks - no complex deployment setup required. ### How It Works Our integrated publishing system handles all the technical complexities of App Store submission, letting you focus on building great apps. App Store Publishing Flow ### Step-by-Step Instructions 1. **Navigate to Your Project** * Go to your project page when your app is ready * Click "Publish" to make your project accessible App Store Publishing Flow 2. **Start the Publishing Process** * Click "Publish to App Store" button App Store Publishing Flow 3. **Create New Submission** * For first-time publishers, click "New Submission" App Store Publishing Flow 4. **Complete App Store Information** **a. Developer Credentials** * Enter your Apple Developer email * Enter your Apple Developer password App Store Publishing Flow

Privacy Note: All your App Store credentials and information are stored locally on your computer. We never store your Apple Developer information on our servers.

**b. App Details** * Upload your App Icon (must be .png format) * Enter your App Name * Specify App Version * Provide iOS Bundle Identifier： We automatically generate a unique bundle identifier for your app based on your project name and developer account App Store Publishing Flow 5. **Payment & Building** * Pay 1000 credits for the publishing service * Building in Progress - typically completes in less than 2 minutes App Store Publishing Flow 7. **Apple Authentication** * An authentication dialog will appear * Check your Apple device for a 6-digit verification code * Enter the code in the provided input fields * Click "Submit" to continue App Store Publishing Flow 8. **App Build in Progress** * You'll see a confirmation screen with "App Build in Progress" * Your app will be automatically submitted for App Store review upon completion * Click "View Status" to track the submission progress * The build process typically completes within a few minutes App Store Publishing Flow ### Submission Management Dashboard After submitting your app, you can track all your submissions in the **Store Submissions** dashboard. This centralized hub allows you to: * **Monitor Status**: View real-time status updates for all your app submissions * **Track Progress**: See which apps are building, under review, or live * **Manage Versions**: Keep track of different app versions and their submission dates * **Launch New Apps**: Click "New Submission" to publish additional projects App Store Publishing Flow #### Submission Status Types: * **Building**: Your app is currently being compiled and prepared for submission * **Submitting**: Build complete - your app is being uploaded and submitted to Apple's App Store Connect * **Submitted**: App has been sent to Apple for review * **Failed**: Build or submission process encountered an error. If issues persist, contact our support team for assistance. ### What Happens Next Once the build completes successfully, your app will be automatically submitted to the App Store for review. You can track the review status through the Store Submissions dashboard or Apple's App Store Connect dashboard. At this time, direct publishing to the Google Play Store is not supported. If you need to publish to the Google Play Store, please Visit [**expo.dev**](https://docs.expo.dev/deploy/submit-to-app-stores/#google-play-store) # Scanner Agent Source: https://docs.onspace.ai/features/cloudagent Real-time detection of runtime errors and performance issues as you code. ### What is Scanner Agent? Real-time monitoring and analysis of your application’s runtime behavior with intelligent error detection and performance profiling. Proactive issue identification with contextual debugging insights - your code gets a guardian angel that actually knows what it’s doing. #### Follow these simple steps to activate real-time monitoring for your application: #### **Step 1: Enable Runtime Scanner** Click the **Runtime Scanner** toggle to activate Scanner Agent. The system needs a moment to initialize. Hero Dark #### **Step 2: Check Connection Status** Once activated, Scanner Agent enters **monitoring mode** for real-time stability and performance tracking. Look at the botton side of your screen to check the Scanner Agent status: * **🟢 Live** - Your app is successfully connected to our cloud sandbox Hero Dark * **🔴 Disconnected** - Network connection lost. Click **"Reconnect"** to restore the link Hero Dark #### **Step 3: Monitor and Fix Runtime Errors** When Runtime Scanner detects issues during app execution, they'll appear in the **Runtime Scanner** section. You have three options: * **Fix All** - Automatically resolve all detected errors at once * **Expand & Fix Individual Issues** - Click on a specific error, then hit **"Fix Now"** for targeted repairs * **Dismiss** - Ignore the error if you don't want to address it right now Hero Dark #### **Step 4: Verify Success** After successful fixes, your Runtime Scanner should show a clean slate - no errors detected. Your app is now running smoothly under Cloud Agent's watchful eye. Hero Dark # Code Mode Source: https://docs.onspace.ai/features/codemode Edit your project's source code directly in OnSpace ### What's New We're launching GitHub integration and code viewing capabilities together! Now you can connect to GitHub and view your complete source code repository without leaving the OnSpace platform. ### How It Works Code Mode lets you browse and edit your entire project's source code repository right inside the OnSpace interface. Hero Dark # Configure-sign-in-with-apple Source: https://docs.onspace.ai/features/configure-sign-in-with-apple Learn how to enable and configure **Sign in with Apple** for your project in **OnSpace Cloud**. ## Overview OnSpace Cloud supports **Sign in with Apple**, allowing users to sign in to your app or website with their Apple account. Apple sign-in is disabled by default and must be enabled manually. To complete the setup, you will need credentials from your Apple Developer account, including: * Client ID * Client Secret (JWT) * Private Key (`.p8` file) * Key ID * Team ID * Redirect URL ## Before You Start Make sure you have: * An active Apple Developer account * A configured Apple auth client in Apple Developer Console * A valid Services ID or Bundle ID * A Sign in with Apple private key (`.p8`) * Access to your project in OnSpace Cloud ## Step 1: Open the Apple sign-in settings In your project, go to: **Cloud → Users → Auth** Under **Sign in methods**, locate **Apple**, then click it to open the Apple settings page. Apple1 *Open **Cloud → Users → Auth**, then select **Apple** under Sign in methods.* ## Step 2: Enable Apple sign-in On the **Apple settings** page, turn on **Enable Apple sign-in**. Apple sign-in is disabled by default, so you must enable it manually before entering your credentials. Apple2 *Turn on the **Enable Apple sign-in** toggle.* ## Step 3: Choose your own credentials After Apple sign-in is enabled, select **Your own credentials**. This allows your project to use credentials from your own Apple Developer account. You can complete the setup in either of these ways: 1. Paste an existing Client Secret (JWT). 2. Generate a new Client Secret (JWT) inside OnSpace Cloud using your `.p8` private key. ## Step 4: Enter the Client ID and Client Secret Enter the following values: ### Client ID Enter your Apple **Client ID**. This can be a **Services ID** or **Bundle ID** and usually uses a reverse-domain format. Example: ```text theme={null} com.example.app ``` ### Client Secret (JWT) Enter a valid Apple **Client Secret (JWT)**. If you already have one, paste it into the field. Otherwise, expand **Generate secret** to create one inside OnSpace Cloud. Apple3 *Enter your Client ID and Client Secret, or expand **Generate secret** to create a new JWT.* > **Important:** Apple requires a new client secret to be generated every 6 months using the signing key. Generate a new JWT before the current one expires, or users will no longer be able to sign in. ## Step 5: Generate a Client Secret in OnSpace Cloud Expand **Generate secret**, then complete the following fields. ### Private Key (.p8 file) Click **Upload .p8 file** and select the private key downloaded from Apple Developer Console. The secret-generation tool runs on your device. Your Apple credentials stay private and are not sent to OnSpace servers. ### Key ID Enter your Apple **Key ID**. If the uploaded file uses Apple’s default filename format, such as `AuthKey_XXXXXXXXXX.p8`, the Key ID may be filled automatically. You can edit it when necessary. Example: ```text theme={null} XYZ123ABC4 ``` ### Client ID (Services ID) Enter your Apple **Services ID**. Example: ```text theme={null} com.example.app.service ``` ### Team ID Enter the 10-character **Team ID** from your Apple Developer account. Example: ```text theme={null} ABCD1234EF ``` After all values are entered, click **Generate**. OnSpace Cloud will generate the JWT and insert it into the **Client Secret (JWT)** field. Apple4 *Upload the `.p8` private key and enter the Key ID, Services ID, and Team ID, then click **Generate**.* ## Step 6: Configure email privacy behavior You can optionally enable **Allow users without an email**. This allows users to hide their email address when signing in with Apple. When a user chooses to hide their email, Apple may provide a private relay email address instead of the user’s personal address. ## Step 7: Add the Redirect URL to Apple Developer Console In the **Redirect URL(s)** section, OnSpace Cloud provides the callback URL required for Apple sign-in. Copy the URL exactly as displayed and add it to the **Return URLs** section of your Apple auth client in Apple Developer Console. Apple5 *Copy the Redirect URL exactly as shown and add it to Apple Developer Console under **Return URLs**.* > Do not modify the URL. Differences such as a missing protocol, an extra slash, or a different domain can cause Apple sign-in to fail. ## Step 8: Save and test Apple sign-in After completing the configuration, test the full sign-in flow. Confirm that: * Apple sign-in remains enabled. * The Sign in with Apple button appears in your app or website. * Selecting the button opens Apple’s authentication flow. * A new user can sign in successfully. * A returning user can sign in with the same Apple account. * Apple redirects the user back to the correct app or website. Whenever possible, test using a published website or installed app build rather than relying only on the preview environment. ## Common Issues ### Invalid Client ID Make sure the Client ID exactly matches the Services ID or Bundle ID configured in Apple Developer Console. ### Invalid or expired Client Secret Generate a new JWT and verify the following values: * Private Key (`.p8`) * Key ID * Client ID (Services ID) * Team ID ### Redirect URL mismatch Make sure the Redirect URL displayed by OnSpace Cloud exactly matches the Return URL configured in Apple Developer Console. ### Lost `.p8` file Apple private keys can normally be downloaded only once. If the file is lost, create a new Sign in with Apple key in Apple Developer Console, then generate a new Client Secret in OnSpace Cloud. ## Security Notes * Keep your `.p8` private key secure. * Never expose Apple credentials in frontend code. * Do not share your Client Secret publicly. * Generate a new JWT before the existing one expires. ## Configuration Checklist * Opened **Cloud → Users → Auth → Apple** * Enabled **Apple sign-in** * Selected **Your own credentials** * Entered the Client ID * Added or generated the Client Secret (JWT) * Uploaded the correct `.p8` private key * Entered the Key ID, Services ID, and Team ID * Added the OnSpace Redirect URL to Apple Developer Console * Tested new-user and returning-user sign-in # Configure-sign-in-with-google Source: https://docs.onspace.ai/features/configure-sign-in-with-google Learn how to enable and configure **Sign in with Google** for your app using **OnSpace Cloud**. ## Overview OnSpace Cloud supports **Sign in with Google**, allowing users to create an account or sign in with their existing Google Account. Google sign-in is configured in your project's Cloud authentication settings. To complete the setup, you need to create a Web application OAuth client in Google Cloud and add the callback URL provided by OnSpace. You will need: * A Google Cloud project * A configured Google Auth Platform application * A Web application OAuth client * A Google Client ID * A Google Client Secret * The Callback URL provided by OnSpace Cloud ## Before You Start Make sure you have: * Access to the Google Cloud Console * Permission to create or manage OAuth credentials in the selected Google Cloud project * Access to your project in OnSpace * The app name, support email, and developer contact information you want users to see during Google authorization ## Step 1: Open the Google sign-in settings Open your project in OnSpace and go to: **Cloud → Users → Auth** Under **Sign in methods**, locate **Google**, then click it to open the configuration page. Google1 > **Google sign-in entry:** Open **Cloud → Users → Auth**, then select **Google** under **Sign in methods**. ## Step 2: Review the required OnSpace settings The **Google Settings** page contains the following fields: * **Enable Google Sign-in** * **Google Client ID** * **Google Client Secret** * **Callback URL** Google sign-in is turned off by default. Keep this page open because you will need to copy the Callback URL into Google Cloud. Google2 > **Google settings:** Copy the Callback URL shown on this page. After creating your Google OAuth client, return here to enter the Client ID and Client Secret. ## Step 3: Create or select a Google Cloud project Open the Google Cloud Console and select an existing project, or create a new project for your app. Use a project that you control and plan to keep active for the lifetime of your app. ## Step 4: Configure the Google Auth Platform application In Google Cloud Console, open **Google Auth Platform**. If this is the first OAuth client in the project, click **Get started** and complete the application setup. Provide the required information, including: * **App name** * **User support email** * **Audience** * **Developer contact email** For an app that should allow any Google Account to sign in, choose **External** as the audience. You can also configure your app's branding, homepage, privacy policy, and terms of service. These details may be required when preparing the OAuth app for public production use. ## Step 5: Create a Web application OAuth client In Google Auth Platform, open: **Clients → Create client** Select: **Web application** Enter a recognizable name, such as: ```text theme={null} My App - OnSpace Google Login ``` Use the **Web application** client type because OnSpace Cloud completes the OAuth flow through a server-side callback and requires both a Client ID and Client Secret. ## Step 6: Add the OnSpace Callback URL Return to the Google Settings page in OnSpace Cloud and copy the value shown under: **Callback URL** It will look similar to: ```text theme={null} https://your-project.backend.onspace.ai/auth/v1/callback ``` In the Google OAuth client configuration, paste this value under: **Authorized redirect URIs** The value must match the OnSpace Callback URL exactly. Check the following carefully: * `https://` is included * There are no spaces * Capitalization has not changed * No characters are missing * No extra trailing slash has been added You normally do not need to add this callback under **Authorized JavaScript origins**. Add it only under **Authorized redirect URIs**. Then click **Create** or **Save**. ## Step 7: Copy the Google Client ID and Client Secret After creating the OAuth client, Google provides: * **Client ID** * **Client Secret** Copy both values immediately and store them securely. > **Important:** For newly created OAuth clients, the full Client Secret may only be visible or downloadable when it is created. If you lose it, create or rotate the client secret in Google Cloud. ## Step 8: Complete the configuration in OnSpace Cloud Return to: **Cloud → Users → Auth → Google** Enter the values from Google Cloud: ### Google Client ID Paste the OAuth **Client ID** created for the Web application. It normally ends with: ```text theme={null} .apps.googleusercontent.com ``` ### Google Client Secret Paste the corresponding OAuth **Client Secret**. Use the eye icon to review the value when needed. ### Enable Google Sign-in After confirming that the Client ID, Client Secret, and Callback URL configuration are correct, turn on: **Enable Google Sign-in** Save the configuration if the page displays a save action. ## Step 9: Add Google sign-in to your app Make sure your app's login or sign-up page includes a **Continue with Google** or **Sign in with Google** button. You can ask OnSpace AI to add it with a prompt such as: ```text theme={null} Add Sign in with Google to the login and sign-up pages. Keep the existing email and Apple sign-in options. ``` Review the generated interface before publishing. ## Step 10: Test Google sign-in Test the complete sign-in flow in a published website or installed app build. Confirm that: * The Google sign-in button is visible * Selecting it opens Google's authorization flow * The correct app name is displayed * A new user can create an account * The user returns to the app after authorization * Returning users can sign in with the same Google Account * A user record appears in **Cloud → Users** ## Common Issues ### `redirect_uri_mismatch` The Callback URL sent during login does not exactly match an Authorized redirect URI in Google Cloud. Copy the URL from OnSpace again and check: * Scheme (`https://`) * Capitalization * Path * Trailing slash * Extra spaces ### `invalid_client` The Client ID or Client Secret is incorrect. Confirm that: * Both values come from the same OAuth client * The OAuth client type is **Web application** * The complete Client Secret was copied * The secret has not been deleted or rotated ### Access blocked or app not configured Review the Google Auth Platform setup and confirm that: * App information is complete * The audience is configured correctly * Required contact information is present * The OAuth client belongs to the correct Google Cloud project ### Only selected accounts can sign in Check the app's **Audience** and publishing status. For public access, configure the app for an external audience and complete any production or verification steps requested by Google. ### Google sign-in works in testing but not after publishing Confirm that the published app is using the same OnSpace project and callback URL that were configured in Google Cloud. Also verify that the Client ID and Client Secret in OnSpace were not replaced with credentials from another Google Cloud project. ## Security Notes * Never expose the Google Client Secret in frontend code * Do not publish the Client Secret in documentation, screenshots, repositories, or support messages * Store a backup securely when the secret is created * Rotate the secret immediately if it may have been exposed * Remove unused OAuth clients and old secrets from Google Cloud ## Configuration Checklist Before testing, confirm that: * A Google Cloud project has been selected * Google Auth Platform has been configured * The audience is correct for the intended users * A **Web application** OAuth client has been created * The OnSpace Callback URL has been added under **Authorized redirect URIs** * The Google Client ID has been entered in OnSpace * The Google Client Secret has been entered in OnSpace * **Enable Google Sign-in** has been turned on * A Google sign-in button exists in the app * The full sign-in flow has been tested # Custom Domain Source: https://docs.onspace.ai/features/custom-domain Add your own domain to any OnSpace AI project. OnSpace AI makes it simple to publish your project with either a free staging subdomain (e.g., `yourproject.onspace.app`) or your own custom domain. This comprehensive guide covers domain connection, troubleshooting, and hosting options. ## Why Custom Domains Matter Transform your project's online presence with a custom domain: * **🎯 Professional Branding** - Build trust with a branded URL * **📈 Better SEO** - Improve search engine rankings * **💭 Memorable URLs** - Easy to share and remember * **🔒 Enhanced Trust** - Users feel more confident with professional domainsRecommended Domain Providers * [Namecheap](https://www.namecheap.com) - Budget-friendly with excellent support * [Cloudflare](https://www.cloudflare.com) - Built-in CDN and security features * [GoDaddy](https://www.godaddy.com) - Popular choice with global availability * [Google Domains](https://domains.google.com) - Simple interface and reliable service ## Quick Setup with Entri Integration ### Step 1: Access Domain Settings Navigate to **Project** → **Publish** → **Add Existing Domain** → **Connect Domains** Access Domain Settings ### Step 2: Enter Your Domain Input your domain name (e.g., `myapp.com` or `app.mycompany.com`) OnSpace AI streamlines domain connection with a straightforward DNS setup process. Unlike complex multi-record configurations, we only require a single A Record to get your custom domain live. ### Step 3: **Copy DNS Information** Once validated, you'll see the DNS configuration panel with three key pieces of information: * **Type**: Always "A" for OnSpace AI domains * **Host**: Shows "@" (root domain) with a copy button * **Target**: Your specific IP address with a copy button Access Domain Settings ### Step 4:**Configure at Your Domain Provider** Take the Host and Target IP Address values and add them to your domain provider's DNS settings. ### Popular Provider Instructions Login to Cloudflare Dashboard 2. Select your domain 3. Go to **DNS** → **Records** 4. Add the required A record 5. Set proxy status to "DNS only" (gray cloud icon) 1. Access your Namecheap account 2. Navigate to **Domain List** → **Manage** 3. Click **Advanced DNS** 4. Add new A record with OnSpace values 5. Save changes 1. Login to GoDaddy account 2. Go to **My Products** → **DNS** 3. Click **Manage** next to your domain 4. Add DNS record with provided values 5. Save configuration ## SSL Certificate Management ### Automatic SSL Provisioning OnSpace AI automatically handles SSL certificates for all domains using Let's Encrypt - no manual configuration required! **Features:** * 🔒 **Auto-Issuance** - Certificates generated upon domain verification * 🔄 **Auto-Renewal** - Renewed before expiration automatically * 💰 **No Extra Cost** - Included with Pro plans * 🚀 **Instant HTTPS** - All traffic redirected to secure connections ## Troubleshooting Guide **Common Fixes:** * Ensure DNS records match exactly * Remove conflicting existing records * Wait for full DNS propagation (up to 48 hours) * Check domain isn't expired or locked ### SSL Certificate Problems **Symptoms:** Browser security warnings or certificate errors **Solutions:** * Wait 20 minutes after domain verification for SSL provisioning * Clear browser cache and cookies * Try accessing via incognito/private mode * Verify domain is properly pointing to OnSpace servers ## Domain Management Best Practices ### Security Checklist * Enable domain registrar lock * Set up two-factor authentication * Configure auto-renewal payments * Monitor expiration dates * Use strong, unique passwords ## Pricing & Feature Comparison | Feature | Free Plan | Pro Plan | | ----------------- | ----------------------- | -------------------- | | OnSpace Subdomain | ✅ `project.onspace.app` | ✅ Included | | Custom Domains | ❌ | ✅ Included | | SSL Certificates | ❌ | ✅ Auto (all domains) | | DNS Management | ❌ | ✅ Full Control | | CDN Integration | ❌ | ✅ Basic | | Custom Redirects | ❌ | ✅ Limited | ## Next Steps Once your custom domain is live: 1. **🔍 SEO Setup** - Submit sitemap to Google Search Console 2. **📊 Analytics** - Configure Google Analytics or similar tracking 3. **🚀 Performance** - Monitor loading speeds and optimize 4. **🔄 Maintenance** - Set up automated monitoring and alerts 5. **📈 Growth** - Plan for traffic scaling and CDN needs ### Need Help? * 💬 **Community Forum** - Get help from other OnSpace users * 📧 **Support Team** - Contact our technical support * 📚 **Documentation** - Browse our comprehensive guides * 🎥 **Video Tutorials** - Watch step-by-step setup videos Ready to make your project live with a professional domain? Start with our automated Entri setup for the fastest configuration experience. # Data Management Source: https://docs.onspace.ai/features/dashboard Manage your app's structured information through Spaces Cloud tables and records. ### **What is Cloud Data Management?** **Data Management in OnSpace Cloud** allows you to store and organize structured information that powers your app—from user profiles and content to orders and activity logs. Everything is managed through **Cloud**, our built-in backend service. This feature is exclusively visible in **Cloud Mode**, which is currently designed specifically for building **mobile apps**. ### **Common Data Scenarios** **User Management** * User profiles and authentication: The Cloud backend only supports email-based authentication with OTP verification.Third-party OAuth providers (Google, Apple, Facebook, Twitter, etc.) coming soon. * Role-based permissions * User preferences and settings **Content Storage** * Product catalogs and inventory * Blog posts and articles * Media libraries and assets **Transaction Handling** * E-commerce orders and payments * Booking and reservation systems * Shopping carts and wishlists ### **Managing Your Data** #### **Adding Records Manually** 1. **Navigate to Dashboard** → Click "Data" tab Cross-App API Connection 2. **Select Your Table** → Choose the relevant data table Cross-App API Connection 3. **Add New Record** → Click "+ Add" and fill in the fields Cross-App API Connection Cross-App API Connection #### **Bulk Data Import (CSV)** **Step-by-Step Import Process:** 1. **Prepare Your Data** → Format your data to match the data structure(.csv format) 2. **Navigate to Dashboard** → Click "Auctions" →Import Cross-App API Connection 3. **Upload & Import** → Use the CSV import feature to bulk upload **Best Practice:** Always export and review the data table CSV format first to avoid import errors. ### **Exported File Details** * **Format:** The downloaded file will be in `.csv` format. * **Content:** It will include all records and columns currently present in the OnSpace data table you selected for export. * **Headers:** The first row of the CSV file will contain the column headers, matching the names as they appear in OnSpace. Cross-App API Connection #### **Data Deletion Options** **Single Record Deletion:** * Click the 🗑️ icon next to any record for individual deletion Cross-App API Connection **Bulk Operations:** * Use **"Delete All"** from the Actions menu to clear entire tables Cross-App API Connection **Irreversible Action:** Bulk deletion cannot be undone. Consider exporting backups before major deletions. # Mini Tools Source: https://docs.onspace.ai/features/minitools Community-contributed mini apps to help builders work more efficiently. ### **What is mini tools?** Mini Tools is a collection of useful community-contributed mini applications designed to help builders streamline their development workflow. These lightweight tools solve common challenges developers face when building websites and apps. ## **UploadNow** **Solve CDN link issues:** Upload images, audio, and video files and get fast-loading CDN links powered by Cloudflare for your projects. **🔗 Try it now:** [https://uploadnow.onspace.build/](https://uploadnow.onspace.build/) ### **What It Does** UploadNow helps you handle media files efficiently by providing fast, reliable CDN links for your website assets. Instead of dealing with slow-loading files or complex hosting setups, simply upload your files and get optimized CDN URLs. ### **Common Use Cases** * **Website logos:** Upload your company logo and get a fast-loading link * **Game development:** Add background music (BGM) to your games with reliable audio links * **Landing pages:** Include explanatory videos that load quickly for better user experience * **Media galleries:** Host images, videos, and audio with global fast delivery * **Static assets:** Any media file that needs to be displayed on your website ### **How It Works** 1. **Upload Your Files** * Drag and drop or browse to select your files * Supports: Images (JPG, PNG, GIF, SVG), Audio (MP3, WAV), Video (MP4, MOV) 2. **Automatic Processing** * Files are automatically uploaded to Cloudflare's global CDN network * Optimized for fast loading worldwide 3. **Get CDN Links** * Receive secure, fast-loading CDN URLs for each uploaded file * Copy the links for use in your projects 4. **Use in OnSpace** * Simply paste the CDN link into OnSpace chat * Tell the agent where to place the file (e.g., "Use this link for the hero section background image") ### **Benefits** * **Fast Loading:** Global CDN ensures quick file delivery * **Reliable:** 99.9% uptime with Cloudflare infrastructure * **Easy Integration:** No complex setup - just upload and use * **Cost Effective:** Free tier available for most use cases * **Global Reach:** Files load quickly worldwide ### **Getting Started** 1. Visit [https://uploadnow.onspace.build/](https://uploadnow.onspace.build/) 2. Upload your media files 3. Copy the generated CDN links 4. Use the links in your OnSpace projects *** **More Mini Tools Coming Soon** The Mini Tools collection is constantly growing with community contributions. Each tool is designed to solve specific challenges that builders commonly face, making the development process more efficient and enjoyable. Have an idea for a mini tool? Join our community and contribute your own solutions to help fellow builders! # Mobile View Source: https://docs.onspace.ai/features/mobileview View your project directly in the OnSpace App. ### **How It Works** 1. **Locate the "View on Your Phone" Button** * Click the **"View on Your Phone"** button in the top-right corner of the screen. Hero Dark 1. **QR Code Popup Window Appears** * A popup window will display a QR code along with device options (**iOS** or **Android**). Hero Dark 2. **Select Your Device** * Choose your mobile platform: * **iOS (Apple iPhone)** * **Android** 3. **Scan QR Code or Download Link** * **Option 1: Scan QR Code** * Open your device’s camera or a QR scanner app. * Point the camera at the QR code to open the **app** directly. * **Option 2: Download Link (if applicable)** * Click the provided download link to install the app. 4. **Try a Live React Native App in OnSpace AI** Open the OnSpace AI App. In the APP list, you'll see the project names—tap on one to experience a real React Native app right from your mobile device. Hero Dark # Name Editing Source: https://docs.onspace.ai/features/nameediting In-Project Name Editing ### How to Edit Project Name Hero Dark ### Step-by-Step Instructions 1. Navigate to Your Project * Open the project you want to rename 2. Access the Project Name * Look for the project name displayed in the top-left corner of the project interface * Click on the project name 3. Select Edit Option * A dropdown menu will appear * Click on "Edit Name" from the menu options 4. Rename Your Project * A popup window will open with the current project name * Enter your desired new project name 5. Save Changes * Click "Save" or confirm the changes # Visibility Controls Source: https://docs.onspace.ai/features/visibilitycontrols Edit your project's source code directly in OnSpace **How It Works** Two ways to control your project's visibility: 1. **Set It From The Start**\ When creating a new project, just select Public or Private right off the bat. Hero Dark 2. **Change Your Mind Later** Forgot to choose? No sweat. We've all been there. Head to your project page → Click the Visibility option in the top-left corner → Switch between Private/Public anytime. Hero Dark **Public Projects** * Show off when you're ready to flex * Get community feedback and props * Build your reputation with actual working demos * Let the world see your genius (when it's actually genius) **Private Projects** * Keep your experimental mess under wraps * Share with specific collaborators only * Perfect for those "it works on my machine" moments # FAQ Source: https://docs.onspace.ai/getting-started/faq Frequently Asked Questions You can build apps, landing pages, web applications, and more—all powered by AI. No! OnSpace is designed for all skill levels. Time varies based on complexity. Break tasks into smaller steps, plan ahead, and refine iteratively to ensure quality while moving quickly. The APK download feature is available now. [Learn more](https://docs.onspace.ai/features/apk) Follow these steps: 1.Structure – Define sections (Homepage, About, Features, etc.). 2.Design – Customize fonts, colors, and layouts. 3.Content – Add images, videos, and text. 4.Refine & Launch – Optimize responsiveness and interactions. Not necessarily. OnSpace’s AI can help you build and refine a straightforward MVP. For rapid scaling or advanced features, technical support may be beneficial. Click "Fix now" for automatic error analysis. The system will suggest potential solutions. Supabase enhances OnSpace by providing enterprise-grade backend services: Core Features: ✓ Secure authentication system ✓ PostgreSQL database with full SQL support ✓ File storage capabilities ✓ Real-time data synchronization Benefits for Users: • Eliminates manual backend setup • Scales automatically with your project • Maintains data security with built-in protections Yes! By connecting your project to GitHub, you can export your code and host it on the server of your choice. Yes! OnSpace works with Stripe and other payment processors. Just ask OnSpace to configure your preferred payment method. While we're still building this feature, you can invite collaborators by connecting your project to GitHub. Yes! You can access and manage your generated code through our GitHub integration or download it directly from the top right corner. Currently, we cannot process links you provide directly. This feature is under development. Please copy and paste the content you need extracted instead. Spaces is OnSpace’s built-in backend service that provides comprehensive serverless infrastructure for your applications. Since Spaces is built into OnSpace, you can start using it immediately with your React Native application - no additional setup required. The Dashboard is your control center for managing all aspects of your app, including database tables, data import/export, performance monitoring, user permissions, and content transactions. As long as you're a subscriber, your data is hosted and available-we take care of it so you don't have to. If you cancel, we'll keep your data for a grace period so you have time to export anything you need. After that, it may be removed. # Welcome Source: https://docs.onspace.ai/getting-started/index [OnSpace AI](https://www.onspace.ai) empowers anyone to turn ideas into powerful AI applications in minutes—no coding required. Our free, no-code platform enables effortless creation of custom AI apps; simply describe your vision and our agentic AI handles the rest. Hero Light Hero Light Hero Dark Hero Dark The OnSpace app, built with React Native and Expo, demonstrates this capability—integrating popular third-party libraries to deliver seamless cross-platform performance across iOS, Android, and Web environments. | Capability | Description | Maturity Level | | :------------------------------ | :----------------------------------------------- | :------------- | | **Native UI/UX** | Build native mobile interfaces & user experience | 🟢 Mature | | **Cross-platform Development** | Support for both iOS and Android platforms | 🟢 Mature | | **Local Storage** | Offline data storage and cache management | 🟢 Mature | | **User Authentication** | Mobile login, authentication | 🟢 Mature | | **Push Notifications** | Local and remote push messaging | 🟢 Mature | | **Backend endpoint** | API key protected endpoint such as claude | 🟢 Mature | | **Device Features Integration** | Camera, GPS, sensors and hardware access | 🟢 Mature | | **APK/AAB Download** | Download Andriod APK/AAB | 🟢 Mature | | **App Store Distribution** | Publish to App Store (Apple) | 🟢 Mature | | **Custom Domain Publishing** | Publish to your own custom domain | 🟢 Mature | | **Web Content Extraction** | Extract specific information from web pages | 🟢 Mature | | **Team Collaboration** | Sync data across users in real-time | 🟡 Developing | ## Get started with OnSpace From Idea to Full-Stack App Watch videos to learn AI coding with OnSpace. Understanding Fee Plan Options Frequently Asked Questions AI-powered coding tools and assistance. Connect with GitHub, Supabase, and more. # Fee Plans Source: https://docs.onspace.ai/getting-started/pricing Understanding Fee Plan Options ### **Subscription** Plan Users can subscribe to a **Pro Membership** with two billing options: ```markdown theme={null} Monthly credits Monthly billing Annual billing 7,500 $25 $252 ($21/month) 15,000 $50 $504 ($42/month) 30,000 $100 $1008 ($84/month) 60,000 $200 $2,004 ($167/month) 90,000 $270 $2,748 ($229/month) 120,000 $350 $3,540 ($295/month) 240,000 $700 $7,056 ($588/month) 360,000 $995 $10,152 ($846/month) 480,000 $1,299 $13,248 ($1,104/month) ``` **Premium Benefits Include**: * Advanced AI coding models * Private projects * Remove the OnSpace badge * Custom domains * APK download * Fast track generation * Credit rollovers * Usage-base AI **Want to see all pricing options?** Visit our [complete pricing page](https://www.onspace.ai/pricing) for detailed plan comparisons, including our free tier with 2,000 monthly credits and additional Pro features. ### **Credit Bundles** Need more credits? Easily top up your credits anytime to keep going beyond your subscription limits. New to OnSpace? Start with our **Free Plan** that includes: * 2,000 monthly credits (500 daily limit) * Public projects * Access to core AI features * Cross-platform app building [View All Plans & Features →](https://www.onspace.ai/pricing) ### **How Credit Rollovers Work** Monthly plans: Roll over unused credits up to your monthly limit (e.g., 6,000 credits max rollover on a 6,000/month plan) Annual plans: Roll over unused credits up to your full yearly allowance (e.g., 144,000 credits max rollover on a 12,000/month annual plan) ### **Important Notes** **Active Subscription Required** * Credit rollovers only apply while your subscription remains active * Keep your plan current to enjoy this benefit **Cancellation Policy** * Upon cancellation of a paid subscription, all unused and rollover credits will expire at the end of the current billing period * Credits will not carry over after subscription termination # Start Building Now Source: https://docs.onspace.ai/getting-started/quick-start In this guide, you'll build your first AI application using Onspace.ai's no-code platform. Whether you want to create a chatbot, image generator, or data analyzer, our agentic AI will handle the technical complexity while you focus on your vision. Support platforms: iOS/Andriod/Web ### Step 1: Design and plan * An [Onspace.ai](https://www.onspace.ai) account ([sign up for free](https://www.onspace.ai/)) * A clear idea of what functionality you want to build * Basic understanding of your target users OnSpace AI offers flexible input methods to capture your app ideas: * **Natural language prompts** - Simply describe your concept * **File attachments** - Upload reference materials, sketches, or mockups * **Figma integration** - Import designs directly from your Figma workspace While you can begin with a broad request like "Build me a fitness tracking app," you'll achieve better results by planning ahead. Consider these key questions: Define your mobile application category—whether it's a habit tracker, social networking app, fitness companion, or productivity tool. Understanding your audience drives smart design decisions. Consider their needs, preferences, and how they'll interact with your mobile app throughout their day. Map out specific user actions. For a fitness tracking app, this might include: * Workout logging and creation * Progress photo uploads * Social sharing features * Push notification reminders * Offline workout access Communicate your desired aesthetic through descriptions or visual references—minimalist, vibrant, sporty, calming, etc. Consider how it will look on both light and dark mobile themes. OnSpace AI specializes in mobile app development using React Native and Expo, enabling you to: * Cross-platform deployment: Build once, deploy to both iOS and Android * Native performance: Deliver smooth, responsive mobile experiences * App store distribution: Package for Apple App Store and Google Play Store ```md [expandable] theme={null} Sample： I want to create a meditation app for college students dealing with stress and anxiety. Key features include: guided meditation sessions, breathing exercises, mood tracking, study break reminders, and offline content access. The design should be calming with soft purple/blue gradients and nature imagery. This will be a mobile app that students install on their phones, so please optimize for touch interactions and use Expo for seamless iOS and Android deployment. ``` ### Step 2: Your first prompt **Crafting effective prompts is essential for getting the best results from AI tools.** If you've already drafted answers to the questions above, you can use them as the foundation for your first prompt. Enter your initial idea, and **OnSpace** will take care of the rest! This is your starting point for any project in **OnSpace**, where you can instantly bring your ideas to life ### Step 3: **Refine your build** Following **OnSpace's** initial application generation from your foundational prompt, you'll likely enter an enhancement cycle requiring: * **Feature augmentation** (modular expansion of capabilities) * **Behavioral/UI parameter tuning** (granular adjustment of functional or aesthetic outputs) * **Anomaly resolution** (systematic debugging of generated artifacts) **Critical Implementation Note:** Employ a *single-parameter modification protocol* - address one enhancement vector per iteration cycle. Parallel modification attempts may introduce compounding variables that degrade output fidelity. ### Step 4: **Preview and Test** **Scan the QR code or download the OnSpace AI app directly.** * **📱 Mobile Preview**: See how your app looks on iOS and Android * **💻 Web Preview**: Test the web version instantly * **🔄 Real-time Updates**: Changes reflect immediately across all platforms * **Download** OnSpace App: iOS: [https://apps.apple.com/app/id6746471538](https://apps.apple.com/app/id6746471538) Hero Dark Andriod: [https://play.google.com/store/apps/details?id=app.onspace.ai\&pcampaignid=web\_share](https://play.google.com/store/apps/details?id=app.onspace.ai\&pcampaignid=web_share) Hero Dark ### Step 5: Deployment **OnSpace** is engineered for maximum deployment flexibility, supporting integration with industry-leading platforms: 1. **Mobile Deployment (Expo Ecosystem)** 1. Build natively with **Expo** for cross-platform compatibility 2. Publish directly to Apple App Store and Google Play(coming soon) 2. **Advanced CI/CD Pipelines (GitHub Integration)** 1. Connect **OnSpace** to your GitHub repository 2. Implement custom build/deploy workflows using your preferred DevOps tools 3. **Manual Export & Custom Hosting** * Download full project artifacts for deployment on any infrastructure # Figma to OnSpace Source: https://docs.onspace.ai/integrations/figma-integration Figma to full-stack app. The Figma to OnSpace AI integration represents a revolutionary approach to transforming static designs into functional, full-stack applications. This seamless workflow eliminates the traditional gap between design and development, enabling designers to create production-ready apps without writing code. ### **Product Architecture** ``` Figma → OnSpace AI → Production App ``` Hero Dark This integration chain provides: * **Design Export**: Direct conversion from Figma to structured code * **AI Enhancement**: Intelligent transformation of static designs into dynamic applications * **Full-Stack Capabilities**: Backend integration, database connections, and deployment * **Real-time Iteration**: Live preview and instant updates ## **Getting Started: From Figma to Live Application** ### **Step 1: Prepare Your Figma Project** First, you'll need to share your Figma project publicly: 1. **Navigate to your Figma project** Hero Dark 2. **Click the "Share" button** located in the top right corner of your Figma interface 3. **In the sharing popup window, click "Copy Link"** (top right of the popup) Hero Dark **Important**: Ensure that access permissions are set to **"Anyone can view"** - this allows OnSpace AI to access your design ### **Step 2: Access OnSpace AI** Visit [**OnSpace.ai**](http://OnSpace.ai) and select your project type: * **For Mobile Applications:** [Click the mobile project](https://onspace.ai/ai-app-builder) * **For Website Projects:** [Click the website project](https://onspace.ai/ai-website-builder) ### **Step 3: Import Your Design** Hero Dark 1. **Locate the Figma import option** - Click the **Figma button** under the chat creation area Hero Dark 2. **Paste your Figma project URL** into the provided field Hero Dark **Note**: If your Import button appears grayed out or unclickable, this indicates that you have pasted an **invalid Figma URL**. 3\. **Click the "Import" button** to begin the process Hero Dark ### **Step 4: AI Processing** Once you've imported your design, OnSpace AI will: * **Fetch your Figma project** automatically * **Analyze your design components** and layouts * **Begin the transformation process** into a functional application ## **What Happens Next?** OnSpace AI will intelligently convert your static Figma design into: * Interactive UI components * Responsive layouts * Functional application logic * Clean, production-ready code # GitHub Integration Source: https://docs.onspace.ai/integrations/github-integration Sync your OnSpace AI project with GitHub for full code ownership, version control, and deployment flexibility. Never get locked into a single platform - your code, your choice. ## Why You Need GitHub Integration As your OnSpace AI project grows from a simple prototype to a real application, you'll face important questions: What if something breaks and you need to roll back? How do you collaborate with developers? What if you want to deploy outside of OnSpace AI? GitHub integration solves these challenges by ensuring you have full version control, collaboration tools, and code portability throughout your app's lifecycle. ### TL;DR: * **The Problem:** Without proper version control, you risk losing work, can't easily collaborate with developers, and might get locked into a single platform. * **The Solution:** By linking your project to GitHub, every change in your OnSpace AI app is backed up in a Git repository in real time. * **What You Get:** Complete code history, ability to collaborate with developers in familiar workflows, and freedom to host or deploy your app anywhere. * **Git** is the version control system that tracks changes in your code. * **GitHub** is the industry-standard platform for hosting Git repositories, making it essential for both solo builders and teams. ## Key Benefits Overview GitHub integration transforms your OnSpace AI project from an isolated prototype into a professional, scalable application. Here's what you get: * **Complete Code Ownership** Your project becomes a standard application codebase stored in your own GitHub repository. Whether it's a web app, mobile app, or full-stack solution – no proprietary formats, no platform dependencies – just clean, portable code you can take anywhere. * **Automatic Version Control** Every change you make is instantly committed with a full audit trail. Accidentally broke something? Roll back to any previous version in seconds. Need to see what changed last week? Complete history at your fingertips. * **Professional Developer Workflows** Developers can contribute using industry-standard GitHub practices – pull requests, code reviews, issue tracking. They work in their preferred IDEs while your changes sync seamlessly from OnSpace AI. * **Deployment Freedom** Deploy your web apps on Vercel, Netlify, or AWS. Publish mobile apps to App Store and Google Play. Host full-stack applications on any cloud platform. You're not tied to OnSpace AI's hosting – choose what works best for your use case and budget. * **Bidirectional Sync** Code changes flow both ways. Edit in OnSpace AI and see updates in GitHub instantly. Push changes from your IDE and watch them appear in OnSpace AI. Work however feels most productive. * **Enterprise Integration** Connect GitHub Actions for automated testing, building, and deployment pipelines. Integrate with your company's existing development workflow. Add security scanning, performance monitoring, or any tools your team already uses for web and mobile development. ## Getting Started Setting up GitHub integration with your OnSpace AI project takes just a few minutes and ensures your code is backed up and version-controlled from day one. ### Prerequisites Before you begin, you'll need: * GitHub Account: Sign up for free at github.com if you don't have one * OnSpace AI Project: An existing project in your OnSpace AI editor (or create a new one) * Repository Permissions: Ability to create repositories in your GitHub account or organization ### Step-by-Step Setup github.gif In your OnSpace AI editor, click the **GitHub icon** in the top-right corner, then select **Connect GitHub**. image.png * You'll be redirected to GitHub's authorization page: * **Select your GitHub account** to authorize OnSpace AI * Click \*\*Continue \*\*to proceed to the permission screen * Review the basic permissions OnSpace AI requests: * Verify your GitHub identity * Know which resources you can access * Act on your behalf * Click **Authorize onspace.ai** to grant initial permissions You'll be returned to OnSpace AI: * The GitHub integration panel will show "**Not Connected**" status * **Select an organization**: Choose between your personal account or any organizations you belong to from the dropdown After selecting your organization, you'll be redirected to GitHub again: * Choose your repository access level: * **All repositories**: Grants access to all current and future repositories (recommended for ease of use) * **Only select repositories**: Choose specific repositories for OnSpace AI access * Click**Install & Authorize** to install the GitHub app to your selected account/organization Back in OnSpace AI: * Select your preferred GitHub account/organization from the dropdown (if not already selected) * Click **Connect Project** to create the repository and establish the connection Once connected successfully: * Status will change to **"Connected"** with a green indicator * You'll see your repository path (e.g., `username/ProjectName`) * An **"Edit in VS Code"** option becomes available * Your project code is now synced to GitHub ### Repository Privacy **Important**: Repositories created through OnSpace AI integration are **private by default**, ensuring your code remains secure and accessible only to you and invited collaborators. ### You're All Set! From this point forward: * Changes in OnSpace AI automatically commit to GitHub * External changes pushed to GitHub sync back to OnSpace AI * You have complete version history and professional backup * Team collaboration through standard GitHub workflows is enabled The connection is bidirectional and real-time, giving you the confidence that your work is always protected and professionally managed. ## Under the Hood: Git Sync ### The Technical Reality OnSpace AI doesn't reinvent version control. Instead, it operates as a Git client that communicates directly with GitHub's API, making standard Git operations on your behalf. Here's exactly how it works. ### Real-Time Repository Operations **When you edit in OnSpace AI**: 1. A commit is created with an auto-generated message describing the change 2. The commit is pushed directly to your GitHub repository's default branch via GitHub API 3. Your repository's commit history updates instantly **When external changes occur**: 1. GitHub webhooks notify OnSpace AI of incoming commits 2. OnSpace AI pulls the latest changes from the default branch 3. The editor refreshes to reflect the new code state 4. File tree and code view update automatically ### Branch Strategy **Default branch focus**: OnSpace AI tracks only your repository's default branch. This design choice: * Simplifies the sync model for reliability * Aligns with CI/CD best practices * Prevents complex merge scenarios in the editor **Feature branch workflow**: External commits to feature branches remain invisible until merged to the default branch. # RevenueCat Integration Source: https://docs.onspace.ai/integrations/revenuecat-integration A comprehensive guide to setting up RevenueCat for your application. ### **Getting Started with RevenueCat** This guide will walk you through the essential steps to integrate RevenueCat with your application, focusing on App Store Connect configuration. ### **What's RevenueCat Integration?** RevenueCat helps you manage subscriptions and in-app purchases for your mobile app. This integration allows you to monetize your OnSpace-built app with ease. ## **1. Prerequisites** * An OnSpace app published to the App Store * Apple Developer Account access * App Store Connect access * Setup all required steps under [https://appstoreconnect.apple.com/business](https://appstoreconnect.apple.com/business) #### **Step 1: Create RevenueCat Account** **Sign up for RevenueCat** * Go to [RevenueCat](https://www.revenuecat.com/) and create an account * Select **Apple** as your platform during setup Hero Dark #### **Step 2: Generate App Store Connect API Key** Navigate to **App Store Connect** → **Users and Access** → **Integrations** → **Team Keys** Hero Dark ### **Create New API Key** 1. **Click** "Create New API Key" button 2. **Set Access Level** to "App Manager" (minimum required) Hero Dark 3. **Download** the API key (.p8 file) and save it securely 4. **Copy** the Issuer ID from the API page Hero Dark #### **Step 3: Upload API Key to RevenueCat** Return to RevenueCat dashboard Hero Dark Upload the .p8 file you downloaded Paste the Issuer ID you copied from App Store Connect Hero Dark Save the configuration #### **Step 4&5: Select Your App** RevenueCat will automatically read your apps from App Store Connect: * **Select** the app you want to set up with RevenueCat * **Don't have an app yet?** Build your first app with OnSpace and publish it to the App Store first Hero Dark Hero Dark #### **Step 6: Set Up In-App Purchase Configuration** Navigate to **App Store Connect** → **Users and Access** → **Integrations** → **In-App Purchase** ### **Generate In-App Purchase Key** Hero Dark 1. **Click** "Go to In-App Purchase Keys" 2. **Navigate** to Users and Access → Integrations Hero Dark 3. **Select** In-App Purchase 4. **Click** "Generate In-App Purchase Key" or the "+" symbol 5. **Enter** a name for the key when prompted Hero Dark **Important Notes** You have one opportunity to download the API key The key will appear under "Active Keys" Upload this key to RevenueCat dashboard #### Step 7: Product Setup **Skip manual product creation in RevenueCat.** Instead: 1. **Set up products** in App Store Connect first 2. **Import products** directly back to RevenueCat 3. This ensures consistency and reduces setup errors #### **Step 8: Export Dashboard** 1. **Click** "Export Dashboard" 2. **You're all set!** Your RevenueCat integration is now complete Hero Dark ### **2. Add App Configuration** * Navigate to your project settings and begin configuring your app. Hero Dark ### **3. Select App Store** * Choose **App Store** as your platform. Hero Dark ### **4. Add App Bundle ID** Hero Dark * **Where to find your "App Bundle ID":** 1. Go to **App Store Connect**. 2. Navigate to **General** ➡️ **App Information**. 3. Copy the **Bundle ID** found under the General Information section. * Paste this Bundle ID into the corresponding field in RevenueCat. Hero Dark *** ### **5. Add App-Specific Shared Secret** Hero Dark * **Where to find your "App-specific Shared Secret":** 1. Go to **App Store Connect**. 2. Navigate to **General** ➡️ **App Information**. 3. Locate the **App-Specific Shared Secret** section. Hero Dark 4. Click **Manage** ➡️ **Generate**. Hero Dark 5. Copy the generated **Shared Secret**. Hero Dark * Paste this Shared Secret into the designated field in RevenueCat. Hero Dark *** ### **6. Add In-App Purchase Key Configuration** Hero Dark * **Where to find your "In-app purchase key configuration":** 1. Go to **App Store Connect**. 2. Navigate to **Users and Access** ➡️ **Integrations**. 3. Select **In-App Purchase**. Hero Dark 4. Click **Generate In-App Purchase Key**, or click the **"+" symbol** next to the "Active" header if you have generated one previously. 5. Enter a name for the key when prompted. Hero Dark 6. Once generated, your key will appear under **Active Keys**. You will have one opportunity to **Download API Key**. Hero Dark 7. Store this downloaded `.p8` file securely, as you will need to upload it to RevenueCat. * **Uploading the In-App Purchase Key to RevenueCat:** 1. In the RevenueCat dashboard, select your App Store app from the **Apps & providers** page within your project settings. 2. Within your app settings, go to the **In-app purchase key configuration** tab. 3. Upload the `.p8` file you downloaded from App Store Connect. Hero Dark *** ### **7. Add App Store Connect API** Hero Dark * **Where to find your "App Store Connect API":** 1. On **App Store Connect**, go to **Users and Access** → **Integrations** → **App Store Connect API**. Hero Dark 2. Click to create a new App Store Connect API key. 3. Ensure the newly created key has at least the **App Manager** access level. Hero Dark 4. **Download the API key** (`.p8` file) and save it securely. * **Uploading the App Store Connect API Key to RevenueCat:** Hero Dark 1. In the RevenueCat dashboard, select your iOS app from the **Apps & providers** page in the navigation. 2. Within your app settings, go to the **App Store Connect API** tab. 3. Upload the `.p8` file you downloaded from App Store Connect. 4. You will then be prompted to input your **Issuer ID**, which you should have saved from when you created the API key. Hero Dark 5. You will also need to input your **Vendor number**. This can be found in App Store Connect under **Payments and Financial Reports** (typically in the top left corner of the page). Hero Dark Hero Dark 6. Click **Save Changes** in the RevenueCat dashboard. *** ### **8. Create Subscriptions** * **Setting up Subscriptions in App Store Connect:** 1. Go to **App Store Connect** ➡️ **Monetization** ➡️ **Subscriptions** ➡️ **Create**. Hero Dark 2. **Create Reference Name**: This is an internal name for your subscription. Hero Dark 3. **Create Subscription**: Fill in both the **Reference Name** and **Product ID**. For example, for a monthly subscription, you might name it "monthly\_subscription" and set the Product ID accordingly. Hero Dark 4. Ensure you **Set Subscription Duration** (e.g., Monthly). Hero Dark 5. **Availability**: By default, it will be set up globally. Hero Dark 6. **Subscription Prices**: Select the desired price from the dropdown. This will automatically convert to the global pricing table. Hero Dark Hero Dark 7. **Localization**: Add a **Subscription Group Display Name**. This is what users will see. 8. **Review Information**: Please ensure you include a **screenshot** of your app and your **review notes** in this section. 9. Make sure to **Save** your subscription. Once you’ve done these, all statuses will automatically change to “**Ready to Submit.**” Hero Dark 10. Repeat this process for any other subscription durations (e.g., yearly). 11. **Localization**: You can use different subscription group display names and app name display options for each localization. Hero Dark Hero Dark * **Importing Products into RevenueCat:** 1. Navigate back to RevenueCat. 2. Go to **Product Catalog** ➡️ **Entitlements**. 3. Click **New Entitlement** (e.g., "pro"). Hero Dark 4. Next, go to **Product Catalog** ➡️ **Products**. Hero Dark 5. Select the app you want to add products to. Hero Dark 6. Choose **Import Products from App Store Connect**. RevenueCat will pull the product data directly. Hero Dark Hero Dark 7. Go back to **Entitlements**, click on the entitlement you created (e.g., "pro"). Hero Dark 8. Click **Attach** to link your products to the entitlement. Hero Dark Hero Dark * **Setting Up Offerings in RevenueCat:** 1. Go to **Product Catalog** ➡️ **Offerings**. Hero Dark 2. Set up a **New Offering**. Hero Dark 3. Create a **New Package** within the offering. Hero Dark 4. Add packages for your different subscription durations (e.g., "Annual" and "Monthly"). Hero Dark # Cloud（Alpha） Source: https://docs.onspace.ai/integrations/spaces-integration Cloud is OnSpace's built-in backend service that provides comprehensive serverless infrastructure for your applications. ## What is Cloud? **Cloud** is OnSpace's built-in backend service that provides a complete serverless backend solution for your React Native applications. Think of it as **having a complete backend infrastructure that materializes instantly** when you need it, without any of the traditional setup headaches. Spaces Dashboard ## Cloud vs Other Backends | Feature | Cloud | Other Backend | | ----------- | ------------- | -------------- | | Setup Time | ✅**Instant** | Hours/Days | | Maintenance | ✅**Zero** | Ongoing | | Integration | ✅**Built-in** | Custom Setup | | Dashboard | ✅**Included** | Build Yourself | ## Core Features **🔐 User Authentication** * OTP and password-based login * Session management * Social auth providers * Third-party OAuth providers (Google, Apple, Facebook, Twitter, etc.) coming soon **🗄️ PostgreSQL Database** * Fully managed database instance * Row Level Security (RLS) built-in * Real-time data sync **📁 File Storage** * Images, documents * Automatic optimization **⚡ Edge Functions** * Serverless API endpoints * Custom business logic **📊 Visual Dashboard** * Data management interface * User administration ## Emails ### Templates Templates lets you customize the emails your users receive during authentication flows. **What are Templates?** Templates is part of the Emails section in OnSpace Cloud. It allows you to manage the email content used in common authentication scenarios, such as sign-up confirmation, password reset, magic link login, and email change verification. Instead of relying on generic system copy, you can tailor these emails to better match your product’s tone and user experience. **Available Templates** You can manage templates for the following authentication events: * Confirm sign up Sent when a user signs up and needs to confirm their email address. * Invite user Sent when inviting a new user to join your app or workspace. * Magic link Sent when a user signs in using a one-time login link. * Change email address Sent when a user updates their email and needs to verify the new address. * Reset password Sent when a user requests a password reset. * Reauthentication Sent when a user needs to verify their identity again before completing a sensitive action. **Why use Templates?** Customizing your authentication emails helps you create a more polished and trustworthy user experience. **Better user clarity** Users can more easily understand why they received an email and what they need to do next. **Stronger brand consistency** Your authentication emails can match your product’s tone, wording, and overall brand experience. **Smoother onboarding and login flows** Clearer emails can reduce confusion during sign-up, login, password reset, and account recovery. **How it works** When a user triggers an authentication action, OnSpace automatically uses the matching email template for that flow. For example: * A new user signs up → the Confirm sign up template is used * A user requests a password reset → the Reset password template is used * A user chooses passwordless login → the Magic link template is used This makes Templates the central place to manage the email copy used across your authentication system. **Best practices** To create effective authentication emails: * Keep the message short and action-oriented * Make the next step obvious * Use wording that matches your app * Add a security reminder for sensitive actions * Avoid overly promotional language in authentication emails ### SMTP Settings SMTP Settings lets you configure a custom email provider for sending authentication emails from your app. **What are SMTP Settings?** SMTP Settings is part of the Emails section in OnSpace Cloud. It allows you to connect your own SMTP provider so authentication emails can be sent through your preferred email service instead of relying on the default built-in mail service. This is especially useful for production apps that need more reliable delivery, better sender control, and a more professional email experience. **Why use SMTP Settings?** Using custom SMTP gives you more control over how your authentication emails are delivered. **More reliable delivery** Production apps often need a dedicated email provider to ensure emails are sent consistently and arrive on time. **Better sender control** You can send emails from your own domain or preferred sender address, which helps create a more professional and trustworthy user experience. **Production-ready setup** Custom SMTP is recommended for live apps that expect real user traffic or higher email volume. **How it works** Once SMTP is configured, OnSpace uses your custom email provider to send authentication emails triggered by your app. These may include emails for flows such as: * Sign-up confirmation * Password reset * Magic link login * Email change verification * Reauthentication This means SMTP Settings controls how your authentication emails are sent, while Templates controls what those emails say. **When should you use it?** SMTP Settings is recommended when: * You are preparing your app for production * You want to send emails from your own domain * You need more reliable email delivery * You want greater control over your email infrastructure For testing or low-volume usage, the built-in email service may be enough. For production use, custom SMTP is the recommended setup. **Best practices** To set up SMTP successfully: * Use a trusted email provider * Make sure your sender address is valid * Use credentials created specifically for SMTP access * Test your setup before going live * Pair SMTP with customized email templates for a better user experience ## Storage OnSpace Storage provides a comprehensive solution for managing all your digital assets, simplifying file operations without needing to write complex code. * **Storage Buckets:** All your files are stored securely within dedicated project buckets. Each file gets a unique URL or reference, allowing you to easily link them within your application. * **Secure Access:** OnSpace automatically generates secure URLs for your files and handles permission management, ensuring your data is protected yet accessible when needed. **Specifications** * **File Size Limit:** Supports individual files up to 2 GB, accommodating a wide range of media and data. * **File Types:** Compatible with all common file formats, including images, videos, documents, and various static assets. * **Security:** Benefit from enterprise-grade encryption for data at rest and in transit, along with robust access controls to keep your files secure. ## Edge Functions OnSpace Edge Functions empower you to execute serverless logic that automatically scales with your project's demands. Focus on building powerful features without the hassle of server provisioning or management. * **Serverless Logic:** Deploy custom code for your APIs, automate workflows for backend tasks, or implement advanced features, all without maintaining any servers. * **Automatic Scaling:** Your functions automatically scale up or down based on traffic, ensuring optimal performance and cost efficiency, even during peak loads. **Common Use Cases** * **AI-Powered Features:** Integrate sophisticated AI capabilities, such as AI summaries or chatbots, leveraging OnSpace's built-in AI. * **Communication:** Automate sending emails, SMS, or push notifications to your users. * **Payment Processing:** Seamlessly integrate with payment gateways like Stripe for secure and efficient transaction handling. * **Automation:** Schedule and run background jobs or other automated tasks to keep your application running smoothly. * **External Integrations:** Handle heavy computations, call external APIs, or process webhooks without impacting your main application's performance. **Key Features** * **Easy Creation:** Simply describe the function you need in the OnSpace AI chat, and we'll help you generate the code. * **Auto-Scaling:** Functions are designed to scale instantly and automatically to match your traffic, ensuring high availability and performance. ## AI Services At OnSpace, we believe AI should be a core component of modern applications. Our platform comes with integrated AI capabilities, powered by OnSpace AI, enabling you to swiftly integrate intelligent features that enhance your app's functionality and user engagement. **AI-Powered Features** OnSpace AI provides out-of-the-box functionalities and tools to build custom AI solutions: * **AI Image Generation & Editing:** Build features that turn simple user photos into professional ID photos or headshots. Or, empower users to generate unique graphics, product mockups, and artistic visuals just by describing them in text. * **AI Video Generation:** Enable users to create dynamic short-form videos from scratch. For example, build a tool that generates a compelling UGC-style video ad from a product description and a few images, complete with an AI-generated voiceover. * **Advanced AI Agents & Personas:** Build specialized AI chatbots that go beyond simple Q\&A. Create an AI legal assistant that drafts contracts, a virtual travel agent that plans itineraries, or a brand persona that interacts with customers in a specific voice. ## Secrets Management OnSpace Secrets Management provides a robust and secure way to handle your application's sensitive environment variables, keeping them safe from exposure and simplifying their integration. **How It Works** 1. **Centralized Secure Storage:** Store critical credentials like API keys, tokens, and database passwords in a dedicated, encrypted environment. Your secrets are protected with robust encryption both when they are saved (at rest) and when they are being used (in transit). 2. **Intelligent On-Demand Access:** When an OnSpace feature or an Edge Function in your project requires a secret, our platform automatically detects this need. It then securely prompts you via a safe user interface to provide the necessary information, ensuring you maintain control. 3. **Automatic & Secure Injection:** Once configured, your secrets are never directly part of your codebase. Instead, OnSpace automatically and securely injects them into your Edge Functions and integrated services exactly when they are needed for execution, abstracting away sensitive details. 4. **Eliminate Hardcoding Risks:** This entire process prevents the dangerous practice of hardcoding sensitive data into your application. It acts as a critical barrier against accidental exposure in your source code, version control, or logs. ## Logs & Monitoring OnSpace's Logs & Monitoring features provide you with a powerful, centralized hub to observe, understand, and troubleshoot your application in real-time. Gain deep visibility into every process, from user interactions to serverless function executions. **How It Works** * **Real-time Activity Stream:** See a live feed of all application events, function calls, and user interactions as they happen. * **Error Tracking:** Automatically capture and aggregate errors, providing immediate alerts and detailed contexts for quick resolution. * **Performance Insight:** Monitor key metrics like function execution times, resource consumption, and API response latency to pinpoint performance bottlenecks. * **Intuitive Debugging Interface:** Access detailed log messages, comprehensive stack traces, and execution payloads, making it easy to diagnose and fix issues without leaving the platform. ## Why Choose Cloud? **Instant Backend Setup** * Zero server configuration * Database automatically provisioned * Authentication working out-of-the-box **Developer-Friendly** * Same APIs and SDKs as Supabase * Full TypeScript support * Seamlessly integrated with OnSpace AI **Visual Management** * Built-in dashboard for data operations * User management interface * Real-time performance monitoring Manage your app's structured information through Spaces database tables and records **Your backend infrastructure, ready before you even ask for it.** # Stripe Integration Source: https://docs.onspace.ai/integrations/stripe-integration Set up payments in your app using our Stripe integration ### **What's New** OnSpace now lets you integrate Stripe payments directly into your projects through our AI-powered setup. No complex webhooks or manual configuration required. Payment Setup Process ### **How It Works** Simply connect your Stripe account and describe what payment features you need. OnSpace AI generates all the necessary payment logic, components, and backend integration automatically. ### **Requirements** Before integrating Stripe, ensure: * Your project is active in OnSpace （Select ”OnSpace Cloud“） * A **Stripe account** with test mode enabled * Clear idea of your payment flow (one-time payments, subscriptions, etc.) **Testing Note** Always test in Stripe Test Mode first. Use test card: 4242 4242 4242 4242, any 3-digit CVC, and any future date. ### **Quick Setup Steps** 1. **Describe Your Payment Needs** * Tell OnSpace AI what you want: "Add subscription tiers at \$9.99/month" * Or: "Create one-time payment for \$29.99 digital product" * Be specific about your pricing and payment flow 2. **AI Generates Everything** * Payment screens and components * Stripe SDK integration * Backend payment processing * Success/failure handling 3. **Test & Deploy** * Test payments in your preview * Deploy when ready for production ### **Configure Tool Permissions** You can control how OnSpace AI interacts with your Stripe account by configuring tool permissions: Payment Setup Process 1. **Access Settings** * Click your profile avatar in the bottom-left corner * Select "Settings" from the dropdown * Navigate to "Integrations" * Select "Stripe" 2. **Set Permission Levels** For each Stripe operation, choose your preferred permission level: * **Ask each time** - OnSpace will request permission before each action * **Always allow** - OnSpace can perform actions automatically * **Never allow** - Block specific Stripe operations 3. **Available Permissions** * Enable Stripe features * Get Stripe account information * Create customers * List customers * Create products and prices * List products and prices ### **What OnSpace AI Creates** * **Customer Management** - Create and list customers in Stripe automatically * **Product & Pricing Setup** - Generate products and prices directly in your Stripe account * **Account Integration** - Get Stripe account information and enable all Stripe features * **Payment Components** - Pre-built checkout flows and payment screens * **Backend Logic** - Secure payment processing with proper error handling * **User Management** - Links payments to user accounts seamlessly **Security First** All sensitive payment data is processed securely through Stripe. OnSpace never stores payment information directly. # Supabase Integration Source: https://docs.onspace.ai/integrations/supabase-integration Supercharge your OnSpace builds with Supabase's all-in-one backend platform, creating dynamic full-stack applications with enterprise-grade capabilities. OnSpace's seamless Supabase integration enables you to control every aspect of your application—from user interface design to database architecture—all through one intelligent conversational platform. This means you can simultaneously create engaging app interfaces and configure powerful PostgreSQL cloud databases without ever switching tools or platforms. This consolidated workflow revolutionizes how applications are built: beginners can leverage OnSpace's smart recommendations and intuitive guidance to create professional-grade apps, while expert developers can instantly access Supabase's full suite of advanced features whenever complex functionality is required. ## Overview OnSpace seamlessly integrates with Supabase, the leading open-source Firebase alternative that delivers enterprise-grade PostgreSQL databases with real-time capabilities, user authentication, file storage, and serverless functions. This integration transforms your OnSpace app with instant access to a production-ready backend infrastructure—no boilerplate code or server configuration required. **PostgreSQL Database Foundation**\ Deploy robust SQL-powered data storage with OnSpace's intelligent schema generation. Simply describe your data needs, and OnSpace automatically creates the necessary tables and relationships. **Secure User Management**\ Implement comprehensive authentication systems including email/password flows, social logins (Google, GitHub, etc.), and access control—all configured through natural language prompts. **Cloud File Management**\ Handle image uploads, document storage, and media files through Supabase's integrated storage solution, perfect for user avatars, content assets, and file sharing features. **Live Data Synchronization**\ Enable real-time features like instant messaging, collaborative editing, live notifications, and dynamic dashboards that update across all connected users simultaneously. **Serverless Backend Functions**\ Deploy custom business logic using Supabase Edge Functions for email automation, payment processing, AI integrations, and third-party API connections. ### Why Choose OnSpace's Supabase Integration? OnSpace eliminates the traditional complexity of coordinating frontend and backend development. Through conversational AI, you can simultaneously design your user interface and configure the underlying database architecture. Example in action: Request "Create a customer review system that stores ratings and comments" and OnSpace will generate both the review form interface and the database table structure, connecting them automatically. This unified approach accelerates development while maintaining professional-grade architecture. ## **Setup Guide: Connecting Your OnSpace Project** ### **Prerequisites** * Active Supabase account (free tier available) * OnSpace project ready for integration ### **Step 1: Supabase Account Setup** Navigate to Supabase and either create a new account or sign into your existing one. 1. **Create a new organization** supabase-org.jpg 2. **Create a new project** supabase-project.jpg ### Step 2: OnSpace Integration **Initialize Connection**\ From the top right corner of your current project, click the Supabase icon and choose **Connect Supabase**. supabase-2.gif **Account Authorization**\ Complete the Supabase login process and authorize OnSpace's access to your account. Supabase-acct-auth.gif **Project Selection**\ Choose your target Supabase organization and project, or create a new project. Supabase-Select-Project.gif **Configuration Completion** To connect Supabase in OnSpace: Open your project, click **"Refresh Browser"** → **Supabase icon** → select your project from the **dropdown**. When you see the green **"Connect"** message, the setup is complete. Supabase-completion.gif Your OnSpace app now has full access to Supabase's database, authentication, and backend services. ## How to Create Functional Login and Signup Ready to implement authentication in your OnSpace application? This step-by-step video tutorial demonstrates how to build a complete user authentication system using OnSpace's intuitive interface combined with Supabase's powerful backend capabilities.