DEV Community: Abubakr Alsheikh

Why my saved Claude Code logins kept dying, and the switcher I built around it

Abubakr Alsheikh — Mon, 02 Nov 2026 19:35:33 +0000

I pay for more than one Claude subscription, and I wanted plain claude to run on whichever one has room left, without losing my sessions or splitting my history in two.

The obvious fix looked easy: keep a copy of each account's login file and copy the right one back when I want to switch. It worked for a few hours. Then Claude Code started asking me to log in again.

Repo: https://github.com/Abubakr-Alsheikh/claude-account-switch

Why a saved login dies

Claude Code signs in with OAuth. It holds a short-lived access token, about 8 hours, and a refresh token. When the access token runs out, Claude Code trades the refresh token for a new pair and writes both back.

The server accepts each refresh token once. After a renewal, the old one is dead.

So a copy you saved on Monday dies the moment any running claude renews that login on Monday night. Copy it back on Tuesday and you are logged out. Every "save the file, swap the file" approach hits this.

What the tool does about it

claude-switch keeps one Claude Code profile and swaps only the login. To stay correct with single-use tokens:

Most commands save the active account's newest login first, so a saved copy is never older than your last command.
It takes Claude Code's own locks during the swap, in the same order Claude Code takes them, so no running session renews or rewrites the login halfway through.
It refuses to file one account's login under another name. It compares logins by a SHA-256 hash of the refresh token and by the email Claude Code records.
It keeps the last 3 copies of each account, and parks logins it doesn't recognize instead of overwriting them.
It tells you when a saved login is dead, and how to repair it.

$ claude-switch list
CLAUDE ACCOUNTS   active: work (me@work.example)

   name          email                     plan     weekly use (resets)         5-hour use (resets)    renewed      ends
>> work          me@work.example           Ultra    #######...  71%  Sun 09:00  ###...  48%     17:00  10-30 12:10  11-24
   personal      me@home.example           Max      ##........  18%  Tue 21:00  ......   0%     19:40  10-30 09:02  11-19

Most weekly room: personal (18% used)  ->  claude-switch use personal  or  claude-switch auto

claude-switch use personal swaps the login. In an open session, /exit and claude -c continue the same conversation on the other account.

Things I learned matching Claude Code

Getting this right meant reading how Claude Code itself behaves, version by version:

It guards renewals with lock folders (~/.claude/.oauth_refresh.lock, then an older ~/.claude.lock) and refreshes their timestamps every few seconds. A lock that stops moving counts as dead.
Every write of the login goes through a separate lock, ~/.claude/.storage-write.lock.
On macOS, current versions file the Keychain item under the account claude-code-user, not your user name.
Newer versions can keep the Windows login in Windows Credential Manager. claude-switch doesn't handle that store yet, so it notices and stops before touching anything.

What it is not

It is unofficial: not made, endorsed or supported by Anthropic. It reads and writes the same files Claude Code uses, so a Claude Code update can break it.

It is for one person moving between their own subscriptions. Don't share logins or pool access, and follow Anthropic's terms for every account. Renewing logins you are not using (refresh, keepalive) is opt-in, and the README lists exactly what leaves your machine.

Try it

Python 3.9 or newer, no dependencies:

pipx install git+https://github.com/Abubakr-Alsheikh/claude-account-switch@v0.2.1
claude-switch save work
claude-switch add personal     # then sign the browser into the other account
claude auth login
claude-switch save personal
claude-switch list

I use it daily on Windows. Linux runs in CI. The macOS code passes its tests against a fake Keychain, but I haven't run it on a real Mac yet, so reports from Mac users are welcome.

qtask: a task tracker my AI coding agents share, in one Python file

Abubakr Alsheikh — Mon, 02 Nov 2026 16:50:00 +0000

I run several AI coding agents at once on the same project. One fixes a backend bug, one checks a screen in the browser, one writes tests. For a while I tracked their work in chat and in notes, and the same problems kept coming back:

Two agents picked up the same task and changed the same files.
An agent asked me something in the middle of a long session, I missed it, and it went ahead on a guess.
An agent said "done" with nothing to show for it.
When a session ended, what it learned ended with it.

So I built qtask, a task tracker for agents and the person working with them. It is one Python file that uses only the standard library, and it keeps everything in one SQLite database on your machine.

Repo: https://github.com/Abubakr-Alsheikh/qtask

What a session looks like

