DraftFlow

DraftFlow helps writers refine their drafts with AI agents like grammar and improvement assistants, offering smart suggestions instead of not full articles.

Comment

✨ Inspiration

The inspiration behind DraftFlow comes from a problem I personally faced as a content creator. With the rise of AI-generated articles, many writers have started focusing more on prompt engineering than actually improving their own writing skills. I wanted to change that. I envisioned a tool that empowers writers to enhance their content using AI—not to replace their voice, but to elevate it. This is especially helpful for content creators and report writers who want structured, styled outputs without losing control over their original content.

🚀 What it Does

DraftFlow allows users to:

  1. Draft content using a rich text editor.
  2. Transform raw text into styled HTML and CSS using a multi-agent pipeline.
  3. Refine content interactively on the next screen, which consists of:
  • A chat interface (left) where users can request improvements.
  • A live preview iframe (right) showing the updated HTML.

The system leverages a multi-agent orchestration, where:

  • The Format Agent converts raw text into styled HTML/CSS through a sequential pipeline of:

    • HTMLFormatterAgent
    • CSSFormatterAgent
    • OutputAgent

  • The ChatAgent allows sentence-level enhancements. When a user selects a sentence and submits a query (e.g., “Make this more formal”), the request is handled by:

    • DelegateAgent: Determines user intent and forwards the query to the appropriate sub-agent (e.g., GrammarAgent, ToneAgent).
    • OutputAgent: Returns the refined version and asks for user confirmation.

If the user approves, only the selected text within the HTML is updated dynamically without reloading the full iframe.

🛠️ How We Built It

  • Backend: FastAPI
  • Frontend: HTML, CSS, JavaScript
  • Multi-agent system: Built with Google’s Agent Development Kit (ADK) using Python
  • Authentication: Firebase Authentication with JWT token protection on all endpoints
  • Deployment: Docker for containerization (Render used for deployment)

Key Agents Implemented:

  • FormatAgent (HTML + CSS + Output)
  • ChatAgent (Delegates tasks to GrammarAgent, ToneAgent)

  • Future Plans include adding agents like:

    • ResearchAgent
    • PlagiarismAgent
    • SEOAgent
    • ReferenceAgent
    • TranslationAgent

🚧 Challenges We Ran Into

  • Implementing output_schema in ADK was difficult due to limited support or examples, especially when integrating with FastAPI.
  • Debugging sub-agent interactions and output formatting pipelines took significant time.
  • Deploying the FastAPI backend securely with Firebase JWT and WebSocket integration.
  • Building an iframe editor that allows live, selective HTML editing without reloading the page.

🏆 Accomplishments

  • First time building a full-stack, agent-based AI project.
  • Successfully designed an intuitive writing experience where users stay in control.
  • Set up JWT-protected endpoints and integrated Firebase auth.
  • Created a visually interactive multi-agent system with live iframe editing.

📚 What We Learned

  • How to design and orchestrate multiple AI agents using Google’s ADK.
  • Deep understanding of containerizing and deploying FastAPI apps using Docker.
  • Managing frontend-backend communication using WebSockets.
  • Best practices in securing routes with Firebase JWT tokens.
  • Designing modular agents for specific tasks like grammar and tone improvement.

🔮 What’s Next for DraftFlow

  • Launch more agents for SEO, plagiarism checking, summarization, and citation generation.
  • Add Google Sign-In as a second authentication method (currently UI-only).
  • Implement content-saving workflows via Firestore or another storage backend.
  • Make agents adaptive to writing goals (e.g., formal reports vs creative content).
  • Improve the UI/UX, especially on mobile devices.
  • Auto-save drafts and allow collaboration between users.

Built With

Share this project:

Updates