f

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website

Total Products

Software by f

Open Source

prompts.chat

<h1 align="center"> <a href="https://prompts.chat"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://prompts.chat/logo-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://prompts.chat/logo.svg"> <img height="60" alt="prompts.chat" src="https://prompts.chat/logo.svg"> </picture> <br> prompts.chat </a> </h1> <p align="center"> <strong>The world's largest open-source prompt library for AI</strong><br> <sub>Works with ChatGPT, Claude, Gemini, Llama, Mistral, and more</sub> </p> <p align="center"> <sub>formerly known as Awesome ChatGPT Prompts</sub> </p> <p align="center"> <a href="https://prompts.chat"><img src="https://img.shields.io/badge/Website-prompts.chat-blue?style=flat-square" alt="Website"></a> <a href="https://github.com/sindresorhus/awesome"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome"></a> <a href="https://huggingface.co/datasets/fka/prompts.chat"><img src="https://img.shields.io/badge/🤗-Hugging_Face-yellow?style=flat-square" alt="Hugging Face"></a> <a href="https://deepwiki.com/f/prompts.chat"><img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki"></a> </p> <p align="center"> <a href="https://prompts.chat/prompts">🌐 Browse Prompts</a> • <a href="https://fka.gumroad.com/l/art-of-chatgpt-prompting">📖 Read the Book</a> • <a href="https://raw.githubusercontent.com/f/prompts.chat/main/PROMPTS.md">📄 View on GitHub</a> • <a href="#-self-hosting">🚀 Self-Host</a> </p> <p align="center"> <sub> 🏆 Featured in <a href="https://www.forbes.com/sites/tjmccue/2023/01/19/chatgpt-success-completely-depends-on-your-prompt/">Forbes</a> · 🎓 Referenced by <a href="https://www.huit.harvard.edu/news/ai-prompts">Harvard</a>, <a href="https://etc.cuit.columbia.edu/news/columbia-prompt-library-effective-academic-ai-use">Columbia</a> · 📄 <a href="https://scholar.google.com/citations?user=AZ0Dg8YAAAAJ&hl=en">40+ academic citations</a> · ❤️ <a href="https://huggingface.co/datasets/fka/prompts.chat">Most liked dataset</a> on Hugging Face<br> ⭐ 143k+ GitHub stars · 🏅 <a href="https://spotlights-feed.github.com/spotlights/prompts-chat/index/">GitHub Staff Pick</a> · 🚀 First prompt library (Dec 2022) </sub> </p> <p align="center"> <sub><strong>Loved by AI pioneers:</strong></sub><br> <sub> <a href="https://x.com/gdb/status/1602072566671110144"><strong>Greg Brockman</strong></a> (OpenAI Co-Founder) · <a href="https://x.com/woj_zaremba/status/1601362952841760769"><strong>Wojciech Zaremba</strong></a> (OpenAI Co-Founder) · <a href="https://x.com/clementdelangue/status/1830976369389642059"><strong>Clement Delangue</strong></a> (Hugging Face CEO) · <a href="https://x.com/ashtom/status/1887250944427237816"><strong>Thomas Dohmke</strong></a> (Former GitHub CEO) </sub> </p> --- ## What is this? A curated collection of **prompt examples** for AI chat models. Originally created for ChatGPT, these prompts work great with any modern AI assistant. | Browse Prompts | Data Formats | |----------------|--------------| | [prompts.chat](https://prompts.chat/prompts) | [prompts.csv](prompts.csv) | | [PROMPTS.md](https://raw.githubusercontent.com/f/prompts.chat/main/PROMPTS.md) | [Hugging Face Dataset](https://huggingface.co/datasets/fka/prompts.chat) | **Want to contribute?** Add prompts at [prompts.chat/prompts/new](https://prompts.chat/prompts/new) — they sync here automatically. --- ## 📖 The Interactive Book of Prompting Learn prompt engineering with our **free, interactive guide** — 25+ chapters covering everything from basics to advanced techniques like chain-of-thought reasoning, few-shot learning, and AI agents. **[Start Reading →](https://fka.gumroad.com/l/art-of-chatgpt-prompting)** (Source: https://github.com/f/prompts.chat/tree/main/src/content/book) --- ## 🎮 Prompting for Kids <p> <a href="https://prompts.chat/kids"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://prompts.chat/promi-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://prompts.chat/promi.svg"> <img height="60" alt="Promi" src="https://prompts.chat/promi.svg" align="left"> </picture> </a> </p> An interactive, game-based adventure to teach children (ages 8-14) how to communicate with AI through fun puzzles and stories. **[Start Playing →](https://prompts.chat/kids)** <br clear="left"> --- ## 🚀 Self-Hosting Deploy your own private prompt library with custom branding, themes, and authentication. **Quick Start:** ```bash npx prompts.chat new my-prompt-library cd my-prompt-library ``` **Manual Setup:** ```bash git clone https://github.com/f/prompts.chat.git cd prompts.chat npm install && npm run setup ``` The setup wizard configures branding, theme, authentication (GitHub/Google/Azure AD), and features. **Recommended database:** prompts.chat uses PostgreSQL. For a hosted database, we recommend [Neon](https://get.neon.com/VqfnMo4). <div> <p>Sponsored by</p> <a href="https://get.neon.com/VqfnMo4"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/neon-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/neon.svg"> <img width="250px" alt="Neon Logo fallback" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/neon-dark.svg"> </picture> </a> </div> 📖 **[Full Self-Hosting Guide](SELF-HOSTING.md)** • 🐳 **[Docker Guide](DOCKER.md)** --- ## 🔌 Integrations ### CLI ```bash npx prompts.chat ``` ### Claude Code Plugin ``` /plugin marketplace add f/prompts.chat /plugin install [email protected] ``` 📖 [Plugin Documentation](CLAUDE-PLUGIN.md) ### MCP Server Use prompts.chat as an MCP server in your AI tools. **Remote (recommended):** ```json { "mcpServers": { "prompts.chat": { "url": "https://prompts.chat/api/mcp" } } } ``` **Local:** ```json { "mcpServers": { "prompts.chat": { "command": "npx", "args": ["-y", "prompts.chat", "mcp"] } } } ``` 📖 [MCP Documentation](https://prompts.chat/docs/api) --- ## 💖 Sponsors <p align="center">  <a href="https://get.neon.com/VqfnMo4"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/neon-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/neon.svg"> <img height="30" alt="Neon" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/neon.svg"> </picture> </a>    <a href="https://clemta.com/?utm_source=prompts.chat"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/clemta-dark.webp"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/clemta.webp"> <img height="35" alt="Clemta" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/clemta.webp"> </picture> </a>    <a href="https://wiro.ai/?utm_source=prompts.chat"> <img height="30" alt="Wiro" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/wiro.png"> </a>    <a href="https://wind.surf/prompts-chat"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/cognition-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/cognition.svg"> <img height="35" alt="Cognition" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/cognition.svg"> </picture> </a>    <a href="https://coderabbit.link/fatih"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/coderabbit-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/coderabbit.svg"> <img height="30" alt="CodeRabbit" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/coderabbit.svg"> </picture> </a>    <a href="https://sentry.io/?utm_source=prompts.chat"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/sentry-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/sentry.svg"> <img height="30" alt="Sentry" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/sentry.svg"> </picture> </a>    <a href="https://www.eachlabs.ai/?utm_source=promptschat&utm_medium=referral"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/eachlabs-dark.png"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/eachlabs.png"> <img height="28" alt="Each Labs" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/eachlabs.png"> </picture> </a>    <a href="https://commandcode.ai/?utm_source=prompts.chat"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/commandcode-dark.svg"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/commandcode.svg"> <img height="30" alt="CommandCode" src="https://raw.githubusercontent.com/f/prompts.chat/main/public/sponsors/commandcode.svg"> </picture> </a> </p> <p align="center"> <sub>Built with <a href="https://wind.surf/prompts-chat">Windsurf</a> and <a href="https://devin.ai">Devin</a></sub><br> <a href="https://github.com/sponsors/f/sponsorships?sponsor=f&tier_id=558224&preview=false"><strong>Become a Sponsor →</strong></a> </p> --- ## 👥 Contributors <a href="https://github.com/f/prompts.chat/graphs/contributors"> <img src="https://contrib.rocks/image?repo=f/prompts.chat" /> </a> --- ## 📜 License This project is dual-licensed: - **Source code and site-authored content** is licensed under the [MIT License](LICENSE-MIT), including the interactive book content in [`src/content/book`](src/content/book). - **Prompt content and data** (prompts.csv, PROMPTS.md, user-submitted prompts) is dedicated to the public domain under [CC0 1.0 Universal](LICENSE-CC0). See [LICENSE](LICENSE) for details.