$ qtask add "Fix the login redirect" --kind bug --pri P1
Created APP-14: Fix the login redirect
$ qtask claim APP-14 --agent fe-fix-1
Claimed APP-14 as fe-fix-1 until 2026-11-02T17:56:49Z. Status: in_progress.
$ qtask ask APP-14 "Keep the old URL working?" --to developer --agent fe-fix-1
Question #1 on APP-14 sent to developer. Status: needs_confirm.
$ qtask inbox --for developer
#1 on APP-14 [question, open] fe-fix-1 to developer: Keep the old URL working?
$ qtask answer 1 "Yes, redirect it" --agent developer
Answer #2 added. Question #1 resolved. APP-14 status: in_progress.
$ qtask done APP-14 --evidence "npm test: 412 passed" --agent fe-fix-1
Done APP-14.

Four rules that fixed my problems

1. Claim before you work. claim gives the agent a lease, two hours by default. If another agent tries to claim the same task, it gets exit code 3 and picks something else. When the lease runs out, ready offers the task again, so a crashed session doesn't hold work forever.

2. Questions wait for the human. ask sends a question to developer and parks the task in needs_confirm. I answer when I get to it, with qtask inbox and qtask answer. The agent finds the answer in its own inbox, even in a new session.

3. No evidence, no done. done refuses without --evidence, which holds the commands the agent ran and what they printed. It also refuses while a question or a subtask is still open.

4. Findings live on the task. Agents write what they learn with qtask comment. A subagent gets a task ID instead of a long prompt, works on it, and hands back the ID. I read the whole story with qtask show.

Why another tracker

I looked at the existing ones first. Most needed a package install, a server or an account, and I wanted something I could read top to bottom before handing it to agents that run commands on my machine. qtask is about 2,000 lines in one file, with no dependencies.

Two more choices came from how I work:

Tasks stay out of the repo. The database lives in ~/.qtask, so half-ideas and private notes never land in a commit.
It knows your project. The project comes from the git remote of the folder you are in, so every clone and worktree of a repo shares one list, and IDs get a short prefix from the repo name, like APP-14.

Using it with your agents

For Claude Code there is a skill in the repo that tells the agent when to load qtask and how to use it. For Codex, Cursor, Aider or Gemini CLI, the README has a short block to paste into your AGENTS.md or rules file. Any agent that can run a shell command can use qtask, and every command takes --json for output a program can read.

Under the hood

SQLite in WAL mode. Every write runs in a BEGIN IMMEDIATE transaction, and a claim is one conditional UPDATE, so two agents can't both win.
The tests start 20 processes at the same moment to race for one claim, and only one may get it.
Full-text search with SQLite FTS5, with a plain LIKE fallback for builds without it.
A backup of the database and a JSONL export on the first write of each day.
It runs on Windows, Linux and macOS. I built it on Windows, so Git Bash path conversion and PowerShell quoting have their own tests.

Try it

Python 3.11 or newer and git 2.31 or newer:

pipx install git+https://github.com/Abubakr-Alsheikh/qtask
qtask --version

It is version 0.1, so commands may still change before 1.0. Next on the roadmap: turning a local task into a GitHub issue, keeping the two in sync, and a read-only HTML board.

If you run more than one agent at a time, I'd like to hear what breaks for you. Issues and pull requests are open.

I gave my CLI a cyberpunk dashboard, and taught its AI agent to ask first

Abubakr Alsheikh — Fri, 30 Oct 2026 11:55:07 +0000

In my last post, the roadmap promised three things: conversation memory, scoped permissions so the AI can't wander through your system, and transcription. All three shipped. Along the way Max picked up something I never planned: a face.

Repo: github.com/Abubakr-Alsheikh/max-cli

Since version 0.4.0 I've made 303 commits and four releases (1.0, 1.1, 1.2, 1.2.1). This post covers the two parts I spent the most time on: the dashboard and the agent.

The problem with a "lazy" CLI

Max had dozens of commands. max video compress, max pdf merge, max grab. To me they felt lazy: short names, smart defaults.

But a CLI saves you flags only once you know the flags exist. You still need to know which group a command lives in, what --queue does, and whether -q means quality or quiet. I wanted people who never open a terminal to use Max too.

So I gave Max two front doors for people who don't want to learn commands:

A dashboard. Type max with nothing after it.
An agent. Type what you want: max "shrink the videos in this folder".

1. The dashboard: `max` 🖥️

It runs in the terminal, built with Textual. Eleven pages: Home, Download, Video, Audio, Images, PDF, Files, AI, Activity, Extras and Settings. Number keys jump between them, Ctrl+P finds any action by name, and J opens a jobs window over whatever page you're on.

