October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
ThatPainter
AI Town

I Turned My Claude Chat History Into a Pixel Art City (and Built the Whole Thing With Claude Code)

AI Town mapped Claude conversations to pixel buildings and animated message characters. Here’s how the reported parser, layout, Canvas renderer and Claude Code workflow fit together—and what its offline demo means for readers.

By ThatPainter Team 10 min read

What’s actually slowing this PC down?

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

AI Town turned a Claude chat export into a pixel-art city: each conversation became a building, and message activity became animated characters. The idea made private-looking data legible and playful—but as of August 18, 2026, the project’s linked demo and source repository returned 404, so the original build is best read as a technical case study, not a working tutorial.

What AI Town turned a chat history into

In Alex Cloudstar’s March 4, 2026 article, AI Town is a browser-based visualization of a Claude conversation export. Each conversation becomes a building; its messages are represented by small animated pixel characters. More activity gives a building greater visual presence, so a sprawling tower stands out from a small house.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
MNN 15.6" FHD 60Hz Portable Monitor USB-C HDMI IPS HDR Gaming Laptop
  • Full HD Portable Monitor - MNN 15.6inch portable laptop monitor with 1920*1080 resolution, advanced IPS glossy screen support 178° full viewing angle, it renders accurate and bright color, draws you into the video or game with lifelike colors and amazing detail.It can effectively reduce blue light radiation damage, no flickering, eye-care, and make it easier to watch for a long time.A second monitor for working from home.
  • Double Type-C Port -For Plug & Play, the MNN monitor provides 2 Full Feature Type-C ports. Only One USB Type-C Cable is required to connect to the power supply & display signal transmission. NOTE: Your device should support thunderbolt 3.0 or USB 3.1 Type C DP ALT-MODE.which supports multiple connect ways to your laptops, PC, Phones, Macbooks, PS5/PS4, Xbox, and Switch.
  • Lightweight Ultra Slim for Travel - As a portable external monitor,MNN portable laptop monitor easily accommodate to every suitcase and backpack and stress-free when you are holding it for a long time. They are truly portable computer monitors for travelers, students, gamers,engineers, and everyone.
  • Give consideration to work and games - through multiple display modes [Copy Mode/Extended Mode/Second Screen Mode/Portrait Mode], we can bring you a clear second screen in the meeting, and expand the screen anytime and anywhere to improve work efficiency and improve the quality of life. Adjusting to HDR mode can upgrade the image to a new level, providing you with brighter highlights,deeper and more realistic colors, more realistic images, and amazing viewing/gaming experience.
  • Powerful Smart Cover - MNN portable external monitor can work in both landscape and portrait mode, can be used as a gaming monitor, screen extender for laptop or phone. Comes with a scratch-proof smart cover made of durable PU leather exterior, doubles as a stand, provides comprehensive protection for this portable computer monitor.

The city is a visual summary of activity, not an analysis of what the conversations mean. The reported mapping uses counts, dates and identifiers; it does not establish whether a conversation was useful, successful, or important. A tall building could just as easily represent a stubborn debugging session, repeated corrections, or a verbose exchange as a valuable one.

That distinction is central to the project’s appeal. A raw JSON export is difficult to scan as a personal history. A city gives scale an intuitive metaphor: long-running conversations occupy more of the skyline, while quick questions stay modest. It can feel like an autobiographical record of how someone used an AI over time, but it should not be read as a productivity score.

Can you still try the original app?

Status checked August 18, 2026: the article’s linked Vercel demo and GitHub repository returned 404. The article remains available, but those links do not currently provide a way to generate a town or inspect the complete implementation. No current evidence establishes that the app is operational.

The original article described a flow that began with exporting Claude data from Settings → Privacy, then uploading the ZIP to the app, choosing a username, waiting for generation, and opening or sharing a public town page. Both the Claude settings interface and export format can change, and the unavailable upload page means those steps cannot be confirmed as a present-day workflow. Treat them as the author’s account of the original project, not instructions guaranteed to work now.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What the export was reported to contain—and what was sent

According to the author, the app used JSZip to parse the ZIP in the browser and derive a compact set of visualization data: total, human and assistant message counts; first and last active months; a building type; and a color seed derived from a conversation UUID. The article says conversation titles remained in browser localStorage, while titles, UUIDs, message text and personally identifying information were not sent to the server.

