Documentation

Integrate Flexel into your app so every user gets AI-powered custom workflows.

Quickstart

Add a single script tag to embed Flexel. Each user gets their own isolated workspace.

html

<script src="https://cdn.flexel.com/sdk.js"></script>

<script>
  Flexel.init({
    appId: 'your-app-id',
    userId: currentUser.id,
    container: '#flexel-root'
  });
</script>

That's it. Your users can now describe what they want in plain language and Flexel builds it for them.

React

Use the React SDK for tighter integration with your existing app.

Installation

bash

npm install @flexel/react

Usage

jsx

import { FlexelProvider, FlexelWorkspace } from '@flexel/react';

function App() {
  return (
    <FlexelProvider
      appId="your-app-id"
      user={{ id: currentUser.id, name: currentUser.name }}
    >
      <FlexelWorkspace />
    </FlexelProvider>
  );
}

White-label Branding

Flexel is fully white-labeled. Customize colors, fonts, and logos — no Flexel branding visible to your users.

Flexel.init({
  appId: 'your-app-id',
  userId: currentUser.id,
  container: '#flexel-root',
  branding: {
    logo: '/your-logo.svg',
    primaryColor: '#4F46E5',
    fontFamily: 'Inter, sans-serif',
    hideFlexelBadge: true
  }
});

Options

Option	Type	Description
`logo`	string	Path to your logo (SVG or PNG)
`primaryColor`	string	Your brand's primary color
`fontFamily`	string	Custom font stack
`hideFlexelBadge`	boolean	Remove "Powered by Flexel" badge

Presets & Permissions

Control which templates are available and what your users can do.

Flexel.init({
  appId: 'your-app-id',
  userId: currentUser.id,
  container: '#flexel-root',
  presets: ['crm', 'project-management'],
  defaultPreset: 'crm',
  permissions: {
    canCreateWorkflows: true,
    canExportData: true,
    canInviteMembers: false
  }
});

Available Presets

Preset	Description
`crm`	Contacts, deals, pipeline management
`project-management`	Tasks, sprints, kanban boards

Permissions

Permission	Type	Default	Description
`canCreateWorkflows`	boolean	true	Allow users to create custom workflows
`canExportData`	boolean	true	Allow data export
`canInviteMembers`	boolean	false	Allow users to invite team members

Events

Listen to lifecycle and user events to integrate Flexel with your analytics, logging, or backend.

const flexel = Flexel.init({ ... });

flexel.on('workflow:created', (workflow) => {
  console.log('New workflow:', workflow.name);
  analytics.track('workflow_created', workflow);
});

flexel.on('data:exported', (data) => {
  console.log('Data exported:', data.format);
});

flexel.on('ready', () => {
  console.log('Flexel is loaded');
});

Available Events

Event	Description
`ready`	Flexel workspace has loaded
`workflow:created`	User created a new workflow
`workflow:updated`	User modified an existing workflow
`data:exported`	User exported data
`error`	An error occurred

Deployments API

Manage user deployments from your server. Each deployment is an isolated environment for one user.

Installation

bash

npm install @flexel/node

Usage

// Server-side: manage users and deployments
import { Flexel } from '@flexel/node';

const flexel = new Flexel({ apiKey: process.env.FLEXEL_API_KEY });

// Create an isolated deployment for a user
const deployment = await flexel.deployments.create({
  userId: 'user_123',
  preset: 'crm',
  data: {
    contacts: await getContactsForUser('user_123')
  }
});

// List all deployments
const deployments = await flexel.deployments.list();

// Destroy a deployment
await flexel.deployments.destroy('deployment_id');