Zo Prompts Gallery Installer

---

title: Zo Prompts Gallery Installer description: | Automates the installation of the Zo Prompts Gallery - a beautiful, searchable viewer for your saved prompts. This prompt will:

• Clone the zo-prompts-gallery repository
• Install all required dependencies
• Run the setup script to auto-categorize your existing prompts
• Guide you through configuration in the Zo UI
• Help you start and access your new prompts gallery

After running, you'll have a fully functional prompt gallery with:

• Smart search and tag filtering (OR logic)
• Auto-categorized prompts into logical groups
• Quick-view modal for browsing
• Inline editing of prompt metadata
• Beautiful, responsive UI with dark mode support

Works with any Zo computer - no personal data or tokens needed!

Source: https://github.com/Zenlyte/zo-prompts-gallery tags: ["setup", "productivity", "zo-site", "prompts", "gallery"] tool: true

Zo Prompts Gallery Installation

This will install a beautiful, searchable gallery for your saved Zo prompts.

Step 1: Clone Repository

First, let's clone the Prompts Gallery template:

cd /home/workspace/Projects
git clone https://github.com/Zenlyte/zo-prompts-gallery.git prompt-gallery
Copy

Step 2: Install Dependencies

Navigate to the new gallery directory and install required packages:

cd prompt-gallery
bun install
Copy

This installs:

• marked - For rendering markdown content
• gray-matter - For parsing prompt frontmatter
• All shadcn/ui components (dialog, popover, command)

Step 3: Run Setup Script

The setup script will:

1. Auto-categorize your existing prompts into logical groups
2. Ensure all required components are in place
3. Verify your prompts directory exists

chmod +x setup.sh
./setup.sh
Copy

You should see output like:

Updated for-each-line.prompt.md -> Data & Integrations
Updated daily-email-digest.prompt.md -> Productivity & Planning
...
Done! Updated XX prompts.
Copy

Step 4: Configure in Zo UI

1. Open your Zo Sites page: Sites
2. You should see prompt-gallery in the list
3. Click on it and configure:
   • Set VITE_ZO_SITE_DEMO_VARIANT to prompts
4. Save your configuration

Step 5: Start Your Gallery

1. In the Sites page, click the Play/Start button for prompt-gallery
2. Wait for the site to initialize (usually 5-10 seconds)
3. Click the View Site link that appears
4. Your prompts gallery is now live!

What You Can Do

Search & Filter

• Search Bar: Type to find prompts by name, category, or tag
• Category Badges: Click any category badge to filter by that category
• Tag Chips: Click any tag to add to your filter (uses OR logic - shows prompts with ANY selected tag)
• Clear Filters: Click "Clear all" to reset all filters

Browse & View

• Grid View: See all your prompts in a beautiful card layout
• Emoji Tags: Each prompt shows up to 3 descriptive emojis
• Quick View: Click any card to open a modal with full prompt content
• Metadata: View tags, category, and description in the modal

Edit & Customize

• Inline Editing: Click the pencil icon to edit any prompt's title, description, category, or tags
• Save Changes: Click Save to write changes directly to your prompt file
• Add Categories: Create new categories on the fly
• Add Tags: Type new tags separated by commas

Troubleshooting

Site won't start

# Check if port is available
lsof -i :57998

# Kill any existing process
pkill -f "bun.*prompt-gallery"
Copy

Prompts not appearing

# Verify prompts directory
ls -la /home/workspace/Prompts/*.prompt.md

# Re-run categorization
cd /home/workspace/Projects/prompt-gallery
./setup.sh
Copy

UI issues

• Clear browser cache and refresh the page
• Check console logs in browser developer tools
• Restart the site in Zo UI

Customization

Change Default Categories

Edit categorize-prompts.ts to modify the categorization logic:

const categories: Record<string, string> = {
  // Add your own mappings here
  "your-keyword": "Your Category Name",
};
Copy

Customize Theme

Edit prompts-demo.tsx:

• Modify color schemes in className strings
• Change grid layout from grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
• Adjust modal size in DialogContent className

Add New Features

The gallery is built as a standard Zo Site - you can:

• Add new API endpoints in server.ts
• Create new components in src/components/ui/
• Add new pages in src/pages/demos/

Getting Help

• Source Repository: https://github.com/Zenlyte/zo-prompts-gallery
• Documentation: See the repository README.md
• Issues: Report bugs or suggest features via GitHub Issues
• Zo Community: Join the Zo Discord for community support

License

This template is MIT Licensed - free to use, modify, and share!

---

🎉 Installation Complete! Your Prompts Gallery is ready to use. Enjoy exploring your saved prompts with a beautiful, organized interface!