These are architectural claims in the published account, not independently audited privacy guarantees. With the demo and repository unavailable, there is no current code or network trace to verify what a running version transmitted, how long data was retained, or how deletion worked. A privacy review would need to inspect the deployed client, observe its network requests, examine the exact server payload and storage behavior, and account for logs, analytics and error reporting. A hashed identifier is not automatically non-sensitive, and a public town can reveal usage patterns even if it contains no message text.

Rank #2
Sale
KYY Portable Monitor 15.6" 1080P Computer Monitor Screen Extender w/Cover
  • [ FHD 1080P PORTABLE MONITOR ]: KYY using a 15.6''(8.8"x14.2") advanced IPS screen with 178° wide viewing angle, Delivers 1920*1080 breathtaking viewing quality and HDR technology, KYY portable gaming monitor has excellent color rendering ability, provide you the clearer, smooth, excellent performance in gaming/multimedia. It can effectively reduce blue light radiation damage, no flickering, eye-care, and make it easier to watch for a long time
  • [ WIDE COMPATIBILITY ]: KYY portable monitor for laptop equipped with 2 Full Function Type-C ports and Mini-HDMI port, easy access to your favorite devices with 1 cable solution as long as your device support Thunderbolt 3 or 3.1 USB-Type-C, compatible with most laptop, smartphone, PC, PS4, XBOX and more.
  • [ ULTRA-SLIM PORTABLE DISPLAY ]: KYY USB C portable monitor features a 0.3inch ultra-slim profile(1.7lb), it is easy to slides into your bag, allows you to carry it everywhere, ideal for a simple on-the-go dual-monitor setup or extend your phone screen for movies or games. No driver needed and equipped with 3.5mm audio inputs and 2 built-in stereo speakers to enhance entertainment experience
  • [ DURABLE SMART COVER ]: Comes with a scratch-proof smart cover made of durable PU leather exterior, doubles as a stand, provides comprehensive protection and frameless magnetic design for this portable computer monitor. There are two grooves in the cover base to give at least some choice of viewing angle for your comfort for less cumbersome installation
  • [ LIGHTWEIGHT BUT POWERFUL ]: KYY portable external monitor can work in both landscape and portrait mode, can be used as a gaming monitor, screen extender for laptop or phone. It has a unique designed Premium gray metal appearance, 2 built-in speakers to play audio, a friendly menu control wheel for setting, and 24/7 professional support team

The reported reliance on localStorage also has a practical cost: the author says titles stored there disappear if the user clears browser data. That is convenient for a lightweight app, but it is not a backup or durable account record.

How conversations became buildings and characters

Building size and color

The article gives illustrative size examples: around five messages for a small house, around 50 for a medium building, and 200 or more for a tower. These are reported implementation examples; with source code unavailable, the precise thresholds cannot be confirmed. The point is proportionality, not a universal scale.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For color, the author describes hashing each conversation UUID into a hue from 0 to 359. The result is deterministic: the same UUID yields the same hue when the city is regenerated. This is the simplified sample published in the article, not independently tested production code:

function uuidToColorSeed(uuid: string): number {
  let hash = 0;

  for (let i = 0; i < uuid.length; i++) {
    hash = (hash << 5) - hash + uuid.charCodeAt(i);
    hash |= 0;
  }

  return Math.abs(hash) % 360;
}

Message activity as people

The reported visual rule is one animated “peep” per five messages. Human messages use a warm peach color and assistant messages a cool blue, giving the scene a rough sense of who contributed. It is an encoding of volume and role, not a transcript: the article does not establish whether the implementation capped, aggregated or otherwise limited the number of visible characters.

How the city layout and renderer were described

Placing buildings in a spiral

Rather than arrange buildings in spreadsheet-like rows, the reported layout starts near the center and expands outward in rings. Larger buildings are placed first; candidate positions that overlap existing buildings are rejected, and a one-tile gap between structures becomes the road network. Placing the largest shapes first helps reserve room for them before smaller buildings fill the remaining space.

