Skip to content
Nappai Documentation

Navigating the Editor Interface

The canvas is your main workspace in NappAI. From here you can add components, test your automations, and manage your projects. This guide details each element of the interface.

The Main Toolbar

This vertical bar on the right contains the key actions for managing and testing your project.

Barra de herramientas principal de la interfaz de NappAI

Add Component (+)

  • Opens the component panel so you can search for and drag new components onto your project.

Deploy and Consume (Rocket Icon)

This button is the portal to take your project into production. It is divided into two distinct functionalities. Before a project can be consumed externally, you must create an official “version” of it.

  • Step 1: Deploy a Version This option allows you to create a stable and published “version” of your project. It’s like saving a snapshot of your flow that can be used from outside NappAI.

    • If you do not have any previous versions created, NappAI will ask you to enter the data for your first deployed version.
    • If versions already exist, you can select them from the list to manage them.

    Ventana para crear una nueva versión de un flujo en NappAI.

    To create a version, you must configure:

    • Select the version to deploy: By default, it will be the active # Development version.
    • Version: Give this version a unique and descriptive name (e.g., v1.0.0, Initial-Production). This name will help you identify it later.
    • Description: Add an optional description to remember what changes or features this version includes.

    Once you click the Deploy button, that version is “published” and ready to be consumed.

  • Step 2: Consume the Version (API Access) This option provides you with the necessary code to execute your deployed version from an external application.

    Panel de Consumo que muestra el código para interactuar con un flujo desplegado.

    To generate the code, you must select:

    • API Key: Choose an API Key you have previously created. This key is what authorizes your external application to execute the flow. You can manage your keys in the Navigation Panel.
    • Deployed Version: Select the version you just created (e.g., v1.0.0). It is crucial to select a deployed version to enable consumption.

    Once the key and version are selected, NappAI will automatically generate code snippets in various languages (cURL, Python, JavaScript, etc.) that you can copy and paste directly into your application to execute this flow remotely.

Test Environment (Bug Icon)

  • Opens the Playground, the interactive interface to test your flow in real-time without having to deploy it. Panel del Entorno de Pruebas de NappAI. The left panel is divided into 2 options:
    • Runs: This is the most important tab for debugging. Every time you send a message in the chat, a detailed log appears here of how the flow was executed, component by component.
      • Step-by-Step View: You can click on each component of your flow (like Chat Input, Agent, Gemini) and see exactly the input data it received and the output data it generated.
      • Error Identification: If something fails, this is where you will see which component caused the error and why, greatly facilitating correction.
    • Memories: This tab manages the conversation history. When building conversational flows, it is crucial that the agent remembers past interactions to maintain context.
      • Conversation History: Here you can view and manage the short-term and long-term memory that the agent is using. This is fundamental for building coherent and advanced chatbots.

Version History

  • Purpose: This panel is your “time machine.” It allows you to manage, view, and restore different states of your project throughout its development. It is fundamental for maintaining change control and for differentiating between your work in progress and stable versions. Panel de Historial de Versiones de NappAI

  • History Components:

    • Development Version: This is always the first on the list. It represents the current state of your canvas. All changes you make in real-time are automatically saved here. This version cannot be deployed directly; it is your draft or “sandbox.”
    • Created Versions (e.g., 0.1, 0.2): These are “snapshots” or manual save points that you have created. Each one represents a specific state of your project at a given moment.
    • Rocket Icon (🚀): This icon appears next to a version to indicate that it has been deployed. This means it is a stable version that can be consumed via API. As seen in the image, version 0.1 is deployed, while 0.2 is not.

  • Available Actions: When selecting a created version (like 0.2 in the image), two main options appear:

    • Restore: This action replaces your current Development canvas with the content of the version you have selected. It is extremely useful if you want to revert to a previous state of your project.
    • Delete: This action permanently deletes a saved version. Important: You cannot delete a version that is currently deployed (the one with the rocket icon). You would first need to deploy a new version to “release” the old one.

Logs / Runs

  • Purpose: This panel is your flight log. It shows a detailed history of all the times your project has been executed outside the Test Environment (for example, via an API call or a scheduled task). It is your main tool for monitoring and debugging your flows in production.

    Panel de Registros de Ejecución mostrando una lista de ejecuciones con códigos de color.

  • How to Read the Runs List:

    • Each entry in the list represents a unique execution of your project, ordered chronologically.
    • Color Coding: The list uses an intuitive color system so you can see the status of each run at a glance:
      • Green: The execution completed successfully, with no errors in any of the components.
      • Red: The execution stopped due to an error in one of the components.

  • Inspect a Run (Detailed View):

    • Clicking on a specific run from the list opens a detailed debugging view. This view is essential for understanding exactly what happened during the execution.
    • Step-by-Step Visualization: You will be able to see a trace of the execution component by component. By selecting a component in the left panel (like OpenAI in the image), the main panel will show you the exact Input data it received and the Output data it generated.

    Vista detallada de una ejecución, mostrando la entrada (input) de un componente específico.

    This inspection capability is invaluable for debugging errors, understanding why your flow made a particular decision, or verifying the data being processed at each stage.

Help (Lightbulb Icon)

  • Opens a contextual help panel with guides and quick tutorials on how to use the interface. Panel de Ayuda de NappAI

Canvas Controls

This toolbar at the bottom left allows you to control the view of your flow canvas.

Controles del lienzo en NappAI

  • + / -: Increase or decrease the canvas zoom.
  • Center View (Expand Icon): Automatically adjusts the zoom and position so that your entire flow is visible on the screen.
  • Lock Flow (Lock Icon): Locks flow editing. You will not be able to move or delete components, but you will be able to run it in the Test Environment.
  • Auto-layout (Arrows Icon): Automatically reorganizes your components on the canvas to follow a linear and orderly arrangement.
  • Grid Layout (Squares Icon): Toggles between two positioning modes on the canvas.
    • Grid Mode (Activated): Forces components to align on a predefined grid.
    • Auto Mode (Deactivated): Allows you to move and position components with total freedom.
  • Add Note (Sheet Icon): Allows you to add sticky text notes directly on the canvas to document parts of your flow.