diff --git a/docs/develop.md b/docs/develop.md
new file mode 100644
index 000000000..ef9906b24
--- /dev/null
+++ b/docs/develop.md
@@ -0,0 +1,7 @@
+---
+sidemenu: false
+order: 1000
+hide: true
+---
+
+<code src="./examples/demos/demo1.tsx"/>
diff --git a/docs/examples/demos/demo1.tsx b/docs/examples/demos/demo1.tsx
new file mode 100644
index 000000000..5d66a91c4
--- /dev/null
+++ b/docs/examples/demos/demo1.tsx
@@ -0,0 +1,72 @@
+import { useRequest } from 'ahooks';
+import { Spin } from 'antd';
+import React, { useMemo } from 'react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import {
+  createRouteSwitch,
+  RouteRedirectProps,
+  AdminLayout,
+  AuthLayout,
+  RouteSchemaRenderer,
+  ConfigProvider,
+  ClientSDK,
+} from '@nocobase/client';
+import { UseRequestProvider } from 'ahooks';
+import { extend } from 'umi-request';
+
+const request = extend({
+  prefix: process.env.API_URL,
+  timeout: 30000,
+});
+
+request.use(async (ctx, next) => {
+  const { headers } = ctx.req.options as any;
+  const token = localStorage.getItem('NOCOBASE_TOKEN');
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
+    headers['X-Hostname'] = process.env.API_HOSTNAME;
+  }
+  await next();
+});
+
+const client = new ClientSDK({
+  request,
+});
+
+console.log('process.env.API_URL', process.env.API_URL);
+
+// console.log = () => {}
+
+const RouteSwitch = createRouteSwitch({
+  components: {
+    AdminLayout,
+    AuthLayout,
+    RouteSchemaRenderer,
+  },
+});
+
+const App = () => {
+  const { data, loading } = useRequest('routes:getAccessible', {
+    formatResult: (result) => result?.data,
+  });
+
+  if (loading) {
+    return <Spin size={'large'} className={'nb-spin-center'} />;
+  }
+
+  return (
+    <div>
+      <Router initialEntries={['/admin']}>
+        <RouteSwitch routes={data} />
+      </Router>
+    </div>
+  );
+};
+
+export default () => {
+  return (
+    <ConfigProvider client={client}>
+      <App />
+    </ConfigProvider>
+  );
+};