This approach is understandable for a modest town, but repeated collision checks can become costly as the city grows. A larger implementation could use a spatial index to test only nearby buildings, divide the map into chunks, or adopt a more formal packing strategy. Those are scaling options, not features confirmed in AI Town.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
Sale
ForHelp 15.6inch Portable Monitor,1080P USB-C HDMI Second External Monitor for Laptop,PC,Mac Phone,PS,Xbox,Swich,IPS Ultra-Thin Zero Frame Gaming Display/Premium Smart Cover
  • Extensive Compatibility - Forhelp portable monitor features 2 full-featured Type-C ports and 1 MINI HDMI port. You can easily access your favorite devices with just one USB Type-C or MINI HDMI cable. NOTE: Your device should support Thunderbolt 3.0/4.0 or USB 3.1 Type C DP ALT-MODE. It is compatible with all devices equipped with HDMI and USB Type-C ports like laptops, PS, XBOX, SWITCH game consoles.
  • Full HD Portable Monitor - 15.6inch portable laptop monitor with 1920*1080 resolution, advanced IPS Matte screen support 178° full viewing angle, it renders accurate and bright color, draws you into the video or game with lifelike colors and amazing detail. It can effectively reduce blue light radiation damage, no flickering, eye-care, and make it easier to watch for a long time.
  • Ultra-slim Portable Monitor - As a portable external monitor, Forhelp portable laptop monitor's body is made of aluminum alloy, the weight of the whole machine is 1.52lb, 0.3" ultra-thin profile, can easily fit into your bag, so you can carry it with you. With our magnetic smart holster, you can use and store it anytime.
  • Able to Balance Work and Play - With multiple display modes [copy mode/extension mode/second screen mode]. During meetings,it can copy your laptop's content as a second screen to share with others. At work, it can be used as a second extended screen to increase productivity. In life, adjusting to HDR mode can upgrade the image to a new level, providing you with brighter highlights, more realistic colors and images. Two built-in speakers provide an amazing viewing and gaming experience.
  • DURABLE SMART COVER - Comes with a scratch-proof smart cover made of durable PU leather exterior, doubles as a stand, provides comprehensive protection for this portable computer monitor. There are two grooves in the cover base to give at least some choice of viewing angle for your comfort.

Drawing the scene on Canvas

The article describes an HTML Canvas 2D renderer that draws layers in order: sky and background, ground tiles, roads, trees and other environmental details, street lamps, buildings, then animated characters. The order matters: later layers can sit naturally in front of earlier ones.

Decorative details reportedly use seeded randomness based on tile coordinates. That makes a tile’s trees and lamps repeatable without storing every detail in a database. The article gives an 8% tree spawn rate per grass tile as an implementation detail, not a measured or verified property of a currently available build. Window flicker uses a sine function, while requestAnimationFrame drives animation. The author also describes viewport tile culling, which avoids drawing tiles outside the visible area, and device-pixel-ratio handling for high-DPI screens.

The useful performance principles are broader than this particular project: keep a stable world-coordinate system separate from screen pixels, draw only what is visible, avoid recalculating static geometry each frame, and consider separating static scenery from animated work. Large exports can still create pressure through the number of buildings and characters, especially on mobile or low-memory devices. The article’s 60-frames-per-second figure is an author-reported claim without accompanying device details, export size, browser version, frame-time measurements or memory results; it is not a benchmark readers can rely on.

Camera controls and interaction

In the reported interactive mode, users could drag to pan, use the mouse wheel to zoom from 1× to 4×, and click buildings to see statistics. Mapping a click back to a building requires converting screen coordinates through the current pan and zoom into world coordinates. The landing page reportedly used a separate cinematic mode: a slow automatic camera with vertical bobbing and left-to-right ping-pong movement.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Canvas also makes accessibility part of the engineering problem. The article does not establish that the app offered a screen-reader-readable alternative, keyboard navigation, touch gestures, reduced-motion behavior, or non-color cues for distinguishing message roles. A production version should provide a text or tabular summary of counts and dates, make buildings reachable by keyboard, avoid using color as the only distinction, support touch, and respect prefers-reduced-motion.

What the reported architecture traded away

The article describes a deliberately small server-side design: no conventional database and no user accounts, with username-based town URLs and JSON blobs in Cloudflare R2. A reported object path is towns/{username}/town.json. Vercel API routes handled requests; the author says availability was checked with HEAD, town creation used POST, and a conflicting username produced HTTP 409. Public town responses reportedly used a 60-second cache with stale-while-revalidate behavior for up to five minutes.

