🔧 Editor de Workflow Visual - MVP

Um editor de workflow visual moderno e intuitivo construído com React + React Flow, inspirado no n8n. Este MVP permite criar, editar, salvar e executar workflows de forma visual.

✨ Funcionalidades

• 🎨 Editor Visual: Interface drag-and-drop para criar workflows
• 🔗 Conexões Intuitivas: Conecte nós facilmente arrastando entre eles
• ⚙️ Edição de Propriedades: Painel lateral para configurar cada nó
• 💾 Persistência: Salvar e carregar workflows em JSON
• ▶️ Simulação de Execução: Execute workflows e veja os dados no console
• 📱 Responsivo: Interface adaptável para diferentes tamanhos de tela

🚀 Tipos de Nós Disponíveis

Triggers (Gatilhos)

• Webhook: Dispara quando recebe uma requisição HTTP
• Agendamento: Executa em intervalos regulares

Ações

• Requisição HTTP: Faz chamadas para APIs externas
• Transformar Dados: Processa dados usando JavaScript
• Consulta BD: Executa consultas no banco de dados
• Enviar Email: Envia emails para destinatários
• 🤖 AI Agent GPT Text: Processa texto usando modelos GPT da OpenAI
• 🎨 Gerar Imagem DALL-E: Gera imagens usando a API DALL-E da OpenAI

🛠️ Tecnologias Utilizadas

• React 18 - Biblioteca principal
• React Flow - Editor de fluxo visual
• TypeScript - Tipagem estática
• CSS3 - Estilização moderna
• LocalStorage - Persistência local

📦 Instalação e Execução

Pré-requisitos

• Node.js 16+
• npm ou yarn

Passos para Executar

1. Clone ou baixe o projeto

   cd workflow-editor-mvp

2. Instale as dependências

   npm install

3. Execute o projeto

   npm start

4. Acesse no navegador

   http://localhost:3000
   

🎯 Como Usar

1. Criando um Workflow

1. Adicione nós: Arraste tipos de nós do painel esquerdo para o canvas
2. Conecte nós: Arraste de um nó para outro para criar conexões
3. Configure propriedades: Clique em um nó para abrir o painel de edição
4. Salve o workflow: Use o botão "💾 Salvar Workflow" no topo

2. Editando Nós

1. Clique em qualquer nó no canvas
2. O painel de propriedades abrirá à direita
3. Edite o nome e parâmetros do nó
4. Clique em "Salvar" para aplicar as mudanças

3. Executando Workflows

1. Clique em "▶️ Executar Workflow"
2. Abra o console do navegador (F12)
3. Veja a simulação de execução com dados mock

4. Gerenciando Workflows

1. Clique em "📋 Lista de Workflows" para ver workflows salvos
2. Use "Carregar" para abrir um workflow existente
3. Os workflows são salvos automaticamente no localStorage

📁 Estrutura do Projeto

workflow-editor-mvp/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── CustomNode.tsx          # Componente de nó customizado
│   │   ├── NodePropertiesPanel.tsx # Painel de edição de propriedades
│   │   ├── NodeTypesPanel.tsx      # Painel de tipos de nós
│   │   └── WorkflowEditor.tsx      # Editor principal
│   ├── services/
│   │   └── workflowService.ts      # Serviço de gerenciamento de workflows
│   ├── types/
│   │   └── workflow.ts             # Tipos TypeScript
│   ├── App.tsx                     # Componente principal
│   ├── App.css                     # Estilos da aplicação
│   ├── index.tsx                   # Ponto de entrada
│   └── index.css                   # Estilos globais
├── examples/
│   ├── sample-workflow.json        # Exemplo de workflow básico
│   ├── ai-agent-workflow.json      # Exemplo de workflow com AI Agent
│   ├── test-ai-agent.json          # Exemplo simples para testar AI Agent
│   └── chat-ai-agent.json          # Exemplo com layout de chat
├── docs/
│   ├── AI_AGENT_GUIDE.md           # Guia completo do nó AI Agent
│   ├── TROUBLESHOOTING_AI_AGENT.md # Guia de troubleshooting
│   └── CHAT_LAYOUT_GUIDE.md        # Guia do layout de chat
├── package.json
└── README.md

