File Visualizer

Released March 2025

The Story Behind My First Vibe Coding Product

How I built a web application without writing a single line of code myself, using AI-assisted "Vibe Coding" through Cursor.

Try File Visualizer Original Article Read the Story

Background

How It All Started

Inspiration and Early Exploration

From tweets to real-world applications

Initial Inspiration

I was inspired by a tweet from padphone, highlighting Claude 3.7 Sonnet's powerful document visualization capabilities. After seeing 歸藏（guizang.ai）'s tweet, I wanted to apply this technique to enhance the transcripts for the Up Our Game Canada project, turning plain documents into engaging content.

Iterative Testing

Initially, handling long transcripts was challenging since neither Claude's official nor Perplexity app could manage them effectively. Poe provided better results but still struggled with 63-page documents. Eventually, I used the Anthropic Playground so I could manually configure parameters especially input tokens and the thinking budget for long content.

The quality amazed me so much that I tweeted about it, feeling one step closer to experiencing AGI!

Breakthrough Moment

Joe Hu @hubeiqiao

i can feel the agi by using claude-3.7-thinking model. 😂

11:17 PM · Mar 12, 2025

View on X

Breakthrough Discovery

This discovery was a breakthrough—I realized I could visualize any document (within context limitations).

Document Transformation

AI Visualization

Game-Changing Idea

Development Journey

The Making of File Visualizer

From concept to completion, the journey took several unexpected turns and taught valuable lessons along the way.

March 14, 2025

Initial Local Version

Milestone

Successfully built a working local version of File Visualizer using Cursor Pro. The AI generated a functional application that could transform plain text into interactive websites.

Working prototype completed

March 14-22, 2025

Deployment Struggles

Challenge

Encountered numerous deployment issues when trying to move from local to Vercel. Over 300 Cursor requests were spent troubleshooting persistent bugs that worked locally but failed in production.

Platform configuration issues

Inconsistencies between environments

March 23, 2025

Claude Integration

Success

Successfully simplified the codebase, removed unstable features, and deployed a working version with Claude 3.7 Sonnet integration. The application was finally accessible online.

First public version deployed

March 25-28, 2025

Gemini Integration

Milestone

Added support for Gemini 2.5 Pro, offering users a completely free option to use the tool. This required additional troubleshooting with human assistance to resolve streaming issues.

Free option made available to all users

Obstacles Overcome

Key Challenges

The journey wasn't without its struggles. Here are the main challenges encountered during development.

Deployment Confusion

Following instructions without understanding alternatives led to repeated deployment failures. Only after explicitly directing Cursor to use Vercel did deployment succeed.

Time spent: ~1 day

Inconsistent Environments

While the local version worked well, the Vercel deployment repeatedly failed. Over 300 Cursor requests were spent troubleshooting this issue.

Time spent: ~3 days

Unnecessary Complexity

Cursor generated redundant branches and duplicate files, resulting in inconsistent behavior. Simplifying the codebase was key to eventual success.

Time spent: ~1 day

Resource Consumption

Cursor Pro Requests (Claude 3.7 Sonnet) 500 / 500

Used 100% of monthly request quota

Claude 3.7 Integration 406 requests

Used for developing the Claude integration

Gemini 2.5 Pro Integration 329 requests

Used for developing the Gemini integration

Total Investment

Cursor Pro $20.00

Extra Requests $9.40

Claude API $30.00

Total $59.40

Worth every cent!

Not about the cost—it's about the empowerment.

Student Builder? Get free Claude API credits by submitting this form:

Apply for Student Credits

Lessons Learned

Reflections

Insights gained from the journey of creating File Visualizer using AI-assisted coding.

Technical Familiarity vs. Complexity

Although I lack a strong technical background, my previous professional experiences made me familiar enough with technical concepts. However, coding still remains challenging for most people.

Choosing Cursor Pro Over Claude Code

I chose Cursor Pro because it directly understands the codebase, eliminating tedious copy-pasting. Cursor's agent mode also greatly simplifies generating and editing code. Claude Code, while impressive, is significantly costlier, even with pay-as-you-go pricing.

