feat(auth): UI guidance on how to set api keys for tracing and experi… (

#4578) * feat(auth): UI guidance on how to set api keys for tracing and experiments * remove hook * Update app/src/components/project/PythonProjectGuide.tsx Co-authored-by: Parker Stafford <52351508+Parker-Stafford@users.noreply.github.com> * Update app/src/components/project/TypeScriptProjectGuide.tsx Co-authored-by: Parker Stafford <52351508+Parker-Stafford@users.noreply.github.com> * Update app/src/pages/dataset/RunExperimentButton.tsx Co-authored-by: Parker Stafford <52351508+Parker-Stafford@users.noreply.github.com> --------- Co-authored-by: Parker Stafford <52351508+Parker-Stafford@users.noreply.github.com>
Arize-ai · Sep 21, 2024 · 6b14b11 · 6b14b11
1 parent ce2ba76
commit 6b14b11
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 26 deletions.
diff --git a/app/src/components/project/PythonProjectGuide.tsx b/app/src/components/project/PythonProjectGuide.tsx
@@ -14,6 +14,9 @@ import { CodeWrap } from "@phoenix/components/code/CodeWrap";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
 import { BASE_URL } from "@phoenix/config";
 
+import { IsAdmin } from "../auth";
+
+import { HOSTED_PHOENIX_URL, IS_HOSTED_DEPLOYMENT } from "./hosting";
 import { PythonIntegrations } from "./Integrations";
 
 const PHOENIX_OTEL_DOC_LINK =
@@ -27,13 +30,20 @@ const PHOENIX_ENVIRONMENT_VARIABLES_LINK =
 const INSTALL_PHOENIX_OTEL_PYTHON = `pip install arize-phoenix-otel`;
 const INSTALL_OPENAI_INSTRUMENTATION_PYTHON = `pip install openinference-instrumentation-openai openai`;
 
-const HOSTED_PHOENIX_URL = "https://app.phoenix.arize.com";
-const LLAMATRACE_URL = "https://llamatrace.com";
-
-const HOSTED_BASE_URLS = [HOSTED_PHOENIX_URL, LLAMATRACE_URL];
-
-// Environment variables
-const HOSTED_PHOENIX_ENVIRONMENT_VARIABLES_PYTHON = `PHOENIX_CLIENT_HEADERS='api_key=<your-api-key>'\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`;
+function getEnvironmentVariablesPython({
+  isAuthEnabled,
+  isHosted,
+}: {
+  isAuthEnabled: boolean;
+  isHosted: boolean;
+}): string {
+  if (isHosted) {
+    return `PHOENIX_CLIENT_HEADERS='api_key=<your-api-key>'\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`;
+  } else if (isAuthEnabled) {
+    return `PHOENIX_API_KEY='<your-api-key>'\nPHOENIX_COLLECTOR_ENDPOINT='${HOSTED_PHOENIX_URL}'`;
+  }
+  return `PHOENIX_COLLECTOR_ENDPOINT='${BASE_URL}'`;
+}
 
 const INSTRUMENT_OPENAI_PYTHON = `from openinference.instrumentation.openai import OpenAIInstrumentor
 
@@ -76,7 +86,12 @@ type PythonProjectGuideProps = {
   projectName?: string;
 };
 export function PythonProjectGuide(props: PythonProjectGuideProps) {
-  const isHosted = HOSTED_BASE_URLS.includes(BASE_URL);
+  const isHosted = IS_HOSTED_DEPLOYMENT;
+  const isAuthEnabled = window.Config.authenticationEnabled;
+  const environmentVariablesPython = getEnvironmentVariablesPython({
+    isAuthEnabled,
+    isHosted,
+  });
 
   const projectName = props.projectName || "your-next-llm-project";
   return (
@@ -104,19 +119,31 @@ export function PythonProjectGuide(props: PythonProjectGuideProps) {
       <View paddingBottom="size-100">
         <Text>
           <b>arize-phoenix-otel</b> automatically picks up your configuration
-          from environment variables (e.x. <b>PHOENIX_CLIENT_HEADERS</b> for
-          authentication). See{" "}
+          from
           <ExternalLink href={PHOENIX_ENVIRONMENT_VARIABLES_LINK}>
             environment variables
           </ExternalLink>
         </Text>
       </View>
-      {isHosted ? (
-        <CodeWrap>
-          <PythonBlockWithCopy
-            value={HOSTED_PHOENIX_ENVIRONMENT_VARIABLES_PYTHON}
-          />
-        </CodeWrap>
+      <CodeWrap>
+        <PythonBlockWithCopy value={environmentVariablesPython} />
+      </CodeWrap>
+      {isAuthEnabled ? (
+        <View paddingBottom="size-100" paddingTop="size-100">
+          <IsAdmin
+            fallback={
+              <Text>
+                Personal API keys can be created and managed on your{" "}
+                <ExternalLink href="/profile">Profile</ExternalLink>
+              </Text>
+            }
+          >
+            <Text>
+              System API keys can be created and managed in{" "}
+              <ExternalLink href="/settings">Settings</ExternalLink>
+            </Text>
+          </IsAdmin>
+        </View>
       ) : null}
       <View paddingTop="size-200" paddingBottom="size-100">
         <Heading level={2} weight="heavy">

diff --git a/app/src/components/project/TypeScriptProjectGuide.tsx b/app/src/components/project/TypeScriptProjectGuide.tsx
@@ -3,11 +3,13 @@ import React from "react";
 import { Heading, Text, View } from "@arizeai/components";
 
 import { ExternalLink } from "@phoenix/components";
+import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth";
 import { CodeWrap } from "@phoenix/components/code/CodeWrap";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
 
 import { TypeScriptBlockWithCopy } from "../code/TypeScriptBlockWithCopy";
 
+import { IS_HOSTED_DEPLOYMENT } from "./hosting";
 import {
   TypeScriptIntegrations,
   TypeScriptPlatformIntegrations,
@@ -33,8 +35,8 @@ resource: new Resource({
 };
 
 export function TypeScriptProjectGuide(props: PythonProjectGuideProps) {
+  const isHosted = IS_HOSTED_DEPLOYMENT;
   const existingProjectName = props.projectName;
-
   const projectName = existingProjectName || "your-next-llm-project";
   return (
     <div>
@@ -62,22 +64,43 @@ export function TypeScriptProjectGuide(props: PythonProjectGuideProps) {
       </View>
       <View paddingBottom="size-100">
         <Text>
-          If authentication is enabled, set the{" "}
-          <b>OTEL_EXPORTER_OTLP_TRACES_HEADERS</b>. See{" "}
+          Set the authentication headers in the environment variable{" "}
+          <b>OTEL_EXPORTER_OTLP_HEADERS</b>. See{" "}
           <ExternalLink
             href={
               "https://opentelemetry.io/docs/languages/sdk-configuration/otlp-exporter/#otel_exporter_otlp_traces_headers"
             }
           >
-            environment variable
+            environment variables
           </ExternalLink>
         </Text>
       </View>
       <CodeWrap>
         <PythonBlockWithCopy
-          value={`OTEL_EXPORTER_OTLP_TRACES_HEADERS='<auth-headers>'`}
+          value={
+            isHosted
+              ? `OTEL_EXPORTER_OTLP_HEADERS='<auth-headers>'`
+              : `OTEL_EXPORTER_OTLP_HEADERS='authorization=Bearer%20<your-api-key>'`
+          }
         />
       </CodeWrap>
+      <IsAuthenticated>
+        <View paddingBottom="size-100" paddingTop="size-100">
+          <IsAdmin
+            fallback={
+              <Text>
+                Your personal API keys can be created and managed on your{" "}
+                <ExternalLink href="/profile">Profile</ExternalLink>
+              </Text>
+            }
+          >
+            <Text>
+              System API keys can be created and managed in{" "}
+              <ExternalLink href="/settings">Settings</ExternalLink>
+            </Text>
+          </IsAdmin>
+        </View>
+      </IsAuthenticated>
       <View paddingTop="size-200" paddingBottom="size-100">
         <Heading level={2} weight="heavy">
           Set the Project Name

diff --git a/app/src/components/project/hosting.ts b/app/src/components/project/hosting.ts
@@ -0,0 +1,8 @@
+import { BASE_URL } from "@phoenix/config";
+
+export const HOSTED_PHOENIX_URL = "https://app.phoenix.arize.com";
+export const LLAMATRACE_URL = "https://llamatrace.com";
+
+export const HOSTED_BASE_URLS = [HOSTED_PHOENIX_URL, LLAMATRACE_URL];
+
+export const IS_HOSTED_DEPLOYMENT = HOSTED_BASE_URLS.includes(BASE_URL);
diff --git a/app/src/pages/dataset/RunExperimentButton.tsx b/app/src/pages/dataset/RunExperimentButton.tsx
@@ -10,16 +10,27 @@ import {
   View,
 } from "@arizeai/components";
 
+import { ExternalLink } from "@phoenix/components";
+import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth";
 import { CodeWrap } from "@phoenix/components/code/CodeWrap";
 import { PythonBlockWithCopy } from "@phoenix/components/code/PythonBlockWithCopy";
 import { useDatasetContext } from "@phoenix/contexts/DatasetContext";
 
 const INSTALL_PHOENIX_PYTHON = `pip install arize-phoenix>=${window.Config.platformVersion}`;
 // TODO: plumb though session URL from the backend
-const SET_BASE_URL_PYTHON =
-  `import os\n` +
-  `# Set the phoenix collector endpoint. Commonly http://localhost:6060 \n` +
-  `os.environ["PHOENIX_COLLECTOR_ENDPOINT"] = "<your-phoenix-url>"`;
+function getSetBaseUrlPython({ isAuthEnabled }: { isAuthEnabled: boolean }) {
+  let setBaseURLPython =
+    `import os\n` +
+    `# Set the phoenix collector endpoint. Commonly http://localhost:6060 \n` +
+    `os.environ["PHOENIX_COLLECTOR_ENDPOINT"] = "<your-phoenix-url>"`;
+  if (isAuthEnabled) {
+    setBaseURLPython +=
+      `\n` +
+      `# Configure access\n` +
+      `os.environ["PHOENIX_API_KEY"] = "<your-api-key>"`;
+  }
+  return setBaseURLPython;
+}
 const TASK_PYTHON =
   `from phoenix.experiments.types import Example\n` +
   `# Define your task\n` +
@@ -75,6 +86,7 @@ export function RunExperimentButton() {
 function RunExperimentExample() {
   const datasetName = useDatasetContext((state) => state.datasetName);
   const version = useDatasetContext((state) => state.latestVersion);
+  const isAuthEnabled = window.Config.authenticationEnabled;
 
   const getDatasetPythonCode = useMemo(() => {
     return (
@@ -98,8 +110,25 @@ function RunExperimentExample() {
         <Text>Point to a running instance of Phoenix</Text>
       </View>
       <CodeWrap>
-        <PythonBlockWithCopy value={SET_BASE_URL_PYTHON} />
+        <PythonBlockWithCopy value={getSetBaseUrlPython({ isAuthEnabled })} />
       </CodeWrap>
+      <IsAuthenticated>
+        <View paddingBottom="size-100" paddingTop="size-100">
+          <IsAdmin
+            fallback={
+              <Text>
+                Your personal API keys can be created and managed on your{" "}
+                <ExternalLink href="/profile">Profile</ExternalLink>
+              </Text>
+            }
+          >
+            <Text>
+              System API keys can be created and managed in{" "}
+              <ExternalLink href="/settings">Settings</ExternalLink>
+            </Text>
+          </IsAdmin>
+        </View>
+      </IsAuthenticated>
       <View paddingTop="size-100" paddingBottom="size-100">
         <Text>Pull down this dataset</Text>
       </View>