🔧 Configuração Avançada

Adicionando Novos Tipos de Nós

1. Edite src/types/workflow.ts
2. Adicione novos tipos em MOCK_NODE_TYPES
3. Implemente a lógica de execução em workflowService.ts

Personalizando Estilos

• Edite src/App.css para estilos globais
• Modifique src/components/CustomNode.tsx para estilos dos nós
• Ajuste cores e temas conforme necessário

📊 Exemplo de Workflow JSON

{
  "id": "sample-workflow",
  "name": "Processamento de Dados",
  "nodes": [
    {
      "id": "trigger-1",
      "type": "trigger",
      "name": "Webhook",
      "position": { "x": 100, "y": 200 },
      "data": {
        "label": "Webhook",
        "parameters": {
          "method": "POST",
          "path": "/api/webhook"
        }
      }
    }
  ],
  "edges": []
}

🐛 Resolução de Problemas

Erro de Dependências

rm -rf node_modules package-lock.json
npm install

Problemas de Performance

• Use o React DevTools para identificar re-renders
• Considere implementar React.memo para componentes pesados

Problemas de Layout

• Verifique se o container tem altura definida
• Ajuste z-index para sobreposições

🤖 AI Agent GPT Text

O nó AI Agent GPT Text permite integrar modelos de linguagem da OpenAI em seus workflows. Com ele você pode:

• Análise de Sentimento: Analisar o sentimento de textos
• Resumo de Conteúdo: Gerar resumos concisos
• Tradução: Traduzir textos entre idiomas
• Classificação: Classificar dados em categorias
• Extração de Informações: Extrair dados estruturados
• Geração de Conteúdo: Criar emails, relatórios e textos

Configurações Principais

• Modelo: Escolha entre GPT-3.5, GPT-4, GPT-4o e suas variantes
• Temperatura: Controle a criatividade (0-2)
• Prompt: Configure o prompt principal com variáveis {{data.campo}}
• Formato de Saída: Texto, JSON, Markdown ou HTML

💬 Layout de Chat

As respostas do AI Agent são exibidas em um layout de chat moderno com:

• Avatar do AI com gradiente roxo
• Balão de mensagem com seta
• Timestamp da resposta
• Botão de copiar para facilitar o uso
• Detalhes técnicos (modelo, tokens, tempo de execução)
• Indicador de status (sucesso/erro)

Exemplo de Uso

{
  "prompt": "Analise o sentimento do texto: {{data.text}}",
  "model": "gpt-3.5-turbo",
  "temperature": 0.3,
  "outputFormat": "json"
}

📖 Guia Completo: Veja docs/AI_AGENT_GUIDE.md para exemplos detalhados e melhores práticas.

💬 Layout de Chat: Consulte docs/CHAT_LAYOUT_GUIDE.md para entender a interface de chat.

🔧 Troubleshooting: Se o nó não estiver funcionando, consulte docs/TROUBLESHOOTING_AI_AGENT.md.

🧪 Como Testar o AI Agent

1. Configure sua chave da API OpenAI:

   • Obtenha uma chave em platform.openai.com
   • Adicione a chave no campo "Chave da API OpenAI" do nó

2. Teste com o exemplo:

   • Carregue o arquivo examples/test-ai-agent.json
   • Configure sua chave da API
   • Execute o workflow

3. Verifique a resposta:

   • Abra o console do navegador (F12)
   • Execute o workflow
   • Veja a resposta real da API da OpenAI

🚀 Próximos Passos

• Implementar nó AI Agent GPT Text
• Implementar nó DALL-E para geração de imagens
• Implementar validação de workflows
• Adicionar histórico de execução
• Implementar templates de workflow
• Adicionar testes unitários
• Integração com APIs reais

📝 Licença

Este projeto é um MVP para demonstração e aprendizado.

🤝 Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para:

• Reportar bugs
• Sugerir novas funcionalidades
• Enviar pull requests
• Melhorar a documentação

---

Desenvolvido com ❤️ usando React + React Flow