AI Chat Plugin

import { createBackendStack } from "@btst/stack/api"
import { defineAuthorization } from "@btst/stack/authorization"
import { createServerAuth } from "@btst/stack/authorization/server"
import { aiChatBackendPlugin } from "@btst/stack/plugins/ai-chat/api"
import { aiChatPermissions } from "@btst/stack/plugins/ai-chat/permissions"
import { openai } from "@ai-sdk/openai"
import { z } from "zod"
// ... your adapter imports

// Browser-safe: put this in a shared authorization.ts module when the
// frontend and backend live in the same codebase.
export const authorization = defineAuthorization({
  identity: z.object({
    id: z.string(),
    role: z.enum(["user", "admin"]),
  }),
  permissions: [aiChatPermissions] as const,
  rules: ({ aiChat }) => {
    const owns = (
      identity: { id: string; role: "user" | "admin" } | null,
      ownerId?: string,
    ) => identity !== null && (identity.role === "admin" || identity.id === ownerId)
    const canStart = (
      identity: { id: string; role: "user" | "admin" } | null,
      ownerId?: string,
    ) => identity !== null && (ownerId === undefined || owns(identity, ownerId))

    return [
      aiChat.conversation.read.when(({ identity, facts }) =>
        facts.scope === "collection" ? identity !== null : owns(identity, facts.ownerId),
      ),
      aiChat.conversation.create.when(({ identity }) => identity !== null),
      aiChat.conversation.update.when(({ identity, facts }) => owns(identity, facts.ownerId)),
      aiChat.conversation.delete.when(({ identity, facts }) => owns(identity, facts.ownerId)),
      aiChat.message.send.when(({ identity, facts }) =>
        facts.createsConversation ? identity !== null : owns(identity, facts.ownerId),
      ),
      aiChat.message.edit.when(({ identity, facts }) => owns(identity, facts.ownerId)),
      aiChat.message.retry.when(({ identity, facts }) => owns(identity, facts.ownerId)),
      aiChat.attachment.send.when(({ identity, facts }) => canStart(identity, facts.ownerId)),
      aiChat.tool.activate.when(({ identity, facts }) => canStart(identity, facts.ownerId)),
      aiChat.stream.start.when(({ identity, facts }) =>
        facts.createsConversation ? identity !== null : owns(identity, facts.ownerId),
      ),
    ]
  },
})

const serverAuth = createServerAuth({
  authorization,
  getIdentity: async ({ headers }) => {
    const token = headers.get("authorization")
    if (!token) return null
    const user = await verifyToken(token)
    return user ? { id: user.id, role: user.role } : null
  },
})

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  auth: serverAuth,
  plugins: {
    aiChat: aiChatBackendPlugin({
      model: openai("gpt-4o"), // Or any LanguageModel from AI SDK
      access: "authorized", // Default; use "public" only intentionally
      systemPrompt: "You are a helpful assistant.", // Optional
      tools: {}, // Optional: AI SDK v5 tools
    })
  },
  adapter: (db) => createMemoryAdapter(db)({})
})

export { handler, dbSchema }

import { createClientStack } from "@btst/stack/client"
import { aiChatClientPlugin } from "@btst/stack/plugins/ai-chat/client"
import { QueryClient } from "@tanstack/react-query"

const getBaseURL = () => 
  typeof window !== 'undefined' 
    ? (process.env.NEXT_PUBLIC_BASE_URL || window.location.origin)
    : (process.env.BASE_URL || "http://localhost:3000")

export const getStackClient = (
  queryClient: QueryClient,
  options?: { headers?: Headers; identity?: { id: string; role: "user" | "admin" } },
) => {
  const baseURL = getBaseURL()
  return createClientStack({
    api: {
      baseURL,
      basePath: "/api/data",
      ...(options?.headers ? { headers: options.headers } : {}),
    },
    site: { baseURL, basePath: "/pages" },
    queryClient,
    plugins: {
      aiChat: aiChatClientPlugin({
        identityPartition: options?.identity,
        // Client conversation UI/persistence mode
        mode: "authenticated", // "authenticated" (default) or "public"
        // Optional: SEO configuration
        seo: {
          siteName: "My Chat App",
          description: "AI-powered chat assistant",
        },
      })
    }
  })
}

@import "@btst/stack/plugins/ai-chat/css";

npx @btst/cli generate --orm prisma --config lib/stack.ts --output prisma/schema.prisma

aiChatClientPlugin({
  // ... other config
  pageComponents: {
    // Replace the chat home page
    chat: MyCustomChatPage,
    // Replace the conversation page (authenticated mode only)
    // receives the route context as props
    chatConversation: ({ params }) => (
      <MyCustomConversationPage conversationId={params.id} />
    ),
  },
})

