CodeFlow Documentation

Learn how to build with AI, convert Figma designs, and automate workflows

Getting Started

Creating Your Account

  1. Visit codeflow.dev
  2. Click "Sign Up"
  3. Enter your email and create a password
  4. Verify your email address
  5. You'll receive free credits to get started!

Understanding Credits

CodeFlow uses a credit-based system for fair usage:

  • AI Generation: Generate full-stack applications
  • Figma-to-Code: Convert designs to code
  • Agent Execution: Run automated workflows

Purchase credits as needed or subscribe to monthly plans for better rates. Credits never expire.

Three Ways to Build

AI Generation

Turn natural language into working applications.

How to Use:

  1. Click "New Project" from your dashboard
  2. Select "AI Generation"
  3. Choose your project type (Web or Mobile)
  4. Describe your project in plain English
  5. Click "Generate" and wait 2-3 minutes
  6. Preview and download your project!

What You Get:

  • Complete source code
  • Working frontend and backend
  • Database schema
  • Authentication (if requested)
  • Responsive design
  • Ready to deploy

Example Prompt:

"Create a task management app with user authentication, task lists, due dates, and priority levels. Include a dashboard showing completed vs pending tasks."

Figma-to-Code

Convert Figma designs into production-ready React or Flutter code.

How to Use:

  1. Click "New Project"
  2. Select "Figma-to-Code"
  3. Choose your output framework (React or Flutter)
  4. Paste your Figma URL (must be publicly accessible)
  5. Click "Convert" and wait 1-2 minutes
  6. Download your code!

What You Get:

  • React components (or Flutter widgets)
  • Semantic HTML structure
  • Tailwind CSS styling
  • Responsive layouts
  • Accessible code

Figma Setup:

  1. Open your Figma file
  2. Click Share → Copy link
  3. Set sharing to "Anyone with the link can view"
  4. Paste the link into CodeFlow

Agent Builder

Our Unique Advantage

Create autonomous workflow agents with YAML. Automate repetitive tasks by chaining tools like HTTP requests, data processing, and conditional logic.

How to Use:

  1. Click "New Agent" from dashboard
  2. Enter agent details (name, description, category)
  3. Define your workflow in YAML
  4. Save and test your agent
  5. Use via dashboard or SDK!

Use Cases:

  • Data Processing: Daily report generation, data aggregation
  • Integration: Sync data between systems, webhook processing
  • Automation: Scheduled tasks, alert notifications
  • CI/CD: Integrate into GitHub Actions, GitLab CI pipelines

Agent SDK

The only platform with agent SDK for programmatic workflow automation.

Execute Agents from Your Code

Integrate AI workflow automation into CI/CD pipelines, Slack bots, Google Sheets, and custom applications with our JavaScript/TypeScript and Python SDKs.

JavaScript/TypeScript

npm install @codeflow/agent-sdk

const client = new CodeFlowClient({
  apiKey: process.env.CODEFLOW_API_KEY
});

const result = await client.agents.execute(
  'my-agent',
  { input: { data: 'value' } }
);

Python

pip install codeflow-agent-sdk

client = CodeFlowClient(
  api_key=os.environ['CODEFLOW_API_KEY']
)

result = client.agents.execute(
  'my-agent',
  input={'data': 'value'}
)

Best Practices

Write Better Prompts

✅ Good

"E-commerce site for vintage clothing with product catalog, shopping cart, checkout, admin panel for inventory management, and customer reviews. Use modern, minimalist design."

❌ Poor

"Make me an online store"

Security Best Practices

  • Never share your API keys
  • Don't commit .env files to Git
  • Rotate keys regularly
  • Use different keys per environment
  • Revoke old/unused keys

Frequently Asked Questions

How long does AI generation take?

Typically 2-3 minutes for web apps, 3-4 minutes for mobile apps.

Can I edit generated code?

Yes! All code is yours to modify and customize.

Do credits expire?

No, purchased credits never expire.

Can I use generated apps commercially?

Yes! All generated code is yours with no restrictions.

What tech stack is used?

Web apps use React, Node.js, PostgreSQL. Mobile apps use Flutter.

Can I deploy generated apps?

Yes! Code includes deployment instructions for various platforms.

Ready to Get Started?

Sign up now and start building with AI-powered tools