Doolo Documentation

Creating an Account

Sign up at the signup page with your email and a password. You get $10 of credits ($10 ~ 1,000 credits) as a free trial — no credit card required at signup. You'll be asked to add a payment method on your first AI action, but you won't be charged until you start a subscription or your trial credits run out.

Already have an account? Sign in here.

The Dashboard

After logging in, you land on the main workspace. This is where you start new projects and continue editing existing ones. The interface has two main areas:

• Chat panel (left) — where you interact with the AI. Type instructions, provide URLs, and describe changes.
• Preview panel (right) — a live preview of your website that updates in real time as AI makes changes.

You can switch between modes using the mode selector buttons. Your existing sites appear in the session history.

Modes Overview

Doolo has three main modes for creating websites:

How It Works

1. Paste a URL — enter the URL of any website in the chat. Doolo takes a screenshot and analyzes the DOM structure.
2. Page discovery — AI crawls the site and discovers all internal pages (Home, About, Services, Contact, etc.).
3. Choose pages — you can clone all discovered pages or select specific ones. The AI estimates the credit cost before proceeding.
4. AI generation — for each page, the AI analyzes the design (layout, colors, typography, component structure) and generates clean Vue components.
5. Auto-switch to Edit — once all pages are generated, Doolo automatically switches to Edit mode so you can start customizing.

Important Details

• Placeholder text — all text content is replaced with generic placeholder text (lorem ipsum style). This is intentional to avoid copyright issues. Use Edit mode to add your own content.
• Shared components — the NavigationBar and Footer are generated once and shared across all pages, just like a real website.
• Multi-page support — navigation links work between pages automatically. Each page gets unique components based on the original site's layout.
• Modifications — you can request modifications during cloning, like "make it darker" or "change the color scheme to blue". These are applied to every component.

How It Works

1. Describe your site — tell the AI what kind of website you need. For example: "I need a website for my construction company with pages for services, projects, and contact."
2. Provide your URL (optional) — if you have an existing website, paste the URL. AI crawls it to import your real content, images, and contact information.
3. Content crawling — if a URL is provided, AI discovers all internal pages, extracts text, images, headings, and contact details from each page.
4. Template selection — AI picks a layout template that matches your needs and maps your pages to template slots.
5. Generation — AI generates each page component with your real content matched to the appropriate pages. Images are optimized and uploaded to cloud storage.

Content Import

When you provide a URL in Build mode, Doolo crawls the site and extracts:

• Company name and description from meta tags and headings
• Page content — text sections, headings, and paragraphs from each page
• Images — all images are downloaded, optimized to WebP, and uploaded to cloud storage
• Contact info — email addresses, phone numbers, and physical addresses
• Navigation labels — the site's menu structure

Content is intelligently matched to generated pages. For example, images from a "Products" page on your source site are assigned to the corresponding products page on your new site.

AI Chat Editing

Type any instruction in the chat to modify your site. The AI understands natural language in any language and figures out which components to change. Examples:

The AI can edit multiple components in a single request. It preserves your existing styles and images while making targeted changes.

Visual Editor

The visual editor lets you click on any element in the preview to edit it directly:

• Text editing — click any text to change it inline
• Image replacement — click an image to upload a new one or generate one with AI
• Component deletion — remove entire sections or individual elements
• Layer panel — view all components in a list, reorder them, and navigate between pages

AI Tools Available in Edit Mode

The AI has access to several tools it can use when you make requests:

• generate_image — creates a custom image from a text description. You can specify the aspect ratio (landscape, portrait, square).
• fetch_webpage — fetches content from a URL and uses it to update your site. Useful for importing your real business information.
• read_component — reads the current code of a specific component to understand its structure before making changes.
• list_components — lists all components on your site with their page assignments.

Multilingual Sites

You can make your site multilingual by asking the AI. For example: "Make this site bilingual in English and Finnish". The AI will:

• Add a language switcher to the navigation bar (e.g., EN | FI)
• Translate all content sections into both languages
• Set up automatic language switching that saves the user's preference

Deploy to Cloudflare Pages

The fastest way to go live. Click the Publish button and your site is deployed to Cloudflare Pages with:

• A free .pages.dev subdomain
• Global CDN — your site is served from edge locations worldwide
• Automatic SSL/HTTPS
• Instant updates — re-deploy anytime with one click

Custom Domain

You can connect your own domain to a deployed site. After deploying to Cloudflare, use the domain settings to add your custom domain. You'll need to update your DNS records to point to Cloudflare.

Download as HTML

Download your entire site as a ZIP file with clean, static HTML files. Each page becomes its own HTML file (e.g., index.html, about.html). Images are included locally. You can host these files on any web server.

Download as Nuxt 3 Project

Download your site as a complete Nuxt 3 project with:

• Properly structured Vue components in components/
• Page routing set up in pages/
• nuxt.config.ts pre-configured with Tailwind CSS
• NuxtLink-based navigation between pages
• Form integration plugin (if you have forms configured)

