[syntax] moved examples into individual files

`tsx src/new/run-examples.ts` runs them all in the shell

seeds/breadboard-web/docs/graphs/new/single-node.md

@@ -0,0 +1,15 @@
+## single-node.ts
+
+```mermaid
+%%{init: 'themeVariables': { 'fontFamily': 'Fira Code, monospace' }}%%
+graph TD;
+
+classDef default stroke:#ffab40,fill:#fff2ccff,color:#000
+classDef input stroke:#3c78d8,fill:#c9daf8ff,color:#000
+classDef output stroke:#38761d,fill:#b6d7a8ff,color:#000
+classDef passthrough stroke:#a64d79,fill:#ead1dcff,color:#000
+classDef slot stroke:#a64d79,fill:#ead1dcff,color:#000
+classDef config stroke:#a64d79,fill:#ead1dcff,color:#000
+classDef secrets stroke:#db4437,fill:#f4cccc,color:#000
+classDef slotted stroke:#a64d79
+```

seeds/breadboard-web/public/graphs/new/single-node.json

@@ -0,0 +1,14 @@
+{
+  "title": "Single Node",
+  "edges": [],
+  "nodes": [
+    {
+      "id": "passthrough-0",
+      "type": "passthrough",
+      "configuration": {
+        "foo": "bar"
+      }
+    }
+  ],
+  "graphs": {}
+}

seeds/breadboard-web/public/local-boards.json

@@ -3,6 +3,10 @@
     "title": "List Google Drive files",
     "url": "/graphs/list-files.json"
   },
+  {
+    "title": "Single Node",
+    "url": "/graphs/new/single-node.json"
+  },
   {
     "title": "Tour Guide Writer",
     "url": "/graphs/tour-guide-writer.json"

seeds/breadboard-web/src/boards/new/custom-inline-action.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow } from "../../new/lib.js";
+
+export const graph = flow(
+  (inputs) => {
+    return flow(async (inputs) => {
+      const { a, b } = await inputs;
+      return { result: ((a as number) || 0) + ((b as number) || 0) };
+    }, inputs);
+  },
+  { a: 1, b: 2 }
+);
+
+export default await graph.serialize({ title: "Custom inline action" });

seeds/breadboard-web/src/boards/new/if-else-imperative.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow, action } from "../../new/lib.js";
+import { llm } from "../../new/kits.js";
+
+const math = action((inputs) => {
+  return llm
+    .promptTemplate({
+      template:
+        "Write a Javascript function called `run` to compute the result for this question:\nQuestion: {{question}}\nCode: ",
+      question: inputs.question,
+    })
+    .prompt.as("text")
+    .to(
+      llm.generateText({
+        PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+      })
+    )
+    .completion.as("code")
+    .to(llm.runJavascript());
+});
+
+const search = action((inputs) => {
+  // TODO: Implement
+  return inputs;
+});
+
+export const graph = flow(
+  async (inputs) => {
+    const { completion } = await llm
+      .promptTemplate({
+        template:
+          "Is this question about math? Answer YES or NO.\nQuestion: {{question}}\nAnswer: ",
+        question: inputs.question,
+      })
+      .prompt.as("text")
+      .to(
+        llm.generateText({
+          PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+        })
+      );
+    if (completion && (completion as string).startsWith("YES")) {
+      return math({ question: inputs.question });
+    } else {
+      return search(inputs);
+    }
+  },
+  { question: "1+1" }
+);
+
+export default await graph.serialize({ title: "IfElse, imperative execution" });

