Editor Visual

O Editor Visual é a área de trabalho onde a mágica acontece. Ele oferece uma interface de "canvas infinito" baseada em nós, permitindo que você desenhe, conecte e configure a lógica do seu fluxo de forma visual e intuitiva.

Visão Geral

Ao criar ou abrir um fluxo, você é apresentado a esta interface. Aqui você pode:

• Arrastar e Soltar: Adicione novos nós de processamento.
• Conectar: Crie ligações entre os nós para definir a ordem de execução e a passagem de dados.
• Configurar: Ajuste os parâmetros individuais de cada etapa do processo.
• Testar: Execute o fluxo em tempo real para validar o funcionamento.

Componentes da Interface

A interface do editor é dividida em cinco áreas principais de controle:

1. Barra Superior (Ações e Navegação)

Localizada no topo da tela, esta barra contém os controles globais do fluxo:

• Breadcrumbs (Navegação): No canto esquerdo (ex: Projeto > Estúdio de IA > template vazio), permite voltar rapidamente para as telas anteriores.
• Executar (Play): O botão no canto direito inicia a execução do fluxo para testes imediatos.
• Exemplo de uso via API (Nuvem): Ao lado do botão executar, esse botão mostra exemplos de código (cURL, Python, JS) para consumir o agente via API.

2. Área de Canvas

O grande espaço em branco com uma grade pontilhada é o seu espaço de trabalho.

• Você pode clicar e arrastar em uma área vazia para mover a visualização.
• Use a roda do mouse (scroll) para aumentar ou diminuir o zoom.
• É aqui que os nós serão posicionados e conectados.

3. Barra de Ferramentas Lateral

No lado esquerdo do canvas, você encontra uma coluna vertical de botões para auxiliar na visualização e manipulação geral:

• (+) Adicionar nós: Abre o menu para inserir novos blocos ao fluxo.
• (⚙️) Configurações: Acesso a dados gerais do agente, como nome e descrição.
• (🔍) Aumentar zoom: Aproxima a visualização para ver detalhes.
• (🔍) Diminuir zoom: Afasta a visualização para ver o fluxo completo.
• (⛶) Fit View: Ajusta o zoom automaticamente para centralizar todos os nós na tela.

4. Controle de Histórico

No canto inferior esquerdo, encontram-se os botões de controle de alterações:

• Desfazer (Seta para esquerda): Reverte a última ação realizada (Atalho: Ctrl + Z).
• Refazer (Seta para direita): Refaz uma ação que foi desfeita (Atalho: Ctrl + Shift + Z).

5. Painel de Configuração

Esta é uma área contextual que aparece ou se atualiza quando você clica sobre um nó no canvas. É aqui que você define o comportamento específico de cada nó do seu fluxo.

O painel é dividido geralmente em duas abas:

• CONFIGURAÇÕES: Onde você define parâmetros como o Modelo de IA, Prompts do Sistema, Mensagens do Usuário, Temperaturas e Limites de Tokens. Os campos mudam dependendo do tipo de nó selecionado (ex: um nó de LLM terá opções diferentes de um nó de Entrada).
• ÚLTIMA EXECUÇÃO: Utilizado para depuração, mostrando os logs (resultados) da ultima execução.

Conceitos Básicos de Edição

O funcionamento do editor baseia-se na interação entre dois elementos principais:

Nós

São os blocos que realizam ações específicas (ex: "LLM", "Entrada", "Saída"). Cada nó possui entradas (conectores à esquerda) e saídas (conectores à direita).

Links

São as linhas que conectam os nós, representando o caminho que os dados percorrem.

• Para criar: Clique na "bolinha" de saída de um nó e arraste até a entrada de outro.
• Fluxo de dados: A conexão garante que o resultado do primeiro nó seja enviado como informação para o próximo.

Próximos Passos

Agora que você conhece o ambiente, é hora de começar a construir:

• Biblioteca de Nós: Entenda em detalhes o que cada tipo de nó faz e como configurá-los.