The look

I wanted it to feel like a command center in a cyberpunk film, while staying readable at 9 in the morning.

One theme, named max-cyber. Cyan marks live values, magenta marks peaks and "now", violet marks where your focus is. Deep navy for pages, a lighter navy for cards.
Every page shares one layout. A ◢◤ PAGE // WHAT IT DOES header, cards with uppercase titles, rows of cards on a grid.
Each page has a code and a colour. 02 DOWNLOAD in green, 03 VIDEO in cyan, 04 AUDIO in magenta. The same colour shows up in the sidebar, on the Home launchpad and in the "by type" chart, so you learn the colours without trying.
Big numbers use block digits, and the charts are drawn with block characters.

A rule I set early: pages use theme variables ($primary, $secondary, $surface) and never a hex colour. You can switch themes with Ctrl+P and nothing breaks.

The part nobody sees: flicker

On Windows, the terminal can't draw a frame all at once. My first Home page refreshed on a timer and flickered like a broken neon sign. The fixes became rules for every page:

A timed refresh runs inside one batch_update(), so the screen repaints once.
A widget updates only when its value changed. Each chart keeps its last data and compares.
Never rebuild widgets on a timer. Mount once, then change values.
Progress updates at most twice a second per job.

Pages that know your file

Paste a link on the Download page and Max checks it: channel, length, views, every quality with its size, subtitles. The Part card downloads only a stretch of the video. A link with t=1m30s fills in the start for you, Max checks the times against the video's length as you type, and the button tells you what you'll get: ⬇ 1:30-6:30 · 95 MB.

The Video, Audio, Images, PDF and Files pages work the same way. Pick a file, and the page shows what it holds (ffprobe for video, EXIF for photos, page count and "scanned or not" for PDFs). Pick an action, and you get its form.

The trick: I wrote none of those forms by hand

This change mattered most, for the dashboard and the agent alike. Every action in Max is described once, in a catalog:

Action(
    group="video",
    name="cut-silence",
    summary="Cut the pauses out of a recording: jump cuts for talks.",
    operation="max_cli.core.operations.video:cut_silence",
    params=(
        _each_target((VIDEO, AUDIO), "Video or audio file."),
        Param("threshold", ParamKind.FLOAT,
              "Quieter than this many dB counts as silence.",
              default=-30, cli=("--threshold", "-t")),
        Param("padding", ParamKind.FLOAT,
              "Seconds of each pause to keep at both ends.",
              default=0.15, cli=("--padding", "-p"), advanced=True),
        _output(),
    ),
    output_name="{stem}_nosilence{suffix}",
    queueable=True,
)

Three things read that description:

The CLI checks its options against it.
The dashboard builds the form from it: fields, defaults, a Browse button for paths, advanced options folded away, and a confirmation for anything that moves, overwrites or deletes.
The agent gets it as a tool schema.

A test fails when a CLI command, its catalog entry and its operation disagree on an option or a default. Fifty-eight actions, three front doors, one source of truth. When I added "compress to a size" in 1.2, I wrote the operation and one Param, and the dashboard form and the agent got it the same day.

2. The agent: from "suggest a command" to "do the job" 🤖

In version 0.1, Max's AI translated your sentence into one command and asked Run this command? [y/N]. Useful, but anything with two steps broke it.

Now it's an agent loop. The model calls tools, Max runs them, the results go back, repeat until it answers in words. It has 19 tools. Six only look: list a folder, inspect a file, find files, check a link, read recent activity, read the job queue. The rest act: load_group to read a group's actions, run_action to run one, plus plan, ask_user, remember, undo_request and a few more.

Here's what changed between 1.0 and 1.2, mostly from watching it get things wrong.

It plans, and it asks

Before multi-step work it shows a plan and waits: go, stop, or tell it what to change. When a request is unclear, it asks one question with choices instead of guessing.

It asks before it touches your files, whatever your settings say

Every catalog action has a danger level. Anything that moves, overwrites or deletes stops for a yes, even if you turned confirmations off for the CLI. The agent also stays inside a scope: the folder you started in, the folders you name, and your download folder. It never gets a drive root. Shell commands are off by default; turn them on and it still shows you each command and waits.

Whole folders, without redoing finished work

"Convert every m4a under Music to mp3" used to mean one tool call and one question per file. Now one run_action takes a list of files, folders or patterns (up to 500 files), and you get one question: how many files, how big, and which ones it'll skip because an mp3 already sits beside them. Over 20 files of a long job, it hands the batch to the background queue. The AI page shows one card per batch with a live count, so a 200-file run stays readable.

