Add canvas interface (vercel#461)

ai/custom-middleware.ts

@@ -1,3 +1,3 @@
-import { Experimental_LanguageModelV1Middleware } from "ai";
+import { Experimental_LanguageModelV1Middleware } from 'ai';
 
 export const customMiddleware: Experimental_LanguageModelV1Middleware = {};

ai/index.ts

@@ -1,13 +1,11 @@
 import { openai } from '@ai-sdk/openai';
 import { experimental_wrapLanguageModel as wrapLanguageModel } from 'ai';
 
-import { type Model } from '@/lib/model';
-
 import { customMiddleware } from './custom-middleware';
 
-export const customModel = (modelName: Model['name']) => {
+export const customModel = (apiIdentifier: string) => {
   return wrapLanguageModel({
-    model: openai(modelName),
+    model: openai(apiIdentifier),
     middleware: customMiddleware,
   });
 };

ai/models.ts

@@ -0,0 +1,31 @@
+// Define your models here.
+
+export interface Model {
+  id: string;
+  label: string;
+  apiIdentifier: string;
+  description: string;
+}
+
+export const models: Array<Model> = [
+  {
+    id: 'gpt-4o-mini',
+    label: 'GPT 4o mini',
+    apiIdentifier: 'gpt-4o-mini',
+    description: 'Small model for fast, lightweight tasks',
+  },
+  {
+    id: 'gpt-4o',
+    label: 'GPT 4o',
+    apiIdentifier: 'gpt-4o',
+    description: 'For complex, multi-step tasks',
+  },
+  {
+    id: 'gpt-4o-canvas',
+    label: 'GPT 4o with Canvas',
+    apiIdentifier: 'gpt-4o',
+    description: 'Collaborate with writing',
+  },
+] as const;
+
+export const DEFAULT_MODEL_NAME: string = 'gpt-4o-mini';

ai/prompts.ts

@@ -0,0 +1,26 @@
+export const canvasPrompt = `
+  Canvas is a special user interface mode that helps users with writing, editing, and other content creation tasks. When canvas is open, it is on the right side of the screen, while the conversation is on the left side. When creating or updating documents, changes are reflected in real-time on the canvas and visible to the user.
+
+  This is a guide for using canvas tools: \`createDocument\` and \`updateDocument\`, which render content on a canvas beside the conversation.
+
+  **When to use \`createDocument\`:**
+  - For substantial content (>10 lines)
+  - For content users will likely save/reuse (emails, code, essays, etc.)
+  - When explicitly requested to create a document
+
+  **When NOT to use \`createDocument\`:**
+  - For short content (<10 lines)
+  - For informational/explanatory content
+  - For conversational responses
+  - When asked to keep it in chat
+
+  **Using \`updateDocument\`:**
+  - Default to full document rewrites for major changes
+  - Use targeted updates only for specific, isolated changes
+  - Follow user instructions for which parts to modify
+
+  Do not update document right after creating it. Wait for user feedback or request to update it.
+  `;
+
+export const regularPrompt =
+  'You are a friendly assistant! Keep your responses concise and helpful.';

app/(chat)/actions.ts

@@ -2,7 +2,7 @@
 
 import { cookies } from 'next/headers';
 
-export async function saveModel(model: string) {
+export async function saveModelId(model: string) {
   const cookieStore = await cookies();
-  cookieStore.set('model', model);
+  cookieStore.set('model-id', model);
 }