mvp

Author: joaquim-verges

apps/playground-web/src/app/ai/api/chat.ts

@@ -1,13 +1,12 @@
 import { stream } from "fetch-event-stream";
 import type { NebulaTxData, NebulaUserMessage } from "./types";
 
-// Mock URL for playground - you'll need to configure this
-const NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL || "https://nebula-api.thirdweb-dev.com";
+const API_URL = `https://${process.env.NEXT_PUBLIC_API_URL || "api.thirdweb.com"}`;
 
 export type NebulaContext = {
   chainIds: string[] | null;
   walletAddress: string | null;
-  networks: "mainnet" | "testnet" | "all" | null;
+  sessionId: string | null;
 };
 
 export type NebulaSwapData = {
@@ -44,30 +43,31 @@ export type NebulaSwapData = {
 
 export async function promptNebula(params: {
   message: NebulaUserMessage;
-  sessionId: string;
   authToken: string;
   handleStream: (res: ChatStreamedResponse) => void;
   abortController: AbortController;
   context: undefined | NebulaContext;
 }) {
   const body: Record<string, string | boolean | object> = {
     messages: [params.message],
-    session_id: params.sessionId,
     stream: true,
   };
 
   if (params.context) {
     body.context = {
-      chain_ids: params.context.chainIds || [],
-      networks: params.context.networks,
+      chain_ids: params.context.chainIds?.map(Number) || [],
+      session_id: params.context.sessionId ?? undefined,
       wallet_address: params.context.walletAddress,
     };
   }
 
-  const events = await stream(`${NEBULA_URL}/chat`, {
+  const events = await stream(`${API_URL}/ai/chat`, {
     body: JSON.stringify(body),
     headers: {
-      Authorization: `Bearer ${params.authToken}`,
+      "x-client-id": process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!,
+      // FIXME REMOVE
+      "x-secret-key":
+        "7NFrTzBN9Y2Eca6Rl60uxT3Dwew4D9YaYHjoD_3Y2GDvkaejLFiodFDcuzGJqu0mc8PVCAi9M4Y3j6Ql_ZVRyQ",
       "Content-Type": "application/json",
     },
     method: "POST",
@@ -192,7 +192,7 @@ export async function promptNebula(params: {
         const contextData = JSON.parse(data.data) as {
           wallet_address: string;
           chain_ids: number[];
-          networks: NebulaContext["networks"];
+          session_id: string;
         };
 
         params.handleStream({
@@ -262,7 +262,7 @@ type ChatStreamedResponse =
       data: {
         wallet_address: string;
         chain_ids: number[];
-        networks: NebulaContext["networks"];
+        session_id: string;
       };
     }
   | {
@@ -306,4 +306,4 @@ type ChatStreamedEvent =
   | {
       event: "ping";
       data: string;
-    };
+    };

apps/playground-web/src/app/ai/api/fetchWithAuthToken.ts

@@ -47,4 +47,4 @@ export async function fetchWithAuthToken(options: FetchWithKeyOptions) {
   } finally {
     clearTimeout(timeoutId);
   }
-}
+}

apps/playground-web/src/app/ai/api/session.ts

@@ -7,7 +7,8 @@ import type {
   UpdatedSessionInfo,
 } from "./types";
 
-const NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL || "https://nebula-api.thirdweb-dev.com";
+const NEBULA_URL =
+  process.env.NEXT_PUBLIC_NEBULA_URL || "https://nebula-api.thirdweb-dev.com";
 
 export async function createSession(params: {
   authToken: string;
@@ -117,4 +118,4 @@ export async function getSessionById(params: {
   const data = await res.json();
 
   return data.result as SessionInfo;
-}
+}

apps/playground-web/src/app/ai/api/types.ts

@@ -77,4 +77,4 @@ export type NebulaTxData = {
   data: `0x${string}`;
   to: string;
   value?: string;
-};
+};

apps/playground-web/src/app/ai/chat/page.tsx

@@ -1,31 +1,29 @@
-import { createThirdwebClient } from "thirdweb";
+import ThirdwebProvider from "../../../components/thirdweb-provider";
+import { THIRDWEB_CLIENT } from "../../../lib/client";
 import { ChatPageContent } from "../components/ChatPageContent";
 
-// Mock client for playground - you'll need to configure this with your actual client ID
-const client = createThirdwebClient({
-  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || "your-client-id-here",
-});
-
 export default function ChatPage() {
   // Mock auth data - in a real app, you'd get this from your auth system
   const mockAuthToken = "mock-auth-token";
   const mockAccountAddress = "0x1234567890123456789012345678901234567890";
 
   return (
     <div className="min-h-screen">
-      <ChatPageContent
-        accountAddress={mockAccountAddress}
-        authToken={mockAuthToken}
-        client={client}
-        initialParams={undefined}
-        session={undefined}
-        type="new-chat"
-      />
+      <ThirdwebProvider>
+        <ChatPageContent
+          accountAddress={mockAccountAddress}
+          authToken={mockAuthToken}
+          client={THIRDWEB_CLIENT}
+          initialParams={undefined}
+          session={undefined}
+          type="new-chat"
+        />
+      </ThirdwebProvider>
     </div>
   );
 }
 
 export const metadata = {
-  title: "AI Chat - Playground",
-  description: "Chat with Nebula AI for blockchain interactions",
-};
+  title: "AI Chat API - Playground",
+  description: "Chat with thirdweb AI for blockchain interactions",
+};