https://github.com/waynesutton/promptkit
Enhance your prompts with AI. Export via Markdown, JSON, XML for vibe coding.
https://github.com/waynesutton/promptkit
Last synced: 4 months ago
JSON representation
Enhance your prompts with AI. Export via Markdown, JSON, XML for vibe coding.
- Host: GitHub
- URL: https://github.com/waynesutton/promptkit
- Owner: waynesutton
- Created: 2025-04-26T19:32:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-01T23:03:09.000Z (about 1 year ago)
- Last Synced: 2025-10-11T16:08:15.271Z (8 months ago)
- Language: TypeScript
- Homepage: http://reprompting.ai/
- Size: 274 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RePrompt - AI Prompt Enhancer [](https://github.com/waynesutton/promptkit)
Enhance your prompts for Vibe Coding. Export to Markdown, JSON, or XML. Send directly to Convex Chef features.
This application helps users refine their initial ideas into detailed, structured prompts. It asks clarifying questions and then generates an enhanced prompt based on the original idea and the user's answers. The final prompt can be exported in Markdown, JSON, or XML format, or sent directly to [Convex Chef](https://chef.convex.dev/).
This project is built with [Vite](https://vitejs.dev/) (frontend) and [Convex](https://convex.dev/) (backend).
## Key Features
- **Interactive Prompt Refinement:** Guides users through a series of up to 3 AI-generated clarifying questions to flesh out their initial prompt idea.
- **One-Shot Refinement:** Option to immediately enhance the prompt without interactive questions.
- **AI-Powered Enhancement:** Leverages OpenAI's GPT-4o model (configurable via environment variables) to generate questions and enhanced prompts.
- **"Thinking..." Indicator:** Provides visual feedback with animated dots while waiting for AI responses.
- **Multiple Export Formats:** Allows downloading the final enhanced prompt as Markdown, JSON, or XML files (with download icons).
- **Direct Send to Convex Chef:** Integrates with Convex Chef, allowing users to send the generated prompt directly in the selected format (Markdown, JSON, or XML) via a prefilled URL (with external link icons).
- **Enhancement Dashboard (`/tokens`):**
- Displays key metrics: Total Prompts Enhanced, Average Questions per Prompt, and Average Character Reduction percentage.
- Visualizes character count comparison (Original vs. Enhanced) with a bar chart for the last 15 sessions.
- Explains the benefits of prompt structuring for potential token savings, referencing principles from [incident.io](https://incident.io).
- **Session Management:** Tracks the prompt enhancement process within a session (persisted in Convex database).
- **Keyboard Shortcuts:** Supports Enter key submission for the answer input form.
- **UI/UX:**
- Provides a simple and intuitive user interface built with React and Tailwind CSS.
- Auto-focuses the answer input field when a question is presented.
- Includes quick prompt examples (e.g., "Build Hacker News Clone", "Build a SaaS landing page", "Build Reddit Clone").
- Clear "Start Over" button with icon.
- Navigation links in header/footer.
- **(Example) Simple Authentication:** Includes basic Convex Auth setup with Anonymous and Password providers (intended as a starting point).
## Technology Stack
- **Frontend:**
- [React](https://reactjs.org/) via [Vite](https://vitejs.dev/)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [shadcn/ui](https://ui.shadcn.com/) (for UI components like buttons, potentially)
- [Sonner](https://sonner.emilkowal.ski/) (for toast notifications)
- [Recharts](https://recharts.org/) (for dashboard charts)
- [React Router](https://reactrouter.com/) (for page navigation)
- **Backend:**
- [Convex](https://convex.dev/) (Serverless backend platform)
- [OpenAI API](https://openai.com/api/) (for AI prompt generation)
- **Deployment:**
- Backend: [Convex Cloud](https://convex.dev/)
- Frontend: [Netlify](https://www.netlify.com/) (or similar static host)
## Project Structure
```
.
├── .cursor/ # Cursor AI configuration
├── .git/ # Git repository files
├── .github/
│ └── workflows/ # GitHub Actions workflows (e.g., CI/CD)
├── convex/ # Convex backend functions
│ ├── _generated/ # Auto-generated Convex files (DO NOT EDIT)
│ ├── auth.config.ts # Convex Auth configuration
│ ├── auth.ts # Authentication helper functions
│ ├── http.ts # Convex HTTP endpoint setup
│ ├── prompts.ts # Core prompt enhancement logic
│ ├── router.ts # User-defined HTTP routes (unused in current setup)
│ ├── schema.ts # Convex database schema
│ └── tsconfig.json # TypeScript config for Convex
├── dist/ # Build output directory (generated by Vite)
├── node_modules/ # Project dependencies (managed by npm/yarn/bun)
├── public/ # Static assets served by Vite
│ └── vite.svg # Example static asset
├── src/ # Frontend React application code
│ ├── components/ # Reusable UI components
│ │ ├── Header.tsx # Application header
│ │ ├── Footer.tsx # Application footer
│ │ └── ui/ # shadcn/ui components directory
│ │ └── interactive-hover-button.tsx # Custom hover button
│ ├── lib/ # Utility functions
│ │ └── utils.ts # General utility functions (e.g., shadcn class merging)
│ ├── pages/ # Page components for routing
│ │ └── TokensSavedPage.tsx # Dashboard page component
│ ├── App.tsx # Main application component, layout, and core logic
│ ├── SignInForm.tsx # Component for password sign-in (unused)
│ ├── SignOutButton.tsx # Component for signing out (unused)
│ ├── index.css # Global styles and Tailwind directives
│ ├── main.tsx # Application entry point
│ └── vite-env.d.ts # Vite environment type definitions
├── .DS_Store # macOS directory metadata (add to .gitignore)
├── .env.local # Local environment variables (DO NOT COMMIT)
├── .gitignore # Git ignore rules
├── README.md # This file
├── components.json # shadcn/ui configuration
├── convex-spec-*.yaml # Convex diagnostic files (add to .gitignore)
├── eslint.config.js # ESLint configuration
├── files.md # Auto-generated list of project files
├── index.html # Main HTML entry point for Vite
├── package-lock.json # Exact dependency versions
├── package.json # Project metadata and dependencies
├── postcss.config.cjs # PostCSS configuration (for Tailwind)
├── prompts.md # Auto-generated history of user prompts (if enabled)
├── setup.mjs # Script for initial setup (e.g., seeding)
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.app.json # TypeScript config for the Vite app
├── tsconfig.json # Base TypeScript configuration
├── tsconfig.node.json # TypeScript config for Node.js parts (e.g., Vite config)
└── vite.config.ts # Vite configuration
```
For a description of each file's purpose, see `files.md`.
## Development Setup
1. Install dependencies:
```bash
npm install
```
2. Set up environment variables: Create a `.env.local` file in the root directory and add your OpenAI API key:
```
OPENAI_API_KEY=your_openai_api_key_here
```
_(Note: Ensure this key is also set as an environment variable named `OPENAI_API_KEY` in your Convex deployment settings for production.)_
3. Run the development servers:
```bash
npm run dev
```
This command first runs `convex dev --once` (which includes pushing environment variables from `.env.local`), potentially runs the `setup.mjs` script, then starts the Vite frontend dev server and the Convex backend dev process concurrently.
`npm run lint` can be used to type-check the frontend and backend code.
## App Authentication
This app uses [Convex Auth](https://docs.convex.dev/auth) with Anonymous and Password auth examples for easy sign-in. You might want to configure different providers (like Clerk, Auth0) depending on your needs before deploying.
## Deployment
### Convex Backend
Deploy the backend functions using the Convex CLI:
```bash
npx convex deploy
```
_(Remember to set the `OPENAI_API_KEY` environment variable in your Convex dashboard.)_
### Frontend
This Vite application is deployed to Netlify. See the [Convex + Netlify Hosting Docs](https://docs.convex.dev/production/hosting/netlify) for detailed setup instructions.
_Setup Summary:_ Configure the build command in Netlify to `npx convex deploy --cmd 'npm run build'`, set the `CONVEX_DEPLOY_KEY` environment variable (from your Convex project settings) in Netlify, and ensure `VITE_CONVEX_URL` is set for the frontend build process.
## Further Learning
Check out the [Convex docs](https://docs.convex.dev/) for more information on how to develop with Convex.
- If you're new to Convex, the [Overview](https://docs.convex.dev/understanding/) is a good place to start.
- Check out the [Hosting and Deployment](https://docs.convex.dev/production/) docs for how to deploy your app.
- Read the [Best Practices](https://docs.convex.dev/understanding/best-practices/) guide for tips on how to improve your app further.
## HTTP API
User-defined HTTP routes are defined in the `convex/router.ts` file. We split these routes into a separate file from `convex/http.ts` to allow us to prevent the LLM from modifying the authentication routes.
## Hosting
[](https://app.netlify.com/sites/promptkit/deploys)
See the [Deployment -> Frontend](#frontend) section above and the [Convex + Netlify Hosting Docs](https://docs.convex.dev/production/hosting/netlify) for details.
# reprompt