import { createClientAuth } from "@btst/stack/authorization/client"
import { authorization } from "./authorization"

const clientAuth = createClientAuth({
  authorization,
  getIdentity: () => session?.user ?? null,
  loginPath: "/sign-in",
})

<StackProvider
  stack={stack}
  auth={clientAuth}
  initialIdentity={initialIdentity}
  // ...
>
  {children}
</StackProvider>

await app.forRequest(request).operations.aiChat.deleteConversation({ id }) // authorized
await app.trusted.aiChat.deleteConversation({ id })                // trusted

import { aiChatBackendPlugin, type AiChatBackendHooks } from "@btst/stack/plugins/ai-chat/api"

const chatHooks: AiChatBackendHooks = {
  // Domain/abuse controls run only after typed authorization succeeds.
  onBeforeChat(messages, context) {
    enforceRateLimit(context.headers)
  },
  // Lifecycle hooks
  onAfterCreateConversation(conversation, context) {
    console.log("Conversation created:", conversation.id)
  },
  onAfterChat(conversationId, messages, context) {
    console.log("Chat completed:", conversationId, "messages:", messages.length)
  },
  // Error hooks
  onErrorChat(error, context) {
    console.error("Chat error:", error.message)
  },
}

const { handler, dbSchema } = createBackendStack({
  plugins: {
    aiChat: aiChatBackendPlugin({
      model: openai("gpt-4o"),
      hooks: chatHooks
    })
  },
  // ...
})

aiChat: aiChatClientPlugin({
  // Mode configuration
  mode: "authenticated",
  // Optional SEO configuration
  seo: {
    siteName: "My AI Assistant",
    description: "Chat with our AI assistant",
    locale: "en_US",
    defaultImage: `${baseURL}/og-image.png`,
  },
})

aiChat: aiChatClientPlugin({
  hooks: {
    beforeLoadConversations: async (context) => {
      console.log("Loading conversations for", context.path)
    },
    afterLoadConversation: async (conversation, id, context) => {
      // Log access for analytics
      console.log("User accessed conversation:", id)
    },
    onErrorLoad(error, context) {
      reportLoaderError(error, { path: context.path })
    },
  }
})

overrides={{
  aiChat: {
    // Optional overrides
    uploadFile: async (file) => {
      const formData = new FormData()
      formData.append("file", file)
      const res = await fetch("/api/upload", { method: "POST", body: formData })
      const { url } = await res.json()
      return url
    },
    allowedFileTypes: ["image", "pdf", "text"], // Restrict allowed types
    // Suggested prompts shown in empty chat state
    chatSuggestions: [
      "What can you help me with?",
      "Tell me about your features",
      "How do I get started?",
    ],
    // Custom tool UI renderers (see "Custom Tool UI Renderers" section)
    toolRenderers: {
      getWeather: WeatherCard,
      searchDocs: SearchResultsRenderer,
    },
  }
}}

import { ChatLayout, type ChatLayoutProps, type UIMessage } from "@btst/stack/plugins/ai-chat/client"

<ChatLayout
  layout="widget"
  widgetHeight="520px"
/>

{/* Rendered inside a modal/dialog that you control */}
<ChatLayout
  layout="widget"
  widgetHeight="500px"
  defaultOpen={true}
  showTrigger={false}
/>

app/
  @chatWidget/
    default.tsx          ← floating button (Link to /chat)
    loading.tsx          ← loading overlay
    (.)chat/
      page.tsx           ← intercepting route: renders modal with ChatLayout
  chat/
    page.tsx             ← full-page fallback (hard nav / refresh)
  layout.tsx             ← passes chatWidget slot into the body

"use client";
import Link from "next/link";
import { BotIcon } from "lucide-react";

export default function ChatWidgetButton() {
  return (
    <Link href="/chat" className="fixed bottom-6 right-6 z-50 ...">
      <BotIcon className="size-8" />
    </Link>
  );
}

"use client";
import { useRouter } from "next/navigation";
import { ChatLayout } from "@btst/stack/plugins/ai-chat/client";

export default function ChatModal() {
  const router = useRouter();
  return (
    {/* Backdrop */}
    <div className="fixed inset-0 z-50 bg-black/50" onClick={() => router.back()}>
      {/* Modal card */}
      <div className="..." onClick={(e) => e.stopPropagation()}>
        {/* This route remains below the app's existing StackProvider. */}
        <ChatLayout
          layout="widget"
          defaultOpen={true}
          showTrigger={false}
        />
      </div>
    </div>
  );
}

<ChatLayout
  layout="widget"
  widgetHeight="500px"
  initialMessages={savedMessages}
  onMessagesChange={(messages) => localStorage.setItem("chat", JSON.stringify(messages))}
/>

