Getting Started with cocoding.ai

Welcome to Cocoding.ai – Your best way to create a SaaS application without writing code! Our AI-powered platform helps you build and deploy full-stack applications using just natural language prompts.

🚀 Quick Start Guide

Step 1: Visit Cocoding.ai

Navigate to [cocoding.ai](https://cocoding.ai) in your browser. You'll be greeted by our homepage showcasing the platform's capabilities.

Click the "Get Started" button to begin your journey.

Step 2: Create Your Account

You'll be redirected to our login/registration page. Choose your preferred sign-up method:

• Email – Enter your email address to receive a magic link
• Google – Continue with your Google account
• GitHub – Continue with your GitHub account

[!TIP] Using Google or GitHub provides the fastest sign-up experience with just one click!

Step 3: Explore the Dashboard

After logging in, you'll land on your dashboard. A welcome popup will appear offering a Quick Tour to help you get familiar with the platform.

Key features visible:

• 💬 Chat – Interact with the AI agent
• 📁 Project – Manage your projects
• ⚙️ Settings – Configure your preferences

The platform supports multiple technologies including:

• Next.js
• Vue
• Django
• Go
• And more!

Step 4: Describe Your Application

In the main input area, describe the application you want to build using natural language. Be as detailed as possible to get the best results.

Example Prompt:

"You are a senior product engineer and solutions architect. Build a production-grade Airbnb clone, a web application where hosts can list properties and guests can search, book, and pay. Deliver a working MVP with clean architecture, tests, seed data, and deployment instructions."

[!TIP] You can also attach reference images to help the AI understand your vision better using the Image button.

Click the "Generate" button to start the magic! ✨

Step 5: Watch the AI Build Your App

Once you submit your prompt, our AI agent will:

1. Think and design – Analyze your requirements and plan the architecture
2. Generate code – Write the frontend, backend, and database schemas
3. Deploy – Set up your application on our infrastructure

You can monitor the progress in real-time through:

• Output tab – See the AI's thought process
• Terminal tab – Watch the build commands execute

Step 6: Preview Your Deployed Application

Once the generation is complete, your application is automatically deployed! You can:

• Preview your app in the built-in browser
• View the Code using the code editor
• Publish to make it publicly accessible
• Push to GitHub for version control

Your app is live and accessible via a unique URL (e.g., https://apps.agentsera.co/app/...).

[!NOTE] The "Built with cocoding.ai" badge appears on all generated applications.

🗄️ Database Studio

Cocoding.ai includes a powerful Database Studio for managing your application's data.

Connecting to Your Database

Click the Database tab to access the database management tools. You can connect to your PostgreSQL database by entering:

• Username – Your database username (default: postgres)
• Password – Your database password
• Database – Database name (default: postgres)
• Host – Database host (default: localhost)
• Port – Database port (default: 5432)

Viewing Tables

Once connected, you can browse all your database tables in the Tables view:

In this example, the Airbnb clone has tables for:

• 📅 bookings – Reservation records
• 🏠 listings – Property listings
• 👥 users – User accounts

Running SQL Queries

Use the Query tab to write and execute custom SQL queries:

Features:

• SQL syntax highlighting
• Execute button to run queries
• Clear button to reset the editor
• History panel showing past queries
• Results displayed in a formatted table

[!TIP] Press Cmd + Enter (Mac) or Ctrl + Enter (Windows) to quickly execute your query.

Visualizing Database Schema

The Schema view provides a visual representation of your database structure:

Features:

• Interactive entity-relationship diagram
• View table relationships and foreign keys
• Search for specific tables or columns
• Export your schema
• Reset the view layout

🎯 What's Next?

Now that you've created your first application, here are some things you can do:

1. Iterate on your app – Chat with the AI to add new features
2. Customize the code – Use the built-in code editor
3. Connect your domain – Set up a custom domain for your app
4. Invite collaborators – Share your project with team members

💡 Tips for Better Results

🆘 Need Help?

• Request Feature – Click the purple button to suggest improvements
• Feedback – Share your experience with us
• Chat Support – Use the chat widget in the bottom-right corner

Happy building with Cocoding.ai! 🚀