LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironmentsDeployment
Configuration

Integrations

CloudflareDatabaseStorageAuthenticationEmail
Payment
AINewsletterNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase

Projects

MkImage
X (Twitter)

MkImage

Learn how to deploy MkImage - an AI image generation website built on TanStarter

Website: mkimage.ai

MkImage is an AI image generation website built with TanStarter. It supports text-to-image and image-to-image generation, and shows how the template can be used in a real production app.

The MkImage source code lives in the mkfast-app repository. That repository is not included with the TanStarter template benefits.

Since MkImage is built on TanStarter, the configuration and deployment process is essentially the same as the template. Please refer to the Getting Started, Environment Configuration, and Deployment guides for the base setup.

This guide focuses on the additional configuration specific to MkImage.

AI Image Model Provider

MkImage supports two AI image generation providers. You need to register an account and generate an API key from their dashboard.

Fal.ai is a fast inference platform for AI models.

  1. Create an account at fal.ai
  2. Go to the API Keys page in your dashboard
  3. Click Create API Key to generate a new key
  4. Copy the key and set it as the FAL_KEY environment variable
.env
IMAGE_MODEL_PROVIDER='fal'
FAL_KEY='your-fal-api-key'

APIMart is an API marketplace that provides access to various AI models.

  1. Create an account at apimart.ai
  2. Go to the API Keys management page in your dashboard
  3. Generate a new API key
  4. Copy the key and set it as the APIMART_KEY environment variable
.env
IMAGE_MODEL_PROVIDER='apimart'
APIMART_KEY='your-apimart-api-key'

Additional Image Generation Settings

VariableDescription
IMAGE_MODEL_PROVIDERImage generation provider: fal or apimart
VITE_SHOW_IMAGE_PROVIDERShow provider selector in generate page (true/false)
VITE_ENABLE_IMAGE_GENERATIONEnable image generation feature (true/false)

Storage (Cloudflare R2)

MkImage uses Cloudflare R2 to store prompt data and prompt preview images. You need to configure R2 to import and serve this content.

Enable Public Access

Allow public access to the bucket:

  • Settings > Public Development URL, click Enable
  • Save the public access URL as R2_PUBLIC_URL
  • Set custom domains for public access to the bucket (recommended for security)

Create API Token

Create a new API Token:

  • Storage & databases > R2 object storage > API Tokens > Manage, click Create User API Token
  • Set permissions to Object Read & Write to the bucket
  • Create the API Token, get the Access Key ID and Secret Access Key

Set Environment Variables

Set the following environment variables:

.env
R2_BUCKET_NAME='your-bucket-name'
R2_ACCESS_KEY_ID='your-access-key-id'
R2_SECRET_ACCESS_KEY='your-secret-access-key'
R2_PUBLIC_URL='https://your-r2-public-url.com'

Import Built-in Prompts

MkImage includes a built-in prompt dataset that you can import into your database. The import script syncs prompt data and preview images to your D1 database and R2 storage.

Download Prompt Dataset

First, download the latest prompt dataset:

pnpm prompt:download

Apply Database Migrations

Make sure the prompt-related database tables are created:

# Local development
pnpm db:migrate:local

# Remote / production
pnpm db:migrate:remote

Sync Prompts to Local (Development)

Import prompts into your local D1 database and R2 storage:

pnpm prompts:sync:local

This will insert prompt records into the database and upload preview images to R2.

Sync Prompts to Remote (Production)

After verifying locally, sync prompts to your remote production environment:

pnpm prompts:sync:remote

Useful Flags

The sync script supports several optional flags:

FlagDescription
--limit=<n>Only import the first N rows (useful for testing)
--skip-imagesSkip image download/upload (text-only import)
--forceRe-import even if prompt already exists
--dry-runPreview changes without writing to DB/R2
--concurrency=<n>Number of parallel imports (default: 10)

Updating Prompts

To update the prompt dataset in the future:

# Pull latest dataset
pnpm prompt:download

# Re-sync locally first
pnpm prompts:sync:local

# After confirming, sync to production
pnpm prompts:sync:remote

Existing prompts are skipped by default. Only new prompts and missing media are imported unless you pass --force.

Environment Variables Summary

Here is the full list of MkImage-specific environment variables to add on top of the base TanStarter configuration:

.env
# Image Generator (apimart or fal)
IMAGE_MODEL_PROVIDER='apimart'
VITE_SHOW_IMAGE_PROVIDER='false'
VITE_ENABLE_IMAGE_GENERATION='true'

# Fal
FAL_KEY=''

# APIMart
APIMART_KEY=''

# Storage (R2) - for prompts and prompt images
R2_BUCKET_NAME=''
R2_ACCESS_KEY_ID=''
R2_SECRET_ACCESS_KEY=''
R2_PUBLIC_URL=''

Reference

  • Prompt dataset: nanobanana-trending-prompts

Next Steps

Getting Started

Getting started guide

Environment Setup

Configure all environment variables

Deployment

Deploy to Cloudflare Workers

Cloudflare

Configure Cloudflare services

Table of Contents

AI Image Model Provider
Additional Image Generation Settings
Storage (Cloudflare R2)
Enable Public Access
Create API Token
Set Environment Variables
Import Built-in Prompts
Download Prompt Dataset
Apply Database Migrations
Sync Prompts to Local (Development)
Sync Prompts to Remote (Production)
Useful Flags
Updating Prompts
Environment Variables Summary
Reference
Next Steps