Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/diogo-karma/nextjs-pollinations-react-story
Dynamic Storytelling with Pollinations Generative React Hooks & Components
https://github.com/diogo-karma/nextjs-pollinations-react-story
Last synced: 14 days ago
JSON representation
Dynamic Storytelling with Pollinations Generative React Hooks & Components
- Host: GitHub
- URL: https://github.com/diogo-karma/nextjs-pollinations-react-story
- Owner: diogo-karma
- Created: 2024-09-16T18:17:06.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-16T19:24:15.000Z (about 2 months ago)
- Last Synced: 2024-09-18T00:12:13.602Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://storytelling-rho.vercel.app
- Size: 1.19 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 Dynamic Storytelling with Pollinations Generative React Hooks & Components
This project demonstrates how to create dynamic storytelling experiences using [Pollinations Generative React Hooks & Components](https://www.npmjs.com/package/@pollinations/react) in a [Next.js](https://nextjs.org) environment. By integrating with the [Pollinations.ai](https://pollinations.ai) API, this example showcases how to generate text, images, and more.
### Online [demo](https://storytelling.karma.yt/)
## 🚀 Getting Started
Follow these steps to set up and run the project:
1. **Clone the repository**:
```bash
git clone https://github.com/diogo-karma/nextjs-pollinations-react-story
cd pollinations-storytelling
```
2. **Install dependencies**:
Depending on your package manager:
```bash
npm install # or yarn install
pnpm install # or bun install
```
3. **Start the development server**:
Launch the development environment:
```bash
npm run dev # or yarn dev
pnpm dev # or bun dev
```
4. **Access the app**:
Open [http://localhost:3000](http://localhost:3000) in your browser to see the app live. You can start modifying the code by editing the `app/page.tsx` file. Any changes will automatically be reflected.
---
## 🧩 Pollinations Generative React Hooks & Components
Harness the power of Pollinations.ai to easily generate dynamic content. Below are examples of key components from the `@pollinations/react` library:
### `PollinationsText`
Generate and display text based on a given prompt and seed using the Pollinations API.
```jsx
import React from 'react';
import { PollinationsText } from '@pollinations/react';
const TermsAndConditions = () => (
Write out Pollinations.AI terms and conditions in Chinese.
);
export default TermsAndConditions;
```
### `PollinationsMarkdown`
Render markdown content dynamically based on a prompt.
```jsx
import React from 'react';
import { PollinationsMarkdown } from '@pollinations/react';
const AdSlogan = () => (
Create a cool advertising slogan about Pollinations in markdown.
);
export default AdSlogan;
```
### `PollinationsImage`
Generate and display an image from a text prompt and seed.
```jsx
import React from 'react';
import { PollinationsImage } from '@pollinations/react';
const SunsetImage = () => (
);
export default SunsetImage;
```
---
## 💡 Learn More
- Explore the [Pollinations Generative React Hooks & Components](https://www.npmjs.com/package/@pollinations/react) on npm.
- [Chat bot example](https://github.com/pollinations/karma) to discover more about the project.
- Learn more about [Pollinations.ai](https://pollinations.ai/readme).
### Made with ❤️ by [KARMA.YT](https://karma.yt) and [Pollinations.ai](https://pollinations.ai) Team