DEV Community

Taqui
Taqui

Posted on

My Craziest Side Project Yet: Drawva

#mlhacks #devchallenge #hackathon #ai

This is a submission for the MLH x DEV Writing Challenge

What I Built

Hey there, my name is Taqui. I am a fullstack web developer. When I started coding back in 2020, things were simple and skills had the highest priority. Lately, with the rapid rise of AI and the tough job market, I have felt pretty cookeddd. But instead of sitting back and questioning my career choice, I decided to dive headfirst into Agentic AI and GenAI to build a serious, real-world system from scratch.

That project is Drawva.

Drawva is an infinite canvas whiteboard engine powered by a multimodal AI perception agent. Unlike typical whiteboards where your strokes are just static pixels, Drawva actually looks at your canvas, understands your hand-drawn gestures, and turns them into live diagrams, interactive code widgets, and math equations.

DeepSeek Harness (DSH) Agent Runtime

Under the hood, Drawva runs a modular DeepSeek Harness system built on a Cordis microkernel runtime:

  • Agent Loop & Tool Runtime: Handles multi-turn tool calling through typed contracts (canvas_apply, canvas_snapshot, canvas_read, canvas_patch_widget).
  • Token Meter & Compaction: Uses a tool-result pruner and basic compaction to keep agent context tight and cost-effective during long sessions.
  • Session Projection: Preserves agent state and conversation history across streaming SSE steps.

Specialized Prompt Techniques

Getting an LLM to accurately interact with a freehand 2D canvas required custom prompt engineering contracts:

  • Coordinate Contract: Mathematical pixel-to-global transforms so the AI calculates exact millimeter coordinates from visual snapshots.
  • Zero-Heading Redundancy: The AI treats the user's handwritten words as the title. It never outputs duplicate title banners, keeping the canvas looking naturally co-authored.
  • Hybrid Wireframe Utilization: If you sketch a 3-box wireframe, the AI does not erase it. It leaves your pen lines intact and renders live data directly inside your drawn boxes with 100% transparent backdrops.
  • Two-Command In-Place Replacement: When turning a rough sketch into an interactive applet, the agent emits an atomic erase command first to clear the ink, followed immediately by the mounted widget.
  • Native Sketchnoting: A dedicated mode that uses pure vector strokes to sketch 3D loss surfaces, neural net graphs, and complex planes.

Extensible On-Demand Plugins

Drawva features 11 extensible runtime plugins loaded dynamically via load_plugin:

  • Live Data: Weather, Stocks, Tech News (Hacker News), Earthquakes (USGS), Space Weather, and Currency Exchange Rates.
  • Developer & Media: GitHub Pulse (live repo stars, forks, velocity), Image Search (server-side photo resolution for sandboxed widgets), and Flowcharts.

7 Diagram Engines & P2P Sync

Drawva supports 7 sandboxed diagram runtimes (Mermaid, Graphviz DOT, Vega-Lite charts, SMILES molecular structures, BPMN, Cytoscape, GeoJSON) alongside MathJax LaTeX typesetting. Everything autosaves to IndexedDB, and users can collaborate peer-to-peer over WebRTC with zero central server databases.

Demo

Here is a full walkthrough video showing Drawva in action, from freehand sketching to live diagram rendering:

Direct video link: Drawva Demo on YouTube

Partner Technologies

Building Drawva pushed me to integrate modern fullstack and AI technologies:

  • DeepSeek Harness (DSH): Powered the core agent runtime, tool execution lifecycle, token metering, and compaction pruning.
  • Next.js 16 (App Router) & React 19: Provided the streaming foundation, handling Server-Sent Events (SSE) and fast client hydration.
  • Vercel AI SDK & Multimodal LLMs: Connected the canvas to vision models like Google Gemini 2.5, OpenAI GPT-4o, and local Ollama models for high-resolution visual inspection.
  • Tailwind CSS v4 & Base UI: Used to build our dark-mode UI with custom neon lime tokens, floating tool docks, and accessible dialogs.
  • GitHub: The entire codebase is open-source on GitHub, where I tracked features, plugin contracts, and releases.

Hackathon Experience

Tbh this was my first hackathon 😅. And Over the past few months, I had been losing my confidence as a developer, wondering if AI was making my hard-earned skills obsolete.

Building Drawva was not the only goad for this hackathon. The main purpose is that new Deepseek Harness in the market and it is opensources, So i decided to learn how the harness is build and end up integrating the mini-kernal in this project.

This experience proved to me that as developers, our value is not gone. We just have to evolve, pick up Agentic AI, and build ambitious tools that solve real problems.

That's it man

Look, the tech market is wild right now and we all feel cooked some days. But if AI is taking over the world, I am not going down without building the craziest open-source tools I possibly can.

Go open Drawva, draw the ugliest, most crooked scribble you can think of, and watch the AI turn it into art. Aslo also also don't forget to share you crazyy dravs to the comminuty page (we have one our community page)

And if it crashes, roast me in the GitHub issues or open a PR. And if this gave you even 1% of your developer spark back, smash a star on the repo. Let us reclaim our builder aura :)

Top comments (0)