AI-Powered Token Generator

A web-based tool for creating custom game tokens using AI technology. This application allows users to design unique tokens with customizable dimensions, shapes, colors, text, and AI-generated icons for tabletop gaming, board games, or RPGs.

Features

• Customizable Canvas: Adjust width, height, and choose between circle or square shapes
• Color Controls: Set background, icon, and text colors with color pickers
• Text Options: Add custom text with adjustable font size
• Pre-made Icons: Choose from a selection of built-in game-themed icons
• AI-Powered Suggestions: Get AI-generated icon and color suggestions based on your token name
• AI Icon Generation: Create custom icons from text descriptions using Google's Imagen AI
• Download Functionality: Export your tokens as PNG images
• Responsive Design: Works well on different screen sizes

Technologies Used

• HTML5 Canvas for rendering
• Tailwind CSS for styling
• Google Gemini API for suggestions
• Google Imagen API for icon generation
• Vanilla JavaScript for interactivity

Important Security Note

This application previously required pasting a Google API key directly into the client-side HTML/JavaScript code, which exposed the key to anyone who viewed the page source or opened DevTools. This secret-exposure issue has been fixed.

The API key is now managed server-side via a lightweight proxy server. The browser never sees the key.

Configuration

1. Get a Google AI Studio API key from Google AI Studio

2. Set it as an environment variable and start the server:

   export GOOGLE_API_KEY="your-actual-api-key-here"
   npm start
   

3. Open the URL shown (default: http://localhost:3000).

Running without AI features

If you don't need AI-powered suggestions or icon generation, you can open tokengenerator.html directly in a browser. The manual token-editing tools (canvas, colors, shapes, text, pre-made icons) work without any server.

Usage Guide

Basic Token Creation

1. Adjust the canvas dimensions using the Width and Height inputs
2. Select your preferred shape (Circle or Square)
3. Choose background, icon, and text colors using the color pickers
4. Enter text for your token and adjust the font size
5. Select a pre-made icon from the dropdown menu
6. Adjust the icon size using the slider
7. Your token will update in real-time

AI-Powered Features

Get Suggestions

1. Enter a token name or description in the "Display Text" field (e.g., "Fire Mage", "Goblin Scout")
2. Click the "Suggest Details" button
3. The app will suggest an appropriate icon and color scheme based on your input

Generate Custom Icon

1. Enter a description of the icon you want in the "Icon Description" field (e.g., "a cracked skull with horns", "magical staff with glowing orb")
2. Click the "Generate New Icon" button
3. Wait for the AI to generate your custom icon
4. The generated icon will appear on your token

Downloading Your Token

1. Once you're satisfied with your token design, click the "Download as PNG" button
2. The file will be saved to your default downloads folder with a descriptive filename

Customization Tips

• Experiment with different color combinations to match your game's theme
• Use the icon size slider to balance the visual elements on your token
• For best results with AI generation, use clear and descriptive prompts
• Consider the final use size of your tokens when choosing font sizes

Limitations

• AI features require a Google API key to function
• AI-generated icons may vary in quality depending on the complexity of the request
• The application runs entirely in the browser and does not store any data

Contributing

Contributions are welcome! Feel free to submit issues or pull requests to improve the functionality, design, or documentation of this tool.

License

This project is available under the MIT License. See the LICENSE file for more information.

Acknowledgments

• Built with Google's Gemini and Imagen AI APIs
• Styled with Tailwind CSS
• Icons from Material Design Icons