Inspiration
While building with LangChain, I kept running into the same problems: prompts scattered across files, no clear way to track changes, and a frustrating process of testing, tweaking, and exporting chains into working code. There was no single place to design, test, and manage prompt workflows end-to-end.
I wanted a tool that felt like a proper IDE for prompt engineering—one that could combine structured editing, visual logic, analytics, and clean code export for LangChain. That’s what inspired me to build LangForge.
What It Does
LangForge is a visual IDE for building, testing, and exporting LangChain workflows.
It includes:
- A prompt editor with variable management, live model testing, automatic scoring, and auto-generated test cases tailored to each prompt
- A canvas view where you can visually connect prompts into chains, add conditional logic, and define branching workflows
- Real-time sync between the editor and canvas
- Built-in version control and prompt comparison across iterations
- A full LangChain code exporter that generates clean, ready-to-use code in both Python and JavaScript
- Integrated analytics for tracking token usage, response time, PromptScore trends, failure rates, and model performance over time
LangForge transforms messy prototyping into structured, production-ready AI workflows—without boilerplate.
How I Built It
I built LangForge as a solo full-stack project using:
- Next.js and TailwindCSS for a clean, modern UI
- A state management system (Zustand) to sync prompt data between the editor and the canvas
- OpenAI’s API for running prompts, scoring them, and generating auto-test cases
- A canvas engine with custom logic nodes for branching, conditionals, and variable flows
- A prompt validation system that checks for unused or undefined variables
- A code generation engine that maps prompt chains to LangChain components like
PromptTemplate,SequentialChain, andConversationChain - Local version control to track changes across prompt and canvas states
- Analytics tracking for run history, token usage, failure rates, and model comparisons
The result is a unified tool that feels like an IDE, works like a visual builder, and exports code like a production framework.
Challenges I Ran Into
- Prompt-Canvas Syncing: Keeping the text-based editor and the visual canvas perfectly synchronised in real time required careful data modelling and state management.
- Conditional Logic UI: Designing an intuitive interface for branching logic, variable-based conditions, and output routing took multiple iterations to get right.
- Accurate LangChain Export: Generating clean, idiomatic LangChain code that supports different chain types (like
SimpleSequentialChain,ConversationChain, and custom logic) was more complex than expected. - Version Control Implementation: Building a versioning system that works across both the prompt editor and the canvas, while remaining lightweight and understandable, required careful state diffing and metadata tracking.
- Prompt Validation & Testing: Ensuring that all variables are declared, used correctly, and testable with generated inputs meant building a small internal prompt parser and validator.
Each challenge pushed me to better understand the design trade-offs involved in building tools for LLM workflows.
Accomplishments I Am Proud Of
I’m proud that I was able to design, build, and launch a complete MVP of LangForge in just 2.5 days as a solo developer.
The project includes:
- A fully designed landing page
- Full authentication flow
- A prompt editor with variable management, live testing, and auto-scoring
- A canvas view for visual chaining with conditionals and memory
- Real-time sync between editor and canvas
- Built-in version control for both prompts and workflows
- A working LangChain code exporter
- A full analytics dashboard with model performance tracking and comparisons
Shipping this many integrated features in such a short time—while keeping the UI clean and usable—is something I’m genuinely proud of.
What I Learned
Building LangForge gave me a much deeper understanding of how real-world prompt engineering works—especially when moving from isolated prompts to structured workflows.
I learned:
- How to think in terms of LangChain architecture, like prompt templates, memory, and different chain types
- How important variable tracking, prompt validation, and version control are when iterating quickly
- That building a great prompt isn’t enough—you also need testability, observability, and structure
- How to sync complex UI states across multiple views while keeping the UX clean
- The value of designing tools that empower developers to move fast without sacrificing control
This project helped me go beyond “just testing prompts” and really understand how to turn them into reusable, reliable building blocks.
What's Next for LangForge
As I mentioned before, in just 3 days, I built a completely functional MVP. The next steps I see are:
- User Testing & Feedback: Share the MVP with a small group of users to gather feedback on usability, features, and any bugs.
- Iterate & Improve: Based on the feedback, refine the user interface, fix issues, and enhance core functionalities.
- Add Key Features: Implement advanced features like integrations with popular LLM providers, memory support, or multi-turn conversation management.
- Performance Optimisation: Ensure the app runs smoothly and efficiently under various workloads.
- Documentation & Tutorials: Prepare clear documentation and user guides to help onboard new users.
- Prepare for Launch: Set up hosting, analytics, and marketing materials for a wider release.
- Plan for Scaling: Consider backend improvements to support more users and data as the app grows.
Overall, the focus will be on moving from MVP to a polished, user-ready product.
Built With
- eslint
- groq
- hooks
- inter-font
- lucide-react
- openai-api
- openrouter-api
- postcss
- postgresql
- react
- react-native
- react-router-dom
- reactflow
- recharts
- supabase
- tailwind-css
- typescript
- typescript-eslint
- vercel
- vite
Log in or sign up for Devpost to join the conversation.