make a demo home page #10
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. 📝 WalkthroughSummary by CodeRabbitRelease Notes
WalkthroughAdds a client-side interactive Home page for URL input and markdown preview, integrates Google Generative AI via a new lib module, and adds the generative AI dependency. Changes
Sequence DiagramsequenceDiagram
participant User as User
participant Browser as Browser/Client
participant Server as App Server
participant Gemini as Google Gemini API
User->>Browser: Enter URL & click Generate
Browser->>Browser: set loading, clear messages
Browser->>Server: POST /api/generate { url }
Server->>Gemini: request generation with URL content
Gemini->>Server: return generated markdown
Server->>Browser: respond with markdown
Browser->>Browser: update markdown, clear loading
Browser->>User: display markdown preview & copy option
alt Error
Gemini-->>Server: error
Server-->>Browser: error payload
Browser->>User: show error message
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In `@app/page.tsx`:
- Around line 24-26: The code calls response.json() unconditionally which throws
on non-JSON responses (e.g., HTML 500) before you check response.ok; change the
flow in app/page.tsx so you first check response.ok on the fetched response
variable, and if !response.ok read the raw response.text() (or include
response.status) and throw an Error with that text/status, otherwise call
response.json() to parse into data; update the error throw to include the server
text or status and only parse JSON when the response is successful.
- Around line 17-22: The page component calls fetch("/api/generate") but that
API route is missing; add a Next.js route handler that exports an async POST
function to handle the request, parse and validate JSON body for { url },
perform the generation logic (or delegate to the existing generator
function/module), and return a JSON response with appropriate status codes and
error handling; specifically create an endpoint that accepts POST, reads await
request.json(), checks url is a non-empty string, calls the generator (or
returns a helpful error if generation fails), and responds with new
Response(JSON.stringify(result), { status: 200, headers: { "Content-Type":
"application/json" } }) or suitable error statuses.
In `@src/lib/gemini.ts`:
- Around line 3-7: The module currently throws at import time via the top-level
apiKey constant, which can crash next build; remove the top-level throw and
replace with a lazy/runtime accessor (e.g., add a getGeminiApiKey() function
that reads process.env.GEMINI_API_KEY and throws if missing) and change any code
that previously used the top-level apiKey (or any model/client initialization)
to call getGeminiApiKey() at runtime before creating the Gemini client; ensure
no import-time side effects remain so validation happens only when the client or
model (the function/class that constructs the Gemini client) is actually
invoked.
- Line 12: Replace the hard-coded model string in the genAI client setup: change
the export const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"
}); to read the model name from the GEMINI_MODEL environment variable (with a
sensible default like "gemini-2.5-flash" or "gemini-2.5-pro") and pass that
value into genAI.getGenerativeModel; update any related usage to reference this
exported model constant so future model changes require only updating
GEMINI_MODEL.
🧹 Nitpick comments (4)
app/page.tsx (4)
29-34: Inconsistent indentation in thecatchblock.Lines 31-34 use a different indent level than the surrounding
try/finallyblocks. This appears to be a mix of tab/space indentation.Fix indentation
} catch (err: unknown) { if (err instanceof Error) { - setError(err.message); - } else { - setError(String(err)); - } + setError(err.message); + } else { + setError(String(err)); + } } finally {
40-43:navigator.clipboard.writeTextcan fail and should be handled gracefully.
navigator.clipboardis unavailable in insecure contexts (non-HTTPS) and the call itself returns a Promise that can reject. Also,alert()is a jarring UX — consider a transient toast or button text change instead.Proposed fix: add error handling
const copyToClipboard = () => { - navigator.clipboard.writeText(markdown); - alert("Copied to clipboard!"); + navigator.clipboard.writeText(markdown).then( + () => alert("Copied to clipboard!"), + () => alert("Failed to copy to clipboard") + ); };
56-62: Input lacks a<label>and usestype="text"instead oftype="url".For accessibility, the input should have an associated label (even if visually hidden). Using
type="url"gives mobile users the right keyboard and provides basic browser validation.Proposed fix
+ <label htmlFor="repo-url" className="sr-only">GitHub Repository URL</label> <input - type="text" + id="repo-url" + type="url" placeholder="https://github.com/username/repo"
12-38: No validation thaturlis a valid GitHub URL before making the API call.A malformed or non-GitHub URL will be sent to the backend, which will likely fail. Consider a basic client-side check (e.g.,
url.startsWith("https://github.com/")) to provide early feedback and avoid unnecessary API calls.
| try { | ||
| const response = await fetch("/api/generate", { | ||
| method: "POST", | ||
| headers: { "Content-Type": "application/json" }, | ||
| body: JSON.stringify({ url }), | ||
| }); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for files containing "generate" in api-related paths
echo "=== Searching for generate files in api directories ==="
find . -type f \( -name "*generate*" -o -path "*/api/*generate*" \) 2>/dev/null | head -20
echo ""
echo "=== Searching for route.ts/route.js files in api directory ==="
find . -type d -name "api" 2>/dev/null | head -5
echo ""
echo "=== Looking for route handlers using rg ==="
rg "api/generate" --type ts --type tsx --type js 2>/dev/null | head -20
echo ""
echo "=== Searching for handler functions or exports in api context ==="
rg "export.*POST|export.*GET|Route.*generate" --type ts --type tsx 2>/dev/null | head -20
echo ""
echo "=== Listing app/api structure if it exists ==="
ls -la app/api 2>/dev/null || echo "app/api directory not found"
echo ""
echo "=== Looking for route files in common NextJS locations ==="
find . -path "*/api/*" -name "route.*" 2>/dev/nullRepository: BeyteFlow/ReadmeGenAI
Length of output: 432
🏁 Script executed:
#!/bin/bash
# Find and read app/page.tsx to confirm the fetch call
echo "=== Content of app/page.tsx (lines 17-25) ==="
cat -n app/page.tsx 2>/dev/null | sed -n '15,25p' || echo "File not found"
echo ""
echo "=== Search for any fetch/POST calls to api routes ==="
rg "fetch.*api" --type tsx --type ts 2>/dev/null
echo ""
echo "=== Check entire app directory structure ==="
find app -type f -name "*.ts" -o -name "*.tsx" 2>/dev/null | head -20
echo ""
echo "=== Check if there are any handlers in alternative locations ==="
find . -type f \( -name "*.api.ts" -o -name "*.api.tsx" \) 2>/dev/nullRepository: BeyteFlow/ReadmeGenAI
Length of output: 642
The /api/generate route is missing from the codebase and must be created.
The component at line 18 makes a POST request to /api/generate, but no API route file exists. The app/api directory and corresponding route handler are required for this feature to function.
🤖 Prompt for AI Agents
In `@app/page.tsx` around lines 17 - 22, The page component calls
fetch("/api/generate") but that API route is missing; add a Next.js route
handler that exports an async POST function to handle the request, parse and
validate JSON body for { url }, perform the generation logic (or delegate to the
existing generator function/module), and return a JSON response with appropriate
status codes and error handling; specifically create an endpoint that accepts
POST, reads await request.json(), checks url is a non-empty string, calls the
generator (or returns a helpful error if generation fails), and responds with
new Response(JSON.stringify(result), { status: 200, headers: { "Content-Type":
"application/json" } }) or suitable error statuses.
| const data = await response.json(); | ||
|
|
||
| if (!response.ok) throw new Error(data.error || "Failed to generate"); |
There was a problem hiding this comment.
response.json() will throw an unhelpful error if the server returns non-JSON (e.g., an HTML 500 page).
If the API route is missing or the server returns a non-JSON response, response.json() throws a syntax error before you reach the response.ok check.
Proposed fix: check status before parsing
- const data = await response.json();
-
- if (!response.ok) throw new Error(data.error || "Failed to generate");
+ if (!response.ok) {
+ const data = await response.json().catch(() => ({}));
+ throw new Error(data.error || `Request failed (${response.status})`);
+ }
+
+ const data = await response.json();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const data = await response.json(); | |
| if (!response.ok) throw new Error(data.error || "Failed to generate"); | |
| if (!response.ok) { | |
| const data = await response.json().catch(() => ({})); | |
| throw new Error(data.error || `Request failed (${response.status})`); | |
| } | |
| const data = await response.json(); |
🤖 Prompt for AI Agents
In `@app/page.tsx` around lines 24 - 26, The code calls response.json()
unconditionally which throws on non-JSON responses (e.g., HTML 500) before you
check response.ok; change the flow in app/page.tsx so you first check
response.ok on the fetched response variable, and if !response.ok read the raw
response.text() (or include response.status) and throw an Error with that
text/status, otherwise call response.json() to parse into data; update the error
throw to include the server text or status and only parse JSON when the response
is successful.
| const apiKey = process.env.GEMINI_API_KEY; | ||
|
|
||
| if (!apiKey) { | ||
| throw new Error("GEMINI_API_KEY is not defined in .env.local"); | ||
| } |
There was a problem hiding this comment.
Top-level throw will crash next build if the env var is absent.
This module is evaluated at import time. If any server-side code imports model, the throw executes during next build in CI/CD environments where GEMINI_API_KEY may not be set. Defer the validation to runtime instead.
Proposed fix: lazy initialization
-const apiKey = process.env.GEMINI_API_KEY;
-
-if (!apiKey) {
- throw new Error("GEMINI_API_KEY is not defined in .env.local");
-}
-
-const genAI = new GoogleGenerativeAI(apiKey);
-
-
-export const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+let _model: ReturnType<GoogleGenerativeAI["getGenerativeModel"]> | null = null;
+
+export function getModel() {
+ if (!_model) {
+ const apiKey = process.env.GEMINI_API_KEY;
+ if (!apiKey) {
+ throw new Error("GEMINI_API_KEY is not defined in .env.local");
+ }
+ const genAI = new GoogleGenerativeAI(apiKey);
+ _model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
+ }
+ return _model;
+}🤖 Prompt for AI Agents
In `@src/lib/gemini.ts` around lines 3 - 7, The module currently throws at import
time via the top-level apiKey constant, which can crash next build; remove the
top-level throw and replace with a lazy/runtime accessor (e.g., add a
getGeminiApiKey() function that reads process.env.GEMINI_API_KEY and throws if
missing) and change any code that previously used the top-level apiKey (or any
model/client initialization) to call getGeminiApiKey() at runtime before
creating the Gemini client; ensure no import-time side effects remain so
validation happens only when the client or model (the function/class that
constructs the Gemini client) is actually invoked.
| const genAI = new GoogleGenerativeAI(apiKey); | ||
|
|
||
|
|
||
| export const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" }); No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Google Generative AI Gemini models available 2026
💡 Result:
As of February 9, 2026, Google’s Gemini models available to developers (Gemini API / Google AI Studio) include:
-
Gemini 3 (Preview)
gemini-3-pro-preview[1]gemini-3-pro-image-preview(image + text out; image generation) [1]gemini-3-flash-preview[1]
-
Gemini 2.5 (Stable + some previews)
gemini-2.5-pro(stable) [2]gemini-2.5-flash(stable) [1]gemini-2.5-flash-lite(stable) andgemini-2.5-flash-lite-preview-09-2025(preview) [1]gemini-2.5-flash-preview-09-2025(preview) [1]gemini-2.5-pro-preview-tts(text-to-speech preview) [2]
-
Gemini 2.0
gemini-2.0-flash(latest),gemini-2.0-flash-001(stable),gemini-2.0-flash-exp(experimental) [3]gemini-2.0-flash-lite[3]
On Vertex AI, Google lists availability across Gemini 3 Pro / 3 Flash, Gemini 2.5 Pro / 2.5 Flash / 2.5 Flash-Lite, plus Gemini 2.5 Flash Image and Gemini 2.5 Flash Live API, and Gemini 2.0 Flash / 2.0 Flash-Lite. [4]
Sources: [1] Gemini API models page, [2] Gemini 2.5 Pro + TTS entries, [3] Gemini 2.0 Flash + Flash-Lite entries, [4] Vertex AI “Google models” page.
🏁 Script executed:
cat -n src/lib/gemini.tsRepository: BeyteFlow/ReadmeGenAI
Length of output: 463
🏁 Script executed:
rg -r '(gemini-|process.env|GEMINI_|MODEL_)' src/lib/ -A 2 -B 2Repository: BeyteFlow/ReadmeGenAI
Length of output: 47
🏁 Script executed:
fd '\.(env|config|constants)' --type f | head -20Repository: BeyteFlow/ReadmeGenAI
Length of output: 116
Update model to a currently supported version and extract to an environment variable.
The gemini-1.5-flash model is no longer available as of February 2026. Update to gemini-2.5-flash or gemini-2.5-pro (both stable) or gemini-2.0-flash. Also extract the model name to GEMINI_MODEL environment variable to match the pattern already established with GEMINI_API_KEY and enable easier future updates without code changes.
🤖 Prompt for AI Agents
In `@src/lib/gemini.ts` at line 12, Replace the hard-coded model string in the
genAI client setup: change the export const model = genAI.getGenerativeModel({
model: "gemini-1.5-flash" }); to read the model name from the GEMINI_MODEL
environment variable (with a sensible default like "gemini-2.5-flash" or
"gemini-2.5-pro") and pass that value into genAI.getGenerativeModel; update any
related usage to reference this exported model constant so future model changes
require only updating GEMINI_MODEL.
1 participant
🚀 BΞYTΞFLʘW | Pull Request Protocol
PR Type: (Choose one:
feat|fix|refactor|docs|perf)Issue Link: Fixes #
📝 System Summary
Provide a concise brief of the changes introduced to the stream.
🛠️ Technical Changes
.........🧪 Quality Assurance (QA)
npm run buildexecuted without errors.🖼️ Visual Evidence
If this PR affects the UI, drop a screenshot or GIF below:
📡 Developer Authorization
Authorized by: @Yourusername
Timestamp: {{ date }}