Graphite:Git

A secure, local-first GitHub client with an integrated AI engineering agent. Manage repositories, edit code, and interact with your entire GitHub presence from a single, sophisticated interface.

View Application Screenshots

---

Overview

Graphite:Git is a high-performance, browser-based GitHub management tool designed for developers who demand security, efficiency, and advanced capabilities. It operates entirely on the client side, meaning your GitHub token and API keys never leave your browser.

From a feature-rich dashboard and a complete in-browser IDE to an AI agent that can read, write, and refactor your code, Graphite provides a comprehensive toolkit for modern software development.

Core Features

• Secure & Local-First: Your GitHub token is stored exclusively in localStorage. All API communication happens directly between your browser and GitHub/Google. No intermediary servers, no tracking.
• Integrated AI Agent: Leverage the power of Google's Gemini models to interact with your code. The agent can list files, read content, create new files, or apply targeted refactors, all with your explicit approval for every action.
• Full-Featured Code Editor: Browse repository file structures, view images, and edit code with syntax highlighting directly in the browser. Preview Markdown and sandboxed HTML files instantly.
• Comprehensive Management:
  • Dashboard: Visualize your contribution history with multiple themes, track key statistics, and analyze your language distribution.
  • Repository Manager: Search, filter, edit metadata, and manage all your repositories.
  • Profile Editor: Update your GitHub profile with a live preview.
  • Gist Manager: Create, edit, and delete public or secret gists with a multi-file editor.
• Productivity Tools:
  • Focus Board: A unified inbox for all issues and pull requests where you are assigned or mentioned.
  • Workflow Monitor: View and manually trigger GitHub Actions workflows across your repositories.
  • Network Manager: Audit your followers/following list to find non-reciprocal follows and protect important contacts with a "Safety Net" whitelist.

Technology Stack

Graphite is built with a modern, performant, and type-safe technology stack:

• Frontend: React 18, TypeScript, Vite
• API Interaction: Direct integration with GitHub REST/GraphQL APIs and Google GenAI API.
• State Management: React Context API for global state.
• Styling: Tailwind CSS with a custom design system.
• Core Dependencies: @google/genai, react-syntax-highlighter, lucide-react, react-markdown.

Getting Started

Prerequisites

• Node.js (version 18.0.0 or higher recommended)
• A package manager like npm or yarn

Installation & Setup

1. Clone the Repository

   git clone https://github.com/dovvnloading/graphite-git.git
   cd graphite-git

2. Install Dependencies

   npm install

3. Configure API Keys Graphite requires two keys to function:

   • GitHub Personal Access Token:

     • Generate a token here.
     • Required scopes: repo, user, gist, notifications, workflow, delete_repo.
     • This token will be entered directly into the application's login screen (TokenGate) and stored in your browser's localStorage. It is not committed to the repository.

   • Google Gemini API Key:

     • Obtain a key from Google AI Studio.
     • After logging into the app, navigate to Settings > Intelligence Engine and enter your Gemini API key. This is also stored securely in localStorage.

4. Run the Development Server

   npm run dev

   The application will be available at http://localhost:5173 (or the next available port).

Architectural Overview

The application is architected with a strong separation of concerns:

• src/services: Contains githubService.ts and geminiService.ts. These classes encapsulate all logic for communicating with external APIs, providing a clean, reusable interface for the rest of the application.
• src/components: Houses all React components. This includes both high-level "view" components (like Dashboard.tsx, RepoManager.tsx) and the core AgentProvider.tsx, which manages all AI-related state via React Context.
• src/types.ts: A central file defining all TypeScript interfaces for GitHub API objects and internal application state, ensuring type safety and code clarity throughout the project.

License

This project is licensed under the MIT License. See the LICENSE file for details.