diff --git a/components/app/AppAccount.vue b/components/app/AppAccount.vue
new file mode 100644
index 0000000..3f24185
--- /dev/null
+++ b/components/app/AppAccount.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const { signIn, status, data } = useSession();
+</script>
+
+<template>
+  <div>
+    <el-button v-if="status === 'unauthenticated'" text @click="() => signIn()">
+      <el-icon class="i-carbon:user"></el-icon>
+    </el-button>
+    <el-avatar
+      v-else-if="status === 'authenticated'"
+      :size="32"
+      :src="data?.user?.image ?? ''"
+    >
+      {{ data?.user?.name }}
+    </el-avatar>
+  </div>
+</template>
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index 7e9af53..bf58ae9 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -5,13 +5,14 @@
     <div flex items-center col-span-4>
       <AppHeaderLogo></AppHeaderLogo>
     </div>
-    <div flex flex-1 items-center col-span-4 justify-center>
+    <div flex flex-1 items-center col-span-3 justify-center>
       <AppHeaderNavigation />
     </div>
-    <div flex gap-1 sm:gap-2 items-center col-span-4 justify-end>
+    <div flex gap-1 sm:gap-2 items-center col-span-5 justify-end>
       <AppSettings />
       <AppThemeSelect />
       <AppSocialIcons />
+      <AppAccount />
     </div>
   </el-header>
 </template>
diff --git a/components/create/CreateForms.vue b/components/create/CreateForms.vue
index df72736..0310719 100644
--- a/components/create/CreateForms.vue
+++ b/components/create/CreateForms.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 const { step, maxStep, nextStep, prevStep, tool, isCreate } = useCreateTool();
-const { save, remove } = useCustomTools();
+const { create, remove, update } = useLocalTools();
 const localePath = useLocalePath();
