Breeding makes a url as well

Author: SawyerHood

app/api/breed/route.ts

@@ -1,17 +1,13 @@
 import { createClient } from "@/ai/client";
 import { modelToOpenRouter } from "@/ai/models";
-import { system } from "@/ai/prompt";
 import PostHogClient from "@/lib/postHogServer";
 import { shouldUseAuth } from "@/lib/shouldUseAuth";
 import { Settings } from "@/state/settings";
 import { currentUser } from "@clerk/nextjs/server";
 import { NextRequest } from "next/server";
 import { streamHtml } from "openai-html-stream";
 
-import {
-  ChatCompletionCreateParamsStreaming,
-  ChatCompletionMessageParam,
-} from "openai/resources/index.mjs";
+import { ChatCompletionCreateParamsStreaming } from "openai/resources/index.mjs";
 
 const makePrompt = (
   p1: string,

app/api/breedUrl/route.ts

@@ -0,0 +1,90 @@
+import { createClient } from "@/ai/client";
+import PostHogClient from "@/lib/postHogServer";
+import { shouldUseAuth } from "@/lib/shouldUseAuth";
+import { currentUser } from "@clerk/nextjs/server";
+import { NextRequest } from "next/server";
+
+import { ChatCompletionCreateParams } from "openai/resources/index.mjs";
+
+const makePrompt = (
+  p1: string,
+  p2: string
+) => `You will be acting as a website breeder. Your task is to generate a new website name based on two existing websites, as if the new website were the offspring of the two parent sites.
+
+Here are the two URLs you will be working with:
+<url1>
+${p1}
+</url1>
+<url2>
+${p2}
+</url2>
+
+To generate the offspring website name, follow these steps:
+
+1. Analyze each website and identify their key elements, themes, and characteristics. Consider factors such as the website's purpose, target audience, design style, and content focus.
+
+2. Brainstorm potential offspring website names that combine elements from both parent websites. The new name should reflect a blend of the two sites' themes and characteristics.
+
+3. When creating the offspring website name, keep these guidelines in mind:
+   - The name should be concise and memorable.
+   - It should maintain a coherent theme that relates to both parent websites.
+   - The name should hint at the potential purpose or content of the hypothetical offspring website.
+   - Feel free to use wordplay, puns, or creative combinations of words from the parent website names or their key elements.
+
+4. After brainstorming and refining your ideas, select the best offspring website name.
+
+Please output the final offspring website name inside <offspring_url> tags.
+`;
+
+export async function POST(req: NextRequest) {
+  const { urls } = await req.json();
+
+  if (shouldUseAuth) {
+    const user = await currentUser();
+    const posthog = PostHogClient();
+
+    if (!user) {
+      return new Response(`<h1>Unauthorized</h1><p>Log in to continue</p>`, {
+        status: 401,
+        headers: { "Content-Type": "text/html" },
+      });
+    }
+
+    posthog.capture({
+      distinctId: user.id,
+      event: "breed url",
+    });
+  }
+
+  const offspringUrl = await genResponse({ urls });
+
+  return new Response(JSON.stringify(offspringUrl), {
+    headers: {
+      "Content-Type": "application/json",
+    },
+    status: 200,
+  });
+}
+
+async function genResponse({ urls }: { urls: string[] }): Promise<string> {
+  const params: ChatCompletionCreateParams = {
+    messages: [
+      {
+        role: "user",
+        content: makePrompt(urls[0], urls[1]),
+      },
+    ],
+
+    model: "claude-3-haiku-20240307",
+    max_tokens: 4000,
+  };
+
+  const client = createClient(process.env.ANTHROPIC_API_KEY!);
+
+  const content = (await client.chat.completions.create(params)).choices[0]
+    .message.content!;
+  const offspringUrlMatch = content.match(
+    /<offspring_url>(.*?)<\/offspring_url>/
+  );
+  return offspringUrlMatch ? offspringUrlMatch[1] : "";
+}

components/Canvas.tsx

@@ -3,7 +3,7 @@
 import dynamic from "next/dynamic";
 import { BrowserShapeUtil } from "@/components/BrowserShape";
 import { useEditor } from "tldraw";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { BottomBar } from "@/components/BottomBar";
 import { BrowserTool } from "@/tools/BrowserTool";
 import { SignOutButton } from "@clerk/nextjs";
@@ -13,6 +13,7 @@ import { shouldUseAuth } from "@/lib/shouldUseAuth";
 import { Settings } from "@/components/Settings";
 import { PromptShapeTool } from "@/tools/PromptShapeTool";
 import { breed } from "@/lib/breed";
+import { ReloadIcon } from "@radix-ui/react-icons";
 
 const Tldraw = dynamic(async () => (await import("tldraw")).Tldraw, {
   ssr: false,
@@ -57,9 +58,7 @@ function UI() {
         style={{ zIndex: 1000 }}
       >
         <Settings />
-        <Button size="sm" onClick={() => breed(editor)}>
-          Breed
-        </Button>
+        <BreedButton />
         {shouldUseAuth && (
           <SignOutButton>
             <Button size="sm">Sign Out</Button>
@@ -75,3 +74,21 @@ function UI() {
     </>
   );
 }
+
+function BreedButton() {
+  const editor = useEditor();
+  const [isBreeding, setIsBreeding] = useState(false);
+  return (
+    <Button
+      onClick={async () => {
+        setIsBreeding(true);
+        await breed(editor);
+        setIsBreeding(false);
+      }}
+      disabled={isBreeding}
+      size="sm"
+    >
+      {isBreeding ? <ReloadIcon className="h-4 w-4 animate-spin" /> : "Breed"}
+    </Button>
+  );
+}

lib/breed.ts

@@ -19,13 +19,25 @@ export async function breed(editor: Editor) {
     return;
   }
 
+  const urls = selectedShapes.map((s) => s.props.url);
+  const response = await fetch(`/api/breedUrl`, {
+    method: "POST",
+    body: JSON.stringify({ urls }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const offspringUrl = await response.json();
+
   const id = makeShapeID();
   editor.createShape<BrowserShape>({
     ...getPointUnder(boundingBox),
     type: "browser",
     id,
     props: {
       isBred: true,
+      url: offspringUrl,
     },
   });