quickstart consistency

Author: ataibarkai

docs/snippets/copilot-ui.mdx

@@ -5,9 +5,9 @@ You are almost there!
 Now it's time to setup your Copilot UI.
 
 
-First, import the default styles in your root component:
+First, import the default styles in your root component (typically `layout.tsx`) :
 
-```tsx 
+```tsx filename="layout.tsx"
 import "@copilotkit/react-ui/styles.css";
 ```
 

docs/snippets/self-hosting-copilot-runtime-configure-copilotkit-provider.mdx

@@ -4,14 +4,13 @@ For most use-cases, it's appropriate to wrap the `CopilotKit` provider around th
 
 Point it at the Copilot Runtime URL you configured in the previous step.
 
-  ```tsx filename="layout.tsx" showLineNumbers {7, 9}
-  "use client";
-
+  ```tsx filename="layout.tsx" showLineNumbers {5,6,8}
   import { CopilotKit } from "@copilotkit/react-core";
 
   export default function RootLayout({children}) {
     return (
-      <CopilotKit runtimeUrl="<copilot-runtime-url-configured-in-the-previous-step>">
+      {/* Make sure to use the URL you configured in the previous step */}
+      <CopilotKit runtimeUrl="/api/copilotkit">
         {children}
       </CopilotKit>
     );

docs/snippets/self-hosting-copilot-runtime-create-endpoint.mdx

@@ -15,6 +15,9 @@ First, choose which LLM model you would like to use under the hood:
     OPENAI_API_KEY=your_api_key_here
     ```
 
+    Please note that the code below uses GPT-4o, which requires a paid OpenAI API key.
+    **If you are using a free OpenAI API key**, change the model to a different option such as "gpt-3.5-turbo".
+
     #### Endpoint Setup
 
     <Tabs items={['Next.js App Router', 'Next.js Pages Router', 'Node.js Express', 'Node.js HTTP', 'NestJS']}>
@@ -33,14 +36,17 @@ First, choose which LLM model you would like to use under the hood:
         import { NextRequest } from 'next/server';
 
         const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-        const llmAdapter = new OpenAIAdapter({ openai });
+        const llmAdapter = new OpenAIAdapter({ 
+          openai,
+          model: "gpt-4o"
+        });
 
         const runtime = new CopilotRuntime();
 
         export const POST = async (req: NextRequest) => {
           const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
             runtime,
-            llmAdapter,
+            serviceAdapter: llmAdapter,
             endpoint: '/api/copilotkit',
           });
 
@@ -65,15 +71,18 @@ First, choose which LLM model you would like to use under the hood:
         import OpenAI from 'openai';
 
         const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-        const llmAdapter = new OpenAIAdapter({ openai });
+        const llmAdapter = new OpenAIAdapter({ 
+          openai,
+          model: "gpt-4o"
+        });
 
         const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           const runtime = new CopilotRuntime();
 
           const handleRequest = copilotRuntimeNextJSPagesRouterEndpoint({
             endpoint: '/api/copilotkit',
             runtime,
-            llmAdapter,
+            serviceAdapter: llmAdapter,
           });
 
           return await handleRequest(req, res);
@@ -100,14 +109,17 @@ First, choose which LLM model you would like to use under the hood:
 
         const app = express();
         const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-        const llmAdapter = new OpenAIAdapter({ openai });
+        const llmAdapter = new OpenAIAdapter({ 
+          openai,
+          model: "gpt-4o"
+        });
 
         app.use('/copilotkit', (req, res, next) => {
           const runtime = new CopilotRuntime();
           const handler = copilotRuntimeNodeHttpEndpoint({
             endpoint: '/copilotkit',
             runtime,
-            llmAdapter,
+            serviceAdapter: llmAdapter,
           });
 
           return handler(req, res, next);
@@ -135,14 +147,17 @@ First, choose which LLM model you would like to use under the hood:
         import OpenAI from 'openai';
 
         const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-        const llmAdapter = new OpenAIAdapter({ openai });
+        const llmAdapter = new OpenAIAdapter({ 
+          openai,
+          model: "gpt-4o"
+        });
 
         const server = createServer((req, res) => {
           const runtime = new CopilotRuntime();
           const handler = copilotRuntimeNodeHttpEndpoint({
             endpoint: '/copilotkit',
             runtime,
-            llmAdapter,
+            serviceAdapter: llmAdapter,
           });
 
           return handler(req, res);
@@ -170,7 +185,10 @@ First, choose which LLM model you would like to use under the hood:
           @All('/copilotkit')
           copilotkit(@Req() req: Request, @Res() res: Response) {
             const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
-            const llmAdapter = new OpenAIAdapter({ openai });
+            const llmAdapter = new OpenAIAdapter({ 
+              openai,
+              model: "gpt-4o"
+            });
             const runtime = new CopilotRuntime();
 
             runtime.streamHttpServerResponse(req, res, llmAdapter);