{"_id":"@ashqking/web3-avatar-forge","name":"@ashqking/web3-avatar-forge","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ashqking/web3-avatar-forge","version":"0.1.0","private":false,"description":"A developer-friendly playground for trait-based SVG avatars, AI-powered suggestions, and simulated NFT minting.","author":{"name":"Amaan Ahmad"},"license":"MIT","keywords":["react","nextjs","web3","avatar","nft","genkit","ai"],"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"dev":"next dev --turbopack -p 9002","genkit:dev":"genkit start -- tsx src/ai/dev.ts","genkit:watch":"genkit start -- tsx --watch src/ai/dev.ts","build":"tsup src/lib/index.ts --format cjs,esm --dts","start":"next start","lint":"next lint","typecheck":"tsc --noEmit"},"dependencies":{"@genkit-ai/googleai":"^1.14.1","@genkit-ai/next":"^1.14.1","@hookform/resolvers":"^4.1.3","@radix-ui/react-accordion":"^1.2.3","@radix-ui/react-alert-dialog":"^1.1.6","@radix-ui/react-avatar":"^1.1.3","@radix-ui/react-checkbox":"^1.1.4","@radix-ui/react-collapsible":"^1.1.11","@radix-ui/react-dialog":"^1.1.6","react-hook-form":"^7.54.2","@radix-ui/react-dropdown-menu":"^2.1.6","@radix-ui/react-label":"^2.1.2","@radix-ui/react-menubar":"^1.1.6","@radix-ui/react-popover":"^1.1.6","@radix-ui/react-progress":"^1.1.2","@radix-ui/react-radio-group":"^1.2.3","@radix-ui/react-scroll-area":"^1.2.3","@radix-ui/react-select":"^2.1.6","@radix-ui/react-separator":"^1.1.2","@radix-ui/react-slider":"^1.2.3","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-switch":"^1.1.3","@radix-ui/react-tabs":"^1.1.3","@radix-ui/react-toast":"^1.2.6","@radix-ui/react-tooltip":"^1.1.8","@tanstack/react-query":"^5.51.15","class-variance-authority":"^0.7.1","clsx":"^2.1.1","date-fns":"^3.6.0","dotenv":"^16.5.0","embla-carousel-react":"^8.6.0","ethers":"^6.13.1","firebase":"^10.12.2","form-data":"^4.0.0","genkit":"^1.14.1","lucide-react":"^0.475.0","next":"15.3.3","patch-package":"^8.0.0","react":"^18.3.1","react-day-picker":"^8.10.1","react-dom":"^18.3.1","recharts":"^2.15.1","tailwind-merge":"^3.0.1","tailwindcss-animate":"^1.0.7","wagmi":"^2.12.1","zod":"^3.24.2"},"devDependencies":{"@types/node":"^20","@types/react":"^18","@types/react-dom":"^18","genkit-cli":"^1.14.1","postcss":"^8","tailwindcss":"^3.4.1","typescript":"^5","tsup":"^8.2.3"},"_id":"@ashqking/web3-avatar-forge@0.1.0","gitHead":"c81445d72cc272299e1259fec9d9499231be2652","_nodeVersion":"20.19.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-GXyNXjRq28Gb+nqC70j8mdX8VbjeErRAAmt0ODRmjHVKhfGO+weUoRCaXiqrd58M47dZjamK0xtL+sM6rzhhrA==","shasum":"4df892ad6ee3389d9cf69da3fc4f7015fc9efe73","tarball":"https://registry.npmjs.org/@ashqking/web3-avatar-forge/-/web3-avatar-forge-0.1.0.tgz","fileCount":5,"unpackedSize":77491,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC4ru+uBo9M5XSIzAYzJ0VAFvuCmyhxGVZd1BwEcbaqlwIhAI+5rBlwEgfLO4DaoGbLXHBooNKolM+4OWXfWiu2KxrK"}]},"_npmUser":{"name":"ashqking","email":"asharamaan234@gmail.com"},"directories":{},"maintainers":[{"name":"ashqking","email":"asharamaan234@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web3-avatar-forge_0.1.0_1753516414302_0.5238238011177141"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-26T07:53:34.227Z","0.1.0":"2025-07-26T07:53:34.491Z","modified":"2025-07-26T07:53:34.746Z"},"maintainers":[{"name":"ashqking","email":"asharamaan234@gmail.com"}],"description":"A developer-friendly playground for trait-based SVG avatars, AI-powered suggestions, and simulated NFT minting.","keywords":["react","nextjs","web3","avatar","nft","genkit","ai"],"author":{"name":"Amaan Ahmad"},"license":"MIT","readme":"\n
\n \"Web3\n

Web3 Avatar Forge

\n

Create, customize, and mint your unique Web3 identity.

\n

A developer-friendly playground for trait-based SVG avatars, AI-powered suggestions, and simulated NFT minting.

\n
\n\n
\n \n \"License\"\n \n \n \"Issues\"\n \n \n \"PRs\n \n \n \"Stars\"\n \n
\n\n## ✨ Features\n\n- **🎨 Avatar Builder UI**: A clean, intuitive, and responsive interface for customizing avatars based on various traits.\n- **🤖 AI-Powered Suggestions**: Utilizes Genkit to connect to the Gemini API, providing creative avatar variations.\n- **🔗 Web3 Integration**: Seamless wallet connection using `wagmi`, supporting MetaMask and other wallets.\n- **💾 Simulated Decentralized Storage**: Includes a simulated flow to upload metadata to IPFS, preparing it for decentralized storage.\n- **🖼️ Simulated NFT Minting**: A complete, simulated end-to-end flow for minting the configured avatar as an ERC-721 NFT.\n- **🚀 Developer Playground**:\n - **Copy JSON**: Instantly copy the avatar's trait configuration as a JSON object.\n - **Copy JSX**: Copy a pre-formatted React `` component snippet to easily integrate the avatar.\n\n## 🛠️ Tech Stack\n\n
\n \"Next.js\"\n \"React\"\n \"Tailwind\n \"Firebase\"\n \"Genkit\"\n \"Wagmi\"\n
\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (v18 or later)\n- npm or yarn\n- A Web3 wallet (e.g., MetaMask) configured for the Sepolia testnet.\n\n### Installation & Setup\n\n1. **Clone the repository:**\n ```bash\n git clone https://github.com/iamaanahmad/web3-avatar-forge.git\n cd web3-avatar-forge\n ```\n\n2. **Install dependencies:**\n ```bash\n npm install\n ```\n\n3. **Run the development server:**\n ```bash\n npm run dev\n ```\n The application will be available at `http://localhost:9002`.\n\n4. **Run the Genkit development server (in a separate terminal):**\n This enables the AI suggestion functionality.\n ```bash\n npm run genkit:watch\n ```\n\n## 🧩 How to Integrate the Avatar into Your dApp\n\nOne of the key features of this project is the ability to easily reuse the generated avatars.\n\n### Using the \"Copy JSX\" Feature\n\n1. Customize your desired avatar in the **Web3 Avatar Forge** application.\n2. Click the **\"Copy JSX\"** button.\n3. This copies a React component snippet to your clipboard, which looks like this:\n ```jsx\n \n ```\n4. Paste this code into your React application. You will also need to copy over the `AvatarViewer` component and its dependencies (`/src/components/avatar-viewer.tsx`, `src/components/icons.tsx`, `/src/lib/constants.ts`, and `/src/lib/types.ts`).\n\n### Example: Profile Card\n\nHere's how you could use the copied JSX in a simple user profile card component:\n\n```jsx\n// YourProfilePage.jsx\nimport { AvatarViewer } from './path/to/AvatarViewer';\n\nconst UserProfileCard = ({ userAddress, avatarTraits }) => {\n return (\n
\n
\n {/* Paste the copied JSX here, using props */}\n \n
\n

{userAddress}

\n {/* ...other profile info */}\n
\n );\n};\n\nexport default UserProfileCard;\n```\n\n## 🤝 Contributing\n\nThis project is open-source and we welcome contributions! Whether you're a developer, designer, or just have ideas, feel free to get involved.\n\n- **Report Bugs**: If you find a bug, please [open an issue](https://github.com/iamaanahmad/web3-avatar-forge/issues).\n- **Suggest Features**: Have an idea for a new feature or improvement? [Open an issue](https://github.com/iamaanahmad/web3-avatar-forge/issues) to start a discussion.\n- **Submit Pull Requests**: We're happy to review and merge pull requests that improve the project.\n\n## ❤️ Contributors\n\nA huge thanks to all the people who have contributed to this project.\n\n\n \n\n","readmeFilename":"README.md","_rev":"1-84471a1a56babdbb2ec43afaa76c0ce1"}