# How to Vibe Code Your Own Pebblely (and Stop Paying for It)

> Create beautiful product photos in seconds with AI

- Site: https://pebblely.com
- Category: Web app
- Verdict: **Solid side project** (72/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

You can build a solid personal clone of Pebblely in a couple of weeks, but keeping inference API costs manageable while matching complex product shadows will test your prompt engineering.

Replicating the frontend dashboard, image upload flow, and authentication is straightforward with a modern full-stack framework. The real engineering hurdle lies in chaining background removal with an inpainting diffusion model (like Flux via fal.ai) while instructing the model to synthesize realistic contact shadows, surface reflections, and lighting that match the product. Generic text-to-image models tend to make objects look 'floating' unless you carefully compose depth maps and prompt structure. For personal use, paying $9–$39/mo makes financial sense if you generate dozens of photos, but building it yourself is an excellent exercise in AI image pipeline orchestration.

### What you can't replicate

- Pebblely's proprietary prompt tuning library optimized for commercial e-commerce lighting
- The exact training dataset and fine-tuned checkpoints used for product integration

## What it does

AI-powered product photography platform that automatically removes product backgrounds and integrates items into generated thematic contexts with matching shadows and reflections.

### Core features

- Image upload and automated background removal
- AI background generation using text prompts or theme presets
- Directional shadow, lighting, and surface reflection synthesis
- Aspect ratio cropping and resizing for social media platforms
- Bulk generation queue processing for multiple product variants
- User authentication and personal image asset library history

## The business

### Pricing

- Lite: $9/mo
- Basic: $19/mo
- Pro: $39/mo

### Funding

$1.2M raised.
- Seed
Investors: Venture-backed early stage

Founded 2022.
Team size: Small team.

## The hard parts

- Precise edge masking on complex objects (transparent glass, fine jewelry chains, wispy edges) without clipping the subject
- Synthesizing physically accurate ambient occlusion, shadows, and reflections that match the generated lighting angle
- Asynchronous queue architecture to handle multi-image batch generation without connection timeouts
- Balancing inference API costs and speed to maintain margins at low subscription tiers

## How to vibe code Pebblely

### Prerequisites

- Node.js (free): Required runtime for building and running the full-stack web application.
- GitHub (free): Source code repository and deployment integration with hosting providers.
- fal.ai API Key (Pay-per-use (~$0.003/image)): Required to execute fast diffusion model inference for background generation and inpainting.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding the full-stack architecture, API routes, and canvas manipulation logic.
- Cursor: Ideal for iterative refinement of the React image editor canvas and UI layouts.

### Stack

- Frontend: Next.js (React)
- Backend: Next.js Server Actions / API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: None (Personal use clone)
- Other: fal.ai API (Flux inpainting and generation), Vercel AI SDK, Tailwind CSS

### Hosting

- Cloudflare (Hosting frontend, API routes, and SQLite database via Workers and D1/Turso): $0-5/mo

### Build guide

1. **Project Scaffolding & Database Setup** — Initialize the Next.js project with Tailwind CSS, configure Turso database connection via libSQL, and set up better-auth for user authentication.

```
Scramble a new Next.js project configured with TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication connected to a Turso (libSQL) database. Create a clean dashboard layout with a sidebar navigation for 'New Generation', 'Gallery', and 'Settings'. Ensure all environment variables are properly structured in a .env.example file. Implement a responsive navbar and protect dashboard routes against unauthenticated requests.
```

2. **Image Upload & Background Removal Pipeline** — Build an image dropzone for product photos and integrate a background removal utility or API to isolate the subject.

```
Create a drag-and-drop image upload component on the dashboard home page supporting PNG and JPEG files up to 10MB. When an image is uploaded, send it to a Next.js Server Action that passes the image buffer to a background removal service or segmentation model (such as rembg or fal.ai segmentation endpoint) to strip the background. Store the resulting transparent PNG in Cloudflare R2 or local storage, and save the asset record to the Turso database with user association. Display a side-by-side preview of the original upload and the isolated subject with a checkered background.
```

3. **AI Background Generation & Inpainting Interface** — Develop the canvas and prompt generation interface where users select themes or type custom prompts to place the product into AI scenes.

```
Build a generation view where users can select from a grid of preset background themes (e.g., 'Studio white riser', 'Rippling water', 'Wooden table') or enter a custom text prompt. Include controls for product scale, rotation, and horizontal/vertical positioning on the canvas. When the user clicks 'Generate', call a backend API route that interfaces with the fal.ai Flux inpainting API, passing the isolated subject mask and the background prompt. Ensure the generation request handles loading states with a progress spinner and saves generated output records to the database.
```

4. **Shadow, Reflection, and Aspect Ratio Adjustment** — Implement post-processing controls for adjusting shadows, reflections, and output aspect ratios for different social media channels.

```
Add a customization toolbar to the generation results page allowing users to tweak shadow intensity, shadow blur, and floor reflection opacity. Include an aspect ratio selector (1:1 for Instagram, 9:16 for Stories, 4:5 for feeds) that crops or pads the final composite image cleanly. Ensure all adjustments update a real-time HTML5 canvas preview before exporting the final high-resolution PNG asset.
```

5. **Gallery, History, and Bulk Download** — Build the user asset gallery to review past generations, download images individually or in bulk, and manage project history.

```
Create a gallery page that fetches and displays all previously generated product photos belonging to the authenticated user from the Turso database in a responsive grid. Implement modal view for inspecting individual images with options to download the high-res asset, delete the record, or re-open the generation parameters in the editor. Add a multi-select checkbox feature to allow bulk downloading selected images as a ZIP archive.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12 one-time
- fal.ai API starting credits: $10
- Total: ~$22 one-time

**Ongoing costs (monthly):**

- Cloudflare Workers / Turso DB: $0/mo (Free tier)
- fal.ai image generation usage (~200 images): ~$2-5/mo
- Total: ~$5/mo

- Paying for the SaaS instead: $39/mo (Pro plan)
- Build time: 15-20 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: 1 month vs Pro plan

## Sources

- [Pebblely Official Website & Pricing](https://pebblely.com)