import {
  useConversations,
  useConversation,
  useSuspenseConversations,
  useSuspenseConversation,
  useCreateConversation,
  useRenameConversation,
  useRenameConversationForm,
  useDeleteConversation,
} from "@btst/stack/plugins/ai-chat/client/hooks"

import {
  useConversations,
  useConversation,
  useCreateConversation,
  useRenameConversation,
  useRenameConversationForm,
  useDeleteConversation,
} from "@btst/stack/plugins/ai-chat/client/hooks"

function ConversationsList() {
  // List all conversations
  const { conversations, isLoading, error, refetch } = useConversations()

  // Get single conversation with messages
  const { conversation } = useConversation(selectedId)

  // Mutations
  const createMutation = useCreateConversation()
  const renameMutation = useRenameConversation()
  const deleteMutation = useDeleteConversation()

  const handleCreate = async () => {
    const newConv = await createMutation.mutateAsync({ title: "New Chat" })
    // Navigate to new conversation
  }

  const handleRename = async (id: string, newTitle: string) => {
    await renameMutation.mutateAsync({ id, title: newTitle })
  }

  const handleDelete = async (id: string) => {
    await deleteMutation.mutateAsync({ id })
  }

  // ... render conversations
}

const renameForm = useRenameConversationForm({
  conversation,
  onSuccess: () => setOpen(false),
})

await renameForm.submit({ title })

return renameForm.fieldErrors.title ? (
  <p role="alert">{renameForm.fieldErrors.title}</p>
) : null

import {
  aiChatResources,
  createAiChatQueryKeys,
  type AiChatQueryKeys,
} from "@btst/stack/plugins/ai-chat/query-keys"

import { openai } from "@ai-sdk/openai"
import { anthropic } from "@ai-sdk/anthropic"
import { google } from "@ai-sdk/google"

// Use OpenAI
aiChat: aiChatBackendPlugin({
  model: openai("gpt-4o"),
})

// Or use Anthropic
aiChat: aiChatBackendPlugin({
  model: anthropic("claude-3-5-sonnet-20241022"),
})

// Or use Google
aiChat: aiChatBackendPlugin({
  model: google("gemini-1.5-pro"),
})

import { tool } from "ai"
import { z } from "zod"

const weatherTool = tool({
  description: "Get the current weather in a location",
  inputSchema: z.object({
    location: z.string().describe("The city and state"),
  }),
  execute: async ({ location }) => {
    // Your implementation
    return { temperature: 72, condition: "sunny" }
  },
})

aiChat: aiChatBackendPlugin({
  model: openai("gpt-4o"),
  tools: {
    getWeather: weatherTool,
  },
})

import type { ToolCallProps } from "@btst/stack/plugins/ai-chat/client"

// Custom weather card component
function WeatherCard({ input, output, isLoading }: ToolCallProps<{ location: string }, { temperature: number; condition: string }>) {
  if (isLoading) {
    return (
      <div className="p-4 border rounded-lg animate-pulse">
        <div className="h-4 w-24 bg-muted rounded" />
      </div>
    )
  }
  
  if (!output) return null
  
  return (
    <div className="p-4 border rounded-lg bg-gradient-to-r from-blue-50 to-blue-100">
      <h4 className="font-medium">{input?.location}</h4>
      <p className="text-2xl font-bold">{output.temperature}°F</p>
      <p className="text-muted-foreground">{output.condition}</p>
    </div>
  )
}

// In your layout
<StackProvider
  stack={stack}
  router={nextRouter()}
  overrides={{
    aiChat: {
      // Custom tool renderers
      toolRenderers: {
        getWeather: WeatherCard,
        searchDocs: ({ input, output, isLoading }) => (
          <SearchResultsCard query={input?.query} results={output} loading={isLoading} />
        ),
      },
    }
  }}
>
  {children}
</StackProvider>

import { ToolCallDisplay, type ToolCallProps } from "@btst/stack/plugins/ai-chat/client"

function MyCustomToolRenderer(props: ToolCallProps) {
  // Custom rendering for specific states
  if (props.state === "output-available" && props.output) {
    return <MyCustomOutput data={props.output} />
  }
  
  // Fall back to default display for other states
  return <ToolCallDisplay {...props} />
}

import { createBackendStack } from "@btst/stack/api"
import { aiChatBackendPlugin } from "@btst/stack/plugins/ai-chat/api"
import { openai } from "@ai-sdk/openai"

