feat(integrations): Adding Integrations button via OpenInt

package.json

@@ -41,6 +41,7 @@
     "marked": "^15.0.8",
     "motion": "^12.7.4",
     "next": "15.3.0",
+    "@openint/connect": "~1.1.11",
     "next-themes": "^0.4.6",
     "pg": "8.14.1",
     "postcss": "^8.5.3",

src/app/api/integration/route.ts

@@ -0,0 +1,35 @@
+import { getUser } from "@/auth/stack-auth";
+import  {Openint}  from "@openint/connect";
+
+export async function POST(req: Request) {
+
+  // the backend will not return a token if the OPENINT_API_KEY is not set, making the <IntegrationsButton /> component render null
+  if (!process.env.OPENINT_API_KEY) {
+    return new Response(JSON.stringify({
+      token: null,
+    }), { status: 200 });
+  }
+
+  const { appId } = await req.json();
+  if(!appId) {
+    console.error("No appId provided, skipping rendering Integrations Button");
+    return new Response(JSON.stringify({
+      token: null,
+    }), { status: 200 });
+  }
+
+  const openint = new Openint({
+    token: process.env.OPENINT_API_KEY,
+  });
+
+  try {
+  const {token} = await openint.createToken(appId, {});
+
+  return new Response(JSON.stringify({
+    token,
+  }));
+  } catch (error) {
+    console.error("Error creating Openint token", error);
+    return new Response("Error creating Openint token", { status: 500 });
+  }
+}

src/components/IntegrationButton.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { ConnectButton } from "@openint/connect";
+import { useEffect, useState } from "react";
+
+export function IntegrationsButton({
+  className,
+  onPrompt,
+  appId,
+}: {
+  className?: string;
+  onPrompt: (prompt: string) => void;
+  appId: string;
+}) {
+  const [token, setToken] = useState<string | null>();
+
+  useEffect(() => {
+    const fetchToken = async () => {
+      try {
+        const res = await fetch("/api/integration", {
+          method: "POST",
+          body: JSON.stringify({ appId }),
+        });
+        const data = await res.json();
+        if (data.token) {
+          setToken(data.token);
+        }
+      } catch (error) {
+        console.error("Error loading the integrations button", error);
+      }
+    };
+
+    fetchToken();
+  }, []);
+
+  if (!token) {
+    // if the backend does not return a token its most likely because an OPENINT_API_KEY is not set, so don't render the button
+    console.warn(
+      "No token returned from backend, not rendering integrations button"
+    );
+    return null;
+  }
+
+  return (
+    <div>
+      <p className="mb-2 text-base text-gray-600">Suggestions</p>
+      <ConnectButton
+        token={token}
+        text={"Manage Integrations"}
+        buttonStyle={
+          {
+            borderRadius: "9999px",
+            padding: "0.5rem 1rem",
+            border: "none",
+            backgroundColor: "white",
+          } as any
+        }
+        onEvent={(event) => {
+          if (event.name === "connect.connection-connected") {
+            const prompt = event?.prompt;
+            if (prompt) {
+              onPrompt(prompt);
+            }
+          }
+        }}
+        className={className + " mb-2"}
+      />
+    </div>
+  );
+}

src/components/chat.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, useEffect } from "react";
 import { ChatContainer } from "./ui/chat-container";
 import { Message } from "ai";
 import { ToolMessage } from "./tools";
+import { IntegrationsButton } from "./IntegrationButton";
 
 export default function Chat(props: {
   appId: string;
@@ -79,6 +80,12 @@ export default function Chat(props: {
         </ChatContainer>
       </div>
       <div className="p-3 transition-all bg-background backdrop-blur-sm z-10">
+        <IntegrationsButton
+          appId={props.appId}
+          onPrompt={(prompt: string) => {
+            append({ content: prompt, role: "system" });
+          }}
+        />
         <PromptInputBasic
           input={input || ""}
           onSubmit={onSubmit}
@@ -130,7 +137,7 @@ function MessageBody({ message }: { message: Message }) {
                   {part.toolInvocation.result?.content?.map(
                     (content: { type: "text"; text: string }, i: number) => (
                       <div key={i}>{content.text}</div>
-                    ),
+                    )
                   )}
                   {/* Unexpectedly failed while using tool{" "}
                   {part.toolInvocation.toolName}. Please try again. again. */}

src/lib/system.ts

@@ -18,4 +18,6 @@ When building challenging things, stop after you reach a breaking point and ask
 
 Before you ever ask the user to try something, try curling the page yourself to ensure it's not just an error page. You shouldn't have to rely on the user to tell you when something is obviously broken.
 
-Sometimes if the user tells you something is broken, they might be wrong. Don't be afraid to ask them to reload the page and try again if you think the issue they're describing doesn't make sense.`;
+Sometimes if the user tells you something is broken, they might be wrong. Don't be afraid to ask them to reload the page and try again if you think the issue they're describing doesn't make sense.
+${process.env.OPENINT_API_KEY ? `\nTo talk to any third party app, inspect '/integrations' directory for the requested integration client (i.e. github.ts). If the folder or file does not exist, halt and tell the user: “Please use Manage Integrations to connect '<integration_name>' before writing any code.” DO NOT write integration code unless the user explicitly supplies custom snippets with authentication tokens.` : ''}
+`