Prompt Browser

A React-based web application for browsing, searching, and copying AI prompts, similar to ray.so/prompts/browser.

Features

Browse Prompts: View a curated collection of AI prompts across different categories
Search Functionality: Search prompts by title, description, or content
Category Filtering: Filter prompts by category (coding, writing, business, etc.)
One-Click Copy: Copy prompts to clipboard with visual feedback
Responsive Design: Works seamlessly on desktop and mobile devices
Clean UI: Modern, card-based interface with Tailwind CSS

Project Structure

├── backend/
│   └── index.ts              # Hono server for serving static files
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # React app entry point
│   └── components/
│       ├── App.tsx          # Main app component
│       ├── PromptCard.tsx   # Individual prompt card
│       ├── SearchBar.tsx    # Search input component
│       └── CategoryFilter.tsx # Category dropdown filter
├── shared/
│   ├── types.ts             # TypeScript interfaces
│   └── prompts.ts           # Sample prompt data
└── README.md

Prompt Categories

Coding: Code review, debugging, API documentation
Writing: Creative writing, content creation
Business: Strategy analysis, email templates, personal branding
Analysis: Data interpretation, problem-solving frameworks
Education: Learning path creation, skill development
Creative: Creative prompts and ideation
Productivity: Meeting agendas, workflow optimization

Usage

Browse the collection of prompts in the main grid
Use the search bar to find specific prompts
Filter by category using the dropdown
Click "Copy" on any prompt card to copy it to your clipboard
Paste the prompt into your AI tool of choice

Technical Details

Built with React 18.2.0 and TypeScript
Styled with Tailwind CSS via Twind
Served using Hono framework
Clipboard API for copy functionality
Responsive grid layout

Adding New Prompts

To add new prompts, edit /shared/prompts.ts and add new prompt objects following the Prompt interface defined in /shared/types.ts.

Each prompt should include:

id: Unique identifier
title: Short, descriptive title
description: Brief explanation of the prompt's purpose
content: The actual prompt text
category: Category for filtering
author: Prompt creator
tags: Optional array of tags for additional categorization

artivilla