YAML templates in UI (#803)

* WIP

* Add SAML examples

* Small tweaks

fern/apis/prod/openapi/openapi.yaml

@@ -2,7 +2,7 @@ openapi: 3.0.2
 info:
   title: Superagent
   description: The Open Source AI Assistant Framework & API
-  version: 0.2.2
+  version: 0.2.3
 servers:
   - url: https://api.beta.superagent.sh
 paths:
@@ -195,8 +195,8 @@ paths:
                 $ref: '#/components/schemas/HTTPValidationError'
       security:
         - HTTPBearer: []
-      x-fern-sdk-group-name: agent
       x-fern-sdk-method-name: invoke
+      x-fern-sdk-group-name: agent
   /api/v1/agents/{agent_id}/llms:
     post:
       tags:
@@ -2570,7 +2570,6 @@ components:
         - description
         - type
         - returnDirect
-        - metadata
         - createdAt
         - updatedAt
         - apiUserId

libs/ui/app/workflows/[id]/saml.tsx

@@ -1,13 +1,15 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { useRouter } from "next/navigation"
 import * as yaml from "js-yaml"
 import * as monaco from "monaco-editor"
 import { useTheme } from "next-themes"
 import { TbCommand } from "react-icons/tb"
 
+import { exampleConfigs } from "@/config/saml"
 import { Api } from "@/lib/api"
+import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 import { Toaster } from "@/components/ui/toaster"
 import { useToast } from "@/components/ui/use-toast"
@@ -36,7 +38,6 @@ export default function SAML({
 }) {
   const { toast } = useToast()
 
-  const api = new Api(profile.api_key)
   const router = useRouter()
   const latestWorkflowConfig = workflow.workflowConfigs.sort(
     (a: any, b: any) =>
@@ -64,32 +65,40 @@ export default function SAML({
     }
   }, [])
 
-  useEffect(() => {
-    const saveConfig = async () => {
-      if (isSavingConfig) return
-      setSavingConfig(true)
-
-      try {
-        await api.generateWorkflow(workflow.id, editorRef?.current?.getValue())
-
-        router.refresh()
-        toast({
-          title: "Config saved!",
-        })
-      } catch (error) {
-        toast({
-          title: "Couldn't save config",
-        })
-      }
-
-      setSavingConfig(false)
+  const saveConfig = useCallback(async () => {
+    const api = new Api(profile.api_key)
+    if (isSavingConfig) return
+    setSavingConfig(true)
+
+    try {
+      await api.generateWorkflow(workflow.id, editorRef?.current?.getValue())
+
+      router.refresh()
+      toast({
+        title: "Config saved!",
+      })
+    } catch (error) {
+      toast({
+        title: "Couldn't save config",
+      })
     }
 
+    setSavingConfig(false)
+  }, [isSavingConfig, workflow.id, router, toast, profile.api_key])
+
+  useEffect(() => {
+    editorRef?.current?.addCommand(
+      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+      saveConfig
+    )
+  }, [isSavingConfig, saveConfig])
+
+  useEffect(() => {
     editorRef?.current?.addCommand(
       monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
       saveConfig
     )
-  }, [isSavingConfig])
+  }, [isSavingConfig, saveConfig])
 
   useEffect(() => {
     editorRef?.current?.setValue(workflowConfigsYaml)
@@ -111,7 +120,35 @@ export default function SAML({
         </p>
       </div>
       <div className="h-full w-full" ref={codeEditorRef} />
-      <div className="absolute bottom-4 flex w-full flex-col items-center justify-center">
+      <div className="absolute bottom-4 flex w-full flex-col items-center justify-center space-y-4">
+        <div className="flex space-x-2">
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() =>
+              editorRef?.current?.setValue(exampleConfigs.browserYaml)
+            }
+          >
+            Browser
+          </Button>
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() => editorRef?.current?.setValue(exampleConfigs.ragYaml)}
+          >
+            Documents
+          </Button>
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() =>
+              editorRef?.current?.setValue(exampleConfigs.multiAssistantYaml)
+            }
+          >
+            Multi-agent
+          </Button>
+        </div>
+
         {isSavingConfig ? (
           <div className="flex items-center space-x-1 py-1 text-sm text-muted-foreground">
             <Spinner />

libs/ui/config/saml.ts

@@ -1,7 +1,7 @@
 import { JSONSchema7 } from "json-schema"
 
 export const initialSamlValue = `# 👋 Welcome! Start creating your workflows using example yaml below.
-# More info in our docs: https://docs.superagent.sh
+# More info in our docs: https://docs.superagent.sh/overview/getting-started/super-agent-markup-language
 
 workflows:
   - superagent: 
@@ -14,6 +14,52 @@ workflows:
         urls:
           - "https://s2.q4cdn.com/299287126/files/doc_financials/2023/q3/AMZN-Q3-2023-Earnings-Release.pdf"
 `
+
+export const exampleConfigs = {
+  browserYaml: `# 🤖 This agent workflow has access to the browser tool and can access the internet in real-time.
+# More info in our docs: https://docs.superagent.sh/overview/getting-started/super-agent-markup-language
+
+workflows:
+  - superagent: 
+      name: Browser assistant
+      llm: gpt-3.5-turbo-16k-0613
+      prompt: Use the browser to answer all questions
+      intro: 👋 Hi there! How can I help you?
+      tools:
+        - browser:
+            name: browser tool
+            use_for: searching the internet`,
+  ragYaml: `# 🤖 This agent workflow has access to external data.
+# More info in our docs: https://docs.superagent.sh/overview/getting-started/super-agent-markup-language
+  
+workflows:
+  - superagent: 
+      name: Titanic assistant
+      llm: gpt-3.5-turbo-16k-0613
+      prompt: Use the excel file to answer all questions.
+      intro: 👋 Hi there! How can I help you?
+      data:
+        urls:
+          - https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv
+        use_for: Answering questions about the titanic`,
+  multiAssistantYaml: `# 🤖 This is an example of a multi-agent workflow.
+  # More info in our docs: https://docs.superagent.sh/overview/getting-started/super-agent-markup-language
+  
+workflows:
+  - superagent: 
+      name: Code writer
+      llm: gpt-4-1106-preview
+      prompt: |- 
+        You are an expert coder, write code based on the users input.
+        Only return the filename and code.
+      intro: 👋 Hi there! What code do you want me to write?
+  - superagent:
+      name: Code reviewer
+      llm: gpt-4-1106-preview
+      prompt: |- 
+        You are an code reviewer. Review the code and write a 
+        Github comment.`,
+}
 // TODO: get this from the backend after migrating to pydantic version 2
 export const yamlJsonSchema = {
   $schema: "http://json-schema.org/draft-07/schema#",