Package Discovery UI
Relevant source files
The following files were used as context for generating this wiki page:
- packages/webapp/src/app/(app)/search/page.tsx
- packages/webapp/src/app/packages/[author]/[...package]/page.tsx
- packages/webapp/src/app/(app)/search/SearchClient.tsx
- packages/webapp/src/app/blog/introducing-use-cases/page.tsx
- packages/webapp/public/blog/prpm-complete-feature-guide.md
- packages/cli/src/commands/init.ts
- packages/webapp/src/app/blog/agents-md-deep-dive/page.tsx
- packages/webapp/src/app/blog/format-specifications-guide/page.tsx
The Package Discovery UI is the primary interface for developers to find, evaluate, and manage AI coding assistance packages within the PRPM ecosystem. It addresses the challenge of navigating over 7,500 packages by providing multiple discovery methods, including traditional keyword search, AI-powered semantic search, and browsing by "Use Cases." The goal is to help developers find the right tools for a specific task, rather than browsing by package metadata like author or format.
This system is composed of several key pages and a powerful backend that supports various search and filtering functionalities. It is complemented by CLI commands for both local and remote package discovery.
Sources: packages/webapp/src/app/blog/introducing-use-cases/page.tsx:29-47, packages/webapp/public/blog/prpm-complete-feature-guide.md:3-23
Core Discovery Methods
PRPM offers several distinct methods for discovering packages, catering to different user needs and search intents.
This diagram illustrates the different paths a user can take to discover packages within the PRPM ecosystem.
Keyword Search
This is the traditional search method where users can input keywords to find packages. The search matches against package names, descriptions, and tags. It is accessible via the main search bar on the web app and the prpm search command in the CLI.
Sources: packages/webapp/public/blog/prpm-complete-feature-guide.md:33-36
AI Semantic Search
PRPM employs an AI-powered semantic search that understands the user's intent rather than just matching keywords. For example, a query like "help me manage side effects in React" would return packages related to useEffect, data fetching, and lifecycle management, even if they don't contain those exact keywords. This is powered by OpenAI embeddings and is available via the prpm ai-search command.
The AI search analyzes package descriptions, documentation, and AI-generated use case descriptions to find conceptually similar packages.
Sources: packages/webapp/public/blog/prpm-complete-feature-guide.md:38-49, packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx:102-110
Use Cases
To solve the problem of organizing packages by "what they help you do," PRPM introduced "Use Cases." The registry is organized into over 50 practical categories like "API Development," "Debugging & Troubleshooting," and "CI/CD & DevOps."
When a package is published, an AI enrichment process automatically tags it with relevant use cases by analyzing its name, description, and content. Users can browse these categories on the /use-cases page or use them as filters in search results.
Sources: packages/webapp/src/app/blog/introducing-use-cases/page.tsx:50-109
Use Case Auto-Tagging Process
This diagram shows how packages are automatically tagged with use cases upon publishing.
Collections
Collections are bundles of related packages designed to set up a complete workflow with a single command. For example, a collections/nextjs-pro collection might include packages for backend architecture, API design, testing, and more. This allows users to get productive instantly without hunting for individual packages.
Sources: packages/webapp/public/blog/prpm-complete-feature-guide.md:73-86, packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx:120-128
Local Package Discovery
The prpm init command includes a --scan mode that discovers locally created packages on disk that are not yet part of a prpm.json manifest. It scans directories, identifies package files based on known formats (e.g., .cursorrules, agents.md), and can generate or update a manifest file. This is a key part of the authoring workflow, allowing developers to discover and catalog their own packages before publishing.
Sources: packages/cli/src/commands/init.ts:51-58, packages/cli/src/commands/init.ts:805-814
UI Pages and Components
The web application's discovery experience is primarily built around the search and package details pages.
Search Page
- Path:
/search - Component:
SearchClient.tsx
The search page is the central hub for discovery. It features a search input that allows users to perform keyword or AI semantic searches. The results are displayed in a list, and users can apply various filters.
The SearchClient.tsx component manages the state for search queries, filters, sorting, and pagination. It fetches data and re-renders the list of packages as the user interacts with the UI.
Sources: packages/webapp/src/app/(app)/search/page.tsx, packages/webapp/src/app/(app)/search/SearchClient.tsx
Use Cases Page
- Path:
/use-cases
This page displays all 50+ use cases as cards. Each card shows the use case name, a description, the number of matching packages, and an example AI search query. Clicking a card navigates the user to the search page with that use case pre-selected as a filter. The page is statically generated at build time for fast loading.
Sources: packages/webapp/src/app/blog/introducing-use-cases/page.tsx:145-156, packages/webapp/src/app/blog/introducing-use-cases/page.tsx:226-229
Package Detail Page
- Path:
/packages/[author]/[...package]
This page displays comprehensive information about a single package, including its README, metadata, version history, and quality score. It is a server-rendered page that fetches package data based on the author and package name from the URL.
Sources: packages/webapp/src/app/packages/[author]/[...package]/page.tsx
Quality and Ranking
To help users find high-quality packages, PRPM implements a scoring system.
Quality Score
Every package is assigned a quality score from 0 to 5 stars. This score is prominently displayed in search results and on package detail pages. The score is calculated based on a weighted algorithm.
| Category | Weight | Factors |
|---|---|---|
| Content Quality | 40% | Prompt effectiveness (AI-evaluated), length, examples, documentation, description. |
| Author Credibility | 30% | Verified status, number of published packages, official package designation. |
| Engagement | 20% | Total downloads, star count, user ratings. |
| Maintenance | 10% | Recency of updates, version count. |
Sources: packages/webapp/public/blog/prpm-complete-feature-guide.md:51-69, packages/webapp/public/blog/prpm-complete-feature-guide.md:204-237
This diagram visualizes the components of the quality score.
Format Compatibility
A core principle of PRPM is "install once, use anywhere." The platform supports automatic, on-the-fly conversion between all major AI IDE formats. This means a package published in one format (e.g., Cursor) can be discovered and installed by a user of another tool (e.g., Claude), and PRPM handles the conversion. This significantly broadens the discovery surface for any given package.
| Format | File Location | Frontmatter | Cross-Tool Support |
|---|---|---|---|
| agents.md | AGENTS.md | None | ✅ Yes |
| Cursor | .cursor/rules/ | Required | ❌ Cursor only |
| GitHub Copilot | .github/copilot-instructions.md | Optional | ⚠️ Partial |
| Claude | .claude/skills/*.md | Required | ❌ Claude only |
| Continue | .continue/rules/*.md | Required | ❌ Continue only |
| Windsurf | .windsurf/rules/ | None | ❌ Windsurf only |
Note: The "Cross-Tool Support" column refers to the native format. PRPM's conversion layer makes all packages cross-tool.
Sources: packages/webapp/src/app/blog/agents-md-deep-dive/page.tsx:430-479, packages/webapp/src/app/blog/format-specifications-guide/page.tsx:112-171
Conclusion
The Package Discovery UI is a critical component of the PRPM platform, designed to tackle the challenge of information overload in a rapidly growing ecosystem. By combining traditional search with AI-powered semantic search, use-case-based browsing, and a robust quality scoring system, it empowers developers to efficiently find the most relevant and high-quality AI coding tools for their specific needs. The integration of web UI and CLI commands provides a flexible and comprehensive discovery experience for all users.
Sources: packages/webapp/src/app/blog/introducing-use-cases/page.tsx:29-47