Level up your developer presence in seconds.
A modern full-stack application that generates high-impact GitHub profile README.md files featuring real-time GraphQL metrics, auto-updating SVG stats cards, and AI-crafted developer bios tailored to your actual code.
- 📊 Real-Time GitHub GraphQL Analytics: Directly queries GitHub's GraphQL API to compute live total contributions, uninterrupted daily commit streaks, total stars across public repos, follower counts, and language byte percentages.
- 🎨 Server-Rendered Dynamic SVG Stats Card: Generates a sleek, GitHub-dark-themed (
#0d1117) SVG badge via/api/stats-card. Automatically updates on your profile whenever anyone visits—no external caching services required. - ✨ AI-Powered "About Me" Generator: Crafts engaging, tailored profile bios powered by Claude Opus. Includes tone presets (Professional, Casual, Technical, Creative) and 1-click stack auto-fill based on your top GitHub languages.
- 🎛️ Live Split-View Builder Studio: Interactive configuration studio with instant markdown preview, metric toggles, and 1-click clipboard copy.
- 🔄 Display Mode Flexibility: Switch seamlessly between Dynamic SVG Card, Markdown Bullets, or Both (Card + Bullets) in your generated README.
- 🪙 Native Stellar XLM Tipping (Drips Wave): Built-in support for donor tipping via Freighter wallet and Stellar Horizon (Testnet & Public Net). Supporters can send instant, low-fee XLM micro-donations with on-chain verification.
- 🦊 Stellar Developer Tip Badge: Profile READMEs can include an official Stellar Tip Badge linked to Stellar Expert, with 1-click Freighter wallet auto-fill or manual G-address configuration.
- ⚡ Zero-Dependency System Fonts: Built to compile reliably with zero external font download dependencies.
src/
├── app/
│ ├── api/
│ │ ├── generate-bio/route.ts # AI bio generation via AgentRouter (Claude Opus)
│ │ ├── github-stats/route.ts # JSON endpoint returning calculated profile stats
│ │ └── stats-card/route.ts # Dynamic SVG card renderer for profile embedding
│ ├── builder/
│ │ └── page.tsx # Studio with split editor, AI modal & live preview
│ ├── globals.css # GitHub dark mode design tokens & font definitions
│ ├── layout.tsx # Root layout with dark theme & SEO metadata
│ └── page.tsx # High-converting developer landing page
├── components/
│ └── StellarDonateModal.tsx # Reusable Stellar XLM tipping modal (Freighter + Horizon)
└── lib/
└── github-stats.ts # Shared GraphQL query, calculations & streak logic
| Endpoint | Method | Query / Payload | Description |
|---|---|---|---|
/api/stats-card |
GET |
?username=<login> |
Returns a server-rendered SVG image showing developer metrics and a segmented top-languages progress bar. Embeddable directly via <img> tags. |
/api/github-stats |
GET |
?username=<login> |
Returns raw JSON data containing user metadata, stars, contributions, current streak, and top 5 languages with byte shares and hex colors. |
/api/generate-bio |
POST |
{ name, role, interests?, tone?, extra? } |
Calls the AI completion service to generate a concise, personalized "About Me" prose bio. |
Once deployed, anyone can embed their dynamic SVG card into their GitHub profile README by adding this single markdown snippet:
Or using HTML for centered alignment:
<p align="center">
<img src="https://your-domain.com/api/stats-card?username=yourusername" alt="GitHub Stats" />
</p>Let visitors and sponsors tip you directly in native Stellar XLM. When enabled in the builder, this section is added to your README:
### 🪙 Support My Work via Stellar
[](https://stellar.expert/explorer/public/account/YOUR_STELLAR_ADDRESS)
`Stellar Address:` `YOUR_STELLAR_ADDRESS`Supporters can click the badge to verify your account on Stellar Expert Explorer or send you instant on-chain tips.
- Node.js 20.0.0 or higher
npm,pnpm, oryarn
git clone https://github.com/yourusername/github-readme-profile-generator-with-ai.git
cd github-readme-profile-generator-with-ainpm installCreate a .env or .env.local file in the root directory:
cp .env.example .envAdd your credentials:
# GitHub Personal Access Token (classic with `read:user` or fine-grained public access)
GITHUB_TOKEN=ghp_yourPersonalAccessTokenHere
# AgentRouter / AI API Key (required for /api/generate-bio)
AGENTROUTER_API_KEY=your_agentrouter_api_key_here
# Base URL for markdown card generation (optional for dev, defaults to window.location.origin)
NEXT_PUBLIC_APP_URL=http://localhost:3000
# Stellar Recipient Public Key for XLM Donations (Ed25519 G-address)
NEXT_PUBLIC_STELLAR_RECIPIENT_ADDRESS=GCSLS7RVBHXVGVVU4EUBI2J2EHPFE5R3ZKNN2NO26FMUX6FJTRG4EMTWNote on
GITHUB_TOKEN: A standard personal access token is required by GitHub's GraphQL API. Create one at GitHub Developer Settings with public read permissions.
npm run devOpen http://localhost:3000 in your browser:
- Visit
/for the landing page. - Visit
/builderto launch the profile generator studio.
npm run build
npm run startTo verify TypeScript and lint integrity:
# Type check with TypeScript compiler
npx tsc --noEmit
# Run Next.js linter
npm run lintContributions, issues, and feature requests are welcome!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'feat: add some amazing feature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.