Added line highlighting to the API Key code samples

apps/webapp/app/components/integrations/ApiKeyHelp.tsx

@@ -36,7 +36,11 @@ export function ApiKeyHelp({
       {apiAuth.help.samples.map((sample, i) => (
         <div key={i}>
           <Paragraph spacing>{sample.title}</Paragraph>
-          <CodeBlock code={sample.code} className="mb-4" />
+          <CodeBlock
+            code={sample.code}
+            className="mb-4"
+            highlightedRanges={sample.highlight}
+          />
         </div>
       ))}
     </div>

apps/webapp/app/services/externalApis/integrations/openai.ts

@@ -1,3 +1,4 @@
+import { highlight } from "prismjs";
 import type { Integration } from "../types";
 
 export const openai: Integration = {
@@ -9,7 +10,57 @@ export const openai: Integration = {
     apikey: {
       type: "apikey",
       help: {
-        samples: [],
+        samples: [
+          {
+            title: "Creating the client",
+            code: `
+import { OpenAI } from "@trigger.dev/openai";
+
+const openai = new OpenAI({
+  id: "openai",
+  apiKey: process.env.OPENAI_API_KEY!,
+});
+`,
+          },
+          {
+            title: "Using the client",
+            code: `
+new Job(client, {
+  id: "openai-tasks",
+  name: "OpenAI Tasks",
+  version: "0.0.1",
+  trigger: eventTrigger({
+    name: "openai.tasks",
+    schema: z.object({}),
+  }),
+  integrations: {
+    openai,
+  },
+  run: async (payload, io, ctx) => {
+    //this background function can take longer than a serverless timeout
+    const response = await io.openai.backgroundCreateChatCompletion(
+      "background-chat-completion",
+      {
+        model: "gpt-3.5-turbo",
+        messages: [
+          {
+            role: "user",
+            content: "Create a good programming joke about background jobs",
+          },
+        ],
+      }
+    );
+
+    await io.logger.info("choices", response.choices);
+  },
+});
+            `,
+            highlight: [
+              [10, 10],
+              [13, 24],
+            ],
+          },
+        ],
       },
     },
   },

apps/webapp/app/services/externalApis/types.ts

@@ -22,7 +22,7 @@ export type ApiAuthenticationMethodApiKey = {
   /** The type of authentication method */
   type: "apikey";
   help: {
-    samples: { title: string; code: string }[];
+    samples: { title: string; code: string; highlight?: [number, number][] }[];
   };
 };