DEV Community

Cover image for AS-Flow AI – Next-Gen Productivity with Contextual AI
Asmae
Asmae

Posted on

AS-Flow AI – Next-Gen Productivity with Contextual AI

#devchallenge #unoplatformchallenge #dotnet #crossplatform

AS-Flow AI – Next-Gen Productivity with Contextual AI

This is a submission for the AI Challenge for Cross-Platform Apps – AI Acceleration.

What I Built

I built AS-Flow AI, a premium cross-platform productivity application designed to help users enter deep work states instantly.

It solves the problem of fragmented focus by combining:

  • Context-Aware Focus Modes
    Ultra-realistic immersive environments (Rain, Beach, Fire, Space) that boost concentration.

  • AI-Driven Planning
    An intelligent assistant that builds schedules based on user energy levels.

  • Seamless Cross-Platform Experience
    Works on desktop and mobile web with an app-like feel.

Tech Stack

  • Core: Next.js 14 (App Router), React, TypeScript
  • Styling: Tailwind CSS + Glassmorphism UI
  • AI: Contextual AI Agents (Claude) + Local Logic
  • State: React Context + Persistent Storage

Demo

🚀 Live Application
https://github.com/AsamaeS/AS-Flow-AI

Screenshots






Test Credentials 

Email: asmae@focusflow.ai  
Password: demo123
Enter fullscreen mode Exit fullscreen mode

AI Tooling in Action

Building AS-Flow AI using Claude (Antigravity) accelerated development massively.

⚡ 10× Faster Feature Implementation

Example request:

"Add a Fire focus mode with crackling audio and a realistic flame animation."

The AI Agent:

  • Parsed the project structure (src/data/focus-modes.ts)
  • Added the new mode
  • Retrieved a royalty-free audio source
  • Generated UI code

⏱️ Time taken: 3 minutes
Without AI: ~1 hour.

🐛 Zero-Shot Bug Fixing

Critical error fixed by the AI:
useLanguage must be used within LanguageProvider

The AI:

  • Analyzed the entire component tree
  • Detected the provider wrapping issue in layout.tsx
  • Implemented a hydration-safe fix with suppressHydrationWarning

⏱️ Time saved: 2–3 hours

![AI Bug Fix](#)
Enter fullscreen mode Exit fullscreen mode

Using App MCP and Uno Platform MCP

Even though AS-Flow AI uses Next.js, the project followed App MCP philosophy.

🧠 App Context Awareness

The AI Agent knew:

  • The tech stack (Tailwind, Lucide)
  • The folder structure (src/app/dashboard/...)
  • How to place new files correctly
  • How to apply rebranding to “AS-Flow AI” across 10+ files

🛠️ AI-Guided Architecture

The AI acted like an architect:

  • Recommended extracting FocusModeCard as a reusable component
  • Ensured use client boundaries for the Audio Player
  • Created a Clean Service Layer for persistent storage

This approach mirrors the guidance of Uno Platform MCP — AI that understands the full app context.

Cross-Platform Reach

AS-Flow AI runs everywhere:

  • 💻 Desktop → 4-column optimized dashboard
  • 📱 Mobile → Single-column responsive layout
  • 🌍 Web → Works instantly in any browser
  • 🌙 Auto Theme → Detects OS dark/light mode

Development Experience

Surprise #1 — Real Pair Programmer

It felt like working with a senior engineer.
For example:
I said “Fix the sidebar padding”.
It edited the correct file (Sidebar.tsx) and the correct class (p-4).

Surprise #2 — Continuous Momentum

AI handled:

  • Boilerplate
  • Types
  • i18n dictionaries
  • Layout issues
  • Hydration warnings

This allowed me to focus on design and user experience.

Outcome

I built a production-ready, multi-language, dark-mode productivity platform in under 2 days — normally a multi-week project.

Built with ❤️ by Asmae using Contextual AI Acceleration

Top comments (0)