seeds/breadboard-web/src/boards/new/if-else-serializable.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow, action } from "../../new/lib.js";
+import { llm } from "../../new/kits.js";
+
+const math = action((inputs) => {
+  return llm
+    .promptTemplate({
+      template:
+        "Write a Javascript function called `run` to compute the result for this question:\nQuestion: {{question}}\nCode: ",
+      question: inputs.question,
+    })
+    .prompt.as("text")
+    .to(
+      llm.generateText({
+        PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+      })
+    )
+    .completion.as("code")
+    .to(llm.runJavascript());
+});
+
+const search = action((inputs) => {
+  // TODO: Implement
+  return inputs;
+});
+
+export const graph = flow(
+  async (inputs) => {
+    return llm
+      .promptTemplate({
+        template:
+          "Is this question about math? Answer YES or NO.\nQuestion: {{question}}\nAnswer: ",
+        question: inputs.question,
+      })
+      .prompt.as("text")
+      .to(
+        llm.generateText({
+          PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+        })
+      )
+      .to(
+        async (inputs) => {
+          const { completion, math, search } = await inputs;
+          if (completion?.startsWith("YES")) {
+            return math({ question: inputs.question });
+          } else {
+            return search(inputs);
+          }
+        },
+        { math, search }
+      );
+  },
+  { question: "1+1" }
+);
+
+export default await graph.serialize({ title: "IfElse, serializable" });

seeds/breadboard-web/src/boards/new/math-chain.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow } from "../../new/lib.js";
+import { llm } from "../../new/kits.js";
+
+export const graph = flow(
+  (inputs) => {
+    return llm
+      .promptTemplate({
+        template:
+          "Write a Javascript function called `run` to compute the result for this question:\nQuestion: {{question}}\nCode: ",
+        question: inputs.question,
+      })
+      .prompt.as("text")
+      .to(
+        llm.generateText({
+          PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+        })
+      )
+      .completion.as("code")
+      .to(llm.runJavascript());
+  },
+  { question: "1+1" }
+);
+
+export default await graph.serialize({ title: "Math, chain style graph" });

seeds/breadboard-web/src/boards/new/math-imperative.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow } from "../../new/lib.js";
+import { llm } from "../../new/kits.js";
+
+export const graph = flow(
+  (inputs) => {
+    const { prompt } = llm.promptTemplate({
+      template:
+        "Write a Javascript function called `run` to compute the result for this question:\nQuestion: {{question}}\nCode: ",
+      question: inputs.question,
+    });
+    const { completion } = llm.generateText({
+      text: prompt,
+      PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+    });
+    const result = llm.runJavascript({ code: completion });
+    return result;
+  },
+  { question: "1+1" }
+);
+
+export default await graph.serialize({ title: "Math, imperative style graph" });

seeds/breadboard-web/src/boards/new/math-inline-chain.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { core, llm } from "../../new/kits.js";
+
+const question = "1+1";
+
+export const graph = core
+  .passthrough({ question })
+  .to(
+    llm.promptTemplate({
+      template:
+        "Write a Javascript function called `run` to compute the result for this question:\nQuestion: {{question}}\nCode: ",
+    })
+  )
+  .prompt.as("text")
+  .to(
+    llm.generateText({
+      PALM_KEY: llm.secrets({ keys: ["PALM_KEY"] }).PALM_KEY,
+    })
+  )
+  .completion.as("code")
+  .to(llm.runJavascript());
+
+// This would be typically used as "await graph", not as a (serialized) graph
+
+export default await graph.serialize({
+  title: "Math, directly calling a chain",
+});

seeds/breadboard-web/src/boards/new/simple-graph.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow } from "../../new/lib.js";
+import { core } from "../../new/kits.js";
+
+export const graph = flow(
+  (inputs) => {
+    const p1 = core.passthrough(inputs);
+    const { foo } = p1; // Get an output, as a Promise!
+    return { foo };
+  },
+  { foo: "bar", bar: "baz" }
+);
+
+export default await graph.serialize({ title: "Simple graph" });

seeds/breadboard-web/src/boards/new/simple-imperative-function.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { flow } from "../../new/lib.js";
+import { core } from "../../new/kits.js";
+
+export const graph = flow(
+  async (inputs) => {
+    const { foo } = await core.passthrough(inputs);
+    return { foo };
+  },
+  { foo: "bar", baz: "bar" }
+);
+
+export default await graph.serialize({ title: "Simple imperative function" });

seeds/breadboard-web/src/boards/new/single-node.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { core } from "../../new/kits.js";
+
+export const graph = core.passthrough({ foo: "bar" });
+
+// This would be typically used as "await graph", not as a (serialized) graph
+
+export default await graph.serialize({ title: "Single node" });