Web Development Knowledge Bases & RAG

163.5K Github Stars

Open Source

react-wait

<p align="center"> <img src="./resources/logo.png" width="500"> </p> <p align="center"> Complex Loader Management Hook for <a href="http://reactjs.org/" rel="nofollow" class="rich-diff-level-one">React</a>. </p> <p align="center"> <strong class="rich-diff-level-one">Read the <a href="https://medium.com/@fkadev/managing-complex-waiting-experiences-on-web-uis-29534d2d92a8" rel="nofollow">Medium post "Managing Complex Waiting Experiences on Web UIs"</a>.</strong> </p> <p align="center"> <img src="./resources/use-wait.gif" width="600" /> </p> [![npm version](https://badge.fury.io/js/react-wait.svg)](https://badge.fury.io/js/react-wait) [![build](https://api.travis-ci.org/f/react-wait.svg?branch=master)](https://travis-ci.org/f/react-wait) [![codecov](https://codecov.io/gh/f/react-wait/branch/master/graph/badge.svg)](https://codecov.io/gh/f/react-wait) --- [![Edit useWait](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/y3w5v5lk0j) **react-wait** is a **React Hook** helps to manage multiple loading states on the page without any conflict. It's based on a **very simple idea** that manages an **`Array`** of multiple loading states. The **built-in loader component** listens its registered loader and immediately become loading state. ## **Why not `React.Suspense`?**: React has its own Suspense feature to manage all the async works. For now it only supports code-splitting (not data-fetching). `useWait` allows you to manage waiting experiences much more explicitly and **not only for Promised/async patterns but also complete loading management**. # Overview Here's a quick overview that what's `useWait` for: ```jsx import { useWait, Waiter } from "react-wait"; function A() { const { isWaiting } = useWait(); return ( <div> {isWaiting("creating user") ? "Creating User..." : "Nothing happens"} </div> ); } function B() { const { anyWaiting } = useWait(); return ( <div> {anyWaiting() ? "Something happening on app..." : "Nothing happens"} </div> ); } function C() { const { startWaiting, endWaiting, isWaiting } = useWait(); function createUser() { startWaiting("creating user"); // Faking the async work: setTimeout(() => { endWaiting("creating user"); }, 1000); } return ( <button disabled={isWaiting("creating user")} onClick={createUser}> <Wait on="creating user" fallback={<Spinner />}> Create User </Wait> </button> ); } ReactDOM.render( <Waiter> <C /> </Waiter>, document.getElementById("root") ); ``` # Quick Start If you are a **try and learn** developer, you can start trying the **react-wait** now using [codesandbox.io](https://codesandbox.io). [Quick start on CodeSandbox](https://codesandbox.io/s/y3w5v5lk0j) ### 1. Install: ```bash yarn add react-wait ``` ### 2. Require: ```jsx import { Waiter, useWait } from "react-wait"; function UserCreateButton() { const { startWaiting, endWaiting, isWaiting, Wait } = useWait(); return ( <button onClick={() => startWaiting("creating user")} disabled={isWaiting("creating user")} > <Wait on="creating user" fallback={<div>Creating user!</div>}> Create User </Wait> </button> ); } ``` ### 3. Wrap with the `Waiter` Context Provider And you should wrap your `App` with `Waiter` component. It's actually a `Context.Provider` that provides a loading context to the component tree. ```jsx const rootElement = document.getElementById("root"); ReactDOM.render( <Waiter> <App /> </Waiter>, rootElement ); ``` ## Installation ```bash $ yarn add react-wait # or if you using npm $ npm install react-wait ``` ## The API **react-wait** provides some helpers to you to use in your templates. #### `anyWaiting()` Returns boolean value if any loader exists in context. ```jsx const { anyWaiting } = useWait(); return <button disabled={anyWaiting()}>Disabled while waiting</button>; ``` #### `isWaiting(waiter String)` Returns boolean value if given loader exists in context. ```jsx const { isWaiting } = useWait(); return ( <button disabled={isWaiting("creating user")}> Disabled while creating user </button> ); ``` #### `startWaiting(waiter String)` Starts the given waiter. ```jsx const { startWaiting } = useWait(); return <button onClick={() => startWaiting("message")}>Start</button>; ``` #### `endWaiting(waiter String)` Stops the given waiter. ```jsx const { end } = useWait(); return <button onClick={() => endWaiting("message")}>Stop</button>; ``` ## Using `Wait` Component ```jsx function Component() { const { Wait } = useWait(); return ( <Wait on="the waiting message" fallback={<div>Waiting...</div>}> The content after waiting done </Wait> ); } ``` Better example for a `button` with loading state: ```jsx <button disabled={isWaiting("creating user")}> <Wait on="creating user" fallback={<div>Creating User...</div>}> Create User </Wait> </button> ``` ## Making Reusable Loader Components With reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better **user loading experience**. ```jsx function Spinner() { return <img src="spinner.gif" />; } ``` Now you can use your spinner everywhere using `waiting` attribute: ```jsx <button disabled={isWaiting("creating user")}> <Wait on="creating user" fallback={<Spinner />}> Create User </Wait> </button> ``` ## Creating Waiting Contexts using `createWaitingContext(context String)` To keep your code DRY you can create a `Waiting Context` using `createWaitingContext`. ```jsx function CreateUserButton() { const { createWaitingContext } = useWait(); // All methods will be curried with "creating user" on. const { startWaiting, endWaiting, isWaiting, Wait } = createWaitingContext( "creating user" ); function createUser() { startWaiting(); setTimeout(endWaiting, 1000); } return ( <Button disabled={isWaiting()} onClick={createUser}> <Wait fallback="Creating User...">Create User</Wait> </Button> ); } ``` ## Contributors - Fatih Kadir Akın, (creator) ## Other Implementations Since **react-wait** based on a very simple idea, it can be implemented on other frameworks. - [vue-wait](https://github.com/f/vue-wait): Multiple Process Loader Management for Vue. - [dom-wait](https://github.com/f/dom-wait): Multiple Process Loader Management for vanilla JavaScript. ## License MIT © [Fatih Kadir Akın](https://github.com/f)

JavaScript Libraries & Components

306 Github Stars