Visual AI workflow builder as an embeddable React component
npm install formmy-actionsVisual AI workflow builder as an embeddable React component




An embeddable React Flow component for building visual AI agent workflows. Originally developed for formmy.app, now available as a standalone library.
> ๐ Herramienta Educativa: Este proyecto es una herramienta de aprendizaje creada para enseรฑar visualmente el funcionamiento de agentes de IA. Estรก diseรฑada como un ejercicio educativo para explorar y comprender la construcciรณn de flujos de trabajo de IA de manera visual e interactiva.
- ๐จ Visual workflow builder with drag & drop interface
- ๐ค AI integration with OpenAI support (GPT-3.5, GPT-4, etc.)
- ๐ Real-time execution with live status updates
- ๐พ Auto-save workflows with localStorage persistence
- ๐ฏ Embeddable - drop into any React app
- ๐จ Professional UI with modern, responsive design
``bash`
npm install formmy-actions
`tsx
// Option 1: Named import (recommended)
import { AIFlowCanvas } from 'formmy-actions';
import 'formmy-actions/style.css'; // Required CSS
// Option 2: Default import
import AIFlowCanvas from 'formmy-actions';
import 'formmy-actions/style.css'; // Required CSS
export default function App() {
return (
๐ฎ How to Use
1. Add Input node - Write your message/prompt
2. Add Agent node - Configure AI model (requires OpenAI API key)
3. Add Output node - View AI responses
4. Connect nodes - Drag from output handles to input handles
5. Execute flow - Click "Ejecutar Flujo" button
6. Save/Load - Automatic save with Ctrl/Cmd+S
โ๏ธ Configuration
$3
`tsx
import { AIFlowCanvas } from 'formmy-actions';
import 'formmy-actions/style.css';
`$3
`tsx
apiKeys={{
openai: 'your-openai-api-key'
}}
/>
`$3
`tsx
apiKeys={{
openai: process.env.REACT_APP_OPENAI_API_KEY
}}
onSave={(flowData) => {
console.log('Flow saved:', flowData);
// Save to your backend
}}
onExecute={(flowData) => {
console.log('Flow executed:', flowData);
// Handle execution result
}}
readonly={false}
/>
`$3
`tsx
{/ Change button colors /}
className="[&_[data-execute-btn]]:bg-purple-500 [&_[data-execute-btn]:hover]:bg-purple-600"
apiKeys={{ openai: 'your-key' }}
/>{/ Change sidebar background /}
className="[&_[data-sidebar]]:bg-gray-100 [&_[data-sidebar]]:border-gray-300"
apiKeys={{ openai: 'your-key' }}
/>
{/ Multiple customizations /}
className="[&_[data-execute-btn]]:bg-red-500 [&_[data-node-item]]:border-blue-500 [&_[data-save-btn]]:bg-orange-500"
apiKeys={{ openai: 'your-key' }}
/>
`Available data attributes for styling:
-
[data-sidebar]: The left sidebar container
- [data-execute-btn]: The main execute button in sidebar
- [data-save-btn]: The save button in top panel
- [data-panel-execute-btn]: The execute button in top panel
- [data-node-item]: Individual draggable node items$3
`tsx
apiKeys={{
openai: process.env.REACT_APP_OPENAI_API_KEY
}}
showToaster={false}
onSave={(flowData) => {
// Handle your own notifications
showMyCustomNotification('Flow saved!');
}}
/>
`$3
By default, formmy-actions uses isolated styles to prevent conflicts with your existing CSS. If you need additional isolation, you can also import the isolated stylesheet:
`tsx
import { AIFlowCanvas } from 'formmy-actions';
import 'formmy-actions/style.css'; // Standard styles
import 'formmy-actions/isolated.css'; // Additional isolation className="my-custom-wrapper" // Your styles won't interfere
showToaster={false}
/>
`$3
`tsx
apiKeys={{
openai: 'your-openai-api-key'
}}
onSave={(flowData) => {
// Called when user saves (Ctrl/Cmd+S)
saveToDatabase(flowData);
}}
onExecute={(flowData) => {
// Called after successful execution
return Promise.resolve();
}}
readonly={false}
showToaster={true}
className="my-flow-canvas"
style={{ border: '1px solid #ccc' }}
/>
`๐ Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
apiKeys | { openai?: string } | {} | AI provider API keys |
| onSave | (flowData: any) => void | undefined | Called when flow is saved |
| onExecute | (flowData: any) => Promise | undefined | Called after execution |
| readonly | boolean | false | Whether canvas is read-only |
| showToaster | boolean | true | Show toast notifications |
| className | string | "" | Additional CSS classes |
| style | React.CSSProperties | {} | Inline styles |๐ฏ Node Types
$3
- Text input for prompts/messages
- Auto-expanding textarea
- Connects to Agent nodes$3
- AI model configuration
- OpenAI integration (GPT-3.5, GPT-4, etc.)
- Configurable temperature, tokens, etc.
- Real-time execution status$3
- Professional result display
- Expandable details view
- Copy-to-clipboard functionality
- Execution metadata and logs๐ง Requirements
- React 18+
- Modern browser with ES2020 support
๐ฆ Bundle Size
- ES Module: ~103KB (~24KB gzipped)
- UMD: ~72KB (~21KB gzipped)
- CSS: ~16KB (~3KB gzipped)
๐จ Styling
The component includes all necessary CSS. Simply import the styles:
`tsx
import 'formmy-actions/style.css';
`Tailwind CSS Customization: formmy-actions uses
tailwind-merge for seamless style overrides. Use the className prop with data attribute selectors to customize specific parts:`tsx
// Purple execute button
// Dark sidebar
`Built-in Style Isolation: Styles are automatically isolated and won't conflict with your app's CSS, even with aggressive CSS frameworks like Tailwind or Bootstrap.
๐ค AI Integration
Currently supports:
- โ
OpenAI (GPT-3.5-turbo, GPT-4, GPT-4-turbo, etc.)
- ๐ง Anthropic (Coming in v1.1)
- ๐ง Local models (Coming in v1.1)
$3
1. Get an API key from OpenAI
2. Pass it via props or set in the UI:
`tsx
apiKeys={{ openai: 'sk-...' }}
/>
`Or users can click the โ๏ธ settings button to configure API keys in the UI.
๐ Project Structure
`
formmy-actions/
โโโ src/
โ โโโ AIFlowCanvas.tsx # Main component
โ โโโ CustomNodes.tsx # Node components
โ โโโ runtime/ # Execution engine
โ โโโ services/ # AI integrations
โโโ dist/ # Built files
โโโ README.md
`๐ง Roadmap
v1.1 - Advanced Nodes
- [ ] Prompt Template node
- [ ] Function node (custom logic)
- [ ] Tool integration node
v1.2 - Multi-Provider
- [ ] Anthropic/Claude support
- [ ] Provider comparison mode
- [ ] Custom model endpoints
v1.3 - Advanced Features
- [ ] Flow templates
- [ ] Export/import flows
- [ ] Collaborative editing
๐ค Contributing
This is an open-source project. Contributions welcome!
`bash
Development setup
git clone https://github.com/blissito/formmy_actions.git
cd formmy_actions
npm install
npm run dev
``MIT License - see LICENSE for details
- ๐ฆ npm package
- ๐ GitHub repo
- ๐ formmy.app - Where this was born
- ๐ข Fixter.org - Made with โค๏ธ
---
๐ค Made with โค๏ธ by Fixter.org for formmy.app