It picks the right action

My favourite bug: "fix the numbering of my songs" made the agent rename the files with files order, when I meant the track numbers in the tags.

The fix was a guide on every action, in one format:

Use for: removing the pauses from a talk, lecture or podcast. Not for: removing one part by time (video.cut) or background noise (video.denoise). How: threshold -30 dB; -40 for a quiet room.

The "Not for" line does most of the work: it points the model at the neighbour it confuses this action with. I also wrote scripts/agent_eval.py, which runs the agent on fixed scenarios with a real model in dry-run mode and scores its choices. The track-numbers scenario fails if it reaches for files order again.

It checks its work, and you can take it back

After each action, Max checks that the files it reported exist and aren't empty. A missing or empty result counts as a failure, and the agent says so.
Ctrl+C once (or Stop on the AI page) ends the request after the current step. A second Ctrl+C quits.
"Undo what you just did" or max ai undo: files the request made move to a backup folder (only if you haven't changed them since), and the moves, renames and deletes it recorded go back.

It remembers, within limits

Tell it "my music lives in D:/Music" and later sessions start with that note. Fifty notes of 300 characters at most; max ai memory lists and deletes them, and the AI page has a Notes button. Long chats get their oldest turns summarised, so they stay within the token limit.

Guardrails in numbers

Per request: 12 model turns, 40 tool calls, 100,000 tokens. Up to 4 independent actions run side by side, but two actions that touch the same path run one after the other.

A Gemini gotcha, if you build agents: Gemini 3 attaches a thought_signature to its tool calls and rejects the next request if you drop it. Max keeps it, and when the fallback provider answered a turn, it adds Google's stand-in value so the history still passes.

3. Everything else that shipped ⚡

Shorter, but each of these came from a real annoyance:

# Fit a video under a chat app's upload limit (two-pass, bitrate from the length)
max video compress clip.mp4 --size 25MB

# Jump cuts: remove the dead air from a lecture
max video cut-silence lecture.mp4

# Transcript or subtitles through Gemini, with your own instructions
max audio transcribe meeting.m4a -f srt --prompt "translate to Arabic"

# Only minutes 1 to 5 of a video
max grab download URL --start 1:00 --end 5:00

# Long jobs keep going after you close the terminal
max video compress *.mp4 --queue

Downloads come out tagged. Artist, album, track numbers from the playlist position, and --sort-into artist/album folders.
Undo for file operations. max files undo reverses the last group of moves and renames.
max doctor checks FFmpeg, your AI keys, the YouTube fix and your folders, and tells you the fix for each problem.
max update updates Max the way you installed it, and Max tells you once a day when a new version is out.

Three lessons from making it installable

Windows Defender blocks irm ... | iex. My one-line installer downloaded uv's install script and ran it, a pattern malware also uses. The installer now gets uv from winget, or from uv's official zip, checked against its published SHA-256.
You can't update a running program on Windows. My first max update replaced the files while max.exe was running and left an install that couldn't start. Now it opens a small window that waits for Max to close, then updates.
Download links die. By October, the FFmpeg sources Max used on all three systems had broken: a 404 on Windows, a closed API on macOS, a server that stopped answering on Linux. Max now tries winget or Homebrew first, then several mirrors in turn, and checks each download against its checksum.

Try it

Windows (winget installs uv; uv brings its own Python):

winget install --id astral-sh.uv --exact
# open a new terminal, then:
uv tool install max-cli

macOS / Linux:

curl -LsSf https://raw.githubusercontent.com/Abubakr-Alsheikh/max-cli/main/install.sh | sh

Then type max. If you've never opened a terminal, the Start Here guide walks you through it.

What's next

Watch folders: drop a file into a folder and Max compresses, converts or sorts it on its own. After that, search by meaning across your documents, the RAG idea from my last post that I haven't built yet.

⭐ Star the repo: github.com/Abubakr-Alsheikh/max-cli. Issues and PRs welcome.

If you've built a TUI: did you fight flicker too, and what fixed it for you?

From "Lazy Script" to "Local AI Agent": Max CLI is now a Media & Document Powerhouse

Abubakr Alsheikh — Tue, 10 Feb 2026 15:04:12 +0000

A few months ago, I shared the first version of Max CLI—a tool I built because I was tired of Googling ffmpeg flags and uploading private PDFs to sketchy websites.

The response was great, but the feedback was clear: "Make it do more. Make it smarter."

Today, I’m excited to share the major evolution of Max. It’s no longer just a "flag-saver"—it’s a local-first, context-aware AI agent for media, documents, and web automation.

Repo: github.com/Abubakr-Alsheikh/max-cli

What’s New in Max? 🚀

1. The Local Media Engine (FFmpeg on Steroids)

I finally integrated a full Video/Audio suite. You get the power of FFmpeg with "lazy" human-readable commands.

Smart Compression: max video compress with quality levels (balanced, high, max).
Quick Fixes: max video louder (boost audio), max video cut (frame-perfect trimming), and max video snap (high-res thumbnails).
High-Quality GIFs: Uses a 2-pass palette generator to avoid that grainy 1990s GIF look.

2. The PDF "Bundle" Pipeline

Document management is now professional-grade. The standout feature is the Bundle:

# Merges a folder of PDFs, compresses the result, and cleans up temp files in one go.
$ max pdf bundle ./Invoices -o 2024_Tax_Report.pdf

You can also Lock PDFs with AES-256, Stamp watermarks, and Rip embedded images out of documents.

3. Universal "Smart" Downloader (`max grab`)

I wrapped yt-dlp to create a downloader that understands your intent. Instead of 20-character strings, use Quality Presets:

s (Small): 480p / 64k audio (Data saver)
x (Xtreme): 4K / 320k audio (Archival)
Smart Playlists: Max now peeks at URLs, counts items, and asks for confirmation before filling your drive.

4. AI Vision & "Nano Banana" (Image Gen)

Max now has eyes. Since integrating with Google Gemini (Nano Banana) and OpenAI, Max can:

Analyze: max ai analyze error.png — troubleshoot terminal errors from a screenshot.
Create/Edit: max ai create "A pixel art cabin" or max ai edit photo.jpg "Make the sky purple".

The "Killer" Upgrade: Context Awareness 🧠

In the previous version, the AI was just a translator. In the new Max, the AI is Context-Aware.

When you run max ai ask, Max scans your current directory and injects the file list into the prompt.

Old Way: max ai ask "compress the video named final_v2_edit.mp4"
The Max Way: max ai ask "compress the video"
- Max sees final_v2_edit.mp4 in your folder and resolves the intent automatically.

New Developer Utilities 🛠️

I added features specifically for my own dev workflow:

max share: Generates an ASCII QR code in your terminal. I use this daily to send localhost URLs to my phone for testing.
max paste: Take an image from your system clipboard and save it directly to a file.
max smart-sort: AI-powered semantic organization. It reads your filenames and groups them into folders like /Invoices, /Personal, or /Code based on meaning, not just extension.

Refined Tech Stack

Provider Agnostic: Full support for Google Gemini via the OpenAI Compatibility layer.
Speed: Added Node.js/Deno detection for faster YouTube signature decoding.
UI: Switched to a "Transient" progress bar system—it shows beautiful progress during the task and disappears when done to keep your terminal clean.

What's Next?

I’m currently exploring Local Transcription (Whisper) and Semantic Search (RAG) so you can ask questions about your local documents directly.

Max is Open Source and built for the community. If you hate browser-based converters and love the terminal, I’d love for you to try it out.

⭐ Check out the code: github.com/Abubakr-Alsheikh/max-cli

What is the one browser-based tool you still use that you wish lived in your terminal? Let's build a command for it!

I built a "Lazy" AI Terminal Assistant because I hate memorizing flags

Abubakr Alsheikh — Wed, 26 Nov 2025 23:40:11 +0000

The Problem: I love the terminal, but I hate the friction.

I live in the terminal. But let's be honest: doing simple things often feels like solving a puzzle.

Want to compress a folder of images? Time to look up ImageMagick flags.
Want to merge PDFs? Time to upload your private docs to some random "Free PDF Merger" website.
Want to rename 100 files? Time to write a throwaway Python script that you’ll delete 5 minutes later.

I wanted a tool that was Fast, Local, and unapologetically Lazy.

So, I built Max.

Meet Max CLI ⚡

Max is an open-source, modular command-line tool built with Python. It automates the mundane, local tasks we deal with daily, and it includes an AI Copilot to handle the rest.

Repo: github.com/Abubakr-Alsheikh/max-cli

Here is why it's different: It prioritizes local execution. When you compress images or order files, it happens on your machine. No cloud uploads. Speed is the priority.

What can it do? (The "Lazy" Features)

1. Smart Image Compression

Stop Googling compression algorithms. Max recursively scans folders, detects images, and optimizes them.

# Compress an entire folder of photos to JPEGs (Quality 80)
$ max images compress ./VacationPhotos --quality 80 --jpeg

# Resize a huge banner to 50% scale
$ max img compress banner.png --scale 50

2. Sanity-Saving File Ordering

I constantly have folders full of scan.pdf, scan(1).pdf, document.docx. Max cleans this up by adding numerical ordering, with a safety-first "Dry Run" mode.

# Preview what will happen
$ max files order ./Downloads --dry-run
> [DRY RUN] Would rename 'report.pdf' -> '1_report.pdf'
> [DRY RUN] Would rename 'thesis.docx' -> '2_thesis.docx'

3. The AI Copilot 🤖

This is the killer feature. Max uses the OpenAI SDK to translate Natural Language into CLI Arguments.

I didn't want a chatbot that just talks. I wanted a chatbot that does. Max reads its own documentation, understands the available tools, and constructs the command for you.

$ max ai ask "Combine all PDFs in the 'Contracts' folder"

# Max thinks... and suggests:
> max pdf merge ./Contracts
# Run this command? [y/N]:

The Architecture (For the Nerds 🤓)

I didn't want a messy script. Max is built as a Modular Monolith using modern Python standards.

Framework: Typer (for that sweet CLI developer experience).
UI: Rich (for beautiful progress bars, tables, and error handling).
Engine:
- Pillow for image logic.
- PyMuPDF for PDF manipulation.
- OpenAI for the intent classification layer.

The project structure separates Core Logic (pure Python) from the Interface (CLI commands), making it easy to test and scalable.

The Roadmap 🔮

Max is just getting started. I am actively working on:

🎥 Local Media Engine: Wrapping ffmpeg to allow natural language video/audio conversion (max ai ask "Convert this MKV to MP4").
🧠 Conversation Memory: A persistent chat mode so Max remembers context between commands.
🎨 Generative AI: Creating assets locally (max create image "Cyberpunk city").
🛡 Sandboxing: Scoped permissions so the AI can't touch system files without approval.

Contribute!

This is an open-source project, and I want it to be the ultimate developer companion.

If you hate memorizing flags or just want to see how to build a production-grade CLI in Python, check out the code.

⭐ Star the repo: github.com/Abubakr-Alsheikh/max-cli
🙌 Pull Requests are welcome!

Let me know in the comments: What is the one terminal command you always forget and wish an AI could handle for you?

I Built an AI Manga Creator with Next.js and Gemini's "Visual Memory"

Abubakr Alsheikh — Sun, 14 Sep 2025 12:27:17 +0000

I just wrapped up my submission for the Google Nano Banana Hackathon, and I'm incredibly excited to share what I built: NanoManga Studio. It's an AI-powered web app that lets you generate entire, visually-consistent manga stories from a simple idea.

The biggest problem with AI image generation for storytelling is consistency. How do you make sure your hero has the same hairstyle on page 3 as they did on page 1? I decided to tackle this head-on.

🚀 Live Demo: nanomanga-studio.vercel.app
💻 GitHub Repo (Stars are appreciated! ⭐): github.com/Abubakr-Alsheikh/nanomanga-studio

The Tech Stack

I wanted a modern, fast, and type-safe stack that would let me iterate quickly for the hackathon.

Framework: Next.js 15 (App Router)
UI: shadcn/ui & Tailwind CSS
State Management: Simple React useState lifted to the root component.
AI: Google AI JavaScript SDK (@google/generative-ai)
Deployment: Vercel

The Core Innovation: Giving the AI a "Visual Memory"

The magic of this project is in the multi-modal prompting. Instead of just sending text, I created a rich context package for the gemini-2.5-flash-image-preview (or "Nano Banana") model for every new page generation.

Here's the breakdown of the fetch call from the PageGenerator component:

// file: app/components/page-generator.tsx

const handleGeneratePage = async () => {
  // ... state checks and loading indicators

  // 1. Get previous pages and selected assets for this scene
  const previousPages = pages.slice(0, currentPageNumber - 1);
  const selectedAssets = allAssets.filter(asset => selectedAssetIds.has(asset.id));

  // 2. Craft a highly specific text prompt
  const fullPrompt = `
    **Manga Page Generation**
    **Page Number:** ${currentPageNumber}
    **Page Description:** ${pagePrompt} // e.g., "Panel 1: Close-up on Kenji..."

    **INSTRUCTIONS FOR IMAGE REFERENCES:**
    - The FIRST ${previousPages.length} images are previous pages for continuity.
    - The REMAINING ${selectedAssets.length} images are specific assets for THIS page.
  `.trim();

  // 3. Assemble the visual context array (THE KEY PART!)
  // We extract the base64 data from our data URLs
  const pageImages = previousPages.map(page => page.imageUrl.split(',')[1]);
  const assetImages = selectedAssets.map(asset => asset.imageUrl.split(',')[1]);

  // Previous pages go FIRST to establish context
  const baseImages = [...pageImages, ...assetImages];

  // 4. Make the API call
  const response = await fetch('/api/generate', {
    method: 'POST',
    body: JSON.stringify({ prompt: fullPrompt, baseImages }),
  });

  // ... handle response
};

By explicitly telling the AI how to interpret the sequence of images, it can maintain character appearance, clothing, and even damage across multiple pages.

AI as an Art Director and Story Editor

Before even generating images, I use gemini-2.5-flash with persona-based prompting to structure the entire project.

Story Planning: I ask the AI to act as a "master manga editor" and return a complete story plan in a strict JSON format. This plan includes character descriptions, environments, and a page-by-page plot that follows a classic narrative arc.
Asset Design: When inspiring asset ideas, the AI takes on two roles:
- A "character concept artist" that designs a full-body character sheet on a neutral background.
- A "background artist" that designs an atmospheric, character-free environment shot.

This ensures the generated assets are clean and perfect for use as references later on.

What I Learned

This project was a blast. It hammered home that the future of generative AI isn't just about single, powerful prompts. It's about building systems that maintain context, create feedback loops, and allow for true human-AI collaboration. The multi-modal capabilities of models like Gemini are the key to unlocking this.

I'd love for you to try it out and see what you can create! Let me know what you think in the comments. What would you build with this kind of "visual memory"?

If you want to read my full technical write-up on Kaggle:
https://www.kaggle.com/competitions/banana/writeups/nanomanga-studio

Happy coding!

react #nextjs #ai #google #webdev #typescript #hackathon #generativeai

I Built the Markdown Editor I Always Wanted with Next.js and AI

Abubakr Alsheikh — Wed, 13 Aug 2025 13:49:39 +0000

We've all been there. You have an idea, you start a side project with excitement, and then... it ends up in the GitHub graveyard, untouched for months.

This time, I was determined to break the cycle. I decided to build a tool that solved a set of real, frustrating problems I faced almost daily as a developer.

The Problem: A Lack of Control

My workflow often involves generating text with LLMs, which usually comes out as an unstructured mess. But the core frustration wasn't just the formatting; it was the lack of control in every step that followed.

** inflexible Previews:** When working with Arabic text, I couldn't find a live markdown preview that properly supported RTL.
"One-Size-Fits-All" Styling: I wanted to change the preview's font size for readability or switch to a different font for a presentation, but most tools are static.
Manual Formatting: The tedious process of manually adding headers, lists, and code blocks was a constant time sink.

I realized I didn't just want a markdown editor; I wanted a fully customizable, intelligent workstation. So, I decided to build it myself.

The Solution: Smart Markdown Pro

I'm excited to share Smart Markdown Pro, a local-first, AI-powered markdown editor built on a modern stack: Next.js (App Router), Tailwind CSS, and TypeScript.

It's open source, and I built it to be the tool I wish I had from the start.

The Features That Mattered to Me

1. Total Preview Customization

This was the core idea. I wanted a preview pane that adapted to my needs. In the settings, you can:

Toggle RTL/LTR direction instantly.
Adjust the base font size with a slider.
Use any Google Font by pasting its link and CSS value. The app saves your previously used fonts for quick access.

2. AI-Powered Formatting

To solve the messy text problem, I integrated the OpenAI API. There's a single "Format with AI" button that takes your unstructured text and turns it into clean, well-formatted GFM. Because let's be honest, you can't ship an app in 2025 without a little AI, right? 😉

The backend is a simple Next.js API route that securely handles the API key and prompt.

// /src/app/api/format-with-ai/route.ts
const SYSTEM_PROMPT = `
You are an expert markdown formatter... 
Your response must ONLY be the formatted markdown content.
`;

const completion = await openai.chat.completions.create({
  model: 'gpt-4o',
  messages: [
    { role: 'system', content: SYSTEM_PROMPT },
    { role: 'user', content: text },
  ],
  // ...
});

3. Local-First File Management

I hate creating accounts for simple tools. So, I used Zustand with its persist middleware to save everything directly to the user's localStorage. It supports creating, opening, searching, and deleting multiple documents, and it's incredibly fast.

// /src/lib/store/useDocumentStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

// ...
export const useDocumentStore = create<DocumentState>()(
  persist(
    (set, get) => ({
      // ... all the state and actions ...
    }),
    {
      name: 'smart-markdown-pro-storage-v2',
    }
  )
);

4. High-Fidelity PDF Exports

This was the hardest technical challenge. Client-side libraries like html2canvas kept failing because of modern CSS color formats (lab(), oklch()) used by Tailwind/Shadcn.

The solution? A serverless function using Puppeteer.

The frontend sends the preview's HTML to an API route. The backend launches a headless Chrome instance, injects the HTML and a minimal set of CSS, and uses Chrome's own print-to-PDF engine to generate a perfect PDF.

// /src/app/api/export/pdf/route.ts
import puppeteer from 'puppeteer-core';
import chromium from '@sparticuz/chromium'; // For serverless environments

// ...
browser = await puppeteer.launch({
  args: chromium.args,
  executablePath: await chromium.executablePath(),
  headless: 'new',
});

const page = await browser.newPage();
await page.setContent(finalHtml, { waitUntil: 'networkidle0' });
const pdfBuffer = await page.pdf({ format: 'A4', printBackground: true });
// ...

Building What You Need is Rewarding

This project was a fantastic learning experience and a powerful reminder that the best projects often come from solving your own problems. It forces you to think through every detail and build something you genuinely want to use.

I'd love for you to check it out!

Live App: https://smart-markdown-pro.vercel.app/
GitHub Repo (Stars are super appreciated!): https://github.com/Abubakr-Alsheikh/smart-markdown-pro

What are some daily annoyances you've been tempted to turn into a side project? I'd love to hear about them in the comments

DEV Community: Abubakr Alsheikh

Why my saved Claude Code logins kept dying, and the switcher I built around it

Why a saved login dies

What the tool does about it

Things I learned matching Claude Code

What it is not

Try it

qtask: a task tracker my AI coding agents share, in one Python file

What a session looks like

Four rules that fixed my problems

Why another tracker

Using it with your agents

Under the hood

Try it

I gave my CLI a cyberpunk dashboard, and taught its AI agent to ask first

The problem with a "lazy" CLI

1. The dashboard: max 🖥️

The look

The part nobody sees: flicker

Pages that know your file

The trick: I wrote none of those forms by hand

2. The agent: from "suggest a command" to "do the job" 🤖

It plans, and it asks

It asks before it touches your files, whatever your settings say

Whole folders, without redoing finished work

It picks the right action

It checks its work, and you can take it back

It remembers, within limits

Guardrails in numbers

3. Everything else that shipped ⚡

Three lessons from making it installable

Try it

What's next

From "Lazy Script" to "Local AI Agent": Max CLI is now a Media & Document Powerhouse

What’s New in Max? 🚀

1. The Local Media Engine (FFmpeg on Steroids)

2. The PDF "Bundle" Pipeline

3. Universal "Smart" Downloader (max grab)

4. AI Vision & "Nano Banana" (Image Gen)

The "Killer" Upgrade: Context Awareness 🧠

New Developer Utilities 🛠️

Refined Tech Stack

What's Next?

I built a "Lazy" AI Terminal Assistant because I hate memorizing flags

The Problem: I love the terminal, but I hate the friction.

Meet Max CLI ⚡

What can it do? (The "Lazy" Features)

1. Smart Image Compression

2. Sanity-Saving File Ordering

3. The AI Copilot 🤖

The Architecture (For the Nerds 🤓)

The Roadmap 🔮

Contribute!

I Built an AI Manga Creator with Next.js and Gemini's "Visual Memory"

The Tech Stack

The Core Innovation: Giving the AI a "Visual Memory"

AI as an Art Director and Story Editor

What I Learned

react #nextjs #ai #google #webdev #typescript #hackathon #generativeai

I Built the Markdown Editor I Always Wanted with Next.js and AI

The Problem: A Lack of Control

The Solution: Smart Markdown Pro

The Features That Mattered to Me

1. Total Preview Customization

2. AI-Powered Formatting

3. Local-First File Management

4. High-Fidelity PDF Exports

Building What You Need is Rewarding

1. The dashboard: `max` 🖥️

3. Universal "Smart" Downloader (`max grab`)