vibedream.ai logo
vibedream.ai
Developer Guide

VibeDream Storage Integration

Add file uploads and cloud storage to your AI-generated apps in minutes. Built on Cloudflare R2 for performance and reliability.

Native R2 Integration

Built directly into VibeDream. No external S3 or Firebase accounts needed.

AI-Managed Setup

The AI handles credential generation and environment configuration automatically.

Project Scoped

Each project gets its own secure storage namespace and quota management.

How it Works

VibeDream Storage provides a unified API for handling file uploads in your generated applications. Instead of configuring complex AWS S3 buckets or third-party services, you can leverage our pre-configured infrastructure.

Method 1: Ask the AI (Recommended)

The easiest way to add storage is to simply ask VibeDream to build it for you.

User: "Create a file upload form where users can upload their profile pictures."

AI: "I'll set up the storage integration and create the upload component for you."

AI automatically enables storage for your project

Generates necessary API tokens and updates .env.local

Creates the API route app/api/upload/route.ts

Builds the frontend UI with progress bars and error handling

Method 2: Manual Implementation

For advanced users who want to implement storage manually, here is the standard integration pattern.

1. Environment Setup

Ensure your project has the following environment variables (the AI usually handles this):

STORAGE_API_URL=https://vibedream.ai/api/storage/v1
STORAGE_API_TOKEN=pst_...

2. Upload API Route

Create a route handler in app/api/upload/route.ts:

import { NextResponse } from "next/server"; export async function POST(req: Request) { try { const formData = await req.formData(); const file = formData.get("file") as File; if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }); } // Forward to VibeDream Storage API const storageFormData = new FormData(); storageFormData.append("file", file); // Optional: Add folder path // storageFormData.append("folder", "uploads"); const response = await fetch(`${process.env.STORAGE_API_URL}/upload`, { method: "POST", headers: { "X-Storage-Token": process.env.STORAGE_API_TOKEN!, }, body: storageFormData, }); const data = await response.json(); if (!response.ok) throw new Error(data.error); return NextResponse.json(data); } catch (error: any) { return NextResponse.json({ error: error.message }, { status: 500 }); } }

Ready to build?

Start a new project and try out the storage integration today.