DraftWing: An agentic app under 48 hours!
Coming from a person who did research and some hands-on practise in 2 weeks and did not touch AI since its boom! So, if I can pull it off then I’m sure you can too.
So, you want to write articles but the blank page stares back, mocking your very existence? Fear not! DraftWing is here to rescue you from the tyranny of writer’s block. Let’s dive into how this Flutter agentic app can transform you from a content zero to a publishing hero.
Agenda
We’ll be going through following stuff, so you can hop on to the point where you’re interested
- Idea behind “Draft Wing”
- Planning
- Time it took to develop
- Important terminologies
- Tech stack
- Resources/Conclusion (Crazy Fact ;p)
🧠 Idea behind Draft Wing
5000 years ago, there was a king…
Naa! Just kidding. The idea behind having this app is really simple, it takes 2–3 hours sometimes more to draft an article for technical topic. Especially that involves coding material, samples, and UI stuff to share.
Hence, why not let the app collect material for you and you can validate it, modify it and polish it as it should.
That’s what Draft Wing does, you give it:
- A topic
- Reading time (Just like medium’s)
- Any additional context
And that’s it! It will bring you a draft in markdown format so that you can copy paste it on any platforms and modify it as you like along with some tags.
📝 Planning
An app development at this smaller scale involve fairly simple steps:
- Design
- Develop
- Deploy
In my case, this is what I did:
Used an AI to design an AI app. Then used another AI to develop that AI app. Which further uses an AI to draft articles for me
Step 1: I’ll use AI to design an AI App (Loveable)
Step 2: I’ll use AI to develop that AI (Cursor/Claude)
Step 3: That AI will help me draft articles (DraftWing)
As simple as butter! 😋
🕣 Timeline break down
This is rough estimate of how much it took me:
- Design/Mockups — 30 to 45 mins
- Develop/Finalize the UI — 3 to 4 hours
- Feature work/Model integration — 15 to 20 hours
- Test/Fixes — 8 to 10 hours
No guys, I did not code continously I’m sharing rough time line as per the title 😅
✍🏼 Important terminologies
Following are the terms I’d say are important that you should know and understand to have a better context:
Agentic App?
Think of an agentic app as your super-powered digital assistant. It’s not just following pre-defined steps; it’s actively making decisions to achieve a goal. In our case, that goal is crafting killer articles.
Agentic Workflow vs Agentic App?
- Agentic Workflow: A series of automated steps. Useful, but not truly ‘smart’.
- Agentic App: An autonomous entity that can plan, decide, and execute tasks based on dynamic inputs.
DraftWing is an agent because it takes your initial idea, understands your context, and then autonomously generates a complete article draft and even saves into cache for you once it learns which kinda article you usually marked as “Save Draft”
📚 Tech Stack
- Flutter: For a beautiful and cross-platform UI.
- Firebase AI Logic: For Vertex AI usage and AI monitoring
- Vertex AI: Content generation and smart decision-making.
- Hive: Cache mechanism
Conclusion/Resource
Here’s my take as a newbie in this world:
- Integration AI is not a big task into your app or product. Its the experience to create from these dumb models and utilise their actual smartness
- All these agents are mostly a wrapper around any famouse LLM model
When it comes to resources, I started off with Flutter’s official code lab:
The code of current repo is open source, feel free to explore! 😃
- 🧑🏼💻 GitHub repo: https://github.com/mhmzdev/draftwing
Crazy Fact!
This article’s draft was generated by “Draft Wing” itself and I added those images, fixed some flows and terminologies. Took me 15 mins to complete this article 😅 💀
Thanks y’all and Happy Fluttering! 💙
A big thanks to Mashood Rastgar for helping me and guiding me how to get started as a noob!
