Integracion VS Code

Explora proyectos y flujos de Langflow, inspecciona componentes del flujo y edita el codigo Python de componentes directamente desde VS Code.

Uso

Configuracion

1. Abre el contenedor de vista Langflow en la barra de actividad.
2. En la vista "Conexion", define:
   • URL base (ejemplo: http://localhost:3000)
   • API key
   • Opcional: ruta del venv de Langflow (para validar sintaxis Python)
3. Si prefieres usar Settings, configura:
   • Langflow: Base Url
   • Langflow: Venv Path

Explorar y editar flujos

ATENCION: Antes de editar codigo de un componente, cierralo en la UI de Langflow.

1. Expande "Proyectos y Flujos" y elige un proyecto.
2. Selecciona un flujo para cargar sus componentes.
3. Haz clic en un componente para abrir su codigo Python en un archivo temporal.
4. Guarda el archivo para enviar cambios a Langflow.

Editar propiedades de componentes

1. Selecciona un componente en el arbol.
2. Usa la vista "Propiedades" para editar campos.
3. Guarda para actualizar la definicion del flujo en Langflow.

Ejecutar un flujo

1. Selecciona un flujo en el arbol.
2. Usa la vista "Ejecutar Flujo" para ingresar valores de entrada.
3. Haz clic en Ejecutar y revisa el canal de salida "Langflow Run" para ver resultados.

Abrir JSON de flujo

• Usa "Langflow: Abrir JSON del Flujo" desde el menu contextual del arbol para abrir la definicion completa.
• Guarda el archivo JSON para actualizar el flujo en Langflow.

Comandos

• Langflow: Conectar - solicita API key y refresca datos
• Langflow: Configurar API Key - actualiza la API key guardada
• Langflow: Refrescar - recarga proyectos y flujos
• Langflow: Abrir JSON del Flujo - abre la definicion del flujo seleccionado

Prueba local

1. Ejecuta npm install.
2. Ejecuta npm run compile.
3. Abre esta carpeta en VS Code y pulsa F5 para iniciar Extension Development Host.
4. En el Dev Host:
   • Ejecuta Langflow: Conectar e ingresa tu API key.
   • Define langflow.baseUrl en Settings si hace falta.
   • Expande la vista "Proyectos y Flujos", selecciona un proyecto y expande un flujo.
   • Haz clic en un componente del flujo para abrir su codigo.
   • Edita y guarda para enviar cambios a Langflow.

Notas:

• Necesitas una instancia Langflow accesible y una API key valida.
• Todavia no hay pruebas automatizadas; la validacion es manual en Dev Host.

Empaquetado local e instalacion

1. Genera el paquete VSIX:

npm install
npm run compile
npx @vscode/vsce package

1. Se creara un archivo .vsix en esta carpeta.
2. Instala la extension en VS Code:
   • GUI: Extensions -> menu de tres puntos -> Install from VSIX...
   • CLI:

code --install-extension .\\langflow-vscode-empresa-es-0.0.1.vsix

1. Si ya tenias la version original, esta copia usa identificador distinto para convivir sin conflicto.

Para publicar oficialmente en Marketplace, revisa PUBLISHING.md.

Notas

• La extension usa endpoints de la API de Langflow (/api/v1/...).
• Si tu instancia de Langflow usa endpoints distintos, ajusta el cliente en src/langflowClient.ts.