Skip to content
Skip to main contentSkip to chat inputSkip to workbench

INTEGRATIONS

ChromaFlow seamlessly integrates with industry-leading platforms to provide a complete development ecosystem. Our deep integrations go beyond simple connections - they're engineered for production-scale applications.

GitHub Integration

Our GitHub integration provides bidirectional synchronization, enabling true continuous development workflows. Unlike competitors who offer basic export functionality, ChromaFlow maintains full repository context.

πŸ”„

Full Repository Import

Import any GitHub repository with complete history, branches, and metadata. Maintain existing workflows.

πŸš€

Direct Code Push

Push generated code directly to GitHub with proper commit messages and branch management.

πŸ”

OAuth Authentication

Secure OAuth2 flow with fine-grained permissions. Your credentials never touch our servers.

πŸ“Š

PR Workflows

Create pull requests, manage reviews, and integrate with existing CI/CD pipelines seamlessly.

Connect GitHub Repository
curl -X POST https://chromaflow.app/api/github/import \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "repository": "username/repo-name",
    "branch": "main",
    "import_history": true
  }'
GitHub Repository                     ChromaFlow                      Your Application
     β”‚                                    β”‚                                  β”‚
     β”‚  OAuth Authentication              β”‚                                  β”‚
     β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚                                  β”‚
     β”‚                                    β”‚                                  β”‚
     β”‚  Import Repository                 β”‚                                  β”‚
     β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚  Process & Enhance              β”‚
     β”‚                                    β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚
     β”‚                                    β”‚                                  β”‚
     β”‚  Push Enhanced Code               β”‚                                  β”‚
     │◀───────────────────────────────────                                  β”‚
     β”‚                                    β”‚                                  β”‚
     β”‚  Continuous Sync                   β”‚  Real-time Updates              β”‚
     │◀─────────────────────────────────▢│◀────────────────────────────────▢│

Supabase Integration

ChromaFlow's Supabase integration provides instant backend infrastructure with authentication, real-time data, and storage. We automatically configure row-level security and optimize database schemas for your application.

πŸ—„οΈ

Automatic Schema Design

AI-designed database schemas optimized for your application's specific requirements.

πŸ”’

Row-Level Security

Automatic RLS policies based on your application's authentication and authorization needs.

⚑

Real-time Subscriptions

WebSocket connections for live data updates. Perfect for collaborative applications.

πŸ’Ύ

Integrated Storage

File storage with automatic CDN distribution and image optimization.

Setup Supabase Project
curl -X POST https://chromaflow.app/api/supabase/create-project \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "project_name": "my-app",
    "database_schema": {
      "users": {
        "id": "uuid primary key",
        "email": "text unique",
        "created_at": "timestamp"
      },
      "posts": {
        "id": "uuid primary key",
        "user_id": "uuid references users(id)",
        "content": "text",
        "created_at": "timestamp"
      }
    },
    "enable_rls": true,
    "enable_realtime": true
  }'

ChromaFlow automatically generates TypeScript types from your Supabase schema, ensuring type safety across your entire application.

Generated TypeScript Types
// Automatically generated from your Supabase schema
export interface Database {
  public: {
    Tables: {
      users: {
        Row: {
          id: string
          email: string
          created_at: string
        }
        Insert: {
          id?: string
          email: string
          created_at?: string
        }
        Update: {
          id?: string
          email?: string
          created_at?: string
        }
      }
      posts: {
        Row: {
          id: string
          user_id: string
          content: string
          created_at: string
        }
        Insert: {
          id?: string
          user_id: string
          content: string
          created_at?: string
        }
        Update: {
          id?: string
          user_id?: string
          content?: string
          created_at?: string
        }
      }
    }
  }
}

Real-time Features

ChromaFlow automatically configures Supabase real-time subscriptions for collaborative features:

Real-time Subscription Example
// Automatically generated subscription hook
import { useEffect, useState } from 'react'
import { supabase } from './supabase-client'

export function useRealtimePosts() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    // Initial fetch
    supabase
      .from('posts')
      .select('*, users(email)')
      .order('created_at', { ascending: false })
      .then(({ data }) => setPosts(data || []))

    // Real-time subscription
    const subscription = supabase
      .channel('posts-channel')
      .on('postgres_changes', 
        { event: '*', schema: 'public', table: 'posts' },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setPosts(prev => [payload.new, ...prev])
          } else if (payload.eventType === 'UPDATE') {
            setPosts(prev => prev.map(post => 
              post.id === payload.new.id ? payload.new : post
            ))
          } else if (payload.eventType === 'DELETE') {
            setPosts(prev => prev.filter(post => 
              post.id !== payload.old.id
            ))
          }
        }
      )
      .subscribe()

    return () => {
      subscription.unsubscribe()
    }
  }, [])

  return posts
}

Stripe Integration