Debugging Limitations

Without manually writing code, debugging proved particularly challenging. Current AI systems, including Claude 3.7 Sonnet, are still unstable and inaccurate, making it difficult to resolve complex issues through simple queries.

Debugging AI-generated code differs significantly from editing code written by experienced colleagues. I also realized that you shouldn't list several issues at the same time. You need to prioritize.

Scope of AI

AI currently supports small personal projects effectively. However, maintaining complex systems like Amazon or Telegram remains challenging due to limited context windows. Creating new products is easier than continuously improving existing ones.

Despite having ideas for enhancing File Visualizer, further development feels overwhelmingly difficult. This reinforces the saying that it's easier to create a product than to maintain it continuously.

Importance of Fundamental Coding Skills

Learning basic coding techniques like Git is crucial. My previous experience as an effective bug finder, capable of clearly reporting issues and capturing detailed logs, has proven highly valuable.

I deeply appreciate my earlier professional journey. Learning fundamental concepts that remain relevant despite technological advancements is essential and holds potential.

Product Distribution Challenges

Although product creation has become more accessible, effectively distributing those products remains a significant challenge, especially in an environment saturated with new innovations.

Even though I believe this is a super cool and helpful product, like magic, the user adoption did not match my expectations (of course, the current product is not good enough and just a middle quality wrapper), even with free Gemini 2.5 Pro. Distributing your product to potential customers is always important. During the period I draft this article, OpenAI and Anthropic are now flighting over college students with free AI.

The Final Product

File Visualizer

Transform plain documents into stunning, interactive websites

Free Option Available

Using Google Gemini 2.5 Pro's free API

Premium Quality Option

Using Anthropic's Claude 3.7 Sonnet

Simple User Interface

Paste text, add instructions, generate website

One-Click Download

Download complete website files for hosting

Try File Visualizer

Example Transformations

Here are two real-world examples that demonstrate how File Visualizer transforms plain documents into professional websites.

Academic Research

User Perceptions in AI-Assisted Note Taking

This is an actual website created with File Visualizer, transforming an academic research paper into an engaging, navigable website with interactive elements.

View Live Example

Market Analysis

PQC Market Analysis Report

Another real example created with File Visualizer - this business market analysis document was converted into a structured, visually appealing website.

View Live Example

Future Perspectives

More Thoughts

Reflections on the project and thoughts about the future of AI-assisted development.

From Experiment to Innovation

Thoughts on the current state and future possibilities of AI-assisted development

Just the Beginning

This is just one attempt and a beginning, intended to show people what's possible with AI. Even if it is just a wrapper, it is easier to distribute than just a single long prompt.

Personal vs Commercial

A personal project is relatively easy to manage. You don't need to worry as much about other things. Just build, ship, and test to match your own needs. As for a full commercial product, you need to manage the entire process.

Future Integration Opportunities

The next step should be integration (but right now I don't have a strong intention to take the next step 🤣); for example, turning LinkedIn pages and your activities into a website. Also, turning the outcome of deep research into something much more visually stunning…

LinkedIn Profile to Website

Research Visualization

Dynamic Content Integration

Current Limitations

Another issue is that current models are still not good enough to deal with long-form content. If I need a more detailed outcome, I still need to use Cursor to edit it. So, future tools should support more detailed editing or automatically enhance the outcome through several steps.

My Definition of AGI

To me, achieving AGI means being able to clearly accomplish tasks with a single prompt, without repeated troubleshooting. Specifically, delivering something like File Visualizer in fewer than 20 prompts would represent AGI. Hopefully, by the end of 2025, this goal becomes achievable.

It's truly a Golden Age for Product People!

It's time to build!

Ready to Transform Your Documents?

Experience the magic of File Visualizer. Convert your plain text content into beautiful, interactive websites with just a few clicks.

Try File Visualizer GitHub Repo Original Article

Created with AI-assisted "Vibe Coding" | Powered by Claude 3.7 Sonnet & Gemini 2.5 Pro