It is 2 AM at a hackathon. Your team’s app is coming together. The backend works, the frontend is functional, and the demo is in six hours. But every user in your dashboard is a gray circle or a broken image link. The AI agents in your multi-agent system are indistinguishable. Your team page shows names but no faces.

You do not have time to make avatars. You do not have time to find a free icon set, read its license, figure out its naming convention, and wire it into your rendering pipeline. You need unique images tied to unique identifiers, and you need them five minutes ago.

This is the exact problem MechGen was built to solve.

The 30-Second Workflow

If all you need is a few avatar images — team member pictures for a landing page, a profile image for a bot, placeholder content for a mockup — the fastest path is:

  1. Open mechgen.app
  2. Type a name or identifier into the Bot Mode seed input
  3. Press Enter
  4. Click the export button

That gives you a 512x512 PNG of a unique pixel-art robot, deterministically generated from your input string. The same string always produces the same mech. “Alice” always looks like Alice. “agent-07” always looks like agent-07.

Need a different size? The social export buttons produce platform-specific dimensions: 400px for X, 512px for Discord, 460px for GitHub, and so on.

No account creation. No API key. No sign-up form. Just open the page and generate.

The Developer Workflow

For hackathon projects that generate avatars in code — user dashboards, chat apps, multi-agent systems — MechGen exposes a JavaScript API on the global MechGen object.

Generating Avatars from User IDs

The most common hackathon use case is: given a user ID or username, produce a unique avatar. One line of code handles this:

MechGen.fromSeed(userId);
const avatarDataUrl = MechGen.getImageDataURL(256);

fromSeed() takes any string, hashes it, and uses the hash to deterministically select parts and colors. getImageDataURL() returns a base64-encoded PNG data URL that you can drop directly into an <img> tag:

<img src="${avatarDataUrl}" alt="User avatar" width="64" height="64" />

No image hosting. No file storage. No CDN. The avatar exists as a data URL in memory, generated on demand.

Batch Generation for Dashboards

If your app displays a list of users, agents, or entities, you can generate all their avatars in a loop:

const users = ['alice', 'bob', 'charlie', 'agent-001', 'agent-002'];

const avatars = users.map(user => {
  MechGen.fromSeed(user);
  return {
    id: user,
    avatar: MechGen.getImageDataURL(128)
  };
});

Each call to fromSeed() reconfigures the generator and getImageDataURL() renders the current state to a PNG. The entire loop runs in milliseconds since all rendering happens on a canvas element — no network requests, no server roundtrips.

Getting the Current State

If you want to store which parts and colors a mech uses (for a database, for debugging, for display), call getState():

MechGen.fromSeed('hackathon-bot');
const state = MechGen.getState();
// { head: 3, eyes: 7, antenna: 1, body: 5, arms: 2, legs: 8, accessory: 0,
//   primaryColor: '#1a1a2e', secondaryColor: '#16213e', ... }

This returns the full part indices and color values. You can store this object and later restore it with setState() to recreate the exact same mech without needing the seed.

Hackathon Use Cases

User Profile Pictures

Every app with user accounts needs profile pictures. During a hackathon, nobody is going to upload a photo. Default gray circles make the app look unfinished. Generate a unique mech from each user’s ID or email and the profile grid immediately looks alive:

function getProfileAvatar(email) {
  MechGen.fromSeed(email);
  return MechGen.getImageDataURL(256);
}

Your judges see a polished dashboard with unique avatars for every user. They do not need to know it took three lines of code.

AI Agent Faces

Multi-agent systems and LLM orchestration projects are popular hackathon categories. When your demo shows three agents collaborating — a planner, a coder, and a reviewer — giving each one a distinct visual identity makes the interaction dramatically easier to follow.

const agents = {
  planner: 'agent-planner-v1',
  coder: 'agent-coder-v1',
  reviewer: 'agent-reviewer-v1'
};

Object.entries(agents).forEach(([role, seed]) => {
  MechGen.fromSeed(seed);
  document.getElementById(`${role}-avatar`).src = MechGen.getImageDataURL(128);
});

Now each agent has a unique pixel-art mech face. The planner looks different from the coder, which looks different from the reviewer. Every time you run the demo, they look the same — because generation is deterministic.

Placeholder Content

Building a social feed? A messaging app? A marketplace? You need placeholder content that looks real. Instead of “User 1, User 2, User 3” with identical default icons, generate mechs from sequential seeds:

for (let i = 0; i < 20; i++) {
  MechGen.fromSeed(`demo-user-${i}`);
  const avatar = MechGen.getImageDataURL(64);
  addFeedItem({ avatar, name: `User ${i}`, text: 'Sample post content...' });
}

Twenty unique avatars in a loop. Your prototype feed looks populated and varied.

Team Page

Every hackathon submission needs a team page or an “about” section. Generate a mech for each team member from their name:

const team = ['Andrei', 'Sarah', 'Marcus', 'Priya'];
team.forEach(name => {
  MechGen.fromSeed(name);
  // Render to team grid...
});

It is playful, on-brand for a tech project, and takes less time than finding stock photos.

Why MechGen Is Built for Hackathon Speed

Several properties of MechGen align specifically with the constraints of hackathon development:

Zero Setup

There is no npm package to install, no build step to configure, no API key to register for. MechGen is a single HTML file. You can link to the hosted version at mechgen.app or download the file and serve it locally. Either way, you go from zero to generating avatars in under a minute.

No Accounts, No Keys

Every minute spent on account creation, email verification, API key management, and documentation reading is a minute not spent building your project. MechGen has no accounts. There is nothing to sign up for.

Works Offline

Hackathon wifi is notoriously unreliable. MechGen runs entirely in the browser with zero server calls. Once the page is loaded, it works without any network connection. If you download the HTML file, it works with no network at all. All 10 million possible combinations are generated client-side from code — no assets to fetch, no API to call.

Deterministic by Default

In a hackathon demo, reproducibility matters. You want your demo to look the same every time you run it. MechGen’s seed-based generation guarantees this. fromSeed('alice') produces the exact same mech on your laptop, on the demo projector, and on the judge’s phone. No randomness, no variation, no surprises.

Lightweight

MechGen adds no dependencies to your project. It does not pull in React, Canvas libraries, or image processing packages. It is vanilla JavaScript rendering to an HTML canvas. In a hackathon context where your node_modules is already groaning under the weight of your actual dependencies, this matters.

The Competitive Edge

Hackathon judges evaluate polish alongside functionality. Two projects with identical features will be judged differently if one has a clean UI with unique avatars and the other shows gray circles and placeholder text. Visual identity communicates completeness.

MechGen lets you add that visual layer in minutes instead of hours. The robots are distinctive, the pixel art style is charming, and the deterministic generation means your demo is consistent across runs.

Your hackathon project needs avatars. You do not have time to make them. MechGen makes them for you.