diff --git a/apps/console/src/app/app.tsx b/apps/console/src/app/app.tsx
index 442f22a6..da5fc28f 100644
--- a/apps/console/src/app/app.tsx
+++ b/apps/console/src/app/app.tsx
@@ -178,7 +178,7 @@ export function App() {
}
+ element={}
/>
{
+ if (!variables.length) return "";
+ const varStrings = variables.map((v) => ` "${v}": "value"`).join(",\n");
+ return `, {
+ variables: {
+${varStrings}
+ }
+}`;
+};
+
export const TypeScriptOpenAIIntegrationTutorial = () => {
- const { project } = useCurrentProject();
- const { usage } = useGettingStartedWizard();
+ const { variables } = usePromptVersionEditorContext();
+ const { prompt } = useCurrentPrompt();
+ const { data: pezzoApiKeysData } = usePezzoApiKeys();
+ const API_KEY = pezzoApiKeysData?.apiKeys[0].id;
+ const { project } = useCurrentProject();
const codeSetupClients = `import { Pezzo, PezzoOpenAIApi } from "@pezzo/client";
import { Configuration } from "openai";
@@ -27,7 +39,7 @@ const configuration = new Configuration({
// Initialize the Pezzo client
export const pezzo = new Pezzo({
- apiKey: "", // Can be found in your organization page
+ apiKey: "${API_KEY}",
projectId: "${project.id}",
environment: "Production", // Your desired environment
});
@@ -36,69 +48,72 @@ export const pezzo = new Pezzo({
const openai = new PezzoOpenAIApi(pezzo, configuration);
`;
+ const variablesString = getVariablesString(variables);
+
const codeWithPromptManagement = `${codeSetupClients}
// Fetch the prompt payload from Pezzo
-const prompt = await pezzo.getOpenAIPrompt("", {
- variables: { ... }, // If your prompt has variables, you can pass them here
-});
-
-// Retrieve the settings for the chat completion
-const settings = prompt.getChatCompletionSettings();
+const prompt = await pezzo.getPrompt("${prompt.name}");
// Use the OpenAI API as you normally would
-const response = await openai.createChatCompletion(settings);
+const result = await openai.createChatCompletion(prompt${variablesString});
`;
- const codeObservabilityOnly = `${codeSetupClients}
-// Use the OpenAI API as you normally would
-const response = await openai.createChatCompletion({ ... });
- `;
-
- const code =
- usage === Usage.ObservabilityAndPromptManagement
- ? codeWithPromptManagement
- : codeObservabilityOnly;
-
return (
<>
- {usage === Usage.ObservabilityAndPromptManagement && (
- <>
-
- Create and publish a prompt
-
-
- Create your first prompt and publish it to your desired environment.
-
- Not sure how to start? Follow the{" "}
+ Want to know more?
+
+
+ Check out the{" "}
- tutorial on our documentation site
-
- .
+ Using OpenAI With Pezzo
+ {" "}
+ page on our documentation to learn more.
-
- )}
+ }
+ style={{ marginBottom: 12 }}
+ />
Installation
Pezzo provides a fully-typed NPM package for integration with TypeScript
- projects. server.
+ projects.
- {`npm install openai @pezzo/client`}
+ {"npm install @pezzo/client openai"}
Usage
- {usage === Usage.Observability
- ? "Initialize the OpenAI client as shown below, and consume the OpenAI API as you normally would. As soon as you interact with OpenAI, your requests will be available in the Requests view."
- : "Managing your prompts with Pezzo is easy. You will fetch the prompt payload from Pezzo, and then pass it to the OpenAI client as an argument. As soon as you interact with OpenAI, your requests will be available in the Requests view."}
+ Managing your prompts with Pezzo is easy. You will fetch the prompt
+ payload from Pezzo, and then pass it to the OpenAI client as an
+ argument. As soon as you interact with OpenAI, your requests will be
+ available in the Requests view.
+
+
+
+
+ In addition to vriables, you can also provide{" "}
+ custom properties when executing prompts. These
+ properties will be available in the Requests view.{" "}
+
+ Read more about Properties in the Pezzo Documentation
+
+ .
-
);
};
diff --git a/apps/console/src/app/components/layout/SideNavigation.tsx b/apps/console/src/app/components/layout/SideNavigation.tsx
index fa755111..a17ab356 100644
--- a/apps/console/src/app/components/layout/SideNavigation.tsx
+++ b/apps/console/src/app/components/layout/SideNavigation.tsx
@@ -13,11 +13,6 @@ import { colors } from "../../lib/theme/colors";
import { useCurrentProject } from "../../lib/hooks/useCurrentProject";
const topMenuItems = [
- {
- key: "overview",
- label: "Overview",
- icon: ,
- },
{
key: "prompts",
label: "Prompts",
@@ -78,8 +73,8 @@ export const SideNavigation = () => {
diff --git a/apps/console/src/app/components/prompts/ConsumePromptModal.tsx b/apps/console/src/app/components/prompts/ConsumePromptModal.tsx
new file mode 100644
index 00000000..1a989d75
--- /dev/null
+++ b/apps/console/src/app/components/prompts/ConsumePromptModal.tsx
@@ -0,0 +1,15 @@
+import { Modal } from "antd";
+import { TypeScriptOpenAIIntegrationTutorial } from "../getting-started-wizard";
+
+interface Props {
+ open: boolean;
+ onClose: () => void;
+}
+
+export const ConsumePromptModal = ({ open, onClose }: Props) => {
+ return (
+
+
+
+ );
+};
diff --git a/apps/console/src/app/components/prompts/views/PromptEditView.tsx b/apps/console/src/app/components/prompts/views/PromptEditView.tsx
index 2385c4be..a87bbd4c 100644
--- a/apps/console/src/app/components/prompts/views/PromptEditView.tsx
+++ b/apps/console/src/app/components/prompts/views/PromptEditView.tsx
@@ -13,6 +13,7 @@ import { CommitPromptModal } from "../CommitPromptModal";
import { PublishPromptModal } from "../PublishPromptModal";
import { useState } from "react";
import {
+ CodeOutlined,
InfoCircleFilled,
InfoCircleOutlined,
PlayCircleOutlined,
@@ -28,6 +29,7 @@ import { ProviderSettingsCard } from "../editor/ProviderSettingsCard";
import { FunctionsFormModal } from "../FormModal";
import { InlineCodeSnippet } from "../../common/InlineCodeSnippet";
import { colors } from "../../../lib/theme/colors";
+import { ConsumePromptModal } from "../ConsumePromptModal";
const FUNCTIONS_FEATURE_FLAG = true;
@@ -37,6 +39,8 @@ export const PromptEditView = () => {
usePromptVersionEditorContext();
const [isCommitModalOpen, setIsCommitModalOpen] = useState(false);
+ const [isConsumePromptModalOpen, setIsConsumePromptModalOpen] =
+ useState(false);
const [isPublishModalOpen, setIsPublishModalOpen] = useState(false);
const [isFunctionsModalOpen, setIsFunctionsModalOpen] = useState(false);
@@ -51,6 +55,14 @@ export const PromptEditView = () => {
style={{ display: "flex", justifyContent: "flex-end" }}
>
+ {isPublishEnabled && (
+
+ )}
{isPublishEnabled && (