-const handleSave = async () => {
-  await save(tool.value);
+const handleSave = () => {
   navigateTo({
     path: localePath(`/ai-${tool.value.id}`),
     replace: true,
   });
   if (isCreate.value) {
+    create(tool.value);
     ElMessage.success("Create Success");
   } else {
+    update(tool.value);
     ElMessage.success("Update Success");
   }
 };
-const handleRemove = async () => {
-  await remove(tool.value.id!);
+const handleRemove = () => {
+  remove(tool.value.id!);
   navigateTo({
     path: localePath("/"),
     replace: true,
diff --git a/components/create/CreatePreviews.vue b/components/create/CreatePreviews.vue
index ba73ce3..77fe738 100644
--- a/components/create/CreatePreviews.vue
+++ b/components/create/CreatePreviews.vue
@@ -10,11 +10,13 @@ const { tool, step } = useCreateTool();
         <Card max-w-2xl flex-1 v-else-if="step === 1">
           <ToolForms readonly :tool="tool" />
         </Card>
-        <Card max-w-2xl flex-1 v-else-if="step === 2">
+        <template v-else-if="step === 2">
           <ToolHeader :tool="tool" />
-          <ToolForms :tool="tool" />
-          <ToolRequestPreview :tool="tool" />
-        </Card>
+          <Card>
+            <ToolForms :tool="tool" />
+            <ToolRequestPreview :tool="tool" />
+          </Card>
+        </template>
       </CreatePreviewTransition>
     </div>
   </div>
diff --git a/components/tool/ToolActions.vue b/components/tool/ToolActions.vue
new file mode 100644
index 0000000..9d8cd1e
--- /dev/null
+++ b/components/tool/ToolActions.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { ToolItem } from "~~/types";
+
+const localePath = useLocalePath();
+
+defineProps<{
+  tool: ToolItem;
+}>();
+</script>
+
+<template>
+  <div absolute left-0 top--8 w-full h-full flex justify-end gap-1>
+    <NuxtLink
+      :to="{
+        path: localePath('/create'),
+        query: {
+          id: tool.id,
+        },
+      }"
+    >
+      <el-button size="small" text>
+        <el-icon class="i-carbon:edit"></el-icon>
+      </el-button>
+    </NuxtLink>
+    <ToolSettingDialog :tool="tool" />
+  </div>
+</template>
diff --git a/components/tool/ToolDetail.vue b/components/tool/ToolDetail.vue
index 96285df..78608bb 100644
--- a/components/tool/ToolDetail.vue
+++ b/components/tool/ToolDetail.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
+import { ToolItem } from "~~/types";
+
 const props = defineProps<{
   tool: ToolItem;
 }>();
@@ -16,8 +17,11 @@ function submit(data: any) {
 </script>
 <template>
   <div>
-    <ToolHeader show-action :tool="tool" />
-    <ToolForms :loading="loading" @submit="submit" :tool="tool" />
-    <ToolResult v-if="result" :html="resultHtml" />
+    <ToolHeader :tool="tool" />
+    <Card relative>
+      <ToolActions :tool="tool" />
+      <ToolForms :loading="loading" @submit="submit" :tool="tool" />
+      <ToolResult v-if="result" :html="resultHtml" />
+    </Card>
   </div>
 </template>
diff --git a/components/tool/ToolHeader.vue b/components/tool/ToolHeader.vue
index 24d9edc..13dab10 100644
--- a/components/tool/ToolHeader.vue
+++ b/components/tool/ToolHeader.vue
@@ -1,71 +1,20 @@
 <script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
-import { v4 as uuidv4 } from "uuid";
-const localePath = useLocalePath();
+import { ToolItem } from "~~/types";
 
-const props = defineProps<{
+defineProps<{
   tool: ToolItem;
-  showAction?: boolean;
 }>();
-const { isLocalTool } = useTools();
-const { save } = useCustomTools();
-function handleFork() {
-  const id = uuidv4();
-  save({
-    ...props.tool,
-    id,
-  });
-  navigateTo({
-    path: localePath(`/ai-${id}`),
-    replace: true,
-  });
-}
 </script>
 <template>
-  <div flex gap-2 mb-4>
-    <div
-      v-if="tool?.icon"
-      w-12
-      h-12
-      flex
-      items-center
-      justify-center
-      rounded-md
-      color-primary
-      transition-all
-      border
-      dark:border-gray-800
-    >
+  <div flex flex-col items-center text-center mb-8>
+    <div v-if="tool?.icon" text-6xl color-primary my-2 sm:my-6>
       <ToolIcon :icon="tool.icon" />
     </div>
-    <div flex flex-col gap-y-1 flex-1>
-      <div font-bold>{{ tool?.name }}</div>
-      <div line-clamp-2 text-sm text-gray-500>
-        {{ tool?.desc ?? "Nothing in here" }}
-      </div>
+    <div text-2xl font-semibold text-gray-900 dark:text-gray-100>
+      {{ tool?.name }}
     </div>
-    <div flex gap-1>
-      <template v-if="showAction && isLocalTool(tool.id!)">
-        <ToolRemoteAction :tool="tool" />
-        <NuxtLink
-          :to="{
-            path: localePath('/create'),
-            query: {
-              id: tool.id,
-            },
-          }"
-        >
-          <el-button size="small" text>
-            <el-icon class="i-carbon:edit"></el-icon>
-          </el-button>
-        </NuxtLink>
-        <ToolSettingDialog :tool="tool" />
-      </template>
-      <template v-else>
-        <el-button @click="handleFork" size="small" text>
-          <el-icon class="i-carbon:fork"></el-icon>
-        </el-button>
-      </template>
+    <div v-if="tool?.desc" mt-1 font-medium text-gray-500 dark:text-gray-400>
+      {{ tool?.desc }}
     </div>
   </div>
 </template>
diff --git a/components/tool/ToolPageLayout.vue b/components/tool/ToolPageLayout.vue
index 7df476f..9790534 100644
--- a/components/tool/ToolPageLayout.vue
+++ b/components/tool/ToolPageLayout.vue
@@ -1,20 +1,7 @@
 <template>
   <main flex-1>
-    <div max-w-2xl mx-auto mt-10>
-      <div
-        rounded-xl
-        bg-white
-        dark:bg-dark-900
-        transition-all
-        drop-shadow-none
-        sm:drop-shadow-lg
-        border-light
-        of-hidden
-        px-16px
-        py-20px
-      >
-        <slot></slot>
-      </div>
+    <div max-w-2xl mx-auto px-4 mt-6 sm:mt-10>
+      <slot></slot>
     </div>
   </main>
 </template>
diff --git a/components/tool/ToolRemoteAction.vue b/components/tool/ToolRemoteAction.vue
index d2dc9f2..d82a028 100644
--- a/components/tool/ToolRemoteAction.vue
+++ b/components/tool/ToolRemoteAction.vue
@@ -1,5 +1,4 @@
-<script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
+<!-- <script lang="ts" setup>
 const { status, signIn } = useSession();
 const loading = ref(false);
 const { save, remove } = useCustomTools();
@@ -73,4 +72,7 @@ async function handleRemove() {
       <el-icon class="i-carbon:upload"></el-icon>
     </el-button>
   </div>
-</template>
+</template> -->
+
+
+<template></template>
\ No newline at end of file
diff --git a/components/tool/ToolSettingDialog.vue b/components/tool/ToolSettingDialog.vue
index bc728a7..dc31f7e 100644
--- a/components/tool/ToolSettingDialog.vue
+++ b/components/tool/ToolSettingDialog.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
 import { defaultChatGPTOptions } from "~/composables/useChatGPT";
 import { objectPick } from "@vueuse/core";
+import { ToolItem } from "~~/types";
 
 const props = defineProps<{
   tool: ToolItem;
 }>();
 const show = ref(false);
-const { save } = useCustomTools();
+const { create } = useLocalTools();
 
 const formData = ref<Record<string, any>>({
   ...objectPick(defaultChatGPTOptions, [
@@ -22,7 +22,7 @@ const formData = ref<Record<string, any>>({
 });
 
 async function handleSave() {
-  await save({
+  await create({
     ...props.tool,
     options: formData.value,
   });
diff --git a/composables/useChatGPT.ts b/composables/useChatGPT.ts
index 49ea988..566cd72 100644
--- a/composables/useChatGPT.ts
+++ b/composables/useChatGPT.ts
@@ -1,24 +1,5 @@
-import { MaybeRef } from "@vueuse/shared";
-
-export interface ChatGPTOptions {
-  apiKey: string;
-  apiBaseUrl: string;
-  model: "gpt-3.5-turbo" | "gpt-3.5-turbo-0301";
-  temperature?: number;
-  top_p?: number;
-  n?: number;
-  stream?: boolean;
-  max_tokens?: number;
-  presence_penalty?: number;
-  frequency_penalty?: number;
-}
-
-export interface ChatGPTMessage {
-  role: "system" | "user" | "assistant";
-  content: string;
-}
-
-export type ChatGPTMessages = ChatGPTMessage[];
+import { STORAGE_KEY_GPT_SETTINGS } from "~/constants";
+import { ChatGPTMessages, ChatGPTOptions } from "~~/types";
 
 export const defaultChatGPTOptions: ChatGPTOptions = {
   apiKey: "",
@@ -35,7 +16,7 @@ export const defaultChatGPTOptions: ChatGPTOptions = {
 
 export const useChatGPT = createSharedComposable(() => {
   const storageOptions = useLocalStorage(
-    "ai-anything:GPTSetting",
+    STORAGE_KEY_GPT_SETTINGS,
     defaultChatGPTOptions
   );
   const sendMessage = async (
diff --git a/composables/useCustomTools.ts b/composables/useCustomTools.ts
deleted file mode 100644
index 128bd68..0000000
--- a/composables/useCustomTools.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ToolItem } from "./useTools";
-
-export const useCustomTools = createSharedComposable(() => {
-  const customToolskey = "customTools:v" + useRuntimeConfig().public.version;
-  const { $storage } = useNuxtApp();
-  onNuxtReady(async () => {
-    sync();
-  });
-  const customTools = useState<ToolItem[]>("customTools", () => []);
-
-  const sync = async () => {
-    const tools = (await $storage.getItem(customToolskey)) as ToolItem[];
-    customTools.value = (tools as any) || [];
-  };
-
-  const remove = async (id: string) => {
-    await sync();
-    customTools.value = customTools.value.filter((v) => v.id !== id);
-    await $storage.setItem(customToolskey, customTools.value);
-  };
-  const save = async (tool: ToolItem) => {
-    await sync();
-    if (customTools.value.find((t) => t.id === tool.id)) {
-      customTools.value = customTools.value.map((v) => {
-        if (v.id === tool.id) {
-          return tool;
-        }
-        return v;
-      });
-    } else {
-      customTools.value.push(tool);
-    }
-    await $storage.setItem(customToolskey, customTools.value);
-  };
-  return {
-    tools: customTools,
-    save,
-    remove,
-    sync,
-  };
-});
diff --git a/composables/useLocalTools.ts b/composables/useLocalTools.ts
new file mode 100644
index 0000000..6bc834d
--- /dev/null
+++ b/composables/useLocalTools.ts
@@ -0,0 +1,39 @@
+import { MaybeRef } from "@vueuse/shared";
+import { STORAGE_KEY_TOOLS } from "~~/constants";
+import { ToolItem } from "~~/types";
+
+export const useLocalTools = () => {
+  const tools = useLocalStorage<ToolItem[]>(STORAGE_KEY_TOOLS, []);
+  function create(tool: ToolItem) {
+    tools.value.push(tool);
+  }
+
+  function get(id: MaybeRef<string>) {
+    return tools.value.find((v) => v.id === unref(id));
+  }
+
+  function remove(id: MaybeRef<string>) {
+    tools.value = tools.value.filter((v) => v.id !== unref(id));
+  }
+
+  function update(tool: Partial<ToolItem>) {
+    const { id, ...other } = tool;
+    tools.value = tools.value.map((v) => {
+      if (v.id === id) {
+        return {
+          ...v,
+          ...other,
+        };
+      }
+      return v;
+    });
+  }
+
+  return {
+    tools,
+    create,
+    get,
+    remove,
+    update,
+  };
+};
diff --git a/composables/useRemoteTools.ts b/composables/useRemoteTools.ts
new file mode 100644
index 0000000..05c260e
--- /dev/null
+++ b/composables/useRemoteTools.ts
@@ -0,0 +1,51 @@
+import { MaybeRef } from "@vueuse/shared";
+import { ToolItem } from "~~/types";
+
+export const useAsyncRemoteTools = async () => {
+  const tools = ref<ToolItem[]>([]);
+
+  async function refresh() {
+    const _tools = await $fetch<ToolItem[]>("/api/tool");
+    if (_tools) {
+      tools.value = _tools;
+    }
+  }
+
+  async function create(tool: ToolItem) {
+    const { id, ...body } = tool;
+    const data = await $fetch("/api/tool", {
+      method: "post",
+      body,
+    });
+    return data;
+  }
+
+  async function get(id: MaybeRef<string>) {
+    return await $fetch<ToolItem>(`/api/tool/${unref(id)}`);
+  }
+
+  async function remove(id: MaybeRef<string>) {
+    return await $fetch<ToolItem>(`/api/tool/${unref(id)}`, {
+      method: "delete",
+    });
+  }
+
+  async function update(tool: Partial<ToolItem>) {
+    const { id, ...body } = tool;
+    return await $fetch(`/api/tool/${id}`, {
+      method: "post",
+      body,
+    });
+  }
+
+  await refresh();
+
+  return {
+    tools,
+    refresh,
+    create,
+    get,
+    remove,
+    update,
+  };
+};
diff --git a/composables/useToolFormData.ts b/composables/useToolFormData.ts
index a8778a9..58fdb72 100644
--- a/composables/useToolFormData.ts
+++ b/composables/useToolFormData.ts
@@ -1,4 +1,4 @@
-import { ToolItem } from "./useTools";
+import { ToolItem } from "~~/types";
 
 export const useToolFormData = createSharedComposable((tool: ToolItem) => {
   const formData = ref<Record<any, any>>();
diff --git a/composables/useTools.ts b/composables/useTools.ts
index 66cf677..d549215 100644
--- a/composables/useTools.ts
+++ b/composables/useTools.ts
@@ -1,62 +1,26 @@
-import { ChatGPTOptions } from "./useChatGPT";
+import { ToolItem } from "~~/types";
 
-// @unocss-include
-export interface ToolItemOptions extends Partial<ChatGPTOptions> {}
-export interface ToolItemRole {
-  id?: string;
-  type: string;
-  template: string;
-}
-export interface ToolItemFormItem {
-  id?: string;
-  type: string;
-  name: string;
-  lable?: string;
-  props?: Record<string, any>;
-}
-export type ToolItemForms = ToolItemFormItem[];
-export interface ToolItemMeta {
-  /**
-   * uuid
-   */
-  id?: string;
-  /**
-   * tool name
-   */
-  name?: string;
-  /**
-   * tool desc
-   */
-  desc?: string;
-  /**
-   * tool icon
-   */
-  icon?: string;
-  author?: string;
-}
+const initializeTools = async () => {
+  const { tools: local } = useLocalTools();
+  const { tools: remote } = await useAsyncRemoteTools();
+  return computed<ToolItem>(() => {
+    return [
+      ...local.value.filter((v) => !remote.value.find((r) => r.id === v.id)),
+      ...remote.value,
+    ];
+  });
+};
 
-export interface ToolItem extends ToolItemMeta {
-  roles: ToolItemRole[];
-  forms: ToolItemForms;
-  options?: ToolItemOptions;
-}
+const tools = await initializeTools();
 
 export const useTools = () => {
-  const { tools: customTools } = useCustomTools();
   const { data } = useSession();
-
-  const buildInTools = ref<ToolItem[]>([]);
-
-  const tools = computed<ToolItem[]>(() => {
-    return [...buildInTools.value, ...customTools.value];
-  });
-  const isLocalTool = (id: string) =>
-    !!customTools.value.find((v) => v.id === id);
   const isRemoteTool = (id: string) => !id.includes("-");
+  const isLocalTool = (id: string) => !isRemoteTool(id);
   const isOwnTool = (tool: ToolItem) => tool.author === data.value?.user?.email;
   return {
     tools,
-    isLocalTool: isLocalTool,
+    isLocalTool,
     isRemoteTool,
     isOwnTool,
   };
diff --git a/constants/index.ts b/constants/index.ts
new file mode 100644
index 0000000..eab3c8e
--- /dev/null
+++ b/constants/index.ts
@@ -0,0 +1,2 @@
+export const STORAGE_KEY_TOOLS = "ai-anything:tools";
+export const STORAGE_KEY_GPT_SETTINGS = "ai-anything:GPTSetting";
diff --git a/layouts/create.vue b/layouts/create.vue
index 5bfc2fa..31c29bb 100644
--- a/layouts/create.vue
+++ b/layouts/create.vue
@@ -1,6 +1,6 @@
 <template>
   <main flex-1>
-    <div max-w-300 mx-auto px-4 mt-10>
+    <div max-w-300 mx-auto px-4 mt-6 sm:mt-10>
       <div
         rounded-xl
         bg-white
diff --git a/pages/workshop.vue b/pages/workshop.vue
new file mode 100644
index 0000000..7c2706c
--- /dev/null
+++ b/pages/workshop.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Comming...</div>
+</template>
diff --git a/server/api/tool/[id].delete.ts b/server/api/tool/[id].delete.ts
index 77a9b32..cf1b368 100644
--- a/server/api/tool/[id].delete.ts
+++ b/server/api/tool/[id].delete.ts
@@ -3,21 +3,19 @@ import { getServerSession } from "#auth";
 
 export default defineEventHandler(async (event) => {
   const session = await getServerSession(event);
-
+  if (!session) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "unauthenticated",
+    });
+  }
   const id = event.context.params?.id;
-  const tool = await prisma.tool.findFirst({
+  const author = session.user?.email as string;
+
+  return await prisma.tool.deleteMany({
     where: {
       id,
+      author,
     },
   });
-  if (tool && tool.author === session?.user?.email) {
-    return await prisma.tool.delete({
-      where: {
-        id: tool.id,
-      },
-    });
-  }
-  throw createError({
-    statusCode: 401,
-  });
 });
diff --git a/server/api/tool/[id].post.ts b/server/api/tool/[id].post.ts
new file mode 100644
index 0000000..49df9a8
--- /dev/null
+++ b/server/api/tool/[id].post.ts
@@ -0,0 +1,26 @@
+import { prisma } from "~/server/plugins/prisma";
+import { getServerSession } from "#auth";
+
+export default defineEventHandler(async (event) => {
+  const session = await getServerSession(event);
+  if (!session) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "unauthenticated",
+    });
+  }
+
+  const id = event.context.params?.id;
+  const author = session.user?.email as string;
+  const { id: _id, author: _author, ...body } = await readBody(event);
+  return await prisma.tool.updateMany({
+    where: {
+      id,
+      author,
+    },
+    data: {
+      ...body,
+      author,
+    },
+  });
+});
diff --git a/server/api/tool/index.post.ts b/server/api/tool/index.post.ts
index 1e450d0..f5a1cae 100644
--- a/server/api/tool/index.post.ts
+++ b/server/api/tool/index.post.ts
@@ -6,39 +6,15 @@ export default defineEventHandler(async (event) => {
   if (!session) {
     throw createError({
       statusCode: 401,
-      statusMessage: "authenticated",
+      statusMessage: "unauthenticated",
     });
   }
+
   const { id, ...body } = await readBody(event);
-  // local tool
-  if (id.includes("-")) {
-    return await prisma.tool.create({
-      data: {
-        ...body,
-        author: session.user?.email,
-      },
-    });
-  } else {
-    // remote tool
-    let tool = await prisma.tool.findFirst({
-      where: {
-        id,
-      },
-    });
-    if (tool && tool.author === session.user?.email) {
-      return await prisma.tool.update({
-        where: {
-          id: tool.id,
-        },
-        data: {
-          ...body,
-        },
-      });
-    } else {
-      throw createError({
-        statusCode: 404,
-        statusMessage: "Not Found",
-      });
-    }
-  }
+  return await prisma.tool.create({
+    data: {
+      ...body,
+      author: session.user?.email,
+    },
+  });
 });
diff --git a/server/plugins/prisma.ts b/server/plugins/prisma.ts
index a59106e..d93eba3 100644
--- a/server/plugins/prisma.ts
+++ b/server/plugins/prisma.ts
@@ -1,5 +1,5 @@
-import { PrismaClient } from '@prisma/client'
-export const prisma = new PrismaClient()
+import { PrismaClient, Prisma } from "@prisma/client";
+export const prisma = new PrismaClient();
 
 export default defineNitroPlugin(async (nitroApp) => {
   await prisma.$connect();
diff --git a/types/chatgpt.ts b/types/chatgpt.ts
new file mode 100644
index 0000000..adcbf95
--- /dev/null
+++ b/types/chatgpt.ts
@@ -0,0 +1,19 @@
+export interface ChatGPTOptions {
+  apiKey: string;
+  apiBaseUrl: string;
+  model: "gpt-3.5-turbo" | "gpt-3.5-turbo-0301";
+  temperature?: number;
+  top_p?: number;
+  n?: number;
+  stream?: boolean;
+  max_tokens?: number;
+  presence_penalty?: number;
+  frequency_penalty?: number;
+}
+
+export interface ChatGPTMessage {
+  role: "system" | "user" | "assistant";
+  content: string;
+}
+
+export type ChatGPTMessages = ChatGPTMessage[];
diff --git a/types/index.ts b/types/index.ts
new file mode 100644
index 0000000..57f9827
--- /dev/null
+++ b/types/index.ts
@@ -0,0 +1,2 @@
+export * from "./tools";
+export * from "./chatgpt";
diff --git a/types/tools.ts b/types/tools.ts
new file mode 100644
index 0000000..9563df5
--- /dev/null
+++ b/types/tools.ts
@@ -0,0 +1,27 @@
+import { ChatGPTOptions } from "./chatgpt";
+import { Prisma } from "@prisma/client";
+
+// @unocss-include
+export interface ToolItemOptions
+  extends Partial<ChatGPTOptions>,
+    Prisma.JsonObject {}
+
+export interface ToolItemRole extends Prisma.JsonObject {
+  id?: string;
+  type: string;
+  template: string;
+}
+export interface ToolItemFormItem extends Prisma.JsonObject {
+  id?: string;
+  type: string;
+  name: string;
+  lable?: string;
+  props?: Record<string, any>;
+}
+export type ToolItemForms = ToolItemFormItem[];
+
+export interface ToolItem extends Prisma.ToolCreateInput {
+  roles: ToolItemRole[];
+  forms: ToolItemForms;
+  options?: ToolItemOptions;
+}
diff --git a/utils/openai.ts b/utils/openai.ts
index c16a77c..43ee6de 100644
--- a/utils/openai.ts
+++ b/utils/openai.ts
@@ -1,5 +1,4 @@
-import type { ToolItemRole } from "~/composables/useTools";
-import { ChatGPTMessages } from "~/composables/useChatGPT";
+import { ChatGPTMessages, ToolItemRole } from "~~/types";
 
 export const parseTemplate = (
   data: Record<string, any>,