diff --git a/packages/client/develop.md b/packages/client/develop.md
new file mode 100644
index 000000000..fb934422a
--- /dev/null
+++ b/packages/client/develop.md
@@ -0,0 +1,5 @@
+---
+sidemenu: false
+---
+
+<code src="./src/application/demos/demo2/index.tsx"/>
diff --git a/packages/client/src/application/demos/Hello.tsx b/packages/client/src/application/demos/demo1/Hello.tsx
similarity index 100%
rename from packages/client/src/application/demos/Hello.tsx
rename to packages/client/src/application/demos/demo1/Hello.tsx
diff --git a/packages/client/src/application/demos/RouteSchemaComponent.tsx b/packages/client/src/application/demos/demo1/RouteSchemaComponent.tsx
similarity index 100%
rename from packages/client/src/application/demos/RouteSchemaComponent.tsx
rename to packages/client/src/application/demos/demo1/RouteSchemaComponent.tsx
diff --git a/packages/client/src/application/demos/demo1.tsx b/packages/client/src/application/demos/demo1/index.tsx
similarity index 100%
rename from packages/client/src/application/demos/demo1.tsx
rename to packages/client/src/application/demos/demo1/index.tsx
diff --git a/packages/client/src/application/demos/routes.ts b/packages/client/src/application/demos/demo1/routes.ts
similarity index 100%
rename from packages/client/src/application/demos/routes.ts
rename to packages/client/src/application/demos/demo1/routes.ts
diff --git a/packages/client/src/application/demos/demo2/apiClient.ts b/packages/client/src/application/demos/demo2/apiClient.ts
new file mode 100644
index 000000000..2999fe756
--- /dev/null
+++ b/packages/client/src/application/demos/demo2/apiClient.ts
@@ -0,0 +1,45 @@
+import { APIClient } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+
+const apiClient = new APIClient({
+  baseURL: `${location.protocol}//${location.host}/api/`,
+});
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/app:getLang').reply(200, {
+  data: { lang: 'en-US' },
+});
+
+mock.onGet('/routes:getAccessible').reply(200, {
+  data: [
+    {
+      type: 'redirect',
+      from: '/',
+      to: '/admin',
+      exact: true,
+    },
+    {
+      type: 'route',
+      uiSchemaKey: 'qqzzjakwkwl',
+      path: '/admin/:name(.+)?',
+      component: 'AdminLayout',
+      title: 'NocoBase',
+    },
+    {
+      type: 'route',
+      component: 'AuthLayout',
+      routes: [
+        {
+          type: 'route',
+          uiSchemaKey: 'dtf9j0b8p9u',
+          path: '/signin',
+          component: 'RouteSchemaComponent',
+          title: '{{t("Sign in")}}',
+        },
+      ],
+    },
+  ],
+});
+
+export default apiClient;
diff --git a/packages/client/src/application/demos/demo2/index.tsx b/packages/client/src/application/demos/demo2/index.tsx
new file mode 100644
index 000000000..42ec61d27
--- /dev/null
+++ b/packages/client/src/application/demos/demo2/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { HashRouter } from 'react-router-dom';
+import {
+  i18n,
+  compose,
+  useRequest,
+  AuthLayout,
+  AdminLayout,
+  APIClientProvider,
+  RouteSwitch,
+  RouteSwitchProvider,
+  AntdConfigProvider,
+  SchemaComponentProvider,
+} from '@nocobase/client';
+import { I18nextProvider } from 'react-i18next';
+import { Spin } from 'antd';
+import apiClient from './apiClient';
+
+const providers = [
+  [HashRouter, {}],
+  [APIClientProvider, { apiClient }],
+  [I18nextProvider, { i18n }],
+  [AntdConfigProvider, { remoteLocale: true }],
+  [SchemaComponentProvider, { components: {} }],
+  [RouteSwitchProvider, { components: { AuthLayout, AdminLayout } }],
+];
+
+const App = compose(...providers)(() => {
+  const { data, loading } = useRequest({
+    url: 'routes:getAccessible',
+  });
+  if (loading) {
+    return <Spin />;
+  }
+  return (
+    <div>
+      <RouteSwitch routes={data?.data || []} />
+    </div>
+  );
+});
+
+export default App;
diff --git a/packages/client/src/application/index.md b/packages/client/src/application/index.md
index c44a0818a..b60e014ff 100644
--- a/packages/client/src/application/index.md
+++ b/packages/client/src/application/index.md
@@ -11,4 +11,6 @@ group:
 
 ## compose
 
-<code src="./demos/demo1.tsx"/>
\ No newline at end of file
+<code src="./demos/demo1/index.tsx"/>
+
+<code src="./demos/demo2/index.tsx"/>