AI Prompt Directory with Chat Interface

A Next.js application that provides a directory of AI prompts with an integrated chat interface powered by OpenAI-compatible APIs.

Features

• AI Prompt Directory: Browse and explore various AI prompts organized by categories
• Interactive Chat Interface: Try prompts with real AI models
• OpenAI API Integration: Support for OpenAI and compatible APIs
• Model Selection: Choose from available models from your configured API
• Persistent Chat History: Chat sessions are saved in browser localStorage
• Responsive Design: Works seamlessly on desktop and mobile devices
• TypeScript Support: Full TypeScript integration for type safety
• Next.js App Router: Built with Next.js App Router for modern routing

Project Structure

app/                 # Next.js App Router pages
├── layout.tsx       # Root layout
├── page.tsx         # Home page
├── api/trending/    # API routes
└── directory/       # Directory pages
    ├── page.tsx     # Directory listing
    └── [id]/page.tsx # Prompt detail page
components/          # Reusable React components
├── Header.tsx       # Header component
├── PromptGrid.tsx   # Grid of prompts
├── PromptCard.tsx   # Individual prompt card
├── Chat.tsx         # Chat interface component
└── ...              # Other components
lib/                 # Utility functions and libraries
└── openai.ts        # OpenAI API integration
prompts/             # AI prompt files
└── Act as a ...     # Individual prompt files

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

Configuration

OpenAI API Setup

1. Click the "Configure" button in the top-right corner of the header
2. Read and acknowledge the security warning about API key storage
3. Enter your OpenAI API key and base URL
4. The default URL is https://api.openai.com/v1 for OpenAI
5. For other compatible APIs, enter the appropriate base URL
6. Click "Save & Test" to verify the configuration

⚠️ Security Notice: Your API key will be stored in browser localStorage. Only use this application in trusted environments and never share your API key.

Using the Chat Interface

1. Navigate to any prompt detail page
2. Select a model from the dropdown (if not configured, you'll see a message to configure first)
3. Start chatting with the AI using the selected prompt as context
4. Chat history is automatically saved and restored when you return to the page

Learn More

This project uses:

• Next.js App Router
• TypeScript
• Tailwind CSS for styling
• Shadcn UI components
• React Hook Form for form handling
• Zod for validation

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.