SEMOSS · tevanburen · Nov 25, 2025 · Nov 25, 2025 · Nov 25, 2025 · Nov 25, 2025
diff --git a/client/README.md b/client/README.md
@@ -71,6 +71,7 @@ After setting up your `.env.local file`, you’ll need to add a `project.propert
    1. Run "pnpm dev" in the `assets` folder to launch a local development server for your app.
    2. This command starts a local Vite server, which serves your project on your machine and provides hot reloading.
    3. When you save changes to your files, Vite immediately updates the app in your browser so you can see your latest changes without running pnpm build and manually refreshing.
+
 4. **pnpm dlx shadcn@latest add [component-name]**\
 
    1. To add a new shadcn componet to use with your front end, from the `client` folder run pnpm dlx shadcn-ui@latest add [component-name]

diff --git a/client/package.json b/client/package.json
@@ -6,52 +6,44 @@
 		"fix": "pnpm --dir ../ fix"
 	},
 	"dependencies": {
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
-		"@mui/icons-material": "^7.3.5",
-		"@mui/material": "^7.3.5",
-		"@mui/x-data-grid": "^8.19.0",
-		"@mui/x-date-pickers": "^8.19.0",
 		"@radix-ui/react-accordion": "^1.2.12",
 		"@radix-ui/react-alert-dialog": "^1.1.15",
 		"@radix-ui/react-aspect-ratio": "^1.1.8",
-		"@radix-ui/react-avatar": "^1.1.10",
+		"@radix-ui/react-avatar": "^1.1.11",
 		"@radix-ui/react-checkbox": "^1.3.3",
 		"@radix-ui/react-collapsible": "^1.1.12",
 		"@radix-ui/react-context-menu": "^2.2.16",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-hover-card": "^1.1.15",
-		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-label": "^2.1.8",
 		"@radix-ui/react-menubar": "^1.1.16",
 		"@radix-ui/react-navigation-menu": "^1.2.14",
 		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-progress": "^1.1.7",
+		"@radix-ui/react-progress": "^1.1.8",
 		"@radix-ui/react-radio-group": "^1.3.8",
 		"@radix-ui/react-scroll-area": "^1.2.10",
 		"@radix-ui/react-select": "^2.2.6",
-		"@radix-ui/react-separator": "^1.1.7",
+		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slider": "^1.3.6",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.2.6",
 		"@radix-ui/react-tabs": "^1.1.13",
 		"@radix-ui/react-toggle": "^1.1.10",
 		"@radix-ui/react-toggle-group": "^1.1.11",
 		"@radix-ui/react-tooltip": "^1.2.8",
-		"@semoss/sdk": "^1.0.0-beta.31",
-		"@semoss/ui": "1.0.0-alpha.3",
+		"@semoss/sdk": "1.0.0-beta.31",
 		"@tailwindcss/postcss": "^4.1.17",
 		"autoprefixer": "^10.4.22",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"dayjs": "^1.11.19",
 		"lucide-react": "^0.553.0",
 		"postcss": "^8.5.6",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^7.9.6",
-		"tailwindcss": "^4.1.17",
 		"tailwind-merge": "^3.4.0",
+		"tailwindcss": "^4.1.17",
 		"tw-animate-css": "^1.4.0"
 	},
 	"devDependencies": {

diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,11 +1,7 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { Env } from "@semoss/sdk";
 import { InsightProvider } from "@semoss/sdk/react";
 import { AppContextProvider } from "./contexts";
 import { Router } from "./pages";
-import { THEME } from "./theme";
 
 Env.update({
 	MODULE: import.meta.env.MODULE || "",
@@ -23,21 +19,13 @@ export const App = () => {
 	return (
 		// The InsightProvider starts a new Insight and sets the context to the current project. This components are imported from SEMOSS SDK
 		<InsightProvider>
-			{/* The LocalizationProvider provides localization for date pickers. This component is imported from MUI */}
-			<LocalizationProvider dateAdapter={AdapterDayjs}>
-				{/* The AppContextProvider stores data specific to the current app, and runPixel.
-                This component is custom to this project, and can be edited in AppContext.tsx */}
-				<AppContextProvider>
-					{/* The ThemeProvider and CssBaseline add MUI to provide styling. These components imported from MUI */}
-					<ThemeProvider theme={THEME}>
-						<CssBaseline />
-
-						{/* The Router decides which page to render based on the url.
-                        This component is custom to this project, and can be edited in Router.tsx */}
-						<Router />
-					</ThemeProvider>
-				</AppContextProvider>
-			</LocalizationProvider>
+			{/* The AppContextProvider stores data specific to the current app, and runPixel.
+			This component is custom to this project, and can be edited in AppContext.tsx */}
+			<AppContextProvider>
+				{/* The Router decides which page to render based on the url.
+					This component is custom to this project, and can be edited in Router.tsx */}
+				<Router />
+			</AppContextProvider>
 		</InsightProvider>
 	);
 };
diff --git a/client/src/components/examples/ExampleComponent.tsx b/client/src/components/examples/ExampleComponent.tsx
@@ -1,5 +1,5 @@
-import { Stack, TextField, Typography } from "@mui/material";
 import { useState } from "react";
+import { Input } from "@/components/ui/input";
 import { useLoadingPixel } from "@/hooks";
 
 /**
@@ -25,55 +25,49 @@ export const ExampleComponent = () => {
 	);
 
 	return (
-		<Stack spacing={2}>
-			<Typography variant="h4">Home page</Typography>
-			<Typography>
+		<div className="space-y-4">
+			<h1 className="text-4xl font-bold">Home page</h1>
+			<p>
 				Welcome to the SEMOSS Template application! This repository is
 				meant to be a starting point for your own SEMOSS application.
-			</Typography>
-			<Typography variant="h6">Example pixel calls:</Typography>
-			<ul>
+			</p>
+			<h2 className="text-xl font-semibold">Example pixel calls:</h2>
+			<ul className="space-y-4 list-disc pl-6">
 				<li>
-					<Typography variant="body1" fontWeight="bold">
-						HelloUser()
-					</Typography>
-					<ul>
+					<p className="font-bold">HelloUser()</p>
+					<ul className="list-disc pl-6">
 						<li>
-							<Typography fontStyle="italic">
+							<p className="italic">
 								{isLoadingHelloUser
 									? "Loading..."
 									: helloUserResponse}
-							</Typography>
+							</p>
 						</li>
 					</ul>
 				</li>
 				<li>
-					<Stack direction="row" spacing={1} alignItems="center">
-						<Typography variant="body1" fontWeight="bold">
-							{"CallPython( numValue ="}
-						</Typography>
-						<TextField
+					<div className="flex items-center gap-2">
+						<p className="font-bold">{"CallPython( numValue ="}</p>
+						<Input
 							value={textValue}
 							onChange={(e) =>
 								setTextValue(e.target.value?.replace(/\D/g, ""))
 							}
-							size="small"
+							className="w-24"
 						/>
-						<Typography variant="body1" fontWeight="bold">
-							{")"}
-						</Typography>
-					</Stack>
-					<ul>
+						<p className="font-bold">{")"}</p>
+					</div>
+					<ul className="list-disc pl-6">
 						<li>
-							<Typography fontStyle="italic">
+							<p className="italic">
 								{isLoadingCallPython
 									? "Loading..."
 									: callPythonResponse}
-							</Typography>
+							</p>
 						</li>
 					</ul>
 				</li>
 			</ul>
-		</Stack>
+		</div>
 	);
 };
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
@@ -1,2 +1 @@
 export * from "./base";
-export * from "./library";
diff --git a/client/src/components/library/ConfirmationDialog.tsx b/client/src/components/library/ConfirmationDialog.tsx
diff --git a/client/src/components/library/DatePicker.tsx b/client/src/components/library/DatePicker.tsx
diff --git a/client/src/components/library/index.ts b/client/src/components/library/index.ts
diff --git a/client/src/contexts/AppContext.tsx b/client/src/contexts/AppContext.tsx
@@ -13,12 +13,11 @@ import {
 	useCallback,
 	useContext,
 	useEffect,
-	useMemo,
 	useState,
 } from "react";
 import type { MessageSnackbarProps } from "@/components";
 import { useLoadingState } from "@/hooks";
-import type { Tool, ToolResponse, ToolStructure } from "@/types";
+import type { MCPToolRequest, Tool, ToolStructure } from "@/types";
 
 export interface AppContextType {
 	runPixel: <T = unknown>(
@@ -37,8 +36,8 @@ export interface AppContextType {
 	exampleStateData?: number;
 	messageSnackbarProps: MessageSnackbarProps;
 	setMessageSnackbarProps: Dispatch<SetStateAction<MessageSnackbarProps>>;
-	tool: ToolResponse;
 	tools: Tool[];
+	tool: MCPToolRequest;
 }
 
 const AppContext = createContext<AppContextType | undefined>(undefined);
@@ -70,12 +69,6 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 	const { actions, isReady, system, insightId: id } = useInsight();
 	const [insightId] = useState(id);
 
-	// New Insight for tool response
-	const insight = useMemo(() => {
-		const insight = new Insight();
-		return insight;
-	}, []);
-
 	/**
 	 * State
 	 */
@@ -232,17 +225,10 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 						setter: (response) => setExampleStateData(response),
 					} satisfies LoadSetPair<number>,
 					{
-						loader: async () => await insight.initialize(),
+						loader: async () => await new Insight().initialize(),
+						// Optionally handle the result or remove the setter if not needed
 						setter: (initConfig) => setTool(initConfig.tool),
-					} satisfies LoadSetPair<{
-						tool: {
-							type: "MCP";
-							message: string;
-							id: string;
-							name: string;
-							parameters: Record<string, unknown>;
-						};
-					}>,
+					} satisfies LoadSetPair<{ tool: MCPToolRequest }>,
 				];
 
 				// Execute all loaders in parallel and wait for them all to complete
@@ -274,7 +260,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 			// If the insight is ready, then load the app data
 			loadAppData();
 		}
-	}, [isReady, runPixel, setIsAppDataLoading, insight]);
+	}, [isReady, runPixel, setIsAppDataLoading]);
 
 	// On start up, grab the name of the user from the config call if they are already logged in
 	useEffect(() => {

diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
@@ -1,6 +1,7 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: ClassValue[]) {
+// Utility function to merge class names conditionally
+export const cn = (...inputs: ClassValue[]) => {
 	return twMerge(clsx(inputs));
-}
+};
diff --git a/client/src/pages/ErrorPage.tsx b/client/src/pages/ErrorPage.tsx
@@ -1,5 +1,4 @@
-import { ErrorOutline } from "@mui/icons-material";
-import { Stack, Typography } from "@mui/material";
+import { TriangleAlert } from "lucide-react";
 
 /**
  * Renders a warning message for any FE errors encountered.
@@ -8,17 +7,12 @@ import { Stack, Typography } from "@mui/material";
  */
 export const ErrorPage = () => {
 	return (
-		<Stack
-			height="100%"
-			alignItems="center"
-			justifyContent="center"
-			spacing={1}
-		>
-			<ErrorOutline color="error" fontSize="large" />
-			<Typography variant="body1">
+		<div className="flex flex-col items-center justify-center h-full">
+			<TriangleAlert className="size-8" />
+			<div>
 				An error has occurred. Please try again or contact support if
 				the problem persists.
-			</Typography>
-		</Stack>
+			</div>
+		</div>
 	);
 };
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from "./base";
		export * from "./library";