VibeDoc | Devpost

Inspiration

We live in an exciting time where anyone can create software. This "vibe coding" represents a turning point, as now everyone can transform ideas into applications.

As a software developer with many years of professional experience, numerous projects, different programming languages, and conceptual frameworks, it's important to me to implement the reverse process of vibe coding. In other words, I want to go from the application back to the idea. Understanding things is crucial to me, and VibeDoc helps with that.

To highlight the insights within the code, I want to use AI for both analysis and presentation. My goal is to build easy access to complex and information-rich repositories.

What it does

Workflow:
Flow

You can create video podcasts and MP3 podcasts from a repository and get a clear, visualized representation of the repository, with a focus on concepts and repository structure.

The production pipeline uses agentic systems and has implemented correction loops to create high-quality dialogues and appropriate visualizations. With prompts, you can influence the direction of the podcast, and it can create multilingual podcasts.

In the generated video podcast, each speech contribution has a slide, and the slides are HTML pages or Mermaid diagrams that visualize what's being said. I use ElevenLabs for audio generation.

The generated videos are currently uploaded manually to YouTube. The goal is to build a community around these YouTube tutorials.

There's a website with linked YouTube videos and their tutorials. In the tutorial, you can view enlarged Mermaid diagrams. On the website, you can browse podcast dialogues with comfort features like filtering and searching. In the podcast dialogue preview, you can also see the visualizations.

The website is: vibedoc.online and aims to become a 'counter-movement' to 'vibe coding' while supporting vibe coding, as it emphasizes human understanding-building. At the end of the day, humans prompt AI. VibeDoc helps you understand complex concepts and offers the possibility to build individual understanding tutorials and share them with others.

VibeDoc also processes repositories without code and generates tutorials and video podcasts from them.

At present, the deployed UI lacks connection to the FastAPI server.

How we built it

We have a FastAPI server that implements all the business logic and generates the videos/MP3s. I trigger the tasks via Swagger UI. The server implements SSE to inform the client about progress.

The production of a video podcast takes about an hour (processing only, without human-in-the-loop time). The reason for this is that I've implemented an agentic system that ensures the quality of the generated tutorial and podcast script, requiring multiple LLM calls. A significant portion of the duration also comes from the fact that tasks in video production cannot be parallelized and must build upon each other.

The UI was made with bolt.new and prompted to have a brutally minimalistic design. There's only a light/dark theme. The badge image in the 'VibeDoc' logo adapts when switching themes.

All generated files are uploaded to an S3 bucket: https://vibedoc.s3.eu-central-1.amazonaws.com/ and are downloadable.

The domain vibedoc.online is with IONOS and I use Netlify.

These AI functions are not connected:
AI Diagram Improvements AI Text Improvements

Challenges we ran into

Creating the videos was not trivial. Initially, a video took several days to produce. :-) Not sustainable. With Playwright and Headless Chrome, I could keep it manageable, and it's currently only tested on Mac hardware.

We have incorporated this because the AI functions can only be used locally with an API key.
API Key

VibeDocServer. # fastapi

VibeDoc. # react.

The two repositories will be merged.

Accomplishments that we're proud of

I love what I've created together with AI.

What we learned

The entire deployment process with bolt.new was new to me. GitHub usage was also new with bolt. I'm thrilled.
GitHub Pocket Flow was new to me, and I'm very glad I learned this framework.

What's next for VibeDoc

VibeDoc is part of a movement that has its origins in vibe coding and examines other aspects of software development.

I'm a software developer interested in these alternative approaches. And I need them because I have too many projects and can't remember everything.

With the MP3 files, I can now work while jogging. I can create a playlist of my software projects.

I'm making all the code public. I don't want to build a business with this application. I'll upload my analyses and tutorials to vibedoc.online and update the videos on YouTube.

I'll accept other tutorials via pull requests. There will be GitHub Actions for this. Whether vibedoc.online survives or gets degraded to just a YouTube channel depends on the Custom Domain Challenge.

I've also registered