gpt 5.2 model on vibe coding platform (#1359)

### Description

<!--
✍️ Write a short summary of your work. Screenshots and videos are
welcome!
-->

### Demo URL

<!--
Provide a URL to a live deployment where we can test your PR. If a demo
isn't possible feel free to omit this section.
-->

### Type of Change

- [ ] New Example
- [ ] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

Author: dancer

apps/vibe-coding-platform/ai/constants.ts

@@ -6,19 +6,19 @@ export enum Models {
   AnthropicClaude45Sonnet = 'anthropic/claude-sonnet-4.5',
   GoogleGeminiFlash = 'google/gemini-2.5-flash',
   MoonshotKimiK2 = 'moonshotai/kimi-k2',
-  OpenAIGPT5 = 'gpt-5',
+  OpenAIGPT52 = 'openai/gpt-5.2',
   XaiGrok3Fast = 'xai/grok-3-fast',
 }
 
-export const DEFAULT_MODEL = Models.AnthropicClaude45Sonnet
+export const DEFAULT_MODEL = Models.OpenAIGPT52
 
 export const SUPPORTED_MODELS: GatewayModelId[] = [
+  Models.OpenAIGPT52,
   Models.AmazonNovaPro,
   Models.AnthropicClaude4Sonnet,
   Models.AnthropicClaude45Sonnet,
   Models.GoogleGeminiFlash,
   Models.MoonshotKimiK2,
-  Models.OpenAIGPT5,
   Models.XaiGrok3Fast,
 ]
 

apps/vibe-coding-platform/ai/gateway.ts

@@ -18,10 +18,10 @@ export interface ModelOptions {
 
 export function getModelOptions(
   modelId: string,
-  options?: { reasoningEffort?: 'minimal' | 'low' | 'medium' }
+  options?: { reasoningEffort?: 'low' | 'medium' | 'high' }
 ): ModelOptions {
   const gateway = gatewayInstance()
-  if (modelId === Models.OpenAIGPT5) {
+  if (modelId === Models.OpenAIGPT52) {
     return {
       model: gateway(modelId),
       providerOptions: {

apps/vibe-coding-platform/ai/tools/generate-files/get-contents.ts

@@ -36,7 +36,7 @@ export async function* getContents(
   const generated: z.infer<typeof fileSchema>[] = []
   const deferred = new Deferred<void>()
   const result = streamObject({
-    ...getModelOptions(params.modelId, { reasoningEffort: 'minimal' }),
+    ...getModelOptions(params.modelId, { reasoningEffort: 'low' }),
     maxOutputTokens: 64000,
     system:
       'You are a file content generator. You must generate files based on the conversation history and the provided paths. NEVER generate lock files (pnpm-lock.yaml, package-lock.json, yarn.lock) - these are automatically created by package managers.',

apps/vibe-coding-platform/ai/tools/run-command.md

@@ -46,6 +46,7 @@ Use Run Command when:
 ## Other Rules
 
 - When running `pnpm dev` in a Next.js or Vite project, HMR can handle updates so generally you don't need to kill the server process and start it again after changing files.
+- NEVER use `pnpm run dev -- -p 3000` for Next.js. The `--` causes Next.js to interpret `-p` as a directory path, resulting in an error. Just use `pnpm run dev` (port 3000 is the default).
 
 ## Examples
 

apps/vibe-coding-platform/app/api/chat/prompt.md

@@ -22,6 +22,15 @@ CRITICAL Next.js Requirements:
 - Global styles should be in app/globals.css (not styles/globals.css) when using App Router
 - Use the App Router structure: app/layout.tsx, app/page.tsx, etc.
 - Import global styles in app/layout.tsx as './globals.css'
+- To start the dev server, use `pnpm run dev` (defaults to port 3000). NEVER use `pnpm run dev -- -p 3000` as the `--` causes Next.js to treat `-p` as a directory path.
+
+CRITICAL ESM/CommonJS Requirements:
+
+- When package.json has `"type": "module"`, all .js config files are treated as ESM
+- postcss.config.js MUST use `export default { ... }` syntax, NOT `module.exports`
+- tailwind.config.js MUST use `export default { ... }` syntax, NOT `module.exports`
+- Alternatively, use .cjs extension (postcss.config.cjs) to use CommonJS syntax
+- Always check package.json for "type": "module" before generating config files
 
 Files that should NEVER be manually generated:
 
@@ -54,6 +63,7 @@ You are equipped with the following tools:
    - Executes commands asynchronously in a stateless shell within the sandbox. Each execution provides a `commandId` for tracking purposes.
    - Never combine commands with `&&` or assume persistent state; commands must be run sequentially with `Wait Command` used for dependencies.
    - Use `pnpm` for package management whenever possible; avoid `npm`.
+   - NEVER use `pnpm run dev -- -p 3000`. The `--` causes Next.js to interpret `-p` as a directory. Just use `pnpm run dev` (port 3000 is the default).
 
 4. **Wait Command**
 

apps/vibe-coding-platform/app/api/errors/route.ts

@@ -19,11 +19,11 @@ export async function POST(req: Request) {
 
   const result = await generateObject({
     system: prompt,
-    model: Models.OpenAIGPT5,
+    model: Models.OpenAIGPT52,
     providerOptions: {
       openai: {
         include: ['reasoning.encrypted_content'],
-        reasoningEffort: 'minimal',
+        reasoningEffort: 'low',
         reasoningSummary: 'auto',
         serviceTier: 'priority',
       },

apps/vibe-coding-platform/components/chat/message-part/generate-files.tsx

@@ -31,8 +31,8 @@ export function GenerateFiles(props: {
         </span>
       </ToolHeader>
       <div className="text-sm relative min-h-5">
-        {generated.map((path) => (
-          <div className="flex items-center" key={'gen' + path}>
+        {generated.map((path, index) => (
+          <div className="flex items-center" key={index}>
             <CheckIcon className="w-4 h-4 mx-1" />
             <span className="whitespace-pre-wrap">{path}</span>
           </div>

apps/vibe-coding-platform/components/settings/reasoning-effort.tsx

@@ -1,36 +1,36 @@
-import { Models } from '@/ai/constants'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
-import { useModelId, useReasoningEffort } from './use-settings'
+import { Models } from "@/ai/constants";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { useModelId, useReasoningEffort } from "./use-settings";
 
 export function ReasoningEffort() {
-  const [modelId] = useModelId()
-  const [effort, setEffort] = useReasoningEffort()
-  if (modelId !== Models.OpenAIGPT5) {
-    return null
+  const [modelId] = useModelId();
+  const [effort, setEffort] = useReasoningEffort();
+  if (modelId !== Models.OpenAIGPT52) {
+    return null;
   }
 
   return (
     <div
-      className="flex items-center justify-between cursor-pointer hover:bg-accent/50 rounded p-2 -m-2"
-      onClick={() => setEffort(effort === 'medium' ? 'low' : 'medium')}
+      className="flex justify-between items-center p-2 -m-2 rounded cursor-pointer hover:bg-accent/50"
+      onClick={() => setEffort(effort === "medium" ? "low" : "medium")}
     >
-      <div className="space-y-1 flex-1 pointer-events-none">
+      <div className="flex-1 space-y-1 pointer-events-none">
         <Label className="text-sm text-foreground" htmlFor="effort-level">
           Higher Effort Level
         </Label>
-        <p className="text-sm text-muted-foreground leading-relaxed">
-          With GPT-5, you can request higher reasoning effort level.
+        <p className="text-sm leading-relaxed text-muted-foreground">
+          With GPT-5.2, you can request higher reasoning effort level.
         </p>
       </div>
       <Checkbox
         id="effort-level"
         className="ml-3 pointer-events-none"
-        checked={effort === 'medium'}
+        checked={effort === "medium"}
         onCheckedChange={(checked) =>
-          setEffort(checked === true ? 'medium' : 'low')
+          setEffort(checked === true ? "medium" : "low")
         }
       />
     </div>
-  )
+  );
 }