diff --git a/ui/.gitignore b/ui/.gitignore
index 4dd742b0..9bef4b59 100644
--- a/ui/.gitignore
+++ b/ui/.gitignore
@@ -35,3 +35,4 @@ package-lock.json
 /* !/src/plugins
 /src/plugins/*
 !/src/plugins/builtin
+!/src/plugins/Demo
diff --git a/ui/src/plugins/Demo/i18n/en_US.yaml b/ui/src/plugins/Demo/i18n/en_US.yaml
new file mode 100644
index 00000000..b4ee4286
--- /dev/null
+++ b/ui/src/plugins/Demo/i18n/en_US.yaml
@@ -0,0 +1,4 @@
+plugin:
+  ui_plugin_demo:
+    ui:
+      msg: UI Plugin Demo
diff --git a/ui/src/plugins/Demo/i18n/index.ts b/ui/src/plugins/Demo/i18n/index.ts
new file mode 100644
index 00000000..b693440a
--- /dev/null
+++ b/ui/src/plugins/Demo/i18n/index.ts
@@ -0,0 +1,9 @@
+import pluginKit from '@/utils/pluginKit';
+
+import en_US from './en_US.yaml';
+import zh_CN from './zh_CN.yaml';
+
+pluginKit.initI18nResource({
+  en_US,
+  zh_CN,
+});
diff --git a/ui/src/plugins/Demo/i18n/zh_CN.yaml b/ui/src/plugins/Demo/i18n/zh_CN.yaml
new file mode 100644
index 00000000..099e3bd9
--- /dev/null
+++ b/ui/src/plugins/Demo/i18n/zh_CN.yaml
@@ -0,0 +1,4 @@
+plugin:
+  ui_plugin_demo:
+    ui:
+      msg: UI 插件示例
diff --git a/ui/src/plugins/Demo/index.tsx b/ui/src/plugins/Demo/index.tsx
new file mode 100644
index 00000000..5d6b57f1
--- /dev/null
+++ b/ui/src/plugins/Demo/index.tsx
@@ -0,0 +1,24 @@
+import { memo, FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert } from 'react-bootstrap';
+
+import pluginKit, { PluginInfo } from '@/utils/pluginKit';
+import './i18n';
+
+import info from './info.yaml';
+
+const pluginInfo: PluginInfo = {
+  slug_name: info.slug_name,
+};
+
+const Index: FC = () => {
+  const { t } = useTranslation(pluginKit.getTransNs(), {
+    keyPrefix: pluginKit.getTransKeyPrefix(pluginInfo),
+  });
+
+  return <Alert variant="info">{t('msg')}</Alert>;
+};
+export default {
+  info: pluginInfo,
+  component: memo(Index),
+};
diff --git a/ui/src/plugins/Demo/info.yaml b/ui/src/plugins/Demo/info.yaml
new file mode 100644
index 00000000..17d31a9e
--- /dev/null
+++ b/ui/src/plugins/Demo/info.yaml
@@ -0,0 +1,4 @@
+slug_name: ui_plugin_demo
+version: 0.0.1
+author:  Answer.dev
+
diff --git a/ui/src/plugins/index.ts b/ui/src/plugins/index.ts
index 7646bbd1..6a551eaf 100644
--- a/ui/src/plugins/index.ts
+++ b/ui/src/plugins/index.ts
@@ -1 +1,3 @@
 export default null;
+
+export { default as Demo } from './Demo';