{"id":26950636,"url":"https://github.com/zkhan93/react-docai","last_synced_at":"2026-04-19T05:34:55.539Z","repository":{"id":283494478,"uuid":"951922185","full_name":"zkhan93/react-docai","owner":"zkhan93","description":"A tool to generate JSDoc documentation for React components using OpenAI","archived":false,"fork":false,"pushed_at":"2025-03-20T16:11:54.000Z","size":27,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-22T04:23:28.875Z","etag":null,"topics":["documentation","documentation-generator","npm-package","openai","openai-api","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zkhan93.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-20T13:03:07.000Z","updated_at":"2025-06-14T21:50:27.000Z","dependencies_parsed_at":"2025-03-21T15:02:44.488Z","dependency_job_id":null,"html_url":"https://github.com/zkhan93/react-docai","commit_stats":null,"previous_names":["zkhan93/react-doc-gen","zkhan93/react-docai"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zkhan93/react-docai","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkhan93%2Freact-docai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkhan93%2Freact-docai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkhan93%2Freact-docai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkhan93%2Freact-docai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkhan93","download_url":"https://codeload.github.com/zkhan93/react-docai/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkhan93%2Freact-docai/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31996445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","documentation-generator","npm-package","openai","openai-api","reactjs"],"created_at":"2025-04-02T23:31:10.669Z","updated_at":"2026-04-19T05:34:55.519Z","avatar_url":"https://github.com/zkhan93.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Component Documenter\n\nA powerful Node.js tool that extracts React components from your project and generates comprehensive JSDoc documentation using OpenAI. The tool is specifically designed to handle complex projects with multiple components per file and existing documentation.\n\n## Key Features\n\n- **File-by-file processing** to maintain accurate component positions\n- **Position tracking** that adjusts for documentation inserts/updates\n- **AI-powered documentation** that analyzes component code structure\n- **Handles multiple components per file** correctly\n- **Detects and updates existing documentation** when requested\n- **Concurrent processing** for faster documentation generation\n- **Smart batching** to respect OpenAI API rate limits\n\n## Installation\n\n1. Clone this repository\n2. Install the required dependencies:\n\n```bash\nnpm install\n```\n\n3. Set up your OpenAI API key (recommended for best results):\n\n```bash\nexport OPENAI_API_KEY=your-api-key-here\n```\n\n## Usage\n\nRun the tool on your React project:\n\n```bash\nnpm run start -- /path/to/your/project\n```\n\nThe tool will:\n1. Scan your project for React components\n2. Generate appropriate JSDoc documentation for each component\n3. Update source files with the documentation, properly maintaining component positions\n\n## Command Line Options\n\n```\nOptions:\n  --output, -o          Output directory for extracted components\n                                             [default: \"extracted_components\"]\n  --verbose, -v         Enable verbose logging      [boolean] [default: false]\n  --openai-key, -k      OpenAI API Key (or set OPENAI_API_KEY environment variable)\n  --openai-model, -m    OpenAI model to use for documentation generation\n                                      [string] [default: \"gpt-3.5-turbo\"]\n  --rate-limit, -r      Maximum number of OpenAI API requests per minute\n                                                          [number] [default: 10]\n  --dry-run, -d         Generate docstrings but don't write to files\n                                                     [boolean] [default: false]\n  --skip-existing, -s   Skip components with existing comments\n                                                     [boolean] [default: false]\n  --update-existing, -u Update existing component comments\n                                                     [boolean] [default: false]\n  --batch-size, -b      Number of components to process concurrently\n                                                           [number] [default: 5]\n  --help, -h            Show help                                   [boolean]\n```\n\n## Advanced Usage Examples\n\n### Dry Run Mode\n\nPreview documentation without modifying files:\n\n```bash\nnpm run start -- /path/to/your/project --dry-run\n```\n\n### Update Existing Documentation\n\nReplace existing JSDoc comments:\n\n```bash\nnpm run start -- /path/to/your/project --update-existing\n```\n\n### Skip Components with Existing Documentation\n\nOnly document components that don't already have JSDoc comments:\n\n```bash\nnpm run start -- /path/to/your/project --skip-existing\n```\n\n### Control Batch Size\n\nAdjust the number of components processed concurrently:\n\n```bash\nnpm run start -- /path/to/your/project --batch-size 10\n```\n\n### Limit API Requests\n\nFor stricter API limits:\n\n```bash\nnpm run start -- /path/to/your/project --rate-limit 5\n```\n\n## How It Works\n\n1. **Component Extraction**\n   - Parses JavaScript/TypeScript files with Babel\n   - Identifies React components (function, class, arrow function, styled)\n   - Detects existing documentation blocks\n   - Records exact position of each component in source files\n\n2. **Documentation Generation**\n   - Groups components by file\n   - Processes components in concurrent batches\n   - Uses OpenAI to analyze component structure\n   - Generates comprehensive JSDoc comments with prop types\n\n3. **File Updating**\n   - Processes files in order, one at a time\n   - For each file, sorts components by position\n   - Updates components from bottom to top to maintain positions\n   - Tracks position adjustments after each insert/update\n   - Updates or inserts documentation as specified\n\n## Example Generated Documentation\n\n```jsx\n/**\n * ProductCard Component\n * \n * @description Displays a product with its image, title, price, and rating\n * \n * @component FunctionComponent\n * @param {Object} props - Component properties\n * @param {Object} props.product - Product information\n * @param {string} props.product.id - Unique identifier for the product\n * @param {string} props.product.title - Product title\n * @param {number} props.product.price - Product price\n * @param {string} props.product.image - URL to product image\n * @param {number} props.product.rating - Product rating (1-5)\n * @param {Function} props.onAddToCart - Callback when Add to Cart is clicked\n * @param {boolean} [props.featured=false] - Whether to show as featured product\n * \n * @returns {React.ReactElement} A card displaying the product information\n * \n * @example\n * \u003cProductCard \n *   product={{\n *     id: \"1\",\n *     title: \"Smartphone\",\n *     price: 699,\n *     image: \"/images/smartphone.jpg\",\n *     rating: 4.5\n *   }}\n *   onAddToCart={() =\u003e handleAddToCart(\"1\")}\n *   featured={true}\n * /\u003e\n */\nfunction ProductCard({ product, onAddToCart, featured = false }) {\n  // Component implementation...\n}\n```\n\n## Dependencies\n\n- @babel/parser - For parsing JavaScript/TypeScript files\n- @babel/traverse - For traversing the AST to find components\n- @babel/types - For type checking in AST nodes\n- minimatch - For .gitignore pattern matching\n- openai - For AI-powered documentation generation\n- yargs - For command-line argument parsing\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkhan93%2Freact-docai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkhan93%2Freact-docai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkhan93%2Freact-docai/lists"}