Skip to content

jnelken/llm-prompt-manager

Repository files navigation

LLM Prompt Manager

A modern LLM prompt management and execution platform built with Next.js 15, React 19, and TypeScript.

View live demo

Getting Started (Dev)

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

NOTE: if you add the url param mockdata=true you will have 25 pre-built templates for use in the app. Just be sure to add the param on first load, as the flag does not get checked after the first render. (Will fix another time)

Key Technologies used

  • dify.ai API for LLM services
  • Profound prompt API
  • Streaming API responses
  • React Context for state management
  • localStorage for persisted data
  • Tailwind custom css theming

Features

  • Main Features

    • Create, edit and save prompt templates
    • Prompt execution and history
    • Real-time streaming responses
  • User Interface

    • Dark/Light theme support
    • Loading states and animations
    • Error boundaries for graceful failures
    • Keyboard shortcuts (Template page only)
  • Development Features

    • Mock data available for testing
    • Placeholder for debug logging system (WIP)
    • admin page for API testing

Approach & Architecture

I used LLMs to help me build the app, with close oversight on my part. The output can vary greatly, and so much of it was edited post-generation. Some parts of the code like the Settings' page.tsx I have yet to refactor to my standards, but were left alone for the sake of time.

In my opinion, a lot of the elegance of the implementation here comes from the strict adherence to a project structure. In particular, using my own ui components tailored to suit my needs goes a long way, and when the LLM remembers to use them, the code output is much more maintainable and readable. This too goes for a hypothetical junior dev who might look to copy/paste code from one feature when building another. Abstractions make everything run smoothly. The only hard part is to do it right and stick to it.

Project Structure

src/
├── app/                    # Next.js App Router pages
├── components/
├── lib/
├── styles/               # Global styles and themes
└── ui/                   # Reusable UI components

Future Feature Ideas

  • LLM selection (only uses ChatGPT for now)
  • creating and editing prompts
  • persistent storage
  • favorites feature
  • search suggestions and autocomplete
  • URL params for storing app state to achieve sharable links
  • import/export prompt and/or templates

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published