AI Coding Assistant

This is a Next.js project bootstrapped with create-next-app.

About the Project

Designed to help debug, explain, and review large codebases, with support for input and output of 900+ lines of code — ideal for diagnosing long scripts or full-stack applications.

It is powered by OpenAI's GPT-4.1 and includes custom system prompts for coding-only responses, as well as a limiter guard to control token usage.

Key Features:

• GPT-4.1 powered
• Syntax-highlighted code outputs
• Markdown + readableStream output
• Message token/line limit guard for performance
• Built specifically for debugging long code

---

🚀 Getting Started

First, clone the repository:

git clone https://github.com/your-username/chatgpt-coding-assistant.git
cd chatgpt-coding-assistant

Install dependencies:

npm install
# or
yarn install

⚙️ Environment Variables

Create a .env file at the root with the following:

FIREBASE=your-firebase-private-key
OPENAI_API_KEY=your-openai-api-key
NEXTAUTH=your-nextauth-secret
GITHUB=your-clientID-clientsecret

• OPENAI_API_KEY is required to connect to the GPT-4.1 model

• FIREBASE_PRIVATE_KEY

• FIREBASE_CLIENT_EMAIL

• FIREBASE_PROJECT_ID

• GITHUB_CLIENT_ID

• GITHUB_CLIENT_SECRET

• NEXTAUTH_SECRET

• NEXTAUTH_URL

🧪 Run the Development Server

npm run dev
# or
yarn dev

Then open http://localhost:3000 to see the result.

---

📁 Key Project Structure

app/
├── api/
│   ├── ai/
│   │   └── route.ts           # API route to handle AI chat requests via OpenAI
│   └── auth/
│       └── [...nextauth].ts   # NextAuth API route for authentication
│
├── chat/                      # Chat page route
│   └── page.tsx               
│
├── signin/                    # Sign-in page route
│   └── page.tsx               
│
├── layout.tsx                 # Root layout for the app (includes HTML & body)
├── page.tsx                   
└── providers.tsx              # Context providers (theme, session, etc.)

components/
├── ui/                        # Reusable UI components (buttons, inputs, etc.)
│   └── ...                    # Example: button.tsx, input.tsx
├── autoResizeInputarea.tsx    # Expands input area height based on text length
├── autoScroll.tsx             # Scrolls to bottom during AI response
├── highlighter.tsx            # Syntax highlighter for code blocks
├── renderer.tsx               # Renders Markdown and code output from AI
└── warningNotif.tsx           # Validation notification

lib/
├── ai/
│   ├── codeOnly.ts            # System prompt focused on code-only replies
│   ├── limitGuard.ts          # Input/output token limitation logic
│   └── token-saver.ts         # Saves and manages OpenAI token usage
│
├── auth.ts                    # NextAuth options (GitHub provider, Firestore adapter)
└── firebase.ts                # Firebase configuration and initialization

.env                            # Environment variables
package.json                    # Project dependencies and scripts

---

📚 Learn More

To learn more about the stack:

• Next.js Documentation – Features and API
• OpenAI API Docs – Model usage and setup
• React Syntax Highlighter – Code formatting
• Markdown Rendering with React – Used for rendering Markdown in the renderer.tsx component
• GitHub OAuth Apps – How to create a GitHub Client ID and Secret
• NextAuth.js Documentation – Auth setup, providers, adapters
• Firebase Admin SDK Setup – How to generate service account credentials for Firebase
• Firebase Docs – Full platform guide and integrations

---

☁️ Deployment

You can deploy this project on Vercel for free:

1. Push to GitHub
2. Connect to Vercel
3. Set your OPENAI_API_KEY, FIREBASE, GITHUB, and NEXTAUTH in the environment variables
4. Deploy!

Read more: Next.js Deployment Docs

---

🛠 Future Improvements

• Add chat history
• Support multiple system modes (debug, explain, optimize)

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

---