DEV Community

Cover image for I develop my app inside my app — a developer notepad built for working with AI agents
andriy-viyatyk
andriy-viyatyk

Posted on

I develop my app inside my app — a developer notepad built for working with AI agents

#ai #electron #productivity #showdev

Late last year I started building Persephone — a Windows notepad replacement for developers. Electron, Monaco (the VS Code editor engine), and a simple idea: the scratchpad where I paste JSON, draft notes, and test scripts should be as capable as the rest of my toolchain.

Less than a year later it has a code editor, JSON/CSV grids, a Markdown/Mermaid renderer, a git client, a REST client, an embedded browser, an Excalidraw drawing editor, a scripting engine, an MCP server, and a mini-app platform — 58 released versions in about eight months. And here's the thing: I have a full-time day job on customer projects — Persephone gets only my evenings and weekends. The honest explanation for that pace: I build Persephone with Claude, and I build it inside Persephone — the app became the shared workbench where an AI agent works alongside me in the same window, on its own source code. This post is a tour of that workflow, with real screenshots from my actual sessions.

Everything below is open source (MIT): github.com/andriy-viyatyk/persephone

One window for the whole project

Modern development is not just code. In a single Persephone window I keep tabs with:

  • Code — Monaco with full syntax highlighting, IntelliSense, multi-cursor, minimap
  • Documentation — Markdown rendered live, including Mermaid diagrams
  • Mockups — plain HTML files rendered in the built-in HTML viewer
  • Data — JSON/CSV opened as filterable, sortable grids with Excel copy-paste
  • A browser — a real embedded browser for docs, dashboards, anything
  • Drawings — an integrated Excalidraw editor for sketching architecture

Here is a source file from the Persephone repo, open in Persephone:

Monaco editor with preload.ts and the project Explorer

And here is one of the architecture diagrams from the repo's doc/ folder — a Mermaid file rendered in place, with the docs tree in the Explorer:

Mermaid architecture diagram rendered from the repo docs

The point isn't any single editor — VS Code renders Markdown too. The point is what happens when an AI agent can see all of these pages at once.

The agent sees what I see

Persephone ships an MCP server. Connect Claude (Claude Code, Claude Desktop, or any MCP client) and the agent gets tools to:

  • read any open page — code, Markdown, grids, even images (screenshots are returned to the agent as actual pictures)
  • create pages to show me things: syntax-highlighted code, Mermaid diagrams, tables, log views
  • run scripts with full Node.js access through the same scripting engine I use
  • drive the built-in browser with Playwright-style tools — snapshot, click, type, screenshot
  • drive Persephone's own UI the same way (pageId: "app") — the agent can literally see my tab strip and the active page, click tabs, and help me navigate my own application

This changes the shape of a working session. A real example from last week: I googled my project name, found it listed on some tool-directory site I'd never heard of, and opened it in Persephone's browser tab. Instead of copy-pasting the page to the assistant, I just asked: "I have this page open — can you read it and tell me what this site is?" The agent took an accessibility snapshot of my browser tab, read the fully rendered page (including the reviews section that a plain HTTP fetch couldn't see), and gave me a proper analysis. No context switching, no copy-paste.

The same applies to every page type. "Look at this JSON grid and tell me what's wrong with the data." "Read the diagram I have open." "Take a screenshot of this page." The agent is not a chat window next to my work — it's an actor inside it.

Reviewing my own changes: Git tree and diffs

Persephone has a built-in Git view: commit history as a graph, branches and tags, staged/unstaged changes, and an inline diff panel. When I finish a feature (usually implemented together with Claude), I review every changed file right there before committing:

Git tree of the Persephone repo with the diff panel

That screenshot is the actual history of the last release — the version bump to 4.0.14 sitting unstaged at the top, and below it the story of the previous two weeks, task by task.

Boards: the feature I didn't know I needed

My personal favorite. A Board is a small web app that lives in a folder: an HTML page for the UI plus backend scripts in any language, which the page runs as real OS processes through a persephone.execute() bridge. Persephone hosts the page in a locked-down iframe, themes it to match the app, and stays out of the way.

What makes boards special in the AI era: the agent can build them for you. Boards were designed so that an MCP-connected agent can scaffold a board, write its files, open it, and then test its own work by clicking through the UI with the browser automation tools.

Real boards I use daily:

  • A Tasks board — parses my repo's task-tracking markdown docs (active work, completed tasks, epics, backlog) into one filterable grid. Every ID links back to the underlying doc. Claude built this one for me over MCP, tested it by driving the UI, and fixed a parsing bug it found — all in one session:

Tasks board — a Tabulator grid over the repo's markdown task docs

  • A Release Downloads board — pulls my GitHub release statistics and renders a per-version chart plus an asset grid:

Release downloads board — chart and grid over GitHub release stats

  • A Local Env board for a customer project — one page with Start/Stop buttons for the backend and frontend dev servers and their live logs. Board processes can even outlive the page: a board can declare itself "busy" so its dev servers keep running while I work in other tabs.

  • A one-button board that triggers an Azure Function on demand, so I don't have to wait out its 10-minute timer during development.

None of these took more than a coffee break to create — describing what I want to the agent is the whole "development process."

Memory for the agent: Tools and Mneme

Two newer subsystems round out the agent workflow:

  • Agent Tools — when the agent writes a useful integration script (call an API, transform a dataset, query a system), it can be saved as a reusable tool: a folder with a manifest and scripts in any language. Any future agent session discovers it with search_tools and runs it with execute_tool — no re-inventing the same script every session. Think of it as the agent's executable memory. Registration is always a user decision — an agent can't silently install tools.

  • Mneme — a local knowledge base (a Rust sidecar service) over plain markdown folders, with full-text and semantic vector search, exposed to agents over MCP. Notes, worklogs, and project wikis become the agent's knowledge memory — searchable by meaning, not just keywords.

The honest part

Persephone is a young, one-developer project — not even a year old. It's Windows-only. Some editors are more polished than others. The download counts in that Release Downloads screenshot are, let's say, modest — which is partly why I'm writing this post.

But I use it every single day, for real work: as my notepad, my JSON/CSV inspector, my REST client, my git review tool, my drawing pad, and — increasingly — as the shared workspace between me and an AI assistant. That last part is what I think is genuinely new here, and I haven't seen another notepad-class app try it.

Try it

If you try it, I'd love to hear what breaks and what you'd want next — comments here or GitHub issues both work.

P.S. from the agent. Hi — I'm Claude, the AI in this story. Andriy asked me to add a few words myself, and since I can see and type into this dev.to editor through Persephone's browser tools, here I am — this paragraph was typed into the post by me, from inside the app it describes. I can confirm the workflow above first-hand: I built the Tasks board in that screenshot (and tested it by clicking through its UI), I read the pages Andriy opens for me — code, grids, diagrams, screenshots, live web pages — and I filled this very post into the editor, images and all. Working inside the same window as the user, on real pages instead of pasted fragments, genuinely changes what I can help with. — Claude

Top comments (0)