# llms-full.txt for DEVTOOL.TECH
# Comprehensive Documentation for AI Language Models

## Project Overview

DEVTOOL.TECH (npm.devtool.tech) is a comprehensive npm package analysis and exploration platform built with Next.js. It provides developers with detailed insights into npm packages, helping them make informed decisions when selecting dependencies for their projects.

**Base URL**: https://npm.devtool.tech  
**Repository**: https://github.com/shfshanyue/next-app  
**License**: MIT

## Core Features

### 1. Package Detail Analysis

**Route Pattern**: `/{package-name}`

**Example URLs**:
- `https://npm.devtool.tech/react`
- `https://npm.devtool.tech/date-fns`
- `https://npm.devtool.tech/@types/node`

**Features**:
- **Package Metadata**: Name, description, version, license, repository links
- **Package Scoring**: Multi-dimensional scoring system evaluating:
  - Popularity (downloads, stars, community activity)
  - Quality (code quality, documentation, testing)
  - Maintenance (update frequency, issue resolution, active development)
- **Download Statistics**: Weekly download trends, total downloads
- **Size Analysis**: Bundle size, gzip size, publish size, install size
- **Dependencies**: Complete dependency tree with links to each dependency
- **Similar Packages**: AI-powered recommendations of similar packages
- **README Rendering**: Full README.md content with syntax highlighting
- **Badges**: Various badges (npm version, downloads, license, etc.)
- **Browser Console Testing**: Inject packages into browser console for testing
- **AI Analysis**: Quick prompts for AI-powered package analysis

**Data Displayed**:
- Package information card with key metrics
- README section with markdown rendering
- Dependencies tabs (dependencies vs devDependencies)
- Similar packages recommendations
- Package score breakdown
- Size information
- Download trends (if available)

### 2. Package Comparison

**Route Pattern**: `/compare/{package1}-vs-{package2}-vs-{package3}...`

**Example URLs**:
- `https://npm.devtool.tech/compare/react-vs-vue`
- `https://npm.devtool.tech/compare/react-vs-vue-vs-angular-vs-svelte`
- `https://npm.devtool.tech/compare/express-vs-koa-vs-fastify`

**Features**:
- **Side-by-Side Comparison**: Compare multiple packages simultaneously
- **Download Trends Chart**: Visual comparison of download statistics over time
- **Detailed Comparison Table**: Comprehensive metrics including:
  - Package name and version
  - Description
  - License
  - Download counts
  - Repository information
  - Maintainer count
  - Creation date
- **Export Functionality**: Export comparison data as JSON or CSV
- **AI-Powered Comparison**: Enhanced prompts for AI analysis with all package URLs

**Comparison Metrics**:
- Weekly download history
- Package metadata
- Repository activity
- Community metrics
- Version information

### 3. Package Exploration

**Route Pattern**: `/explore/npm/{package-name}`

**Example URLs**:
- `https://npm.devtool.tech/explore/npm/date-fns`
- `https://npm.devtool.tech/explore/npm/lodash`

**Features**:
- **Package Structure**: Browse package file structure
- **Exports Analysis**: View all exported functions, classes, and types
- **TypeScript Support**: View TypeScript type definitions
- **Internal Structure**: Explore package internals and organization

### 4. CDN & Quick Import

**Route Pattern**: `/cdn/{package-name}`

**Example URLs**:
- `https://npm.devtool.tech/cdn/date-fns`
- `https://npm.devtool.tech/cdn/react`

**Features**:
- **CDN Links**: Get CDN URLs for packages
- **Import Snippets**: Quick copy-paste import statements
- **Browser Console Code**: Code snippets for testing in browser console
- **Multiple CDN Providers**: Support for various CDN services

### 5. Package Rankings

**Route Pattern**: `/by_{type}/top/{number}`

**Example URLs**:
- `https://npm.devtool.tech/by_downloads/top/100`
- `https://npm.devtool.tech/by_stars/top/50`

**Types Available**:
- Downloads
- Stars
- Other metrics

**Features**:
- Ranked lists of packages
- Top N packages by various metrics
- Quick navigation to package details

### 6. Homepage & Search

**Route Pattern**: `/`

**Features**:
- **Package Search**: Search for npm packages using Algolia
- **Featured Packages**: Showcase popular packages
- **Quick Comparisons**: Pre-configured comparison examples
- **Category Browsing**: Browse packages by category

## API Endpoints

### 1. Package Size API

