🤖 Colton's AI Code Explainer

See the full working app here 🔗

A lightweight full-stack web app that explains code snippets in plain English using AI via the OpenRouter API.

Paste code → Click “Explain Code” → Get a clear breakdown of what the code does.

Built with Next.js (App Router), TypeScript, and the meta-llama/llama-3-8b-instruct model, deployed via Vercel.

Features

• Accepts any code snippet via textarea
• Sends the snippet to a free AI model (LLaMA 3 via OpenRouter)
• Returns a simple explanation of what the code does
• Responsive UI with loading state and disabled button handling
• API key handled securely with environment variables

UI Preview

Empty Textbox:

Loading State:

Explanation Output:

🚀 Getting Started

1. Clone the repo
2. Install dependencies

   npm install

3. Set up your OpenRouter API key
   • Go to openrouter.ai/keys and create an account
   • Generate an API key
   • Add it to .env.local:

   OPENROUTER_API_KEY=your-key-here

4. Run the dev server

   npm run dev

How It Works

• Frontend: User enters code in a textarea and clicks a button to trigger explanation.
• Backend: A Next.js API route sends the code to OpenRouter’s free meta-llama/llama-3-8b-instruct model and returns the explanation.

---

API Model

This project currently uses: • Model: meta-llama/llama-3-8b-instruct (free) • Endpoint: https://openrouter.ai/api/v1/chat/completions

---

Tech Stack

• Next.js (App Router)
• TypeScript
• Axios
• OpenRouter API
  • meta-llama/llama-3-8b-instruct (free)
• Deployed and hosted via Vercel

---

🛠️ Future Ideas

• Deploy with Vercel and add shareable links
• Add loading icon to UI
• Add syntax highlighting to the explanation output
• Add unit tests and error handling improvements