Rank #4
Anyuse 15.6" FHD IPS USB-C HDMI Portable Monitor
  • 15.6" FHD Portable Monitor - Featuring a 1920*1080P resolution, 178°FULL viewing angle, HDR, and Low Blue Light Super Clear IPS A-grade screen, this Anyuse portable screen for laptop enhanced visual experience, reduces eye strain and fatigue.
  • Double Type-C Port -For Plug & Play - Anyuse portable monitor features 2 full-featured Type-C ports and 1 MINI HDMI port. You can easily access your favorite devices with just one USB Type-C or MINI HDMI cable. NOTE: Your device should support Thunderbolt 3.0/4.0 or USB 3.1 Type C DP ALT-MODE.
  • Portable & Light Weight - At just 1.37lbs and 0.04 inch thin, this portable laptop monitor is ultra-portable and perfect for on-the-go productivity or gaming. flexible to use anywhere you need a second screen for laptop. bringing you efficiency for meetings, work from home, and presentations.
  • Able to Balance Work and Play - With multiple display modes [copy mode/extension mode/second screen mode]. During meetings,it can copy your laptop's content as a second screen to share with others.At work, it can be used as a second extended screen to increase productivity. In life, adjusting to HDR mode can upgrade the image to a new level, providing you with brighter highlights, more realistic colors and images.Two built-in speakers provide an amazing viewing and gaming experience.
  • Wide Compatibility - Enjoy hassle-free plug-and-play functionality with the portable monitor. it is compatible with all devices equipped with HDMI and USB Type-C ports like laptops, PS, XBOX, SWITCH game consoles, No app or driver installation required.

The project’s listed stack was Next.js 16 with App Router, React 19, TypeScript, HTML Canvas, Tailwind CSS 4, Cloudflare R2, Vercel, JSZip and shadcn/ui. These are the versions and tools named in the March 4, 2026 article, not a statement of current releases. The repository’s 404 prevents independent inspection of dependencies, deployment settings and implementation details.

Object storage and no-auth URLs can simplify a prototype, but a username is not an identity system. The article itself acknowledges possible username squatting and that the design is not traditionally secure. Without authentication and recovery controls, ownership, editing and deletion become difficult to guarantee. A public JSON object may be scraped, and a public town may expose usage frequency, activity months, conversation-length patterns or a recognizable username. “No message text sent,” even if verified, would not mean “no private information revealed.”

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The account also reports upload limits of 100 MB compressed, 50 MB uncompressed and 100 files. Such limits are a starting point, not a complete defense against malicious archives. A robust parser needs to validate both compressed and expanded sizes, cap file counts, reject unexpected content, handle malformed archives and avoid loading an unbounded export into memory. Client-side parsing can reduce server exposure, but very large histories may exhaust browser memory, particularly on phones.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

How Claude Code fit into the build

Cloudstar describes Claude Code as a primary development partner, not just an autocomplete feature. The workflow lessons are practical: describe the outcome before dictating every implementation detail; ask the tool to inspect existing files before making changes; delegate repetitive scaffolding such as API setup, interfaces and Canvas boilerplate; and keep product and visual decisions with the human. Then ship a deliberately imperfect version and iterate.

That is a useful division of labor, but it is not evidence that an agent independently designed, secured, validated and shipped the application. The human still owns choices such as the city metaphor, visual language, data minimization, authentication trade-offs, security controls, deployment and the definition of “done.” Generated code must still be reviewed, run and tested.

For readers trying a similar project now, the current Claude Code documentation lists these installation options. These are current documentation commands, not a record of what the author used in March 2026:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Best Value
InnoView Portable Monitor, 15.6 Inch FHD 1080P HDMI USB C Second External Monitor for Laptop, Desktop, MacBook, Phones, Tablet, PS5/4, Xbox, Switch, Built-in Speaker with Protective Case
  • [Portable Monitor Laptop] InnoView laptop screen extender is no need of app and drivers! 15.6 in is a more suitable size for traveling or remote work. Suitable for traveler, student, gamer, engineer, and white-collar worker to connect HP laptop, Lenovo laptop, Dell laptop, Asus laptop, Macbook, iPhone, game console, tablet, PS, Xbox, etc. The laptop screen can expand the viewing area and be more efficient when playing games, working, meeting and studying
  • [Plug and Play] The travel monitor for laptop provides 2 full-function Type-C ports and 1 HDMI port to connect most devices. Only one USB-C cable is needed to connect the external display to computer, and it supports power pass-through reverse charging. Note: Your device should support Thunderbolt 3.0/4.0 or USB 3.1 Type-C DP ALT-MODE. If not, you can connect via HDMI and power cable(NOT INCLUDE IN THE PACKAGE)
  • [IPS FHD USB C Monitor] 15.6 inch portable screen with a resolution of 1920*1080P, made of A+ IPS screen, supports 178° full viewing angle, can present accurate and vivid colors. Combined with HDR, images and videos present realistic colors and amazing details. Low blue light can effectively reduce blue light radiation damage, no flicker, eye protection, making it easier for you to work and perform multiple tasks at the same time
  • [Versatile Cover and Stand] Equipped with a scratch-resistant smart protective cover made of durable PU leather, it can also be used as a stand when working. Two grooves are used to adjust the angle and fix the external monitor. It can also provide all-round protection for the 1080p monitor when going out or traveling, suitable for putting in a backpack to avoid squeezing. Optional landscape and portrait modes, save more desktop space
  • [Worry-free Purchase] Since the output power of each device is different, the screen may flicker or restart. You can power the laptop monitor to solve it. Provide a 30-day return policy and 18-month warranty (excluding external force damage). If you have any concerns, please let us know (displayed on the back of the monitor)

