Update prompt registry with instructions to fetch prompts (#91)

* Pagination bug * Bug fix * Update prompt registry
Scale3-Labs · May 9, 2024 · e3edb54 · e3edb54
1 parent 82bd818
commit e3edb54
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 4 deletions.
diff --git a/app/(protected)/project/[project_id]/prompts/[prompt_id]/page.tsx b/app/(protected)/project/[project_id]/prompts/[prompt_id]/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import CreatePromptDialog from "@/components/shared/create-prompt-dialog";
+import { PromptInstructions } from "@/components/shared/setup-instructions";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -141,6 +142,12 @@ export default function Page() {
             ))}
           </div>
           <div className="flex flex-col gap-8 w-full">
+            <div className="flex flex-col gap-2">
+              <Label>Prompt Registry ID</Label>
+              <p className="p-2 rounded-md border-2 border-muted font-semibold text-md">
+                {promptsetId}
+              </p>
+            </div>
             <div className="flex flex-col gap-2">
               <Label>Prompt</Label>
               <p className="p-2 rounded-md border-2 border-muted">
@@ -222,6 +229,10 @@ export default function Page() {
                 </p>
               </div>
             </div>
+            <div className="flex flex-col gap-2">
+              <Label>Use the Live prompt directly in your code</Label>
+              <PromptInstructions id={promptsetId} />
+            </div>
           </div>
         </div>
       </div>

diff --git a/components/shared/setup-instructions.tsx b/components/shared/setup-instructions.tsx
@@ -150,7 +150,7 @@ await Langtrace.withAdditionalAttributes(async () => {
       { role: 'user', content: 'Hello, how are you?' }
     ]
   })
-}, { 'langtrace.testId': ${testId} })
+}, { 'langtrace.testId': '${testId}' })
 `
               );
             }}
@@ -165,7 +165,7 @@ await Langtrace.withAdditionalAttributes(async () => {
       { role: 'user', content: 'Hello, how are you?' }
     ]
   })
-}, { 'langtrace.testId': ${testId} })
+}, { 'langtrace.testId': '${testId}' })
 `}
           </pre>
         )}
@@ -177,7 +177,7 @@ await Langtrace.withAdditionalAttributes(async () => {
                 `
 from langtrace_python_sdk.utils.with_root_span import (with_additional_attributes)
 
-@with_additional_attributes({ langtrace.testId: ${testId} })
+@with_additional_attributes({ langtrace.testId: '${testId}' })
 def test_function():
     response = client.chat.completions.create(
         model='gpt-4',
@@ -193,7 +193,7 @@ def test_function():
 from langtrace_python_sdk.utils.with_root_span
     import (with_additional_attributes)
 
-@with_additional_attributes({ langtrace.testId: ${testId} })
+@with_additional_attributes({ langtrace.testId: '${testId}' })
 def test_function():
     response = client.chat.completions.create(
         model='gpt-4',
@@ -208,3 +208,80 @@ def test_function():
     </div>
   );
 }
+
+export function PromptInstructions({ id }: { id: string }) {
+  const [sdk, setSdk] = useState("typescript");
+
+  const copyToClipboard = (code: string) => {
+    navigator.clipboard.writeText(code);
+    return toast.success("Copied to clipboard");
+  };
+
+  return (
+    <div className="flex flex-col gap-6 border rounded-md p-4">
+      <div className="flex flex-row items-center gap-3">
+        <Button
+          onClick={() => setSdk("typescript")}
+          variant={sdk === "typescript" ? "default" : "ghost"}
+          size={"sm"}
+        >
+          TypeScript
+        </Button>
+        <Button
+          disabled={true}
+          onClick={() => setSdk("python")}
+          variant={sdk === "python" ? "default" : "ghost"}
+          size={"sm"}
+        >
+          Python (Coming Soon)
+        </Button>
+      </div>
+      <div className="flex flex-col gap-3">
+        <p className="text-sm">
+          Pass the prompt registry ID to the function.
+          <br /> This will automatically fetch the currently Live prompt from
+          the prompt registry. Example:
+        </p>
+        {sdk === "typescript" && (
+          <pre
+            className="text-xs p-2 rounded-md bg-muted select-all selection:bg-orange-400 dark:selection:bg-orange-600"
+            onClick={() => {
+              copyToClipboard(
+                `
+import * as Langtrace from "@langtrase/typescript-sdk";
+
+const prompt = Langtrace.getPromptFromRegistry('${id}')
+`
+              );
+            }}
+          >
+            {`import * as Langtrace from "@langtrase/typescript-sdk";
+
+const prompt = Langtrace.getPromptFromRegistry('${id}')
+`}
+          </pre>
+        )}
+        {sdk === "python" && (
+          <pre
+            className="text-xs p-2 rounded-md bg-muted select-all selection:bg-orange-400 dark:selection:bg-orange-600"
+            onClick={() => {
+              copyToClipboard(
+                `
+from langtrace_python_sdk.utils import (get_prompt_from_registry)
+
+prompt = get_prompt_from_registry('${id}')
+`
+              );
+            }}
+          >
+            {`
+from langtrace_python_sdk.utils import (get_prompt_from_registry)
+
+prompt = get_prompt_from_registry('${id}')
+`}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}