DR-6671 - Add Typefully clone guide #7412
Conversation
Dangerous URL checkNo absolute URLs to prisma.io/docs found. |
Redirect checkThis PR probably requires the following redirects to be added to static/_redirects:
|
WalkthroughA new Vibe Coding tutorial MDX (TweetSmith — AI-powered tweet polishing) was added and registered in the AI > Prompts > Vibe Coding Tutorials sidebar; cSpell vocabulary was updated to allow new terms. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Pre-merge checks✅ Passed checks (3 passed)
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 |
🍈 Lychee Link Check Report
📊 Results Overview
Errors per inputErrors in 800-guides/380-vercel-app-deployment.mdx
|
Deploying docs with
|
| Latest commit: |
6e6660b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c9ee7e3a.docs-51g.pages.dev |
| Branch Preview URL: | https://dr-6671-tweet-saas-guide.docs-51g.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
content/900-ai/tutorials/typefully-clone.mdx (2)
573-592: Clarify the file location or adjust the import path.The import path
"../app/generated/prisma/client"implieslib/prisma.tssits at the project root alongsideapp/. However, the instruction says "Createlib/prisma.ts" without specifying the location relative to the project structure.Consider either:
- Explicitly stating the file should be at
<project-root>/lib/prisma.ts, or- Using
@/app/generated/prisma/clientwith the configured alias for clarityThis prevents confusion for developers who might place
libinsideapp/.
163-163: Minor: Redundant phrasing."a TweetSmith app called 'TweetSmith'" reads awkwardly. Consider simplifying to:
-I need you to create a minimalist single-page UI for a TweetSmith app called "TweetSmith". +I need you to create a minimalist single-page UI for a tweet polishing app called "TweetSmith".
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
content/900-ai/tutorials/typefully-clone.mdxsidebars.ts
🧰 Additional context used
🪛 GitHub Actions: Documentation Checks
content/900-ai/tutorials/typefully-clone.mdx
[error] 2-2: cspell: Unknown word 'Ollama'.
[error] 3-3: cspell: Unknown word 'Ollama'.
[error] 4-4: cspell: Unknown word 'Ollama'.
[error] 5-5: cspell: Unknown word 'Typefully'.
[error] 21-21: cspell: Unknown word 'Ollama'.
[error] 40-40: cspell: Unknown word 'Ollama'.
🪛 LanguageTool
content/900-ai/tutorials/typefully-clone.mdx
[style] ~298-~298: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...y You might notice the LLM returns the exact same output every time. That's because LLMs ...
(EN_WORDINESS_PREMIUM_EXACT_SAME)
[style] ~326-~326: For conciseness, consider replacing this expression with an adverb.
Context: ...on" ``` --- ## 6. Add Filter Options Right now, every tweet gets the same treatment. B...
(AT_THE_MOMENT)
[style] ~702-~702: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... they're not ready to post yet, or they want to build a collection of polished content....
(REP_WANT_TO_VB)
[grammar] ~981-~981: Use a hyphen to join words.
Context: ...# Summary You've built a complete tweet polishing application with: - ✅ Local A...
(QB_NEW_EN_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Check internal links
- GitHub Check: Cloudflare Pages
🔇 Additional comments (3)
sidebars.ts (1)
502-505: LGTM!The new tutorial entry follows the established pattern and is correctly placed within the "Vibe Coding Tutorials" category alongside the existing linktree-clone entry.
content/900-ai/tutorials/typefully-clone.mdx (2)
940-950: LGTM!The
postinstallscript for runningprisma generateis the correct approach to ensure the Prisma Client is generated during Vercel's build process.
12-26: LGTM!The introduction clearly explains what users will build and the technologies involved. The vibe coding info block is a helpful addition for users unfamiliar with the concept.
| ```json | ||
| { | ||
| "models": [{ | ||
| "name": "gemma3:4b", | ||
| "family": "gemma3", | ||
| "parameter_size": "4.3B", | ||
| "quantization_level": "Q4_K_M" | ||
| }] | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Ollama API /api/tags endpoint response format
💡 Result:
The /api/tags endpoint (GET /api/tags) returns JSON with a top-level "models" array. Each model object contains these fields:
Example response (trimmed):
{
"models": [
{
"name": "gemma3",
"modified_at": "2025-10-03T23:34:03.409490317-07:00",
"size": 3338801804,
"digest": "a2af6c...119ec3f04a3addf55f92841195f5a",
"details": {
"format": "gguf",
"family": "gemma",
"families": ["gemma"],
"parameter_size": "4.3B",
"quantization_level": "Q4_K_M"
}
}
]
}
Field meanings:
- models: array of model objects.
- name: model name (string).
- modified_at: ISO8601 timestamp of last modification (string).
- size: model file size in bytes (integer).
- digest: model file digest/hash (string).
- details: object with metadata such as:
- format (string), family (string), families (array of strings), parameter_size (string), quantization_level (string).
Sources: Ollama API docs and examples. [1][2]
References
[1] Ollama API — List models (/api/tags) documentation.
[2] Example /api/tags response (API examples).
Update the JSON example to match the actual Ollama /api/tags response structure, or clearly note it's a simplified illustration.
The sample shown here omits critical fields returned by the actual endpoint. The real response includes modified_at (timestamp), size (bytes), digest (hash), and nests model metadata under a details object containing format, family, families array, parameter_size, and quantization_level. Currently, the example shows only a subset of fields at the wrong nesting level, which may confuse developers when their actual API responses differ significantly. Either display the complete structure, explicitly label this as abbreviated for brevity, or point developers to the Ollama documentation for the full response format.
🤖 Prompt for AI Agents
In content/900-ai/tutorials/typefully-clone.mdx around lines 84–93, the JSON
example does not match Ollama's /api/tags response: update the sample to either
show the real structure (each model object includes name, modified_at
(timestamp), size (bytes), digest (hash) and a nested details object with
format, family, families (array), parameter_size and quantization_level) or
clearly mark the snippet as an abbreviated example and add a short note
directing readers to the Ollama docs for the full response schema; ensure the
example uses the proper nesting (details) and includes the additional fields or
the explicit “simplified for brevity” label.
| 3. **Important:** Add all your environment variables in Vercel's dashboard: | ||
| - `DATABASE_URL` | ||
| - `UPLOADTHING_TOKEN` | ||
|
|
There was a problem hiding this comment.
Deployment note: Ollama won't work in production.
The tutorial builds an app that relies on a local Ollama instance (localhost:11434), but the deployment section doesn't address that the AI transformation feature won't function in the deployed Vercel app since Ollama runs locally.
Consider adding a note explaining this limitation and suggesting alternatives for production (e.g., switching to a cloud LLM API like OpenAI, Anthropic, or Groq for deployed environments).
🤖 Prompt for AI Agents
In content/900-ai/tutorials/typefully-clone.mdx around lines 960 to 963, the
deployment section omits that Ollama (localhost:11434) won't function in Vercel
production; add a brief deployment note stating Ollama is local-only and AI
features will not work when deployed, and provide concrete alternatives (switch
to a cloud LLM provider such as OpenAI/Anthropic/Groq or offer instructions to
proxy requests to a self-hosted Ollama instance) and mention any additional
environment variables or config changes required for those alternatives.
🍈 Lychee Link Check Report
📊 Results Overview
Errors per inputErrors in 800-guides/380-vercel-app-deployment.mdx
|
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
content/900-ai/tutorials/typefully-clone.mdx (2)
84-93: JSON example is simplified - consider noting this for readers.This example omits fields from the actual Ollama
/api/tagsresponse (likemodified_at,size,digest, and the nesteddetailsobject). While this keeps the tutorial focused, developers may be surprised when their actual API response differs.Consider adding a brief note like "(simplified for clarity)" or linking to Ollama's documentation for the full schema.
928-948: Consider adding a deployment note about Ollama's local-only limitation.The tutorial builds an excellent local development experience, but the "What's Next?" section doesn't mention that deploying to Vercel (or any serverless platform) will break the AI transformation feature since Ollama runs on
localhost:11434.A brief note would help readers understand they'd need to either:
- Switch to a cloud LLM API (OpenAI, Anthropic, Groq) for production
- Self-host Ollama on a server and update the endpoint
This sets proper expectations before users attempt deployment.
🧹 Nitpick comments (1)
content/900-ai/tutorials/typefully-clone.mdx (1)
667-677: Consider using the@/alias for cleaner imports.The prompt suggests
import prisma from "../../../lib/prisma", which works but is fragile if files move. Since the project uses the@/*alias (line 124), suggesting@/lib/prismawould be more maintainable and consistent with Next.js conventions.Suggested prompt update
-Import prisma from "../../../lib/prisma" +Import prisma from "@/lib/prisma"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
cSpell.jsoncontent/900-ai/tutorials/typefully-clone.mdx
🧰 Additional context used
🪛 LanguageTool
content/900-ai/tutorials/typefully-clone.mdx
[style] ~298-~298: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...y You might notice the LLM returns the exact same output every time. That's because LLMs ...
(EN_WORDINESS_PREMIUM_EXACT_SAME)
[style] ~326-~326: For conciseness, consider replacing this expression with an adverb.
Context: ...on" ``` --- ## 6. Add Filter Options Right now, every tweet gets the same treatment. B...
(AT_THE_MOMENT)
[style] ~702-~702: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... they're not ready to post yet, or they want to build a collection of polished content....
(REP_WANT_TO_VB)
[grammar] ~930-~930: Use a hyphen to join words.
Context: ...# Summary You've built a complete tweet polishing application with: - ✅ Local A...
(QB_NEW_EN_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Check internal links
- GitHub Check: Cloudflare Pages
🔇 Additional comments (6)
cSpell.json (1)
52-52: LGTM! New dictionary entries are correctly placed.Both "Ollama" and "Typefully" are inserted in proper alphabetical order within the words array, which will allow the new tutorial content to pass spellcheck.
Side note: There are pre-existing duplicate entries in this file (e.g.,
Postico,CASL,serverful,autoscale,Tabnineappear twice). Consider cleaning those up in a separate PR if you'd like.Also applies to: 87-87
content/900-ai/tutorials/typefully-clone.mdx (5)
1-10: Frontmatter looks well-structured.The metadata includes all necessary fields for documentation rendering. The 60-minute completion time is appropriate given the tutorial's comprehensive scope.
573-592: Verify the import path for the generated Prisma client.The import path
"../app/generated/prisma/client"assumeslib/is at the project root. Given the schema'soutput = "../app/generated/prisma"(line 553), the actual client would typically be imported from"@/app/generated/prisma"(using the configured alias) or"../app/generated/prisma"without the/clientsuffix, depending on how Prisma generates the output.Double-check this path works correctly after running
prisma generate. If users follow the tutorial verbatim, a mismatch here would cause a confusing import error.
869-924: Nice pattern for handling uploads.The "preview locally, upload only on save" approach at lines 892-910 is smart - it prevents orphaned files when users select an image but don't complete the save. This is the kind of UX consideration that separates tutorials that just work from tutorials that work well.
12-26: Well-structured introduction with clear learning outcomes.The introduction effectively sets expectations by listing the tech stack and end goals. The "What is Vibe Coding?" info box at lines 27-31 provides helpful context for readers unfamiliar with the concept.
951-959: Solid resources section.Good practice linking to primary documentation for all major technologies used. These give readers clear paths for deeper learning.
| ```prisma | ||
| generator client { | ||
| provider = "prisma-client" | ||
| output = "../app/generated/prisma" | ||
| } | ||
|
|
||
| datasource db { | ||
| provider = "postgresql" | ||
| } | ||
|
|
||
| model SavedTweet { | ||
| id String @id @default(cuid()) | ||
| original String // The draft tweet input | ||
| transformed String // The polished/transformed tweet | ||
| context String? // Optional user context/style used | ||
| imageUrl String? // Optional image URL | ||
| imageAlt String? // Optional alt text for accessibility | ||
| createdAt DateTime @default(now()) | ||
| updatedAt DateTime @updatedAt | ||
| } | ||
| ``` |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Prisma datasource url field required configuration
💡 Result:
Short answer: The datasource url field is required. In schema.prisma a datasource block must include provider and url (url is a required string/URL; typically set via env("DATABASE_URL")). You may also optionally set directUrl and shadowDatabaseUrl, and you can programmatically override the datasource URL when creating PrismaClient. (prisma.io)
Sources:
[1] Prisma Schema reference — datasource fields (url required).
[2] Connection URLs / using env("DATABASE_URL").
[3] Data sources overview — overriding URL and shadow/direct URL.
Citations:
Add the required url field to the datasource block.
The datasource configuration is missing the required url field. Prisma requires this in every datasource block:
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}Without it, prisma db push, prisma generate, and other Prisma commands will fail. Users following this tutorial will encounter errors unless this field is present.
🤖 Prompt for AI Agents
In content/900-ai/tutorials/typefully-clone.mdx around lines 549 to 569, the
Prisma datasource block is missing the required url property; update the
datasource db block to include a url that reads from the environment (e.g.,
env("DATABASE_URL")) so Prisma commands like db push and generate can locate the
database connection string.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.