Install Claude Code

# macOS, Linux, or WSL
curl -fsSL https://claude.ai/install.sh | bash
# Windows PowerShell
irm https://claude.ai/install.ps1 | iex
# Windows Command Prompt
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
# Homebrew
brew install --cask claude-code
# WinGet
winget install Anthropic.ClaudeCode

To start in a project directory, the documented sequence is:

cd your-project
claude

The documentation says native installs auto-update, while Homebrew and WinGet installs need manual upgrades. For a maintainable build, work in small changes: inspect the code, make one focused edit, review the diff, run the app and tests, then address a specific failure. Keep export parsing, layout, rendering and storage concerns separable so a change in one does not silently break the others.

A careful plan for rebuilding the idea

Because the linked repository is unavailable, the following is a reconstruction plan, not a verified tutorial for AI Town. There is no confirmed source tree, environment-variable list, test command or deployment recipe to reproduce.

  1. Define the data boundary. Decide whether the archive can be parsed entirely on the user’s device and document every field that would leave it. Do not upload a real export to an unverified service.
  2. Build a tolerant parser. Validate the expected ZIP contents and schema, handle missing fields and partial exports, and show a clear unsupported-format error instead of silently producing an incomplete city. Keep a local test fixture with synthetic data.
  3. Set resource limits before parsing. Check compressed and expanded sizes and file count; handle ZIP exceptions and test oversized and malformed archives. For large exports, consider incremental processing or a local CLI rather than holding everything in browser memory.
  4. Separate data from appearance. Convert conversations into a compact normalized model, then map counts and dates to buildings. Make explicit that visual prominence encodes volume rather than quality.
  5. Make the city deterministic. Use stable seeds for colors and scenery, then test that the same input produces the same layout. Place large buildings early and measure collision-check cost as the number of conversations rises.
  6. Design for scale and access. Cull off-screen tiles, limit or aggregate animated characters, and provide a non-canvas text summary, keyboard access, touch interaction and reduced-motion support.
  7. Choose sharing and ownership deliberately. If towns are public, explain what metadata they reveal. Add authentication, recovery and deletion controls if users need ownership; a username URL alone cannot provide them.
  8. Test the privacy boundary. Inspect browser network requests and server payloads, check storage and logs, and verify that deletion behaves as promised. Separately test small, large, malformed and partial exports.

A local-only converter avoids public storage and username risks, though it is less convenient to share. A conventional dashboard is easier to search and can be more accessible, but loses some of the city metaphor’s emotional immediacy. If the project grows into user-owned towns, a database-backed design can support accounts, deletion and queries, at the cost of more operational complexity. The right choice depends on privacy, scale and ownership requirements rather than a universal best stack.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

What the project demonstrates—and what remains unresolved

AI Town’s strongest idea is not a new analytics metric; it is a memorable interface for making an archive feel like a place. The reported client-side parsing, deterministic decoration and lightweight object-storage architecture show how a playful visualization can be composed from ordinary web techniques. Its weaknesses are equally instructive: a visual metaphor can be mistaken for a judgment, Canvas needs accessibility alternatives, and no-auth sharing complicates ownership and privacy.

The project is also a demonstration of AI-assisted prototyping, with the same caveat as any fast build: implementation speed does not remove the need for schema resilience, security review, performance measurement or human product judgment. Since the linked demo and repository returned 404 when checked on August 18, 2026, readers should regard the published account as a historical build report unless the author restores the project.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

More from the Paint Desk

Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.