// Example rate limiter (implement your own)
const rateLimiter = new Map<string, number>()

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    aiChat: aiChatBackendPlugin({
      model: openai("gpt-4o"),
      access: "public", // Explicit, stateless streaming access
      systemPrompt: "You are a helpful customer support bot.",
      hooks: {
        onBeforeChat: async (messages, ctx) => {
          // Implement rate limiting
          const ip = ctx.headers?.get("x-forwarded-for") || "unknown"
          const requests = rateLimiter.get(ip) || 0
          if (requests > 10) {
            throw new Error("Rate limit exceeded")
          }
          rateLimiter.set(ip, requests + 1)
        },
      },
    })
  },
  adapter: (db) => createMemoryAdapter(db)({})
})

aiChat: aiChatClientPlugin({
  mode: "public", // Stateless public conversation UI
})

<StackProvider
  stack={stack}
  router={nextRouter()}
>
  {children}
</StackProvider>

"use client";

import { ChatLayout, type UIMessage } from "@btst/stack/plugins/ai-chat/client";
import { useLocalStorage } from "@/hooks/useLocalStorage"; // Your hook

export default function PublicChat() {
  const [messages, setMessages] = useLocalStorage<UIMessage[]>(
    "public-chat-messages",
    []
  );

  return (
    <ChatLayout
      layout="widget"
      initialMessages={messages}
      onMessagesChange={setMessages}
    />
  );
}

overrides={{
  aiChat: {
    // ... other overrides
    localization: {
      CHAT_PLACEHOLDER: "Ask me anything...",
      CHAT_EMPTY_STATE: "How can I help you today?",
      SIDEBAR_NEW_CHAT: "Start new conversation",
      CONVERSATION_DELETE_CONFIRM_TITLE: "Delete this chat?",
      // See AiChatLocalization type for all available strings
    }
  }
}}

<StackProvider
  stack={stack}
  notify={{
    success: (message) => myToast.success(message),
    error: (message) => myToast.error(message),
  }}
  // ...
>
  {children}
</StackProvider>

import { PageAIContextProvider } from "@btst/stack/plugins/ai-chat/client/context"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <PageAIContextProvider>
          {/* Everything else, including StackProvider and your chat modal */}
          {children}
        </PageAIContextProvider>
      </body>
    </html>
  )
}

aiChatBackendPlugin({
  model: openai("gpt-4o"),
  enablePageTools: true, // activates built-in fillBlogForm, updatePageLayers tools
})

import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context"

// Blog post page — provides content for summarization
function BlogPostPage({ post }) {
  useRegisterPageAIContext(post ? {
    routeName: "blog-post",
    pageDescription: `Blog post: "${post.title}"\n\n${post.content.slice(0, 16000)}`,
    suggestions: ["Summarize this post", "What are the key takeaways?"],
  } : null)

  // ...
}

import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context"

function ProductPage({ product, cart }) {
  useRegisterPageAIContext({
    routeName: "product-detail",
    pageDescription: `Product: ${product.name}. Price: $${product.price}.`,
    suggestions: ["Tell me about this product", "Add to cart"],
    clientTools: {
      addToCart: async ({ quantity }) => {
        cart.add(product.id, quantity)
        return { success: true, message: `Added ${quantity} to cart` }
      }
    }
  })
}

import { tool } from "ai"
import { z } from "zod"

aiChatBackendPlugin({
  model: openai("gpt-4o"),
  enablePageTools: true,
  clientToolSchemas: {
    addToCart: tool({
      description: "Add the current product to the shopping cart",
      inputSchema: z.object({ quantity: z.number().int().min(1) }),
      // No execute — this is handled client-side
    }),
  }
})

import { PageAIContextProvider } from "@btst/stack/plugins/ai-chat/client/context"

<PageAIContextProvider>
  {children}
</PageAIContextProvider>

import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context"

useRegisterPageAIContext({
  routeName: string,           // shown as badge in chat header
  pageDescription: string,     // injected into system prompt (max 8,000 chars)
  suggestions?: string[],      // quick-action chips in chat empty state
  clientTools?: {              // handlers the AI can invoke
    [toolName: string]: (args: any) => Promise<{ success: boolean; message?: string }>
  }
})

import type { AiChatBackendHooks } from "@btst/stack/plugins/ai-chat/api"

aiChatBackendPlugin({
  enablePageTools: true,
  hooks: {
    onBeforeActivateTools: async (toolNames, routeName, context) => {
      const disabled = await loadEmergencyToolDisableList()
      return toolNames.filter((name) => !disabled.has(name))
    },
  },
})

import { aiChatClientPlugin } from "@btst/stack/plugins/ai-chat/client"
// Import your ejected (and customized) page components
import { ChatPageComponent } from "@/components/btst/ai-chat/client/components/pages/chat-page"

aiChatClientPlugin({
  pageComponents: {
    chat: ChatPageComponent, // replaces the chat home page
    // Param routes receive the route context ({ params }) as props
    chatConversation: ({ params }) => (
      <ChatPageComponent conversationId={params.id} />
    ),
  },
})