Docflow

Inspiration

As developers, we spend 50% of our time reading documentation. But when we get stuck, the workflow is broken: we have to leave the docs, go to Discord or StackOverflow, paste a link, and explain the context. By the time we get an answer, we've lost our flow.

We asked: Why can't the documentation itself be the community? Inspired by the seamless collaboration in Google Docs and Notion, we wanted to bring that same "highlight-to-discuss" experience to every static documentation site on the web.

What it does

DocFlow is an embeddable widget that turns static text into a living conversation.

1. Contextual Discussion: Users can highlight any paragraph or code snippet on a page.
2. Instant Threads: This creates a unique thread in Foru.ms linked specifically to that text element.
3. AI Assistance: An integrated AI agent reads the highlighted context and immediately posts a "first response" clarification, saving human maintainers time.
4. Zero-Friction: It lives inside a slide-out drawer, so users never lose their place in the docs.

How we built it

We built DocFlow as a Next.js application designed to be embedded via iframe or script tag.

• The Backend (Foru.ms): We utilized the Foru.ms Headless API as our entire backend database. We used a hashing algorithm to generate unique slugs based on the DOM content of the highlighted text. This allows us to map a specific paragraph to a specific Foru.ms Thread ID ($T_{id}$) dynamically.
• The Frontend (v0 by Vercel): We used v0 to rapidly prototype the complex UI components. The slide-out drawer, the "selected text" visualization, and the chat interface were all scaffolded in minutes using v0 prompts, allowing us to focus on the logic.
• The Intelligence: We used the Vercel AI SDK to pipe the highlighted text into an LLM, which posts back to the Foru.ms thread as a "System User."

Challenges we ran into

The biggest technical hurdle was DOM Persistence. Since documentation changes, we needed a way to robustly identify which paragraph a comment belongs to. $$H(p) = \text{SHA256}(\text{content} + \text{index})$$ We had to devise a hashing strategy that anchors threads to content, ensuring that if a user highlights the same sentence twice, it loads the existing thread rather than creating a duplicate.

Accomplishments that we're proud of

• Seamless v0 Integration: We went from a blank screen to a professional, dark-mode UI in under 30 minutes using v0.
• Headless Architecture: We successfully proved that a Forum doesn't have to be a destination website; it can be an infrastructure layer embedded anywhere.
• The "Magic" Moment: Seeing the AI automatically reply to a highlighted code snippet for the first time was incredibly satisfying.

What we learned

• The Power of Headless: Foru.ms proved that decoupling the "data" from the "view" opens up wild possibilities for where communities can live.
• Generative UI: Using v0 changed our workflow. Instead of fighting with CSS margins for hours, we "described" the interface and refined the code.

What's next for DocFlow

• Browser Extension: Releasing this as a Chrome Extension so users can comment on any site, not just ones with the widget installed.
• Syntax Highlighting: Improving the "Code Block" rendering in the chat using Markdown support.
• Slack/Discord Sync: Using Foru.ms webhooks to pipe these comments directly to a team's internal Slack channel.

Built With

• api
• foru.ms
• next.js
• react
• tailwind-css
• typescript
• v0
• vercel
• vercel-ai-sdk