Complete payment infrastructure with subscriptions, one-time payments, and usage-based billing. ChromaFlow generates production-ready payment flows with proper webhook handling and security.

πŸ’³

Payment Forms

Beautiful, conversion-optimized checkout flows with Stripe Elements integration.

πŸ”„

Subscription Management

Complete subscription lifecycle handling with upgrades, downgrades, and cancellations.

πŸ“Š

Usage-Based Billing

Implement metered billing for API calls, storage, or any custom metrics.

πŸ”

Webhook Security

Automatic webhook signature verification and idempotent event processing.

Create Checkout Session
curl -X POST https://chromaflow.app/api/stripe/create-checkout \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "price_id": "price_1234567890",
    "success_url": "https://app.com/success",
    "cancel_url": "https://app.com/cancel",
    "metadata": {
      "user_id": "user_abc123"
    }
  }'
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚                    STRIPE PAYMENT FLOW                              β”‚
β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€
β”‚                                                                     β”‚
β”‚  Customer          ChromaFlow           Stripe           Your App   β”‚
β”‚     β”‚                  β”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚  Select Plan     β”‚                  β”‚                 β”‚       β”‚
β”‚     β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚                  β”‚  Create Session   β”‚                 β”‚       β”‚
β”‚     β”‚                  β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚                 β”‚       β”‚
β”‚     β”‚                  β”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚  Redirect to     β”‚  Session URL     β”‚                 β”‚       β”‚
β”‚     │◀──────────────────◀──────────────────                 β”‚       β”‚
β”‚     β”‚                  β”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚  Complete Paymentβ”‚                  β”‚                 β”‚       β”‚
β”‚     β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚                 β”‚       β”‚
β”‚     β”‚                  β”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚                  β”‚  Webhook Event   β”‚                 β”‚       β”‚
β”‚     β”‚                  │◀──────────────────                 β”‚       β”‚
β”‚     β”‚                  β”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚                  β”‚  Update Status   β”‚                 β”‚       β”‚
β”‚     β”‚                  β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β–Άβ”‚       β”‚
β”‚     β”‚                  β”‚                  β”‚                 β”‚       β”‚
β”‚     β”‚  Success Page    β”‚                  β”‚                 β”‚       β”‚
β”‚     │◀───────────────────────────────────────────────────────       β”‚
β”‚                                                                     β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Webhook Processing

ChromaFlow automatically generates secure webhook handlers with proper signature verification:

Generated Webhook Handler
// Automatically generated Stripe webhook handler
import { ActionFunction } from '@remix-run/cloudflare'
import Stripe from 'stripe'
import { db } from '~/utils/db.server'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!

export const action: ActionFunction = async ({ request }) => {
  const sig = request.headers.get('stripe-signature')!
  const body = await request.text()

  let event: Stripe.Event

  try {
    event = stripe.webhooks.constructEvent(body, sig, endpointSecret)
  } catch (err) {
    console.error('Webhook signature verification failed')
    return new Response('Webhook Error', { status: 400 })
  }

  // Handle the event
  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object as Stripe.Checkout.Session
      
      // Update user subscription status
      await db.user.update({
        where: { id: session.metadata.user_id },
        data: {
          subscription_status: 'active',
          stripe_customer_id: session.customer as string,
          stripe_subscription_id: session.subscription as string
        }
      })
      break

    case 'customer.subscription.deleted':
      const subscription = event.data.object as Stripe.Subscription
      
      // Handle subscription cancellation
      await db.user.update({
        where: { stripe_subscription_id: subscription.id },
        data: { subscription_status: 'cancelled' }
      })
      break

    // ... handle other event types
  }

  return new Response('Success', { status: 200 })
}

Always use webhook endpoints for critical operations like provisioning access or updating subscription status. Never rely solely on client-side redirects as they can be manipulated.

Platform Integrations

ChromaFlow supports deployment to all major platforms with optimized configurations:

Vercel

Edge functions, automatic HTTPS, global CDN

vercel deploy

Netlify

Continuous deployment, form handling, functions

netlify deploy

Cloudflare Pages

Workers integration, zero cold starts, KV storage

wrangler pages deploy

Railway

Database hosting, background jobs, auto-scaling

railway up

Fly.io

Global deployment, persistent storage, WebSockets

fly deploy

GitHub Pages

Static hosting, custom domains, GitHub Actions

gh pages deploy

Authentication Providers

ChromaFlow automatically configures OAuth authentication with all major providers:

πŸ”΅
Google

One-click sign in with Google accounts

⚫
GitHub

Perfect for developer-focused applications

πŸ”·
Twitter/X

Social authentication with profile data

🟦
Discord

Community and gaming applications

πŸ“§
Email

Magic links and traditional passwords

πŸ”‘
SSO/SAML

Enterprise single sign-on support

All integrations are configured with security best practices by default. ChromaFlow handles OAuth flows, token refresh, session management, and secure credential storage automatically.