PromptKit
Manage and reuse prompts with a visual UI in VS Code.
PromptKit is a VS Code extension that helps you organize, search, and reuse prompts efficiently. Find any prompt within 3 seconds with powerful filtering, favorites, and keyboard navigation.
Features
- Visual Prompt Manager: Browse and search all your prompts in a clean, organized interface
- Quick Access: Find any prompt within seconds using search, filters, and keyboard shortcuts
- Variable Substitution: Define input variables in prompts and fill them when copying/inserting
- Favorites & Recents: Mark frequently used prompts and access your recent history
- File System Sync: Prompts auto-update when files change on disk
- Keyboard Navigation: Full keyboard support with Vim-style shortcuts
Quick Start
- Install the extension from the VS Code Marketplace
- Create a config file in your workspace root:
# .promptkit.yaml
schemaVersion: 1
prompts:
root: "prompts" # Directory containing your prompt files
- Create prompt files as Markdown with YAML frontmatter:
<!-- prompts/api-request.md -->
---
id: api-request
title: API Request Template
step: dev
version: v1
tags: [api, backend]
inputs:
- name: endpoint
required: true
description: The API endpoint URL
- name: method
default: GET
---
Make a {method} request to {endpoint}...
- Open the config file to launch the PromptKit UI
Configuration
.promptkit.yaml
schemaVersion: 1
prompts:
root: "docs/prompts" # Root directory for prompts
filePatterns: # File patterns to scan (default: ["**/*.md"])
- "**/*.md"
dimensions: # Organize prompts by dimensions
step: ["dev", "prd", "bugfix"]
version: ["v1", "v2"]
defaults: {} # Default values for prompts
templates: {} # Prompt templates
docs: # Optional: Docs manager configuration
root: "docs"
suggestedFolders: []
ignore: ["node_modules", ".git"]
ui:
enableDocsManager: true # Show docs tab
enablePromptManager: true # Show prompts tab
enableFavorites: true # Enable favorites feature
enableRecents: true # Enable recents feature
defaultView: "prompts" # Default view on open
Prompt Frontmatter
---
id: unique-prompt-id # Required: Unique identifier
title: Human Readable Title # Required: Display name
step: dev # Optional: Dimension value
version: v1 # Optional: Dimension value
tags: [tag1, tag2] # Optional: Tags for filtering
inputs: # Optional: Variable definitions
- name: variableName
required: true
description: What this variable is for
default: "default value"
---
Keyboard Shortcuts
| Shortcut |
Action |
↑ / k |
Previous prompt |
↓ / j |
Next prompt |
Enter |
Select prompt |
Escape |
Deselect |
Cmd/Ctrl + C |
Copy prompt |
Cmd/Ctrl + Enter |
Insert to editor |
/ |
Focus search |
Usage
Copying Prompts
- Click the Copy button on a prompt card
- If the prompt has variables, fill in the values
- The processed prompt is copied to your clipboard
Inserting to Editor
- Open a file in the editor
- Select a prompt and click Insert
- Fill in any variables
- Content is inserted at cursor position
Filtering
- Search: Type in the search box to filter by title, ID, or tags
- Dimensions: Click step/version pills to filter by dimension
- Favorites: Click the heart icon to toggle favorites-only view
- Recents: View recently used prompts
Development
# Install dependencies
npm install
cd src/webview && npm install && cd ../..
# Development mode (watches both Extension and Webview)
npm run watch
# Build
npm run compile
# Run tests
npm test
# Package for distribution
npx vsce package
Project Structure
prompt-kit-vscode-plugin/
├── src/
│ ├── extension/ # Extension Host (Node.js)
│ │ ├── extension.ts # Entry point
│ │ ├── providers/ # Custom Editor provider
│ │ ├── services/ # Business logic
│ │ ├── handlers/ # Message routing
│ │ └── types/ # TypeScript types
│ └── webview/ # React UI
│ └── src/
│ ├── components/ # React components
│ ├── stores/ # Zustand stores
│ ├── hooks/ # Custom hooks
│ └── lib/ # Utilities
├── schemas/ # JSON Schema for validation
└── media/ # Extension assets
License
MIT
