피드로 돌아가기
How I built a browser-based n8n workflow generator using Gemini AI
Dev.toDev.to
Frontend

n8n 사용자가 Gemini AI로 자동 워크플로우 생성기를 만들어 브라우저에서 직접 JSON 파일 생성

How I built a browser-based n8n workflow generator using Gemini AI

ToolForge2026년 3월 29일1intermediate

Context

n8n에서 워크플로우 프로토타입을 만들 때마다 인스턴스를 열고 노드를 검색한 후 수동으로 연결하는 과정을 반복해야 했다. 새로운 아이디어를 빠르게 검증하기 어려운 환경이었다.

Technical Solution

  • Gemini API를 활용한 자동 코드 생성: 평문 영어 설명을 입력받아 n8n 호환 워크플로우 JSON으로 변환
  • 시스템 프롬프트 엔지니어링: 올바른 노드 타입, 파라미터 구조, 연결 형식을 갖춘 유효한 JSON 출력을 위해 반복 개선
  • 브라우저 기반 단일 HTML 파일: 서버나 백엔드 없이 클라이언트 사이드에서 완전히 실행되며 사용자가 직접 Gemini API 키 입력
  • n8n 워크플로우 JSON 스키마 준수: 노드의 typeVersion, position 배열, connections 객체의 정확한 매핑으로 임포트 호환성 확보
  • 자격증명 제외 설계: n8n이 워크플로우 JSON에 자격증명을 저장하지 않으므로 사용자가 임포트 후 수동으로 연결

Key Takeaway

LLM을 활용한 코드 생성 도구 개발 시 특정 시스템의 스키마를 정확히 이해하고 시스템 프롬프트로 구현하는 것이 임포트 호환성을 확보하는 핵심이다. 클라이언트 사이드 실행으로 인프라 운영 비용을 제거할 수 있다.


n8n 사용자 커뮤니티에서 LLM 기반 워크플로우 생성 도구를 도입하면 프로토타입 작성 시간을 단축할 수 있으며, 브라우저 기반 구현으로 별도의 서버 운영 없이 배포할 수 있다.

원문 읽기