Skip to content

Repository files navigation

⚡ GitHub Profile README Generator with AI

Next.js React TypeScript Tailwind CSS License

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.


🌟 Key Features

  • 📊 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.

🚀 Live Preview & Architecture

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

📡 API Endpoints

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.

🖼️ Embed Your Dynamic Stats Card

Once deployed, anyone can embed their dynamic SVG card into their GitHub profile README by adding this single markdown snippet:

![My GitHub Stats](https://your-domain.com/api/stats-card?username=yourusername)

Or using HTML for centered alignment:

<p align="center">
  <img src="https://your-domain.com/api/stats-card?username=yourusername" alt="GitHub Stats" />
</p>

🪙 Embed Your Stellar Developer Tip Badge

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
[![Tip via Stellar](https://img.shields.io/badge/Tip_with-Stellar-black?style=flat&logo=stellar&logoColor=white)](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.


🛠️ Getting Started & Local Setup

Prerequisites

  • Node.js 20.0.0 or higher
  • npm, pnpm, or yarn

1. Clone the Repository

git clone https://github.com/yourusername/github-readme-profile-generator-with-ai.git
cd github-readme-profile-generator-with-ai

2. Install Dependencies

npm install

3. Configure Environment Variables

Create a .env or .env.local file in the root directory:

cp .env.example .env

Add 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=GCSLS7RVBHXVGVVU4EUBI2J2EHPFE5R3ZKNN2NO26FMUX6FJTRG4EMTW

Note 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.

4. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser:

  • Visit / for the landing page.
  • Visit /builder to launch the profile generator studio.

5. Build for Production

npm run build
npm run start

🧪 Quality & Type Checking

To verify TypeScript and lint integrity:

# Type check with TypeScript compiler
npx tsc --noEmit

# Run Next.js linter
npm run lint

🤝 Contributing

Contributions, issues, and feature requests are welcome!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'feat: add some amazing feature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

Releases

Packages

Contributors

Languages