What You'll Build
In this project, you'll use an AI assistant (Claude, ChatGPT, or any tool you prefer) to create a browser-based plugin directory. The finished tool will let you:
- Browse a grid of 20+ AI plugins and MCP servers with icons and descriptions
- Search plugins by name, description, or keyword in real time
- Filter plugins by category (Productivity, Code, Data, Communication, etc.)
- Favorite plugins and view a filtered favorites list, saved in localStorage
- Click a plugin card to open a detail modal with setup instructions and features
What You'll Need
An AI Chat Tool
Claude, ChatGPT, Gemini, or any AI assistant that can generate code. Free tiers work fine.
A Text Editor
VS Code, Notepad, TextEdit — anything that lets you save an .html file.
No coding experience needed
This project is designed for complete beginners. The AI does the heavy coding — you learn how to guide it.
Describe the Explorer UI with Card Grid
Open your AI tool and start a new conversation. The explorer needs a clean card-based layout where each plugin is easy to scan. Here's a prompt that works well:
Build me a single HTML file for an AI plugin explorer directory. It should have:
- A header with the title "AI Plugin Explorer" and a search bar
- A responsive grid of plugin cards (3 columns on desktop, 2 on tablet, 1 on mobile)
- Each card shows: an emoji icon, plugin name, one-line description, category tag, and a heart/favorite button
- Start with 10 sample plugins stored in a JavaScript array of objects. Each plugin object should have: id, name, icon (emoji), description, category, and a features array
- Use these categories: "Productivity", "Code", "Data", "Communication", "Creative"
- Include real AI plugins and MCP servers like: Filesystem MCP, GitHub MCP, Slack MCP, Puppeteer MCP, PostgreSQL MCP, Memory MCP, Brave Search MCP, Fetch MCP, Google Drive MCP, Sequential Thinking MCP
- Show the total count: "Showing X of Y plugins"
- Use a dark theme with clean, modern styling
Put all HTML, CSS, and JavaScript in one file. No external dependencies besides Tailwind CSS via CDN.
Starting with real plugin names makes the directory immediately useful. Users can see actual tools they might want to install, not made-up placeholders.
Add Plugin Data and Search
Expand the directory to 20+ plugins and make the search actually work well. The search needs to feel instant and match across multiple fields:
Expand the plugin explorer to 20+ plugins and improve the search:
Add these additional plugins to the data array:
- Sentry MCP (Code) — error tracking and monitoring integration
- Notion MCP (Productivity) — read and write Notion pages and databases
- Linear MCP (Productivity) — manage issues and projects in Linear
- Cloudflare MCP (Code) — manage Workers, KV, and DNS settings
- Stripe MCP (Data) — access payment data, invoices, and customers
- Twilio MCP (Communication) — send SMS, make calls, check message logs
- Spotify MCP (Creative) — search music, manage playlists, control playback
- Figma MCP (Creative) — inspect designs, export assets, read components
- Docker MCP (Code) — manage containers, images, and compose files
- Vercel MCP (Code) — deploy projects, check build logs, manage domains
- Airtable MCP (Data) — query tables, create records, manage views
- Resend MCP (Communication) — send transactional emails via API
For the search, make it:
- Case-insensitive
- Search across name, description, and category fields simultaneously
- Show results instantly as the user types (no submit button)
- Show "No plugins found" with a helpful message when nothing matches
- Add a clear button (X) inside the search bar to reset the search
Update the "Showing X of Y" count to reflect filtered results.
Having 20+ plugins with varied categories makes the search and filter features feel necessary rather than decorative. A directory with 5 items doesn't need search — one with 22 does.
Add Category Filtering
Now add filter buttons so users can narrow down by category. Filters and search should work together — if someone searches "MCP" while the "Code" filter is active, they should only see Code-category MCP plugins:
Add category filtering to the plugin explorer:
- Add a row of filter buttons between the search bar and the grid: "All", "Productivity", "Code", "Data", "Communication", "Creative"
- "All" should be selected by default and show every plugin
- The active filter button should have a highlighted/filled style, inactive buttons should be outlined
- Show the count on each filter button in parentheses, like "Code (5)"
- Filters and search should work together: if I search "MCP" with the "Code" filter active, only show plugins that match BOTH the search text AND the Code category
- Add a sort dropdown next to the filters with options: "A-Z", "Z-A", "Category"
- When no plugins match the combined filter + search, show a message like "No plugins found. Try adjusting your search or filters." with a "Clear filters" button
- Add smooth fade animation when cards appear/disappear as filters change
Keep the same dark theme and card layout.
Here are common issues and how to ask the AI to fix them:
Filters reset the search or vice versa
Tell the AI: "Clicking a category filter clears my search text. Both should be independent — apply the search AND the category filter together when rendering the plugin list."
Filter counts don't update
Tell the AI: "The count on each filter button always shows the total, not the current filtered count. Recalculate the counts each time the search text changes so they reflect the combined filter state."
Cards jump around when filtering
Tell the AI: "The grid layout jumps around when cards are filtered out. Use CSS opacity and transform for smooth fade transitions instead of removing DOM elements instantly."
Add Favorites with localStorage
Now add the ability to favorite plugins and persist those choices. The heart button on each card should toggle, and favorites should survive page refreshes:
Add a favorites system to the plugin explorer with localStorage persistence:
- The heart button on each card should toggle between empty heart (unfavorited) and filled red heart (favorited)
- Save the list of favorited plugin IDs to localStorage as a JSON array
- On page load, read favorites from localStorage and apply the filled heart style to those cards
- Add a "Favorites" toggle button or tab in the filter row — when active, only show favorited plugins
- Show a count of favorites: "3 favorites" next to the toggle
- When the favorites filter is active and the user unfavorites a plugin, immediately remove it from the visible list
- If the user has no favorites and clicks the favorites filter, show a friendly empty state: "No favorites yet. Click the heart on any plugin to save it here."
- Add a subtle heart animation (scale up then back down) when favoriting a plugin
Keep everything in the same single HTML file.
The favorites system is a great example of localStorage in action. It stores a simple array of IDs — lightweight and fast — while the full plugin data stays in the JavaScript array.
Add Detail Modals
The final feature is a detail view that shows more information about each plugin when clicked. This transforms the explorer from a list into a real reference tool:
Add a detail modal that opens when you click on a plugin card:
- The modal should appear as a centered overlay with a dark backdrop
- Show the plugin's emoji icon large, name as a heading, full description (2-3 sentences), category badge, and the favorite button
- Add a "Key Features" section listing the plugin's features as bullet points
- Add a "Setup" section with a brief explanation of how to install/configure the plugin (use generic MCP setup instructions like: "Add this to your claude_desktop_config.json" with a code block showing a JSON snippet)
- Add a "Use Cases" section with 3 example use cases as short bullet points
- Include a "Close" button and also close when clicking the backdrop
- Close with the Escape key as well
- Prevent body scrolling while the modal is open
- Add the features, setup, and use cases data to each plugin object in the JavaScript array
Keep the dark theme and same styling patterns.
What You Learned
This project teaches more than just building a directory. By completing it, you practiced:
Building Searchable Interfaces
You built real-time search that matches across multiple data fields and works alongside category filters.
Data Filtering and Sorting
You combined multiple filter types (search, category, favorites) into a composable system that works in any combination.
localStorage for User Preferences
You stored user favorites in localStorage — a pattern used in nearly every web app for remembering preferences.
The AI Plugin Ecosystem
You now know what MCP servers are, what they do, and how they extend AI tools — practical knowledge for your AI toolkit.
Tips for Working with AI on This Project
Get the data structure right first. The plugin data array is the foundation. Make sure each object has all the fields you need (name, description, category, features) before building the UI around it.
Use a single render function. Ask the AI to create one function that re-renders the card grid based on the current search, filter, and sort state. This prevents bugs from multiple update paths.
Test filter combinations. Try searching while a category filter is active, then switch categories. Try favoriting while searching. Edge cases where two features interact are where bugs hide.
Use real plugin data. The plugins listed in the prompts are real MCP servers. Using accurate names and descriptions makes the finished tool genuinely useful for discovering AI tools.
Ready for your next project?
Explore more hands-on projects, or check out the tutorials for deeper dives into specific AI tools.