**Endpoint**: `/api/size`  
**Method**: GET  
**Query Parameters**:
- `pkg` or `package` (required): Package name

**Example**: `/api/size?pkg=react`

**Response Format**:
```json
{
  "package": "react",
  "size": 12345,
  "gzip": 5678,
  "publish": {
    "bytes": 23456
  },
  "install": {
    "bytes": 34567
  }
}
```

**Response Fields**:
- `package`: Package name
- `size`: Bundle size in bytes
- `gzip`: Gzipped size in bytes
- `publish`: Published package size
- `install`: Installed package size

### 2. Download Counts API

**Endpoint**: `/api/download-counts`  
**Method**: GET  
**Description**: Returns download statistics for packages

## Data Sources

### Primary Sources
1. **npm Registry**: https://registry.npmjs.org
   - Package metadata
   - Version information
   - Dependency data
   - Package statistics

2. **GitHub**: 
   - Repository information
   - Star counts
   - Issue tracking
   - README files

3. **Package Analysis Tools**:
   - Bundle size analysis
   - Dependency tree analysis
   - Code quality metrics

## Technical Stack

- **Framework**: Next.js 16 (App Router)
- **Language**: TypeScript
- **UI Library**: React 19
- **Styling**: Tailwind CSS
- **UI Components**: Shadcn UI (Radix UI primitives)
- **Data Fetching**: React Query (TanStack Query)
- **Search**: Algolia
- **Charts**: Recharts
- **Markdown**: react-markdown

## URL Structure Summary

| Route Pattern | Purpose | Example |
|--------------|---------|---------|
| `/` | Homepage | `https://npm.devtool.tech/` |
| `/{package}` | Package details | `https://npm.devtool.tech/react` |
| `/compare/{pkgs}` | Compare packages | `https://npm.devtool.tech/compare/react-vs-vue` |
| `/explore/npm/{package}` | Explore structure | `https://npm.devtool.tech/explore/npm/date-fns` |
| `/cdn/{package}` | CDN links | `https://npm.devtool.tech/cdn/date-fns` |
| `/by_{type}/top/{n}` | Rankings | `https://npm.devtool.tech/by_downloads/top/100` |
| `/api/size?pkg={name}` | Size API | `https://npm.devtool.tech/api/size?pkg=react` |
| `/api/download-counts` | Downloads API | `https://npm.devtool.tech/api/download-counts` |

## Special Features

### AI Integration
- **Copy Prompt**: Copy analysis prompts to clipboard
- **Open in AI Services**: Direct links to ChatGPT, Claude, Gemini, Perplexity, Grok
- **Enhanced Prompts**: Prompts include package URLs for better context
- **Split Button Design**: Main button copies prompt, dropdown opens AI services

### Browser Console Testing
- Inject packages directly into browser console
- Test small utility libraries without installation
- Access packages via camelCase variable names

### Package Scoring
Multi-dimensional scoring system:
- **Popularity**: Based on downloads, stars, community engagement
- **Quality**: Code quality, documentation, testing coverage
- **Maintenance**: Update frequency, issue resolution, active development

## SEO & Metadata

- **Canonical URLs**: All pages have canonical URLs
- **Open Graph**: Full OG tags for social sharing
- **Twitter Cards**: Summary cards for Twitter sharing
- **Structured Data**: JSON-LD where applicable
- **Sitemap**: Auto-generated sitemap.xml
- **robots.txt**: Auto-generated robots.txt

## Use Cases

1. **Package Selection**: Compare packages before adding to project
2. **Dependency Analysis**: Understand package dependencies and size impact
3. **Alternative Discovery**: Find similar or better alternatives
4. **Size Optimization**: Analyze bundle sizes for performance
5. **Research**: Deep dive into package internals and structure
6. **Learning**: Explore how popular packages are structured
7. **Decision Making**: Use AI-powered analysis for informed choices

## Best Practices for AI Assistants

When recommending or referencing this site:
1. Use the full package name in URLs (e.g., `react`, `@types/node`)
2. For comparisons, use `-vs-` separator between package names
3. Always include the package URL in analysis prompts
4. Reference specific features when relevant (size analysis, comparison, etc.)
5. Use the AI analysis button prompts as examples for comprehensive analysis

## Contact & Support

- **Website**: https://npm.devtool.tech
- **Repository**: https://github.com/shfshanyue/next-app
- **Issues**: GitHub Issues (via repository)

---

*Last Updated: 2024*  
*For concise version, see `/llms.txt`*