diff --git a/src/components/settings/ToolSettings.vue b/src/components/settings/ToolSettings.vue
index 63c3ae6..c486d57 100644
--- a/src/components/settings/ToolSettings.vue
+++ b/src/components/settings/ToolSettings.vue
@@ -1,15 +1,75 @@
 <template>
-  <div class="text-center">
+  <div class="text-center" v-if="toolStore.tools">
     <n-icon class="text-7xl">
       <HammerOutline />
     </n-icon>
     <p>工具可以让助理获得调用外部函数，以达到意想不到的效果。</p>
-    <div  class="mt-3">
+    <div class="mt-3">
       <n-button>创建</n-button>
     </div>
   </div>
+  <div v-else>
+    <div class="mb-3">
+      <n-button tertiary @click="showCreateDialog = true"> 新建工具 </n-button>
+    </div>
+  </div>
+  <div>
+    <n-drawer placement="left" v-model:show="showCreateDialog" :width="600">
+      <n-drawer-content closable title="新建工具">
+        <n-form>
+          <n-form-item label="名称">
+            <n-input v-model:value="currentTool.name" @keydown.enter.prevent />
+          </n-form-item>
+
+          <n-form-item label="描述">
+            <n-input
+              v-model:value="currentTool.description"
+              @keydown.enter.prevent
+            />
+          </n-form-item>
+
+          <n-form-item label="发现地址">
+            <n-input
+              type="textarea"
+              v-model:value="currentTool.discovery_url"
+              @keydown.enter.prevent
+            />
+          </n-form-item>
+
+          <n-button type="primary" @click="createTool"> 新建 </n-button>
+        </n-form>
+      </n-drawer-content>
+    </n-drawer>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { EntityTool, SchemaToolCreateRequest } from "@/api";
+import getApi from "@/plugins/api";
+import { useToolStore } from "@/stores/tools";
 import { HammerOutline } from "@vicons/ionicons5";
+
+const toolStore = useToolStore();
+const showCreateDialog = ref(false);
+const currentToolId = ref();
+const currentTool: Ref<EntityTool> = ref({});
+const createToolRequest: Ref<SchemaToolCreateRequest> = ref({
+  description: "",
+  name: "",
+  url: "",
+});
+
+const getTools = async () => {
+  toolStore.tools = (await getApi().Tool.apiV1ToolsGet()).data.data ?? [];
+};
+
+const createTool = async () => {
+  await getApi().Tool.apiV1ToolsPost(createToolRequest.value);
+  getTools();
+  showCreateDialog.value = false;
+};
+
+onMounted(() => {
+  getTools();
+});
 </script>
diff --git a/src/stores/tools.ts b/src/stores/tools.ts
new file mode 100644
index 0000000..cf38318
--- /dev/null
+++ b/src/stores/tools.ts
@@ -0,0 +1,10 @@
+// Utilities
+import { defineStore } from "pinia";
+import { EntityTool } from "../api";
+
+export const useToolStore = defineStore("tools", {
+  persist: false,
+  state: () => ({
+    tools: <EntityTool[] | undefined> [],
+  }),
+});