You can open this project in your code editor, run npm install && npm run dev, and continue developing locally.

Free Trial

• $10 worth of credits (~1,000 credits) included on signup
• Full access to every feature — clone, build, edit, deploy to *.pages.dev
• No card required at signup — just email + password
• A payment method is required on your first AI action (Stripe saves the card via Setup Intent — no charge during trial)
• Trial ends when credits run out. Add top-up credits or start a subscription to continue.

Standard Subscription — $20/month

• 500 credits per month (refills automatically on every billing cycle)
• 1 hosted site on a free *.pages.dev subdomain
• 1 custom domain connection per site
• No Doolo branding on deployed sites
• Unlimited AI edits (limited only by your credit balance)
• Cancel anytime — your sites stay live until the end of the billing period

Extra Sites — $8/month each

Need to run multiple websites? Add extra site slots on top of your subscription. Each extra site includes its own custom domain connection. Extra sites are billed on a prorated basis and appear on your next invoice.

Credit Rollover

Unused monthly credits roll over to the next billing cycle, up to 2× your monthly grant (max 1,000 unused monthly credits banked at any time). Once you hit the cap, additional monthly grants are skipped until you use some. Top-up credits (see below) don't expire and don't count toward the rollover cap.

Top-up Credits

Power users and trial users can buy extra credits anytime. Top-ups never expire, are separate from your monthly allowance, and are only consumed after your monthly credits run out.

What Uses Credits

Costs are approximate and depend on the complexity of the request. The credit system uses a 3× markup on the underlying AI API cost.

Resource Limits

A few soft limits are in place to keep the platform fair for everyone. These rarely affect legitimate use.

AI-generated images don't count toward your storage quota — they're metered via credits instead.

Managing Your Subscription

Visit the /billing page to:

• Start, cancel, or reactivate your subscription
• Add or update your payment method
• Buy top-up credits
• Add extra site slots
• View invoices and payment history (via the Stripe billing portal)

What Happens If You Cancel

When you cancel, your subscription stays active until the end of the current billing period — you keep full access to everything you paid for. After that, your sites go through a graceful wind-down:

Reactivate anytime before final deletion by restarting your subscription at /billing. You'll get your sites back with a single click.

Failed Payments

If your card is declined on monthly renewal, we retry automatically and email you reminders on days 1, 3, and 7. You can update your card anytime from the /billing page or via the Stripe billing portal. After 7 days of failed payment your sites enter the suspended state (same flow as cancellation). Update your card to reactivate instantly.

Editing Text

Click on any text element in the preview to select it. A text editor appears where you can change the content directly. Changes are saved to the component code and synced to cloud storage.

Editing Images

Click on any image to open the image editor. You can:

• Upload — choose an image from your computer. It's automatically optimized to WebP format and uploaded to cloud storage.
• AI Generate — describe the image you want and AI generates it. Choose the aspect ratio (landscape, portrait, or square).

Deleting Elements

Select any element or component and click delete to remove it. You can delete:

• Individual elements (text blocks, images, buttons)
• Entire components/sections

Shared components (NavigationBar, Footer) are protected — you'll be asked to confirm before deleting them since it affects all pages.

Layer Panel

The layer panel shows all components in your site organized by page. Use it to:

• Navigate between pages
• See which components are shared vs. page-specific
• Quickly select components for editing

Page Structure

Each site has:

• Shared components — NavigationBar and Footer appear on every page
• Page-specific components — HeroSection, ContentSection, etc. are unique to each page
• Navigation — links between pages are automatically set up in the NavigationBar

Navigation

In the preview, use the NavigationBar links to switch between pages. In the editor, you can also use the page selector dropdown to jump directly to any page. When deployed, navigation uses clean URL paths (e.g., /about/, /contact/).

Writing Effective AI Prompts

• Be specific — "Change the hero background to a dark navy blue gradient" works better than "make it different"
• Reference components — "Update the HeroSection heading" is more precise than "change the title"
• One thing at a time — for complex changes, make multiple requests rather than one giant prompt
• Any language works — the AI understands English, Finnish, and many other languages
• Describe the end result — "I want a modern, minimalist contact page with a form and map" rather than step-by-step instructions

Recommended Workflow

1. Start with Inspiration or Build — create the base site structure
2. Add your content — use Edit mode to fetch content from your existing website or type it in
3. Customize the design — adjust colors, fonts, and layout with AI chat
4. Generate images — replace placeholder images with AI-generated or uploaded ones
5. Fine-tune with visual editor — click individual elements for quick text or image changes
6. Deploy — publish to Cloudflare Pages or download the files

Current Limitations

• Cloning works best with static marketing websites. Complex web apps, SPAs, or heavily JavaScript-dependent sites may not clone perfectly.
• AI-generated designs are approximations of the source — they capture the layout and style but aren't pixel-perfect copies.
• The preview uses client-side Vue rendering. Some complex CSS interactions may behave slightly differently when deployed as static HTML.
• Each AI edit operation requires a minimum of 10 credits in your balance.