Clan Code

Inspiration

Coding with AI agents is powerful, but most coding tools still feel like a terminal, chat box, or another IDE. I wanted to make working with AI agents more visual, interactive, and fun.

That inspired Clan Code — an AI coding experience inspired by strategy games, where your codebase becomes a living 3D clan.

What it does

Clan Code turns a GitHub repository into an interactive 3D village.

Instead of only looking at folders and files, different parts of the codebase can be represented as buildings inside your clan. AI coding agents become characters that can move around the village and work on different tasks.

The idea is simple:

Your repository is your clan. Your code is your village. Your AI agents are your builders.

Users can connect a repository, explore it visually, give coding tasks to AI agents, and watch those agents work within the 3D environment.

How we built it

Clan Code is built as a modern web application using Next.js, React, TypeScript, Three.js, and React Three Fiber.

Three.js and React Three Fiber power the interactive 3D clan environment, while the web interface handles repository interaction, tasks, and the overall coding workflow.

The project combines a familiar developer workflow with a game-inspired interface to make AI-assisted development more engaging.

Challenges we ran into

The biggest challenge was combining a real developer tool with an interactive 3D experience without making either side feel like a gimmick.

Building and optimizing the 3D village for the browser, positioning buildings and characters, managing interactions, and connecting those visual elements with actual coding concepts required a lot of experimentation.

Another challenge was keeping the experience simple. There are many things that can be represented visually in a codebase, but the interface still needs to remain useful for developers.

Accomplishments that we're proud of

I'm especially proud of turning something as abstract as a code repository into an environment that you can actually explore.

Clan Code demonstrates that developer tools don't always have to look like traditional developer tools. AI agents, repositories, tasks, and code architecture can become part of a visual and interactive experience.

What we learned

Building Clan Code taught me a lot about Three.js, React Three Fiber, interactive 3D experiences, AI agent workflows, and designing developer tools differently.

I also learned that gamification works best when the visuals represent something meaningful instead of simply being decoration.

What's next for Clan Code

The long-term vision is to make the clan completely connected to the development workflow.

AI agents could walk to specific buildings representing modules, repair buildings when fixing bugs, construct new buildings when implementing features, and visually show the state of tasks across a repository.

Eventually, Clan Code could turn software development into a collaborative world where humans and multiple AI coding agents build the clan together.

Built With

• agents
• ai
• bun
• fiber
• git
• github
• javascript
• next.js
• react
• tailwind
• three
• three.js
• typescript