AI Prompt Playground
Relevant source files
The following files were used as context for generating this wiki page:- packages/webapp/src/app/(app)/playground/page.tsx
- packages/webapp/src/components/playground/PlaygroundInterface.tsx
- packages/registry/src/routes/playground.ts
- packages/registry/src/services/playground.ts
- packages/webapp/public/blog/prpm-complete-feature-guide.md
- packages/cli/src/commands/init.ts
- packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx
The AI Prompt Playground is a core feature of the PRPM platform that allows users to test any package from the registry with real AI models before installing it. This reduces the friction of finding the right package by enabling users to evaluate a prompt's effectiveness for their specific use case. The Playground is accessible via both a web interface and the PRPM command-line interface (CLI).
The primary goal is to help users make informed decisions, compare the performance of different packages and models, and allow package authors to test their prompts. It supports various models like Claude Sonnet, GPT-4, and Gemini Pro, and includes features for model comparison and custom prompt testing for verified authors.
Sources: packages/webapp/public/blog/prpm-complete-feature-guide.md, packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx:115-121
Architecture Overview
The Playground's architecture spans the frontend (webapp and CLI), the backend (registry), and external AI model providers. A user interaction triggers a request to the PRPM registry, which then orchestrates the prompt execution with an external AI service and returns the result.
The following diagram illustrates the end-to-end sequence for a playground run.
Core Features
The Playground offers several key features for both package consumers and authors.
| Feature | Description | Source |
|---|---|---|
| Package Testing | Test any of the 7,500+ packages in the registry with a custom input to see how the AI responds. | packages/webapp/public/blog/prpm-complete-feature-guide.md |
| Model Comparison | Run the same prompt with the same package against multiple AI models (e.g., Claude, GPT-4) side-by-side to compare outputs and find the best model for a task. | packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx:123-134 |
| Custom Prompt Testing | Verified authors can test their own unpublished prompts in the playground to iterate and refine them before publishing. | packages/webapp/public/blog/prpm-complete-feature-guide.md |
| Baseline Comparison | Compare the output of a prompt with a package versus without one to see the value the package adds. | packages/webapp/public/blog/prpm-complete-feature-guide.md |
Access & Credit System
Playground usage is managed through a credit system. Credits are used to pay for the underlying API costs from AI providers like OpenAI and Anthropic.
| User Type | Credits | Rollover | Source |
|---|---|---|---|
| Anonymous | 1 free run | N/A | packages/webapp/public/blog/prpm-complete-feature-guide.md |
| Signed-up User | 5 free credits on signup | N/A | packages/webapp/public/blog/prpm-complete-feature-guide.md |
| PRPM+ User | 100 credits per month | Up to 200 credits | packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx:115-121 |
Frontend Implementation
The web-based playground is built with Next.js and React.
packages/webapp/src/app/(app)/playground/page.tsx: This is the main page component for the playground. It's responsible for rendering the primary interface and handling initial data loading, such as pre-filling a package from URL query parameters.packages/webapp/src/components/playground/PlaygroundInterface.tsx: This is the core UI component that contains the interactive elements. It manages the state for the user's input, the selected package, the chosen AI model, and the conversation history. This component is responsible for making the API call to the backend when a user submits a prompt.
Sources: packages/webapp/src/app/(app)/playground/page.tsx, packages/webapp/src/components/playground/PlaygroundInterface.tsx
Backend Implementation
The backend logic is handled by the registry package, which exposes a dedicated API endpoint for running playground sessions.
API Endpoint
The playground functionality is exposed via a single API endpoint.
- Endpoint:
POST /api/playground/run - Description: Executes a playground session. It takes user input, an optional package, and a model, then returns the AI's completion.
- Source:
packages/registry/src/routes/playground.ts:20-22
The request body is validated against the playgroundRunSchema.
| Parameter | Type | Optional | Description |
|---|---|---|---|
packageId | string | Yes | The ID of the PRPM package to test. |
customPrompt | string | Yes | A custom, unpublished prompt to test (for authors). |
userInput | string | No | The user's input/question for the AI. |
model | string | No | The AI model to use (e.g., 'claude-sonnet', 'gpt-4o'). |
systemPrompt | string | Yes | A custom system prompt to override the default. |
Sources: packages/registry/src/routes/playground.ts:8-18
Service Logic
The core logic resides in the runPlaygroundSession function within the playground service.
The following diagram shows the logical flow within the service.
CLI Integration
The playground can be invoked directly from the command line, providing a convenient way for developers to test packages without leaving their terminal.
- Command:
prpm playground
Options
| Flag | Description | Example |
|---|---|---|
--package <id> | Specifies the package to test. | prpm playground --package @sanjeed5/react-best-practices |
--compare | Enables model comparison mode, allowing the same prompt to be run on multiple models. | prpm playground --package @vendor/pkg --compare |
--custom-prompt <prompt> | Allows verified authors to test a custom system prompt. | prpm playground --custom-prompt "You are a helpful assistant..." |
Sources: packages/webapp/src/app/blog/prpm-complete-feature-guide/page.tsx:115-149, packages/cli/src/commands/init.ts:1003
Conclusion
The AI Prompt Playground is an essential part of the PRPM ecosystem, designed to enhance package discovery and quality assurance. By allowing users to test prompts with real AI models before installation, it lowers the barrier to adoption and helps developers find the best tools for their needs. For authors, it provides a powerful way to test and showcase their packages. The integration across web, CLI, and a robust backend service makes it a flexible and integral feature of the platform.