Asmae

Posted on Dec 7

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

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](#)

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).