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
openai: 'your-openai-api-key'
}}
/>
`$3
tsx
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 /}
apiKeys={{ openai: 'your-key' }}
/>{/ Change sidebar background /}
apiKeys={{ openai: 'your-key' }}
/>
{/ Multiple customizations /}
apiKeys={{ openai: 'your-key' }}
/>
`Available data attributes for styling:
-
: 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
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
showToaster={false}
/>
`$3
tsx
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 |
|------|------|---------|-------------|
|
| { 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
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
/>
`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