tr]:last:border-b-0",
46 | className,
47 | )}
48 | {...props}
49 | />
50 | );
51 | }
52 |
53 | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
54 | return (
55 | [role=checkbox]]:translate-y-[2px]",
72 | className,
73 | )}
74 | {...props}
75 | />
76 | );
77 | }
78 |
79 | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
80 | return (
81 | [role=checkbox]]:translate-y-[2px]",
85 | className,
86 | )}
87 | {...props}
88 | />
89 | );
90 | }
91 |
92 | function TableCaption({
93 | className,
94 | ...props
95 | }: React.ComponentProps<"caption">) {
96 | return (
97 | ) {
11 | return (
12 | ) {
24 | return (
25 | ) {
40 | return (
41 | ) {
56 | return (
57 | ) => {
20 | const term = event.target.value;
21 | setSearchTerm(term);
22 | onSearchChange(term);
23 | };
24 |
25 | return (
26 |
32 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/apps/web/src/components/ui/tooltip-icon-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { forwardRef } from "react";
4 |
5 | import {
6 | Tooltip,
7 | TooltipContent,
8 | TooltipProvider,
9 | TooltipTrigger,
10 | } from "@/components/ui/tooltip";
11 | import { Button, ButtonProps } from "@/components/ui/button";
12 | import { cn } from "@/lib/utils";
13 |
14 | export type TooltipIconButtonProps = ButtonProps & {
15 | tooltip: string;
16 | /**
17 | * @default "bottom"
18 | */
19 | side?: "top" | "bottom" | "left" | "right";
20 | /**
21 | * @default 200
22 | */
23 | delayDuration?: number;
24 | /**
25 | * @default "ghost"
26 | */
27 | variant?:
28 | | "default"
29 | | "destructive"
30 | | "outline"
31 | | "secondary"
32 | | "ghost"
33 | | "link";
34 | };
35 |
36 | export const TooltipIconButton = forwardRef<
37 | HTMLButtonElement,
38 | TooltipIconButtonProps
39 | >(
40 | (
41 | {
42 | children,
43 | tooltip,
44 | side = "bottom",
45 | className,
46 | delayDuration = 200,
47 | variant = "ghost",
48 | ...rest
49 | },
50 | ref,
51 | ) => {
52 | return (
53 |
54 |
55 |
56 |
63 | {children}
64 | {tooltip}
65 |
66 |
67 | {tooltip}
68 |
69 |
70 | );
71 | },
72 | );
73 |
74 | TooltipIconButton.displayName = "TooltipIconButton";
75 |
--------------------------------------------------------------------------------
/apps/web/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | function TooltipProvider({
9 | delayDuration = 0,
10 | ...props
11 | }: React.ComponentProps) {
12 | return (
13 | ) {
24 | return (
25 |
26 |
31 | );
32 | }
33 |
34 | function TooltipTrigger({
35 | ...props
36 | }: React.ComponentProps) {
37 | return (
38 | ) {
51 | return (
52 |
53 |
62 | {children}
63 |
65 |
66 | );
67 | }
68 |
69 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
70 |
--------------------------------------------------------------------------------
/apps/web/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const DO_NOT_RENDER_ID_PREFIX = "do-not-render-";
2 | export const DOCS_LINK = "https://docs.oap.langchain.com";
3 | export const DESCRIPTION_MAX_LENGTH = 850;
4 |
--------------------------------------------------------------------------------
/apps/web/src/features/agents/components/create-edit-agent-dialogs/graph-select.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectContent,
4 | SelectGroup,
5 | SelectItem,
6 | SelectTrigger,
7 | SelectValue,
8 | } from "@/components/ui/select";
9 | import { Agent } from "@/types/agent";
10 | import {
11 | groupAgentsByGraphs,
12 | isUserCreatedDefaultAssistant,
13 | } from "@/lib/agent-utils";
14 | import _ from "lodash";
15 | import { getDeployments } from "@/lib/environment/deployments";
16 | import { Deployment } from "@/types/deployment";
17 | import { cn } from "@/lib/utils";
18 |
19 | interface GraphSelectProps {
20 | selectedGraph: Agent | undefined;
21 | setSelectedGraph: (graph: Agent | undefined) => void;
22 | selectedDeployment: Deployment | undefined;
23 | setSelectedDeployment: (deployment: Deployment | undefined) => void;
24 | agents: Agent[];
25 | className?: string;
26 | }
27 |
28 | export function GraphSelect({
29 | selectedGraph,
30 | setSelectedGraph,
31 | selectedDeployment,
32 | setSelectedDeployment,
33 | agents,
34 | className,
35 | }: GraphSelectProps) {
36 | const deployments = getDeployments();
37 | const graphs = deployments.flatMap((deployment) => {
38 | const deploymentAgents = agents.filter(
39 | (agent) => agent.deploymentId === deployment.id,
40 | );
41 | // Group filtered agents by graph (still needed for sorting/grouping logic)
42 | const agentsGroupedByGraphs = groupAgentsByGraphs(deploymentAgents);
43 | return agentsGroupedByGraphs.flatMap(
44 | (group) => group.find((g) => isUserCreatedDefaultAssistant(g)) ?? [],
45 | );
46 | });
47 |
48 | const getDeploymentSpan = (deploymentId: string) => {
49 | const deployment = deployments.find((d) => d.id === deploymentId);
50 | if (!deployment) return null;
51 | return [{deployment.name}] ;
52 | };
53 |
54 | return (
55 | {
62 | if (!v) {
63 | setSelectedGraph(undefined);
64 | setSelectedDeployment(undefined);
65 | return;
66 | }
67 | const [deploymentId, graphId] = v.split(":");
68 | const graph = agents.find(
69 | (g) => g.graph_id === graphId && g.deploymentId === deploymentId,
70 | );
71 | if (!graph) return;
72 | setSelectedGraph(graph);
73 | setSelectedDeployment(deployments.find((d) => d.id === deploymentId));
74 | }}
75 | >
76 |
77 |
79 |
80 |
81 | {graphs.map((graph) => (
82 |
87 | {getDeploymentSpan(graph.deploymentId)}{" "}
88 | {_.startCase(graph.graph_id)}
89 |
90 | ))}
91 |
92 |
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/apps/web/src/features/agents/components/page-header.tsx:
--------------------------------------------------------------------------------
1 | import type React from "react";
2 | import { Button } from "@/components/ui/button";
3 | import { PlusCircle } from "lucide-react";
4 | import { CreateAgentDialog } from "./create-edit-agent-dialogs/create-agent-dialog";
5 | import { useState } from "react";
6 |
7 | interface PageHeaderProps {
8 | title: string;
9 | description?: string;
10 | action?: React.ReactNode;
11 | }
12 |
13 | export function PageHeader({ title, description, action }: PageHeaderProps) {
14 | const [showCreateAgentDialog, setShowCreateAgentDialog] = useState(false);
15 | return (
16 |
17 |
18 |
{title}
19 | {description && (
20 |
{description}
21 | )}
22 |
23 | {action || (
24 |
setShowCreateAgentDialog(true)}>
25 |
28 | )}
29 |
30 |
34 |
34 |
35 |
36 |
44 |
setShowCreateDialog(true)}
47 | >
48 |
51 |
52 |
53 | {filteredAgents.length === 0 ? (
54 |
55 |
No agents found
56 |
57 | Create a new agent or try a different search.
58 |
59 |
setShowCreateDialog(true)}
64 | >
65 |
68 |
69 | ) : (
70 |
71 | {filteredAgents.map((agent) => (
72 |
76 | ))}
77 |
78 | )}
79 |
80 |
87 |
6 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/src/features/agents/index.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
3 | import { PageHeader } from "./components/page-header";
4 | import { TemplatesList } from "./components/templates-list";
5 | import { AgentDashboard } from "./components/agent-dashboard";
6 |
7 | export default function AgentsInterfaceV2() {
8 | return (
9 |
10 |
14 |
15 |
19 |
20 | Templates
21 | All Agents
22 |
23 |
24 |
28 | Loading...}>
29 |
31 |
32 |
33 |
37 | Loading...}>
38 |
40 |
41 |
42 |
11 |
12 |
13 | Chat
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/apps/web/src/features/chat/components/configuration-sidebar/config-section.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type { ReactNode } from "react";
4 | import { cn } from "@/lib/utils";
5 |
6 | interface ConfigSectionProps {
7 | title: string;
8 | children: ReactNode;
9 | className?: string;
10 | action?: ReactNode;
11 | }
12 |
13 | export function ConfigSection({
14 | title,
15 | children,
16 | className,
17 | action,
18 | }: ConfigSectionProps) {
19 | return (
20 |
21 |
22 |
{title}
23 | {action}
24 |
25 |
{children}
26 |
(
22 | (
23 | { historyOpen, setHistoryOpen, configOpen, setConfigOpen, className },
24 | ref: ForwardedRef,
25 | ) => {
26 | const handleConfigClick = () => {
27 | setConfigOpen(true);
28 | setHistoryOpen(false);
29 | };
30 |
31 | const handleHistoryClick = () => {
32 | setHistoryOpen(true);
33 | setConfigOpen(false);
34 | };
35 |
36 | const closeAll = () => {
37 | setConfigOpen(false);
38 | setHistoryOpen(false);
39 | };
40 |
41 | const isSidebarOpen = historyOpen || configOpen;
42 |
43 | return (
44 |
54 |
55 |
{
63 | if (!isSidebarOpen) return;
64 | // Sidebar is open, clicking this will close any open sidebar
65 | closeAll();
66 | }}
67 | >
68 | {isSidebarOpen ? (
69 |
74 |
75 |
81 |
92 |
94 |
105 |
107 |
108 |
110 | );
111 | },
112 | );
113 |
114 | SidebarButtons.displayName = "SidebarButtons";
115 |
--------------------------------------------------------------------------------
/apps/web/src/features/chat/components/thread/messages/ContentBlocksPreview.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { Base64ContentBlock } from "@langchain/core/messages";
3 | import { MultimodalPreview } from "./MultimodalPreview";
4 | import { cn } from "@/lib/utils";
5 |
6 | interface ContentBlocksPreviewProps {
7 | blocks: Base64ContentBlock[];
8 | onRemove: (idx: number) => void;
9 | size?: "sm" | "md" | "lg";
10 | className?: string;
11 | }
12 |
13 | /**
14 | * Renders a preview of content blocks with optional remove functionality.
15 | * Uses cn utility for robust class merging.
16 | */
17 | export const ContentBlocksPreview: React.FC = ({
18 | blocks,
19 | onRemove,
20 | size = "md",
21 | className,
22 | }) => {
23 | if (!blocks.length) return null;
24 | return (
25 |
26 | {blocks.map((block, idx) => (
27 | onRemove(idx)}
32 | size={size}
33 | />
34 | ))}
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/apps/web/src/features/chat/hooks/use-config-store.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { create } from "zustand";
4 | import { persist } from "zustand/middleware";
5 | import {
6 | ConfigurableFieldUIMetadata,
7 | ConfigurableFieldMCPMetadata,
8 | ConfigurableFieldRAGMetadata,
9 | ConfigurableFieldAgentsMetadata,
10 | } from "@/types/configurable";
11 |
12 | interface ConfigState {
13 | configsByAgentId: Record>;
14 | getAgentConfig: (agentId: string) => Record;
15 | updateConfig: (agentId: string, key: string, value: any) => void;
16 | resetConfig: (agentId: string) => void;
17 | setDefaultConfig: (
18 | agentId: string,
19 | configurations:
20 | | ConfigurableFieldMCPMetadata[]
21 | | ConfigurableFieldUIMetadata[]
22 | | ConfigurableFieldRAGMetadata[]
23 | | ConfigurableFieldAgentsMetadata[],
24 | ) => void;
25 | resetStore: () => void;
26 | }
27 |
28 | export const useConfigStore = create()(
29 | persist(
30 | (set, get) => ({
31 | configsByAgentId: {},
32 |
33 | getAgentConfig: (agentId: string) => {
34 | const state = get();
35 | const baseConfig = state.configsByAgentId[agentId];
36 | const toolsConfig = state.configsByAgentId[`${agentId}:selected-tools`];
37 | const ragConfig = state.configsByAgentId[`${agentId}:rag`];
38 | const agentsConfig = state.configsByAgentId[`${agentId}:agents`];
39 | const configObj = {
40 | ...baseConfig,
41 | ...toolsConfig,
42 | ...ragConfig,
43 | ...agentsConfig,
44 | };
45 | delete configObj.__defaultValues;
46 | return configObj;
47 | },
48 |
49 | updateConfig: (agentId, key, value) =>
50 | set((state) => ({
51 | configsByAgentId: {
52 | ...state.configsByAgentId,
53 | [agentId]: {
54 | ...(state.configsByAgentId[agentId] || {}),
55 | [key]: value,
56 | },
57 | },
58 | })),
59 |
60 | resetConfig: (agentId) => {
61 | set((state) => {
62 | const agentConfig = state.configsByAgentId[agentId];
63 | if (!agentConfig || !agentConfig.__defaultValues) {
64 | // If no config or default values exist for this agent, do nothing or set to empty
65 | return state;
66 | }
67 | const defaultsToUse = { ...agentConfig.__defaultValues };
68 | return {
69 | configsByAgentId: {
70 | ...state.configsByAgentId,
71 | [agentId]: defaultsToUse,
72 | },
73 | };
74 | });
75 | },
76 |
77 | setDefaultConfig: (agentId, configurations) => {
78 | const defaultConfig: Record = {};
79 | configurations.forEach((config) => {
80 | if (config.default !== undefined) {
81 | defaultConfig[config.label] = config.default;
82 | }
83 | });
84 |
85 | defaultConfig.__defaultValues = { ...defaultConfig };
86 |
87 | set((currentState) => ({
88 | configsByAgentId: {
89 | ...currentState.configsByAgentId,
90 | [agentId]: defaultConfig,
91 | },
92 | }));
93 | },
94 |
95 | // Clear everything from the store
96 | resetStore: () => set({ configsByAgentId: {} }),
97 | }),
98 | {
99 | name: "ai-config-storage", // Keep the same storage key, but manage agents inside
100 | },
101 | ),
102 | );
103 |
--------------------------------------------------------------------------------
/apps/web/src/features/chat/utils/api-key.tsx:
--------------------------------------------------------------------------------
1 | export function getApiKey(): string | null {
2 | try {
3 | if (typeof window === "undefined") return null;
4 | return window.localStorage.getItem("lg:chat:apiKey") ?? null;
5 | } catch {
6 | // no-op
7 | }
8 |
9 | return null;
10 | }
11 |
--------------------------------------------------------------------------------
/apps/web/src/features/chat/utils/content-string.tsx:
--------------------------------------------------------------------------------
1 | import type { Message } from "@langchain/langgraph-sdk";
2 |
3 | /**
4 | * Returns the content of a message as a string.
5 | *
6 | * @param content - The content of the message
7 | * @returns The content of the message as a string
8 | */
9 | export function getContentString(content: Message["content"]): string {
10 | if (typeof content === "string") return content;
11 | const texts = content
12 | .filter((c): c is { type: "text"; text: string } => c.type === "text")
13 | .map((c) => c.text);
14 | return texts.join(" ");
15 | }
16 |
--------------------------------------------------------------------------------
/apps/web/src/features/chat/utils/tool-responses.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from "uuid";
2 | import { Message, ToolMessage } from "@langchain/langgraph-sdk";
3 | import { DO_NOT_RENDER_ID_PREFIX } from "@/constants";
4 |
5 | /**
6 | * Ensures that all tool calls have responses.
7 | *
8 | * @param messages - The messages to process.
9 | * @returns The processed messages with tool responses added.
10 | */
11 | export function ensureToolCallsHaveResponses(messages: Message[]): Message[] {
12 | const newMessages: ToolMessage[] = [];
13 |
14 | messages.forEach((message, index) => {
15 | if (message.type !== "ai" || message.tool_calls?.length === 0) {
16 | // If it's not an AI message, or it doesn't have tool calls, we can ignore.
17 | return;
18 | }
19 | // If it has tool calls, ensure the message which follows this is a tool message
20 | const followingMessage = messages[index + 1];
21 | if (followingMessage && followingMessage.type === "tool") {
22 | // Following message is a tool message, so we can ignore.
23 | return;
24 | }
25 |
26 | // Since the following message is not a tool message, we must create a new tool message
27 | newMessages.push(
28 | ...(message.tool_calls?.map((tc) => ({
29 | type: "tool" as const,
30 | tool_call_id: tc.id ?? "",
31 | id: `${DO_NOT_RENDER_ID_PREFIX}${uuidv4()}`,
32 | name: tc.name,
33 | content: "Successfully handled tool call.",
34 | })) ?? []),
35 | );
36 | });
37 |
38 | return newMessages;
39 | }
40 |
--------------------------------------------------------------------------------
/apps/web/src/features/inbox/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 |
5 | /**
6 | * The parent component containing the agent inbox interface.
7 | */
8 | export default function InboxInterface(): React.ReactNode {
9 | return (
10 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/apps/web/src/features/rag/components/collections-list/collection-actions.tsx:
--------------------------------------------------------------------------------
1 | import { Collection } from "@/types/collection";
2 | import {
3 | Popover,
4 | PopoverContent,
5 | PopoverTrigger,
6 | } from "@/components/ui/popover";
7 | import { Button } from "@/components/ui/button";
8 | import { MoreVertical } from "lucide-react";
9 | import { EditCollectionDialog } from "./edit-collection-dialog";
10 | import { DeleteCollectionAlert } from "./delete-collection-alert";
11 |
12 | export function CollectionActions({
13 | collection,
14 | onDelete,
15 | onEdit,
16 | }: {
17 | collection: Collection;
18 | onDelete: (id: string) => void;
19 | onEdit: (
20 | id: string,
21 | name: string,
22 | metadata: Record,
23 | ) => Promise;
24 | }) {
25 | return (
26 |
27 | e.stopPropagation()}
30 | >
31 |
36 |
38 |
39 |
43 |
44 |
53 |
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/apps/web/src/features/rag/components/collections-list/delete-collection-alert.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Button } from "@/components/ui/button";
4 | import {
5 | AlertDialog,
6 | AlertDialogAction,
7 | AlertDialogCancel,
8 | AlertDialogContent,
9 | AlertDialogDescription,
10 | AlertDialogFooter,
11 | AlertDialogHeader,
12 | AlertDialogTitle,
13 | AlertDialogTrigger,
14 | } from "@/components/ui/alert-dialog";
15 | import { Trash2 } from "lucide-react";
16 | import type { Collection } from "@/types/collection";
17 |
18 | export function DeleteCollectionAlert({
19 | collection,
20 | onDelete,
21 | }: {
22 | collection: Collection;
23 | onDelete: (id: string) => void;
24 | }) {
25 | return (
26 |
27 | e.stopPropagation()}
30 | >
31 |
36 | Delete
38 |
39 |
40 |
41 |
42 | Delete Collection
43 |
44 | Are you sure you want to delete the collection "{collection.name}
45 | "? This will also delete all associated documents.
46 |
47 |
48 |
49 | Cancel
50 | onDelete(collection.uuid)}
52 | className="bg-destructive hover:bg-destructive/90 text-white"
53 | >
54 | Delete
55 |
56 |
57 |
58 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/apps/web/src/features/rag/components/empty-collections.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Card, CardContent } from "@/components/ui/card";
3 | import { FolderPlus, Layers } from "lucide-react";
4 | import { CreateCollectionDialog } from "./create-collection-dialog";
5 | import { useState } from "react";
6 | import { useRagContext } from "../providers/RAG";
7 | import { toast } from "sonner";
8 |
9 | export default function EmptyCollectionsState() {
10 | const [open, setOpen] = useState(false);
11 | const { createCollection, setSelectedCollection } = useRagContext();
12 |
13 | const handleSubmit = async (name: string, description: string) => {
14 | const loadingToast = toast.loading("Creating collection", {
15 | richColors: true,
16 | });
17 | const newCollection = await createCollection(name, {
18 | description,
19 | });
20 | toast.dismiss(loadingToast);
21 | if (newCollection) {
22 | setOpen(false);
23 | toast.success("Collection created successfully", { richColors: true });
24 | setSelectedCollection(newCollection);
25 | } else {
26 | toast.warning(
27 | `Collection named '${name}' could not be created (likely already exists).`,
28 | {
29 | duration: 5000,
30 | richColors: true,
31 | },
32 | );
33 | }
34 | };
35 |
36 | return (
37 |
38 |
39 |
40 |
42 |
43 |
44 |
45 | No collections yet
46 |
47 |
48 | Collections help you organize your documents and resources in one
49 | place. Create your first collection to get started.
50 |
51 |
62 |
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/apps/web/src/features/rag/index.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import type React from "react";
4 | import { useState } from "react";
5 | import {
6 | DocumentsCard,
7 | DocumentsCardLoading,
8 | } from "./components/documents-card";
9 | import {
10 | CollectionsCard,
11 | CollectionsCardLoading,
12 | } from "./components/collections-card";
13 | import { useRagContext } from "./providers/RAG";
14 | import EmptyCollectionsState from "./components/empty-collections";
15 |
16 | export default function RAGInterface() {
17 | const {
18 | selectedCollection,
19 | setSelectedCollection,
20 | collections,
21 | initialSearchExecuted,
22 | } = useRagContext();
23 | const [currentPage, setCurrentPage] = useState(1);
24 |
25 | if (initialSearchExecuted && !collections.length) {
26 | return
31 |
32 | {/* Collections Section */}
33 |
34 | {initialSearchExecuted ? (
35 |
45 |
46 | {/* Documents Section */}
47 |
48 | {initialSearchExecuted ? (
49 |
58 |
59 |
;
7 |
8 | const RagContext = createContext(null);
9 |
10 | export const RagProvider: React.FC = ({ children }) => {
11 | const ragState = useRag();
12 |
13 | const { session } = useAuthContext();
14 |
15 | useEffect(() => {
16 | if (
17 | ragState.collections.length > 0 ||
18 | ragState.initialSearchExecuted ||
19 | !session?.accessToken
20 | ) {
21 | return;
22 | }
23 | ragState.initialFetch(session?.accessToken);
24 | }, [session?.accessToken]);
25 |
26 | return {children} ;
27 | };
28 |
29 | export const useRagContext = () => {
30 | const context = useContext(RagContext);
31 | if (context === null) {
32 | throw new Error("useRagContext must be used within a RagProvider");
33 | }
34 | return context;
35 | };
36 |
--------------------------------------------------------------------------------
/apps/web/src/features/tools/components/tool-card/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import {
4 | Card,
5 | CardDescription,
6 | CardFooter,
7 | CardHeader,
8 | CardTitle,
9 | } from "@/components/ui/card";
10 | import { Tool } from "@/types/tool";
11 | import { ToolDetailsDialog } from "../tool-details-dialog";
12 | import { Eye, FlaskConical } from "lucide-react";
13 | import { TooltipIconButton } from "@/components/ui/tooltip-icon-button";
14 | import { Skeleton } from "@/components/ui/skeleton";
15 | import { Button } from "@/components/ui/button";
16 | import NextLink from "next/link";
17 | import _ from "lodash";
18 |
19 | interface ToolCardProps {
20 | tool: Tool;
21 | }
22 |
23 | export function ToolCard({ tool }: ToolCardProps) {
24 | return (
25 |
26 |
27 |
28 | {_.startCase(tool.name)}
29 |
30 |
31 |
32 | {tool.description}
33 |
34 |
35 |
36 |
37 |
38 | Playground
40 |
41 |
42 |
43 |
48 |
50 |
51 |
52 |
53 | );
54 | }
55 |
56 | export function ToolCardLoading() {
57 | return (
58 |
59 |
60 |
61 |
63 |
64 |
68 |
69 |
70 |
72 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/apps/web/src/features/tools/components/tool-details-dialog/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import {
3 | Dialog,
4 | DialogClose,
5 | DialogContent,
6 | DialogDescription,
7 | DialogFooter,
8 | DialogHeader,
9 | DialogTitle,
10 | DialogTrigger,
11 | } from "@/components/ui/dialog";
12 | import { Tool } from "@/types/tool";
13 | import { ReactNode } from "react";
14 | import { SchemaRenderer } from "./schema-renderer";
15 | import _ from "lodash";
16 |
17 | interface ToolDetailsDialogProps {
18 | tool: Tool;
19 | children: ReactNode;
20 | }
21 |
22 | export function ToolDetailsDialog({ tool, children }: ToolDetailsDialogProps) {
23 | return (
24 |
25 | {children}
26 |
27 |
28 |
29 |
30 | Tool Details -{" "}
31 |
32 | {_.startCase(tool.name)}
33 |
34 |
35 | {tool.description || "No description provided"}
36 |
37 |
38 |
39 |
41 |
42 |
43 | Close
44 |
45 |
46 |
47 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/use-fetch-preselected-tools.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | useState,
3 | useEffect,
4 | useCallback,
5 | SetStateAction,
6 | Dispatch,
7 | } from "react";
8 | import { Tool } from "@/types/tool";
9 | import { ConfigurableFieldMCPMetadata } from "@/types/configurable";
10 |
11 | interface UseFetchPreselectedToolsProps {
12 | tools: Tool[];
13 | setTools: Dispatch>;
14 | getTools: (cursor?: string) => Promise;
15 | cursor: string;
16 | toolConfigurations: ConfigurableFieldMCPMetadata[];
17 | searchTerm?: string;
18 | }
19 |
20 | /**
21 | * Hook to ensure all pre-selected tools are fetched and available in the tools list
22 | * Continues fetching tools until all pre-selected tools are found or there are no more tools to fetch
23 | */
24 | export function useFetchPreselectedTools({
25 | tools,
26 | setTools,
27 | getTools,
28 | cursor,
29 | toolConfigurations,
30 | searchTerm,
31 | }: UseFetchPreselectedToolsProps) {
32 | const [loadingMore, setLoadingMore] = useState(false);
33 | const [fetchedAllPreSelectedTools, setFetchedAllPreSelectedTools] =
34 | useState(false);
35 |
36 | // Function to check if all pre-selected tools exist in the current tools list
37 | const checkPreSelectedTools = useCallback(() => {
38 | if (
39 | !toolConfigurations.length ||
40 | !toolConfigurations[0]?.default?.tools ||
41 | searchTerm
42 | ) {
43 | return true; // No pre-selected tools or search is active, no need to fetch more
44 | }
45 |
46 | const preSelectedToolNames = toolConfigurations[0].default.tools;
47 | const currentToolNames = tools.map((tool) => tool.name);
48 |
49 | // Check if all pre-selected tools exist in the current tools list
50 | return preSelectedToolNames.every((toolName) =>
51 | currentToolNames.some((currentToolName) => currentToolName === toolName),
52 | );
53 | }, [tools, toolConfigurations, searchTerm]);
54 |
55 | // Effect to fetch all pre-selected tools when component mounts or tools/cursor changes
56 | useEffect(() => {
57 | const fetchPreSelectedTools = async () => {
58 | if (
59 | fetchedAllPreSelectedTools ||
60 | !toolConfigurations.length ||
61 | !toolConfigurations[0]?.default?.tools ||
62 | searchTerm
63 | ) {
64 | return; // Already fetched all tools or no pre-selected tools or search is active
65 | }
66 |
67 | const allToolsExist = checkPreSelectedTools();
68 |
69 | if (allToolsExist) {
70 | setFetchedAllPreSelectedTools(true);
71 | return; // All pre-selected tools exist, no need to fetch more
72 | }
73 |
74 | if (!cursor && tools.length > 0) {
75 | setFetchedAllPreSelectedTools(true);
76 | return; // No more tools to fetch
77 | } else if (!cursor && tools.length === 0) {
78 | return; // No more tools to fetch
79 | }
80 |
81 | // Fetch more tools
82 | setLoadingMore(true);
83 | try {
84 | const moreTool = await getTools(cursor);
85 | setTools((prevTools) => [...prevTools, ...moreTool]);
86 | } catch (error) {
87 | console.error("Failed to load more tools:", error);
88 | setFetchedAllPreSelectedTools(true); // Stop trying on error
89 | } finally {
90 | setLoadingMore(false);
91 | }
92 | };
93 |
94 | fetchPreSelectedTools();
95 | }, [
96 | tools,
97 | cursor,
98 | toolConfigurations,
99 | searchTerm,
100 | checkPreSelectedTools,
101 | fetchedAllPreSelectedTools,
102 | getTools,
103 | setTools,
104 | ]);
105 |
106 | return {
107 | loadingMore,
108 | setLoadingMore,
109 | fetchedAllPreSelectedTools,
110 | };
111 | }
112 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/use-local-storage.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useCallback } from "react";
2 |
3 | // Define a type for the hook's return value
4 | type UseLocalStorageReturnType = [T, (value: T | ((val: T) => T)) => void];
5 |
6 | /**
7 | * Custom hook for persisting state in localStorage.
8 | *
9 | * @param key The key to use for storing the value in localStorage.
10 | * @param initialValue The initial value to use if no value is found in localStorage.
11 | * @returns A tuple containing the stored value and a function to update it.
12 | */
13 | export function useLocalStorage(
14 | key: string,
15 | initialValue: T,
16 | ): UseLocalStorageReturnType {
17 | // Function to get the stored value from localStorage or return the initial value
18 | const getStoredValue = useCallback(() => {
19 | if (typeof window === "undefined") {
20 | return initialValue;
21 | }
22 | try {
23 | const item = window.localStorage.getItem(key);
24 | return item ? (JSON.parse(item) as T) : initialValue;
25 | } catch (error) {
26 | console.warn(`Error reading localStorage key "${key}":`, error);
27 | return initialValue;
28 | }
29 | }, [key, initialValue]);
30 |
31 | // State to store our value
32 | // Pass initial state function to useState so logic is only executed once
33 | const [storedValue, setStoredValue] = useState(getStoredValue);
34 |
35 | // Function to set the value in localStorage and update the state
36 | const setValue = (value: T | ((val: T) => T)) => {
37 | try {
38 | // Allow value to be a function so we have the same API as useState
39 | const valueToStore =
40 | value instanceof Function ? value(storedValue) : value;
41 | // Save state
42 | setStoredValue(valueToStore);
43 | // Save to local storage
44 | if (typeof window !== "undefined") {
45 | window.localStorage.setItem(key, JSON.stringify(valueToStore));
46 | }
47 | } catch (error) {
48 | console.warn(`Error setting localStorage key "${key}":`, error);
49 | }
50 | };
51 |
52 | // Listen for changes to the localStorage from other tabs/windows
53 | useEffect(() => {
54 | if (typeof window === "undefined") {
55 | return;
56 | }
57 |
58 | const handleStorageChange = (event: StorageEvent) => {
59 | if (event.key === key && event.newValue) {
60 | try {
61 | setStoredValue(JSON.parse(event.newValue) as T);
62 | } catch (error) {
63 | console.warn(
64 | `Error parsing localStorage value for key "${key}" on storage event:`,
65 | error,
66 | );
67 | }
68 | } else if (event.key === key && !event.newValue) {
69 | // Handle item removal
70 | setStoredValue(initialValue);
71 | }
72 | };
73 |
74 | window.addEventListener("storage", handleStorageChange);
75 |
76 | // Update state if value changes in another tab
77 | // This is important for initial load in case another tab updated the value
78 | // after this component mounted but before the event listener was attached.
79 | const currentValue = getStoredValue();
80 | if (currentValue !== storedValue) {
81 | setStoredValue(currentValue);
82 | }
83 |
84 | return () => {
85 | window.removeEventListener("storage", handleStorageChange);
86 | };
87 | }, [key, initialValue, getStoredValue, storedValue]); // Added storedValue to dependencies
88 |
89 | return [storedValue, setValue];
90 | }
91 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/use-mcp.tsx:
--------------------------------------------------------------------------------
1 | import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
2 | import { Client } from "@modelcontextprotocol/sdk/client/index.js";
3 | import { Tool } from "@/types/tool";
4 | import { useState } from "react";
5 |
6 | function getMCPUrlOrThrow() {
7 | if (!process.env.NEXT_PUBLIC_BASE_API_URL) {
8 | throw new Error("NEXT_PUBLIC_BASE_API_URL is not defined");
9 | }
10 |
11 | const url = new URL(process.env.NEXT_PUBLIC_BASE_API_URL);
12 | url.pathname = `${url.pathname}${url.pathname.endsWith("/") ? "" : "/"}oap_mcp`;
13 | return url;
14 | }
15 |
16 | /**
17 | * Custom hook for interacting with the Model Context Protocol (MCP).
18 | * Provides functions to connect to an MCP server and list available tools.
19 | */
20 | export default function useMCP({
21 | name,
22 | version,
23 | }: {
24 | name: string;
25 | version: string;
26 | }) {
27 | const [tools, setTools] = useState([]);
28 | const [cursor, setCursor] = useState("");
29 |
30 | /**
31 | * Creates an MCP client and connects it to the specified server URL.
32 | * @param url - The URL of the MCP server.
33 | * @param options - Client identification options.
34 | * @param options.name - The name of the client.
35 | * @param options.version - The version of the client.
36 | * @returns A promise that resolves to the connected MCP client instance.
37 | */
38 | const createAndConnectMCPClient = async () => {
39 | const url = getMCPUrlOrThrow();
40 | const connectionClient = new StreamableHTTPClientTransport(new URL(url));
41 | const mcp = new Client({
42 | name,
43 | version,
44 | });
45 |
46 | await mcp.connect(connectionClient);
47 | return mcp;
48 | };
49 |
50 | /**
51 | * Connects to an MCP server and retrieves the list of available tools.
52 | * @param url - The URL of the MCP server.
53 | * @param options - Client identification options.
54 | * @param options.name - The name of the client.
55 | * @param options.version - The version of the client.
56 | * @returns A promise that resolves to an array of available tools.
57 | */
58 | const getTools = async (nextCursor?: string): Promise => {
59 | const mcp = await createAndConnectMCPClient();
60 | const tools = await mcp.listTools({ cursor: nextCursor });
61 | if (tools.nextCursor) {
62 | setCursor(tools.nextCursor);
63 | } else {
64 | setCursor("");
65 | }
66 | return tools.tools;
67 | };
68 |
69 | /**
70 | * Calls a tool on the MCP server.
71 | * @param name - The name of the tool.
72 | * @param version - The version of the tool. Optional.
73 | * @param args - The arguments to pass to the tool.
74 | * @returns A promise that resolves to the response from the tool.
75 | */
76 | const callTool = async ({
77 | name,
78 | args,
79 | version,
80 | }: {
81 | name: string;
82 | args: Record;
83 | version?: string;
84 | }) => {
85 | const mcp = await createAndConnectMCPClient();
86 | const response = await mcp.callTool({
87 | name,
88 | version,
89 | arguments: args,
90 | });
91 | return response;
92 | };
93 |
94 | return {
95 | getTools,
96 | callTool,
97 | createAndConnectMCPClient,
98 | tools,
99 | setTools,
100 | cursor,
101 | };
102 | }
103 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/use-mobile.ts:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const MOBILE_BREAKPOINT = 768;
4 |
5 | export function useIsMobile() {
6 | const [isMobile, setIsMobile] = React.useState(
7 | undefined,
8 | );
9 |
10 | React.useEffect(() => {
11 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
12 | const onChange = () => {
13 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
14 | };
15 | mql.addEventListener("change", onChange);
16 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
17 | return () => mql.removeEventListener("change", onChange);
18 | }, []);
19 |
20 | return !!isMobile;
21 | }
22 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/use-scroll-position.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | /**
4 | * Custom hook to save and restore scroll position when navigating between views
5 | * @returns Object containing scroll position and methods to save/restore it
6 | */
7 | export function useScrollPosition() {
8 | // Use ref to persist scroll position value between renders
9 | const scrollPositionRef = React.useRef(0);
10 |
11 | // Track which element was scrolled
12 | const scrollElementRef = React.useRef<"window" | "element">("window");
13 |
14 | // Save the current scroll position
15 | const saveScrollPosition = React.useCallback(
16 | (element?: HTMLElement | null) => {
17 | if (typeof window === "undefined") return;
18 |
19 | // If element is provided, use its scrollTop, otherwise use window.scrollY
20 | if (element && element.scrollTop > 0) {
21 | scrollPositionRef.current = element.scrollTop;
22 | scrollElementRef.current = "element";
23 | } else {
24 | scrollPositionRef.current = window.scrollY;
25 | scrollElementRef.current = "window";
26 | }
27 | },
28 | [],
29 | );
30 |
31 | // Restore the saved scroll position
32 | const restoreScrollPosition = React.useCallback(
33 | (element?: HTMLElement | null) => {
34 | if (typeof window === "undefined") return;
35 |
36 | const position = scrollPositionRef.current;
37 | const elementType = scrollElementRef.current;
38 |
39 | if (position <= 0) {
40 | return;
41 | }
42 |
43 | // Use requestAnimationFrame to ensure DOM updates have completed
44 | window.requestAnimationFrame(() => {
45 | // Try the provided element first
46 | if (element && elementType === "element") {
47 | // Use scrollTo with smooth behavior if supported
48 | if ("scrollTo" in element) {
49 | element.scrollTo({
50 | top: position,
51 | behavior: "smooth",
52 | });
53 | } else {
54 | // Fallback for older browsers
55 | (element as HTMLElement).scrollTop = position;
56 | }
57 | } else {
58 | // Fall back to window scroll with smooth behavior
59 | window.scrollTo({
60 | top: position,
61 | behavior: "smooth",
62 | });
63 | }
64 | });
65 | },
66 | [],
67 | );
68 |
69 | return {
70 | scrollPosition: scrollPositionRef.current,
71 | saveScrollPosition,
72 | restoreScrollPosition,
73 | };
74 | }
75 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/use-search-tools.tsx:
--------------------------------------------------------------------------------
1 | import { Tool } from "@/types/tool";
2 | import _, { debounce } from "lodash";
3 | import { useState, useMemo } from "react";
4 |
5 | export function useSearchTools(
6 | tools: Tool[],
7 | args?: {
8 | preSelectedTools?: string[];
9 | },
10 | ) {
11 | const [toolSearchTerm, setToolSearchTerm] = useState("");
12 |
13 | // Debounced search handler
14 | const debouncedSetSearchTerm = useMemo(
15 | () => debounce((value: string) => setToolSearchTerm(value), 200),
16 | [],
17 | );
18 |
19 | // Filter tools based on the search term
20 | const filteredTools = useMemo(() => {
21 | if (!toolSearchTerm) return tools;
22 | return tools.filter((tool) => {
23 | return (
24 | _.startCase(tool.name)
25 | .toLowerCase()
26 | .includes(toolSearchTerm.toLowerCase()) ||
27 | tool.name.toLowerCase().includes(toolSearchTerm.toLowerCase())
28 | );
29 | });
30 | }, [tools, toolSearchTerm]);
31 |
32 | const displayTools = useMemo(() => {
33 | // If no tool configurations, just return filtered tools
34 | if (!args?.preSelectedTools?.length) {
35 | return filteredTools;
36 | }
37 |
38 | const preSelectedToolNames = new Set(args.preSelectedTools || []);
39 | const processedTools = new Set();
40 | const result: Tool[] = [];
41 |
42 | // First add all pre-selected tools that match the search term (if any)
43 | filteredTools.forEach((tool) => {
44 | if (
45 | preSelectedToolNames.has(tool.name) &&
46 | !processedTools.has(tool.name)
47 | ) {
48 | result.push(tool);
49 | processedTools.add(tool.name);
50 | }
51 | });
52 |
53 | // Then add all other tools that match the search term
54 | filteredTools.forEach((tool) => {
55 | if (!processedTools.has(tool.name)) {
56 | result.push(tool);
57 | processedTools.add(tool.name);
58 | }
59 | });
60 |
61 | return result;
62 | }, [filteredTools, args?.preSelectedTools]);
63 |
64 | return {
65 | toolSearchTerm,
66 | debouncedSetSearchTerm,
67 | filteredTools,
68 | displayTools,
69 | };
70 | }
71 |
--------------------------------------------------------------------------------
/apps/web/src/hooks/useMediaQuery.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | export function useMediaQuery(query: string) {
4 | const [matches, setMatches] = useState(false);
5 |
6 | useEffect(() => {
7 | const media = window.matchMedia(query);
8 | setMatches(media.matches);
9 |
10 | const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
11 | media.addEventListener("change", listener);
12 | return () => media.removeEventListener("change", listener);
13 | }, [query]);
14 |
15 | return matches;
16 | }
17 |
--------------------------------------------------------------------------------
/apps/web/src/lib/auth/middleware.ts:
--------------------------------------------------------------------------------
1 | import { createServerClient } from "@supabase/ssr";
2 | import { NextResponse, type NextRequest } from "next/server";
3 |
4 | const NO_AUTH_PATHS = [
5 | "/debug-auth",
6 | "/signin",
7 | "/signup",
8 | "/forgot-password",
9 | "/reset-password",
10 | "/api/auth",
11 | ];
12 |
13 | export async function updateSession(request: NextRequest) {
14 | let supabaseResponse = NextResponse.next({
15 | request,
16 | });
17 |
18 | const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
19 | const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
20 |
21 | if (!supabaseUrl || !supabaseAnonKey) {
22 | throw new Error("Missing Supabase URL or Anon Key");
23 | }
24 |
25 | const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
26 | cookies: {
27 | getAll() {
28 | return request.cookies.getAll();
29 | },
30 | setAll(cookiesToSet) {
31 | cookiesToSet.forEach(({ name, value }) =>
32 | request.cookies.set(name, value),
33 | );
34 | supabaseResponse = NextResponse.next({
35 | request,
36 | });
37 | cookiesToSet.forEach(({ name, value, options }) =>
38 | supabaseResponse.cookies.set(name, value, options),
39 | );
40 | },
41 | },
42 | });
43 |
44 | // Do not run code between createServerClient and
45 | // supabase.auth.getUser(). A simple mistake could make it very hard to debug
46 | // issues with users being randomly logged out.
47 |
48 | // IMPORTANT: DO NOT REMOVE auth.getUser()
49 |
50 | const {
51 | data: { user },
52 | } = await supabase.auth.getUser();
53 |
54 | if (
55 | !user &&
56 | !NO_AUTH_PATHS.some((path) => request.nextUrl.pathname.startsWith(path))
57 | ) {
58 | // Check if this is an API request
59 | if (request.nextUrl.pathname.startsWith("/api/")) {
60 | // Return a JSON response with 401 Unauthorized status for API requests
61 | return NextResponse.json(
62 | { error: "Unauthorized", message: "Authentication required" },
63 | { status: 401 },
64 | );
65 | }
66 |
67 | // For non-API requests, redirect to the login page
68 | const url = request.nextUrl.clone();
69 | url.pathname = "/signin";
70 | return NextResponse.redirect(url);
71 | }
72 |
73 | // If the user is authenticated, and they are trying to access an auth page, redirect them to the home page
74 | if (
75 | user &&
76 | NO_AUTH_PATHS.some((path) => request.nextUrl.pathname.startsWith(path))
77 | ) {
78 | const url = request.nextUrl.clone();
79 | url.pathname = "/";
80 | return NextResponse.redirect(url);
81 | }
82 |
83 | // Redirect users from the /inbox page to the homepage
84 | if (request.nextUrl.pathname.startsWith("/inbox")) {
85 | const url = request.nextUrl.clone();
86 | url.pathname = "/";
87 | return NextResponse.redirect(url);
88 | }
89 |
90 | // IMPORTANT: You *must* return the supabaseResponse object as it is.
91 | // If you're creating a new response object with NextResponse.next() make sure to:
92 | // 1. Pass the request in it, like so:
93 | // const myNewResponse = NextResponse.next({ request })
94 | // 2. Copy over the cookies, like so:
95 | // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll())
96 | // 3. Change the myNewResponse object to fit your needs, but avoid changing
97 | // the cookies!
98 | // 4. Finally:
99 | // return myNewResponse
100 | // If this is not done, you may be causing the browser and server to go out
101 | // of sync and terminate the user's session prematurely!
102 |
103 | return supabaseResponse;
104 | }
105 |
--------------------------------------------------------------------------------
/apps/web/src/lib/auth/supabase-client.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from "@supabase/supabase-js";
2 | import { createBrowserClient } from "@supabase/ssr";
3 |
4 | let supabaseInstance: ReturnType | null = null;
5 |
6 | /**
7 | * Get a Supabase client instance (creates a singleton)
8 | *
9 | * @returns A Supabase client instance
10 | */
11 | export function getSupabaseClient() {
12 | if (supabaseInstance) return supabaseInstance;
13 |
14 | const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
15 | const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
16 |
17 | if (!supabaseUrl || !supabaseKey) {
18 | throw new Error(
19 | "Missing Supabase configuration: NEXT_PUBLIC_SUPABASE_URL or NEXT_PUBLIC_SUPABASE_ANON_KEY",
20 | );
21 | }
22 |
23 | // Use the browser client when in browser environment
24 | if (typeof window !== "undefined") {
25 | supabaseInstance = createBrowserClient(supabaseUrl, supabaseKey, {
26 | cookies: {
27 | get(name) {
28 | return document.cookie
29 | .split("; ")
30 | .find((row) => row.startsWith(`${name}=`))
31 | ?.split("=")?.[1];
32 | },
33 | set(name, value, options) {
34 | document.cookie = `${name}=${value}; path=${options?.path ?? "/"}; max-age=${options?.maxAge ?? 31536000}`;
35 | },
36 | remove(name, options) {
37 | document.cookie = `${name}=; path=${options?.path ?? "/"}; max-age=0`;
38 | },
39 | },
40 | });
41 | } else {
42 | // For server-side, use the regular client
43 | // The middleware will use createServerClient separately
44 | supabaseInstance = createClient(supabaseUrl, supabaseKey, {
45 | auth: {
46 | persistSession: false,
47 | autoRefreshToken: false,
48 | },
49 | });
50 | }
51 |
52 | return supabaseInstance;
53 | }
54 |
--------------------------------------------------------------------------------
/apps/web/src/lib/auth/types.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 | id: string;
3 | email: string | null;
4 | displayName?: string | null;
5 | firstName?: string | null;
6 | lastName?: string | null;
7 | companyName?: string | null;
8 | avatarUrl?: string | null;
9 | metadata?: Record;
10 | }
11 |
12 | export interface Session {
13 | user: User | null;
14 | accessToken: string | null;
15 | refreshToken?: string | null;
16 | expiresAt?: number;
17 | }
18 |
19 | export interface AuthError {
20 | message: string;
21 | status?: number;
22 | code?: string;
23 | }
24 |
25 | export interface AuthProviderOptions {
26 | redirectUrl?: string;
27 | shouldPersistSession?: boolean;
28 | }
29 |
30 | export interface AuthCredentials {
31 | email: string;
32 | password: string;
33 | metadata?: Record;
34 | }
35 |
36 | export interface AuthStateChangeCallback {
37 | (session: Session | null): void;
38 | }
39 |
40 | export interface AuthProvider {
41 | // Core authentication methods
42 | signUp: (credentials: AuthCredentials) => Promise<{
43 | user: User | null;
44 | session: Session | null;
45 | error: AuthError | null;
46 | }>;
47 |
48 | signIn: (credentials: AuthCredentials) => Promise<{
49 | user: User | null;
50 | session: Session | null;
51 | error: AuthError | null;
52 | }>;
53 |
54 | signInWithGoogle: () => Promise<{
55 | user: User | null;
56 | session: Session | null;
57 | error: AuthError | null;
58 | }>;
59 |
60 | signOut: () => Promise<{ error: AuthError | null }>;
61 |
62 | // Session management
63 | getSession: () => Promise;
64 | refreshSession: () => Promise;
65 |
66 | // User operations
67 | getCurrentUser: () => Promise;
68 | updateUser: (attributes: Partial) => Promise<{
69 | user: User | null;
70 | error: AuthError | null;
71 | }>;
72 |
73 | // Password management
74 | resetPassword: (email: string) => Promise<{ error: AuthError | null }>;
75 | updatePassword: (newPassword: string) => Promise<{ error: AuthError | null }>;
76 |
77 | // Event listeners
78 | onAuthStateChange: (callback: AuthStateChangeCallback) => {
79 | unsubscribe: () => void;
80 | };
81 | }
82 |
--------------------------------------------------------------------------------
/apps/web/src/lib/client.ts:
--------------------------------------------------------------------------------
1 | import { Client } from "@langchain/langgraph-sdk";
2 | import { getDeployments } from "./environment/deployments";
3 |
4 | export function createClient(deploymentId: string, accessToken?: string) {
5 | const deployment = getDeployments().find((d) => d.id === deploymentId);
6 | if (!deployment) {
7 | throw new Error(`Deployment ${deploymentId} not found`);
8 | }
9 |
10 | if (!accessToken || process.env.NEXT_PUBLIC_USE_LANGSMITH_AUTH === "true") {
11 | const baseApiUrl = process.env.NEXT_PUBLIC_BASE_API_URL;
12 | if (!baseApiUrl) {
13 | throw new Error(
14 | "Failed to create client: Base API URL not configured. Please set NEXT_PUBLIC_BASE_API_URL",
15 | );
16 | }
17 | const client = new Client({
18 | apiUrl: `${baseApiUrl}/langgraph/proxy/${deploymentId}`,
19 | defaultHeaders: {
20 | "x-auth-scheme": "langsmith",
21 | },
22 | });
23 | return client;
24 | }
25 |
26 | const client = new Client({
27 | apiUrl: deployment.deploymentUrl,
28 | defaultHeaders: {
29 | Authorization: `Bearer ${accessToken}`,
30 | "x-supabase-access-token": accessToken,
31 | },
32 | });
33 | return client;
34 | }
35 |
--------------------------------------------------------------------------------
/apps/web/src/lib/environment/deployments.ts:
--------------------------------------------------------------------------------
1 | import { Deployment } from "@/types/deployment";
2 |
3 | /**
4 | * Loads the provided deployments from the environment variable.
5 | * @returns {Deployment[]} The list of deployments.
6 | */
7 | export function getDeployments(): Deployment[] {
8 | let defaultExists = false;
9 | const deployments: Deployment[] = JSON.parse(
10 | process.env.NEXT_PUBLIC_DEPLOYMENTS || "[]",
11 | );
12 | for (const deployment of deployments) {
13 | if (deployment.isDefault && !defaultExists) {
14 | if (!deployment.defaultGraphId) {
15 | throw new Error("Default deployment must have a default graph ID");
16 | }
17 | defaultExists = true;
18 | } else if (deployment.isDefault && defaultExists) {
19 | throw new Error("Multiple default deployments found");
20 | }
21 | }
22 | if (!defaultExists) {
23 | throw new Error("No default deployment found");
24 | }
25 | return deployments;
26 | }
27 |
--------------------------------------------------------------------------------
/apps/web/src/lib/multimodal-utils.ts:
--------------------------------------------------------------------------------
1 | import type { Base64ContentBlock } from "@langchain/core/messages";
2 | import { toast } from "sonner";
3 | // Returns a Promise of a typed multimodal block for images or PDFs
4 | export async function fileToContentBlock(
5 | file: File,
6 | ): Promise {
7 | const supportedImageTypes = [
8 | "image/jpeg",
9 | "image/png",
10 | "image/gif",
11 | "image/webp",
12 | ];
13 | const supportedFileTypes = [...supportedImageTypes, "application/pdf"];
14 |
15 | if (!supportedFileTypes.includes(file.type)) {
16 | toast.error(
17 | `Unsupported file type: ${file.type}. Supported types are: ${supportedFileTypes.join(", ")}`,
18 | );
19 | return Promise.reject(new Error(`Unsupported file type: ${file.type}`));
20 | }
21 |
22 | const data = await fileToBase64(file);
23 |
24 | if (supportedImageTypes.includes(file.type)) {
25 | return {
26 | type: "image",
27 | source_type: "base64",
28 | mime_type: file.type,
29 | data,
30 | metadata: { name: file.name },
31 | };
32 | }
33 |
34 | // PDF
35 | return {
36 | type: "file",
37 | source_type: "base64",
38 | mime_type: "application/pdf",
39 | data,
40 | metadata: { filename: file.name },
41 | };
42 | }
43 |
44 | // Helper to convert File to base64 string
45 | export async function fileToBase64(file: File): Promise {
46 | return new Promise((resolve, reject) => {
47 | const reader = new FileReader();
48 | reader.onloadend = () => {
49 | const result = reader.result as string;
50 | // Remove the data:...;base64, prefix
51 | resolve(result.split(",")[1]);
52 | };
53 | reader.onerror = reject;
54 | reader.readAsDataURL(file);
55 | });
56 | }
57 |
58 | export function isBase64ContentBlock(
59 | block: unknown,
60 | ): block is Base64ContentBlock {
61 | if (typeof block !== "object" || block === null || !("type" in block))
62 | return false;
63 | // file type (legacy)
64 | if (
65 | (block as { type: unknown }).type === "file" &&
66 | "source_type" in block &&
67 | (block as { source_type: unknown }).source_type === "base64" &&
68 | "mime_type" in block &&
69 | typeof (block as { mime_type?: unknown }).mime_type === "string" &&
70 | ((block as { mime_type: string }).mime_type.startsWith("image/") ||
71 | (block as { mime_type: string }).mime_type === "application/pdf")
72 | ) {
73 | return true;
74 | }
75 | // image type (new)
76 | if (
77 | (block as { type: unknown }).type === "image" &&
78 | "source_type" in block &&
79 | (block as { source_type: unknown }).source_type === "base64" &&
80 | "mime_type" in block &&
81 | typeof (block as { mime_type?: unknown }).mime_type === "string" &&
82 | (block as { mime_type: string }).mime_type.startsWith("image/")
83 | ) {
84 | return true;
85 | }
86 | return false;
87 | }
88 |
--------------------------------------------------------------------------------
/apps/web/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs));
6 | }
7 |
8 | /**
9 | * @returns true if google auth is disabled
10 | */
11 | export function googleAuthDisabled() {
12 | return process.env.NEXT_PUBLIC_GOOGLE_AUTH_DISABLED === "true";
13 | }
14 |
--------------------------------------------------------------------------------
/apps/web/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import type { NextRequest } from "next/server";
2 | import { updateSession } from "./lib/auth/middleware";
3 |
4 | export async function middleware(request: NextRequest) {
5 | return await updateSession(request);
6 | }
7 |
8 | export const config = {
9 | // Skip middleware for static assets and endpoints that handle auth
10 | matcher: [
11 | /*
12 | * Match all request paths except for the ones starting with:
13 | * - _next/static (static files)
14 | * - _next/image (image optimization files)
15 | * - favicon.ico (favicon file)
16 | * - api/auth (auth API routes)
17 | */
18 | "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
19 |
20 | /*
21 | * Match all API routes except for auth-related ones
22 | * This allows the middleware to run on API routes and check authentication
23 | */
24 | "/api/((?!auth).*)",
25 | ],
26 | };
27 |
--------------------------------------------------------------------------------
/apps/web/src/providers/MCP.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useContext,
4 | PropsWithChildren,
5 | useEffect,
6 | useRef,
7 | useState,
8 | } from "react";
9 | import useMCP from "../hooks/use-mcp";
10 |
11 | type MCPContextType = ReturnType & { loading: boolean };
12 |
13 | const MCPContext = createContext(null);
14 |
15 | export const MCPProvider: React.FC = ({ children }) => {
16 | const mcpState = useMCP({
17 | name: "Tools Interface",
18 | version: "1.0.0",
19 | });
20 | const firstRequestMade = useRef(false);
21 | const [loading, setLoading] = useState(false);
22 |
23 | useEffect(() => {
24 | if (mcpState.tools.length || firstRequestMade.current) return;
25 |
26 | firstRequestMade.current = true;
27 | setLoading(true);
28 | mcpState
29 | .getTools()
30 | .then((tools) => mcpState.setTools(tools))
31 | .finally(() => setLoading(false));
32 | }, []);
33 |
34 | return (
35 |
36 | {children}
37 |
38 | );
39 | };
40 |
41 | export const useMCPContext = () => {
42 | const context = useContext(MCPContext);
43 | if (context === null) {
44 | throw new Error("useMCPContext must be used within a MCPProvider");
45 | }
46 | return context;
47 | };
48 |
--------------------------------------------------------------------------------
/apps/web/src/types/agent.ts:
--------------------------------------------------------------------------------
1 | import { Assistant } from "@langchain/langgraph-sdk";
2 |
3 | export interface Agent extends Assistant {
4 | deploymentId: string;
5 | supportedConfigs?: ["tools" | "rag" | "supervisor"];
6 | }
7 |
--------------------------------------------------------------------------------
/apps/web/src/types/collection.ts:
--------------------------------------------------------------------------------
1 | export type Collection = {
2 | name: string;
3 | uuid: string;
4 | metadata: {
5 | description?: string;
6 | [key: string]: any;
7 | };
8 | };
9 |
10 | export type CollectionCreate = {
11 | name: string;
12 | metadata: Record;
13 | };
14 |
--------------------------------------------------------------------------------
/apps/web/src/types/configurable.ts:
--------------------------------------------------------------------------------
1 | // The type interface for configuration fields
2 |
3 | export type ConfigurableFieldUIType =
4 | | "text"
5 | | "textarea"
6 | | "number"
7 | | "boolean"
8 | | "slider"
9 | | "select"
10 | | "json";
11 |
12 | /**
13 | * The type interface for options in a select field.
14 | */
15 | export interface ConfigurableFieldOption {
16 | label: string;
17 | value: string;
18 | }
19 |
20 | /**
21 | * The UI configuration for a field in the configurable object.
22 | */
23 | export type ConfigurableFieldUIMetadata = {
24 | /**
25 | * The label of the field. This will be what is rendered in the UI.
26 | */
27 | label: string;
28 | /**
29 | * The default value to render in the UI component.
30 | *
31 | * @default undefined
32 | */
33 | default?: unknown;
34 | /**
35 | * The type of the field.
36 | * @default "text"
37 | */
38 | type?: ConfigurableFieldUIType;
39 | /**
40 | * The description of the field. This will be rendered below the UI component.
41 | */
42 | description?: string;
43 | /**
44 | * The placeholder of the field. This will be rendered inside the UI component.
45 | * This is only applicable for text, textarea, number, json, and select fields.
46 | */
47 | placeholder?: string;
48 | /**
49 | * The options of the field. These will be the options rendered in the select UI component.
50 | * This is only applicable for select fields.
51 | */
52 | options?: ConfigurableFieldOption[];
53 | /**
54 | * The minimum value of the field.
55 | * This is only applicable for number fields.
56 | */
57 | min?: number;
58 | /**
59 | * The maximum value of the field.
60 | * This is only applicable for number fields.
61 | */
62 | max?: number;
63 | /**
64 | * The step value of the field. E.g if using a slider, where you want
65 | * people to be able to increment by 0.1, you would set this field to 0.1
66 | * This is only applicable for number fields.
67 | */
68 | step?: number;
69 | };
70 |
71 | export type ConfigurableFieldMCPMetadata = {
72 | label: string;
73 | type: "mcp";
74 | default?: {
75 | tools?: string[];
76 | url?: string;
77 | auth_required?: boolean;
78 | };
79 | };
80 |
81 | export type ConfigurableFieldRAGMetadata = {
82 | /**
83 | * The key in the graph's config schema for the RAG field.
84 | */
85 | label: string;
86 | type: "rag";
87 | default?: {
88 | rag_url?: string;
89 | collections?: string[];
90 | };
91 | };
92 |
93 | export type ConfigurableFieldAgentsMetadata = {
94 | label: string;
95 | type: "agents";
96 | default?: {
97 | agent_id?: string;
98 | deployment_url?: string;
99 | name?: string;
100 | }[];
101 | };
102 |
--------------------------------------------------------------------------------
/apps/web/src/types/deployment.ts:
--------------------------------------------------------------------------------
1 | export interface Deployment {
2 | /**
3 | * The deployment's ID. This is obtained by calling the
4 | * `/info` endpoint of the deployment URL.
5 | */
6 | id: string;
7 | /**
8 | * The API URL of the deployment.
9 | */
10 | deploymentUrl: string;
11 | /**
12 | * The tenant ID of the deployment. This is obtained by calling
13 | * the `/info` endpoint of the deployment URL.
14 | */
15 | tenantId: string;
16 | /**
17 | * A custom name for the deployment. This is a custom field the user sets.
18 | */
19 | name: string;
20 | /**
21 | * Whether this deployment is the default deployment. Should only be set to true for one deployment.
22 | */
23 | isDefault?: boolean;
24 | /**
25 | * The ID of the default graph for this deployment. This should only be set for one deployment,
26 | * and it should be the same deployment that isDefault is set to true on.
27 | */
28 | defaultGraphId?: string;
29 | }
30 |
--------------------------------------------------------------------------------
/apps/web/src/types/tool.ts:
--------------------------------------------------------------------------------
1 | export type InputSchema = {
2 | type: "object";
3 | properties?: Record;
4 | required?: string[];
5 | };
6 |
7 | export interface Tool {
8 | /**
9 | * The name of the tool
10 | */
11 | name: string;
12 | /**
13 | * The tool's description
14 | */
15 | description?: string;
16 | /**
17 | * The tool's input schema
18 | */
19 | inputSchema: InputSchema;
20 | }
21 |
--------------------------------------------------------------------------------
/apps/web/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | "./index.html",
6 | "./src/**/*.{ts,tsx,js,jsx}",
7 | "./agent/**/*.{ts,tsx,js,jsx}",
8 | ],
9 | theme: {
10 | extend: {
11 | borderRadius: {
12 | lg: "var(--radius)",
13 | md: "calc(var(--radius) - 2px)",
14 | sm: "calc(var(--radius) - 4px)",
15 | },
16 | components: {
17 | ".scrollbar-pretty":
18 | "overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent",
19 | },
20 | colors: {
21 | background: "hsl(var(--background))",
22 | foreground: "hsl(var(--foreground))",
23 | card: {
24 | DEFAULT: "hsl(var(--card))",
25 | foreground: "hsl(var(--card-foreground))",
26 | },
27 | popover: {
28 | DEFAULT: "hsl(var(--popover))",
29 | foreground: "hsl(var(--popover-foreground))",
30 | },
31 | primary: {
32 | DEFAULT: "hsl(var(--primary))",
33 | foreground: "hsl(var(--primary-foreground))",
34 | },
35 | secondary: {
36 | DEFAULT: "hsl(var(--secondary))",
37 | foreground: "hsl(var(--secondary-foreground))",
38 | },
39 | muted: {
40 | DEFAULT: "hsl(var(--muted))",
41 | foreground: "hsl(var(--muted-foreground))",
42 | },
43 | accent: {
44 | DEFAULT: "hsl(var(--accent))",
45 | foreground: "hsl(var(--accent-foreground))",
46 | },
47 | destructive: {
48 | DEFAULT: "hsl(var(--destructive))",
49 | foreground: "hsl(var(--destructive-foreground))",
50 | },
51 | border: "hsl(var(--border))",
52 | input: "hsl(var(--input))",
53 | ring: "hsl(var(--ring))",
54 | chart: {
55 | 1: "hsl(var(--chart-1))",
56 | 2: "hsl(var(--chart-2))",
57 | 3: "hsl(var(--chart-3))",
58 | 4: "hsl(var(--chart-4))",
59 | 5: "hsl(var(--chart-5))",
60 | },
61 | },
62 | },
63 | },
64 | plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar")],
65 | };
66 |
--------------------------------------------------------------------------------
/apps/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"]
22 | },
23 | "target": "ES2017"
24 | },
25 | "include": [
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | ".next/types/**/*.ts",
30 | "src/hooks/use-threads",
31 | "src/app/thread/[threadId]"
32 | ],
33 | "exclude": ["node_modules"]
34 | }
35 |
--------------------------------------------------------------------------------
/apps/web/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["//"],
3 | "tasks": {
4 | "build": {
5 | "outputs": [".next/**", "!.next/cache/**"]
6 | },
7 | "build:internal": {
8 | "dependsOn": ["^build:internal"]
9 | },
10 | "dev": {
11 | "dependsOn": ["^dev"]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "open-agent-platform",
3 | "author": "LangChain",
4 | "private": true,
5 | "workspaces": [
6 | "apps/*"
7 | ],
8 | "scripts": {
9 | "dev": "turbo dev",
10 | "build": "turbo build",
11 | "turbo:command": "turbo",
12 | "format": "turbo format",
13 | "lint": "turbo lint",
14 | "lint:fix": "turbo lint:fix"
15 | },
16 | "devDependencies": {
17 | "turbo": "^2.5.0",
18 | "typescript": "^5"
19 | },
20 | "packageManager": "yarn@3.5.1",
21 | "dependencies": {
22 | "react-hook-form": "^7.56.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ]
20 | },
21 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
22 | "exclude": ["node_modules"]
23 | }
24 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "globalDependencies": ["**/.env"],
4 | "tasks": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "outputs": ["dist/**", ".next/**", "!.next/cache/**"]
8 | },
9 | "lint": {
10 | "dependsOn": ["^lint"]
11 | },
12 | "lint:fix": {
13 | "dependsOn": ["^lint:fix"]
14 | },
15 | "format": {
16 | "dependsOn": ["^format"]
17 | },
18 | "dev": {
19 | "dependsOn": ["^dev"]
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------