diff --git a/src/main.tsx b/src/main.tsx
index 88d8d3c..989bfd2 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,10 +2,13 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import '@/styles/fonts.css';
 import '@/styles/global.css';
-import { ReactRouterProvider } from './providers/RouterPorvider.tsx';
+import { MujianProvider } from './providers/MujianProvider.tsx';
+import { ReactRouterProvider } from './providers/RouterProvider.tsx';
 
 createRoot(document.getElementById('root')!).render(
 	<StrictMode>
-		<ReactRouterProvider />
+		<MujianProvider>
+			<ReactRouterProvider />
+		</MujianProvider>
 	</StrictMode>,
 );
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index a122749..f9e190c 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,16 +1,16 @@
 import { useGlobalStore } from '@/store/global';
 import './index.css';
 import { isEmpty } from 'lodash-es';
-import { EVENT, getMujian } from '@/utils/mujian';
+import { EVENT, useMujian } from '@/providers/MujianProvider';
 
 function Home() {
 	const { count, increment } = useGlobalStore((state) => state);
+	const mujian = useMujian();
 
 	console.log('count', count);
 
 	console.log('isEmpty', isEmpty(count));
 
-
 	return (
 		<>
 			<div>
@@ -20,15 +20,15 @@ function Home() {
 			<button type="button" onClick={increment}>
 				Increment
 			</button>
-			
+
 			<p>Count: {count}</p>
 
 			<br />
 
 			<button
 				type="button"
-				onClick={async() => {
-					(await getMujian()).emit(EVENT.MUJIAN_AI_CHAT_SEND_MESSAGE, {
+				onClick={async () => {
+					mujian.emit(EVENT.MUJIAN_AI_CHAT_SEND_MESSAGE, {
 						message: 'Hello, World!',
 					});
 				}}
diff --git a/src/providers/MujianProvider.tsx b/src/providers/MujianProvider.tsx
new file mode 100644
index 0000000..d85e79f
--- /dev/null
+++ b/src/providers/MujianProvider.tsx
@@ -0,0 +1,51 @@
+// @rule: do not modify this file
+
+import { MujianSdk } from '@mujian/js-sdk';
+import {
+	createContext,
+	type ReactNode,
+	useContext,
+	useEffect,
+	useState,
+} from 'react';
+
+export { EVENT } from '@mujian/js-sdk';
+
+const MujianContext = createContext<MujianSdk | null>(null);
+
+export interface MujianProviderProps {
+	children: ReactNode;
+	loadingPage?: ReactNode;
+}
+
+export const MujianProvider = ({
+	children,
+	loadingPage,
+}: MujianProviderProps) => {
+	const [mujian, setMujian] = useState<MujianSdk | null>(null);
+
+	useEffect(() => {
+		(async () => {
+			const mujian = new MujianSdk();
+			await mujian.init();
+			setMujian(mujian);
+		})();
+	}, []);
+
+	return (
+		<MujianContext.Provider value={mujian}>
+			{mujian ? children : (loadingPage ?? 'Mujian is loading')}
+		</MujianContext.Provider>
+	);
+};
+
+export const useMujian = () => {
+	const mujian = useContext(MujianContext);
+	if (!mujian) {
+		const message =
+			'Mujian is not initialized. Please check that useMujian is called inside MujianProvider';
+		console.error(message);
+		throw new Error(message);
+	}
+	return mujian;
+};
diff --git a/src/providers/RouterPorvider.tsx b/src/providers/RouterProvider.tsx
similarity index 100%
rename from src/providers/RouterPorvider.tsx
rename to src/providers/RouterProvider.tsx
diff --git a/src/utils/mujian.ts b/src/utils/mujian.ts
deleted file mode 100644
index 65b01e7..0000000
--- a/src/utils/mujian.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// @rule: do not modify this file
-import { EVENT, MujianSdk } from '@mujian/js-sdk';
-
-const mujian = new MujianSdk();
-
-await mujian.init();
-
-export { EVENT };
-
-export const getMujian = async () => {
-	await mujian.init();
-	return mujian;
-};