Repository: harish-garg/nextjs-reactjs-gpt-3
Branch: main
Commit: 9518af3f3355
Files: 8
Total size: 5.6 KB
Directory structure:
gitextract_1f8qv4w5/
├── .gitignore
├── README.md
├── package.json
├── pages/
│ ├── _app.js
│ ├── api/
│ │ └── openai.js
│ └── index.js
└── styles/
├── Home.module.css
└── globals.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
================================================
FILE: README.md
================================================
## A Demo GPT-3 Powered Web App, created using NextJS & ReactJS
## QuickStart
1. Clone this repo
2. update the OpenAI key in .env.local file:
Sample .env.local file
OPENAI_API_KEY=your-api-key
4. Install node modules
5. start the dev server with "yarn dev" or "npm run dev" command
For a Detailed How to Guide, on how to create this yourself, checkout this [blog post](https://harishgarg.com/writing/how-to-build-a-serverless-gpt-3-powered-using-nextjs-react/).
* [Follow me on Twitter](https://twitter.com/harishkgarg).
* [Buy Me Coffee](https://www.buymeacoffee.com/harishgarg)
================================================
FILE: package.json
================================================
{
"name": "gpt-3-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "10.0.9",
"openai-api": "^1.0.17",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
================================================
FILE: pages/_app.js
================================================
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
================================================
FILE: pages/api/openai.js
================================================
const OpenAI = require('openai-api');
const openai = new OpenAI(process.env.OPENAI_API_KEY);
export default async (req, res) => {
let prompt = `Artist: ${req.body.name}\n\nLyrics:\n`;
const gptResponse = await openai.complete({
engine: 'davinci',
prompt: prompt,
maxTokens: 50,
temperature: 0.7,
topP: 1,
presencePenalty: 0,
frequencyPenalty: 0.5,
bestOf: 1,
n: 1
});
res.status(200).json({text: `${gptResponse.data.choices[0].text}`})
}
================================================
FILE: pages/index.js
================================================
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState, useEffect } from 'react';
export default function Home() {
const [data, setData] = useState( { text:'' });
const [query, setQuery] = useState();
const [search, setSearch] = useState();
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
if (search) {
setIsLoading(true);
const res = await fetch(`/api/openai`, {
body: JSON.stringify({
name: search
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
})
const data = await res.json();
setData(data);
setIsLoading(false);
}};
fetchData();
}, [search]);
return (
<div className={styles.container}>
<Head>
<title>GPT-3 App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
<a>AI Lyrics Generator</a>
</h1>
<p className={styles.description}>Built with NextJS & GPT-3 API</p>
<div className={styles.grid}>
<div className={styles.card}>
<h3>Enter Artist:</h3>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button
type="button"
onClick={() =>
setSearch(query)
}
>
Generate
</button>
<h4>Lyrics</h4>
{isLoading ? (
<div>Loading ...</div>
) : (
<span>
{data.text}
</span>
)}
</div>
</div>
</main>
</div>
);
}
================================================
FILE: styles/Home.module.css
================================================
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
.footer img {
margin-left: 0.5rem;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
flex-basis: 45%;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
================================================
FILE: styles/globals.css
================================================
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
gitextract_1f8qv4w5/
├── .gitignore
├── README.md
├── package.json
├── pages/
│ ├── _app.js
│ ├── api/
│ │ └── openai.js
│ └── index.js
└── styles/
├── Home.module.css
└── globals.css
SYMBOL INDEX (2 symbols across 2 files)
FILE: pages/_app.js
function MyApp (line 3) | function MyApp({ Component, pageProps }) {
FILE: pages/index.js
function Home (line 5) | function Home() {
Condensed preview — 8 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (7K chars).
[
{
"path": ".gitignore",
"chars": 386,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "README.md",
"chars": 602,
"preview": "## A Demo GPT-3 Powered Web App, created using NextJS & ReactJS\n\n## QuickStart\n1. Clone this repo\n2. update the OpenAI k"
},
{
"path": "package.json",
"chars": 288,
"preview": "{\n \"name\": \"gpt-3-app\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"ne"
},
{
"path": "pages/_app.js",
"chars": 137,
"preview": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n return <Component {...pageProps} />\n}\n\nexpo"
},
{
"path": "pages/api/openai.js",
"chars": 484,
"preview": "const OpenAI = require('openai-api');\nconst openai = new OpenAI(process.env.OPENAI_API_KEY);\n\nexport default async (req,"
},
{
"path": "pages/index.js",
"chars": 1816,
"preview": "import Head from \"next/head\";\nimport styles from \"../styles/Home.module.css\";\nimport { useState, useEffect } from 'react"
},
{
"path": "styles/Home.module.css",
"chars": 1797,
"preview": ".container {\n min-height: 100vh;\n padding: 0 0.5rem;\n display: flex;\n flex-direction: column;\n justify-content: cen"
},
{
"path": "styles/globals.css",
"chars": 275,
"preview": "html,\nbody {\n padding: 0;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n "
}
]
About this extraction
This page contains the full source code of the harish-garg/nextjs-reactjs-gpt-3 GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 8 files (5.6 KB), approximately 1.9k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.