diff --git a/apps/nestjs-backend/src/features/base/base-duplicate.service.ts b/apps/nestjs-backend/src/features/base/base-duplicate.service.ts
index 2c892e9bf4..103ad6ef89 100644
--- a/apps/nestjs-backend/src/features/base/base-duplicate.service.ts
+++ b/apps/nestjs-backend/src/features/base/base-duplicate.service.ts
@@ -28,13 +28,14 @@ export class BaseDuplicateService {
   ) {}
 
   async duplicateBase(duplicateBaseRo: IDuplicateBaseRo, allowCrossBase: boolean = true) {
-    const { fromBaseId, spaceId, withRecords, name } = duplicateBaseRo;
+    const { fromBaseId, spaceId, withRecords, name, baseId } = duplicateBaseRo;
 
     const { base, tableIdMap, fieldIdMap, viewIdMap } = await this.duplicateStructure(
       fromBaseId,
       spaceId,
       name,
-      allowCrossBase
+      allowCrossBase,
+      baseId
     );
 
     const crossBaseLinkFieldTableMap = allowCrossBase
@@ -105,7 +106,8 @@ export class BaseDuplicateService {
     fromBaseId: string,
     spaceId: string,
     baseName?: string,
-    allowCrossBase?: boolean
+    allowCrossBase?: boolean,
+    baseId?: string
   ) {
     const prisma = this.prismaService.txClient();
     const baseRaw = await prisma.base.findUniqueOrThrow({
@@ -160,7 +162,7 @@ export class BaseDuplicateService {
       tableIdMap,
       fieldIdMap,
       viewIdMap,
-    } = await this.baseImportService.createBaseStructure(spaceId, structure);
+    } = await this.baseImportService.createBaseStructure(spaceId, structure, baseId);
 
     return { base: newBase, tableIdMap, fieldIdMap, viewIdMap };
   }
diff --git a/apps/nestjs-backend/src/features/base/base-import.service.ts b/apps/nestjs-backend/src/features/base/base-import.service.ts
index 3895944c10..596867f281 100644
--- a/apps/nestjs-backend/src/features/base/base-import.service.ts
+++ b/apps/nestjs-backend/src/features/base/base-import.service.ts
@@ -225,11 +225,21 @@ export class BaseImportService {
     );
   }
 
-  async createBaseStructure(spaceId: string, structure: IBaseJson) {
+  async createBaseStructure(spaceId: string, structure: IBaseJson, baseId?: string) {
     const { name, icon, tables, plugins } = structure;
 
     // create base
-    const newBase = await this.createBase(spaceId, name, icon || undefined);
+    const newBase = baseId
+      ? await this.prismaService.base.findUniqueOrThrow({
+          where: { id: baseId },
+          select: {
+            id: true,
+            name: true,
+            icon: true,
+            spaceId: true,
+          },
+        })
+      : await this.createBase(spaceId, name, icon || undefined);
     this.logger.log(`base-duplicate-service: Duplicate base successfully`);
 
     // create table
diff --git a/apps/nestjs-backend/src/features/base/base.service.ts b/apps/nestjs-backend/src/features/base/base.service.ts
index 6a5dbdd45b..04ecf5d898 100644
--- a/apps/nestjs-backend/src/features/base/base.service.ts
+++ b/apps/nestjs-backend/src/features/base/base.service.ts
@@ -1,4 +1,10 @@
-import { ForbiddenException, Injectable, Logger, NotFoundException } from '@nestjs/common';
+import {
+  BadRequestException,
+  ForbiddenException,
+  Injectable,
+  Logger,
+  NotFoundException,
+} from '@nestjs/common';
 import { ActionPrefix, actionPrefixMap, generateBaseId } from '@teable/core';
 import { PrismaService } from '@teable/db-main-prisma';
 import { CollaboratorType, ResourceType } from '@teable/openapi';
@@ -287,7 +293,7 @@ export class BaseService {
   }
 
   async createBaseFromTemplate(createBaseFromTemplateRo: ICreateBaseFromTemplateRo) {
-    const { spaceId, templateId, withRecords } = createBaseFromTemplateRo;
+    const { spaceId, templateId, withRecords, baseId } = createBaseFromTemplateRo;
     const template = await this.prismaService.template.findUniqueOrThrow({
       where: { id: templateId },
       select: {
@@ -296,6 +302,22 @@ export class BaseService {
       },
     });
 
+    if (baseId) {
+      // check the base update permission
+      await this.checkBaseUpdatePermission(baseId);
+
+      const base = await this.prismaService.base.findUniqueOrThrow({
+        where: { id: baseId, deletedTime: null },
+        select: {
+          spaceId: true,
+        },
+      });
+
+      if (base.spaceId !== spaceId) {
+        throw new BadRequestException('baseId and spaceId mismatch');
+      }
+    }
+
     const { baseId: fromBaseId = '' } = template?.snapshot ? JSON.parse(template.snapshot) : {};
 
     if (!template || !fromBaseId) {
@@ -309,6 +331,7 @@ export class BaseService {
           fromBaseId,
           spaceId,
           withRecords,
+          baseId,
         });
         await this.prismaService.template.update({
           where: { id: templateId },
diff --git a/apps/nestjs-backend/src/features/table/open-api/table-open-api.service.ts b/apps/nestjs-backend/src/features/table/open-api/table-open-api.service.ts
index d96295814f..528d757b68 100644
--- a/apps/nestjs-backend/src/features/table/open-api/table-open-api.service.ts
+++ b/apps/nestjs-backend/src/features/table/open-api/table-open-api.service.ts
@@ -174,6 +174,11 @@ export class TableOpenApiService {
 
       const preparedFields = await this.prepareFields(tableId, tableRo.fields);
 
+      // set the first field to be the primary field if not set
+      if (!preparedFields.find((field) => field.isPrimary)) {
+        preparedFields[0].isPrimary = true;
+      }
+
       // create teable should not set computed field isPending, because noting need to calculate when create
       preparedFields.forEach((field) => delete field.isPending);
       const fieldVos = await this.createFields(tableId, preparedFields);
diff --git a/apps/nestjs-backend/test/template.e2e-spec.ts b/apps/nestjs-backend/test/template.e2e-spec.ts
index d2085a0350..d2e7147767 100644
--- a/apps/nestjs-backend/test/template.e2e-spec.ts
+++ b/apps/nestjs-backend/test/template.e2e-spec.ts
@@ -1,22 +1,28 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 import type { INestApplication } from '@nestjs/common';
 import { PrismaService } from '@teable/db-main-prisma';
+import type { ITableFullVo } from '@teable/openapi';
 import {
   createBase,
+  createBaseFromTemplate,
   createSpace,
+  createTable,
   createTemplate,
   createTemplateCategory,
   createTemplateSnapshot,
   deleteBase,
   deleteTemplate,
   deleteTemplateCategory,
+  getFields,
   getPublishedTemplateList,
+  getTableList,
   getTemplateCategoryList,
   getTemplateList,
   pinTopTemplate,
   updateTemplate,
   updateTemplateCategory,
 } from '@teable/openapi';
+import { omit } from 'lodash';
 import { deleteSpace, initApp } from './utils/init-app';
 
 describe('Template Open API Controller (e2e)', () => {
@@ -216,4 +222,110 @@ describe('Template Open API Controller (e2e)', () => {
       expect(res2.data.length).toBe(0);
     });
   });
+
+  describe('Create Base From Template', () => {
+    let templateId: string;
+    let templateBaseId: string;
+    let table1: ITableFullVo;
+    let table2: ITableFullVo;
+    beforeEach(async () => {
+      // create a template in a base
+      const templateBase = await createBase({
+        name: 'Template Base',
+        spaceId,
+      });
+      templateBaseId = templateBase.data.id;
+      table1 = (
+        await createTable(templateBaseId, {
+          name: 'table1',
+        })
+      ).data;
+
+      table2 = (
+        await createTable(templateBaseId, {
+          name: 'table2',
+        })
+      ).data;
+
+      // use this base to be a template
+      const template = await createTemplate({});
+      templateId = template.data.id;
+
+      await updateTemplate(template.data.id, {
+        name: 'test Template',
+        description: 'test Template description',
+        baseId: templateBaseId,
+      });
+
+      await createTemplateSnapshot(template.data.id);
+
+      await updateTemplate(template.data.id, {
+        isPublished: true,
+      });
+    });
+
+    afterEach(async () => {
+      await deleteBase(templateBaseId);
+    });
+
+    it('should create base from template', async () => {
+      const createBaseRes = (
+        await createBaseFromTemplate({
+          spaceId,
+          templateId,
+          withRecords: true,
+        })
+      ).data;
+      const createdBaseId = createBaseRes.id;
+      const tables = (await getTableList(createdBaseId)).data;
+      // table
+      expect(tables.length).toBe(2);
+      expect(tables[0].name).toBe('table1');
+      expect(tables[1].name).toBe('table2');
+      const table1Fields = (await getFields(tables[0].id)).data?.map((f) => omit(f, ['id']));
+      const table2Fields = (await getFields(tables[1].id)).data?.map((f) => omit(f, ['id']));
+
+      // fields
+      const originalTable1Fields = table1.fields.map((f) => omit(f, ['id']));
+      const originalTable2Fields = table2.fields.map((f) => omit(f, ['id']));
+      expect(table1Fields).toEqual(originalTable1Fields);
+      expect(table2Fields).toEqual(originalTable2Fields);
+    });
+
+    it('should apply template to a base', async () => {
+      const applyBase = await createBase({
+        name: 'Apply Base',
+        spaceId,
+      });
+
+      // remain original base table
+      await createTable(applyBase.data.id, {
+        name: 'table3',
+      });
+
+      const createBaseRes = (
+        await createBaseFromTemplate({
+          spaceId,
+          templateId,
+          withRecords: true,
+          baseId: applyBase.data.id,
+        })
+      ).data;
+
+      const createdBaseId = createBaseRes.id;
+      const tables = (await getTableList(createdBaseId)).data;
+      // table
+      expect(tables.length).toBe(3);
+      expect(tables[1].name).toBe('table1');
+      expect(tables[2].name).toBe('table2');
+      const table1Fields = (await getFields(tables[1].id)).data?.map((f) => omit(f, ['id']));
+      const table2Fields = (await getFields(tables[2].id)).data?.map((f) => omit(f, ['id']));
+
+      // fields
+      const originalTable1Fields = table1.fields.map((f) => omit(f, ['id']));
+      const originalTable2Fields = table2.fields.map((f) => omit(f, ['id']));
+      expect(table1Fields).toEqual(originalTable1Fields);
+      expect(table2Fields).toEqual(originalTable2Fields);
+    });
+  });
 });
diff --git a/apps/nextjs-app/src/features/app/base/ChatPage/ChatPage.tsx b/apps/nextjs-app/src/features/app/base/ChatPage/ChatPage.tsx
new file mode 100644
index 0000000000..4e659b1a49
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/base/ChatPage/ChatPage.tsx
@@ -0,0 +1,72 @@
+import { useQuery } from '@tanstack/react-query';
+import { getPublishedTemplateCategoryList, getPublishedTemplateList } from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config';
+import { useBaseId } from '@teable/sdk/hooks';
+import { cn } from '@teable/ui-lib/shadcn';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ChatContainerRef } from '../../components/ai-chat/panel/ChatContainer';
+import { PanelContainer } from '../../components/ai-chat/panel/PanelContainer';
+import { useChatPanelStore } from '../../components/ai-chat/store/useChatPanelStore';
+import { PromptBox } from './PromptBox';
+import { Template } from './Template';
+
+const DEFAULT_PANEL_WIDTH = '400px';
+
+export const ChatPage = () => {
+  const { t } = useTranslation(['common']);
+  const { data: TemplateCategoryList } = useQuery({
+    queryKey: ReactQueryKeys.templateCategoryList(),
+    queryFn: () => getPublishedTemplateCategoryList().then((data) => data.data),
+  });
+
+  const baseId = useBaseId();
+  const chatContainerRef = useRef<ChatContainerRef>(null);
+
+  const { isVisible, close, updateWidth } = useChatPanelStore();
+
+  useEffect(() => {
+    close();
+    updateWidth(DEFAULT_PANEL_WIDTH);
+  }, [close, updateWidth]);
+
+  const { data: TemplateList } = useQuery({
+    queryKey: ReactQueryKeys.templateList(),
+    queryFn: () => getPublishedTemplateList().then((data) => data.data),
+  });
+
+  return (
+    <div className="flex size-full flex-col overflow-auto">
+      <div className="mt-8 flex flex-col justify-center gap-4 py-16 text-center">
+        <h1 className={cn('px-4 text-3xl font-bold mt-8 lg:text-5xl md:text-5xl sm:text-4xl')}>
+          {t('template.aiTitle')}
+        </h1>
+
+        <p className="px-6">{t('template.aiSubTitle')}</p>
+      </div>
+
+      <div className="flex h-full flex-col">
+        <PromptBox
+          onEnter={(text) => {
+            chatContainerRef.current?.setInputValue(text);
+            setTimeout(() => {
+              chatContainerRef.current?.submit();
+            }, 100);
+          }}
+        />
+        <Template initialTemplates={TemplateList || []} categories={TemplateCategoryList || []} />
+      </div>
+
+      {baseId && (
+        <div
+          className={cn('fixed top-0 right-0 flex h-full bg-card overflow-hidden max-w-[60%]', {
+            'opacity-0 size-0': !isVisible,
+            'opacity-100 z-50': isVisible,
+          })}
+        >
+          <PanelContainer ref={chatContainerRef} baseId={baseId} maxWidth="100%" />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/base/ChatPage/PromptBox.tsx b/apps/nextjs-app/src/features/app/base/ChatPage/PromptBox.tsx
new file mode 100644
index 0000000000..4f1e5de41c
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/base/ChatPage/PromptBox.tsx
@@ -0,0 +1,522 @@
+import { ChevronRight, Plus } from '@teable/icons';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@teable/ui-lib/shadcn';
+import { CornerDownRight } from 'lucide-react';
+import { useTranslation } from 'next-i18next';
+import React, { useState } from 'react';
+import { useChatPanelStore } from '../../components/ai-chat/store/useChatPanelStore';
+
+interface IPromptBoxProps {
+  onEnter: (text: string) => void;
+}
+
+export const PromptBox: React.FC<IPromptBoxProps> = ({ onEnter }) => {
+  const { t } = useTranslation(['common']);
+  const [prompt, setPrompt] = useState('');
+  const { open } = useChatPanelStore();
+  const suggestions = [
+    {
+      title: t('common:template.promptBox.ideasList.crm.title'),
+      subPrompt: [
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForArtists.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForArtists.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForRealEstate.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForRealEstate.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForLawyers.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForLawyers.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForPhotographers.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForPhotographers.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForHealthcare.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForHealthcare.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForInfluencers.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForInfluencers.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForWeddingPlanners.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForWeddingPlanners.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForFitnessTrainers.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForFitnessTrainers.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForMusicians.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForMusicians.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.crm.crmForConstruction.title'),
+          prompt: t('common:template.promptBox.ideasList.crm.crmForConstruction.prompt'),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.devProductivity.title'),
+      subPrompt: [
+        {
+          title: t('common:template.promptBox.ideasList.devProductivity.codeReviewTracker.title'),
+          prompt: t('common:template.promptBox.ideasList.devProductivity.codeReviewTracker.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.devProductivity.bugTrackingSystem.title'),
+          prompt: t('common:template.promptBox.ideasList.devProductivity.bugTrackingSystem.prompt'),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.devProductivity.sprintPlanningDashboard.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.devProductivity.sprintPlanningDashboard.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.devProductivity.apiDocumentationManager.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.devProductivity.apiDocumentationManager.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.devProductivity.techDebtTracker.title'),
+          prompt: t('common:template.promptBox.ideasList.devProductivity.techDebtTracker.prompt'),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.devProductivity.developerOnboardingSystem.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.devProductivity.developerOnboardingSystem.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.educational.title'),
+      subPrompt: [
+        {
+          title: t(
+            'common:template.promptBox.ideasList.educational.studentPerformanceTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.educational.studentPerformanceTracker.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.educational.courseContentManagement.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.educational.courseContentManagement.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.educational.onlineLearningPlatform.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.educational.onlineLearningPlatform.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.educational.researchProjectManager.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.educational.researchProjectManager.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.educational.schoolAdministrationSystem.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.educational.schoolAdministrationSystem.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.educational.trainingProgramTracker.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.educational.trainingProgramTracker.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.personalFinance.title'),
+      subPrompt: [
+        {
+          title: t(
+            'common:template.promptBox.ideasList.personalFinance.investmentPortfolioTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.personalFinance.investmentPortfolioTracker.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.personalFinance.budgetManagementSystem.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.personalFinance.budgetManagementSystem.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.personalFinance.debtPayoffPlanner.title'),
+          prompt: t('common:template.promptBox.ideasList.personalFinance.debtPayoffPlanner.prompt'),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.personalFinance.retirementPlanningDashboard.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.personalFinance.retirementPlanningDashboard.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.personalFinance.taxPreparationOrganizer.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.personalFinance.taxPreparationOrganizer.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.personalFinance.sideHustleRevenueTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.personalFinance.sideHustleRevenueTracker.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.productivity.title'),
+      subPrompt: [
+        {
+          title: t('common:template.promptBox.ideasList.productivity.taskManagementSystem.title'),
+          prompt: t('common:template.promptBox.ideasList.productivity.taskManagementSystem.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.productivity.habitTrackingDashboard.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.productivity.habitTrackingDashboard.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.productivity.timeBlockingPlanner.title'),
+          prompt: t('common:template.promptBox.ideasList.productivity.timeBlockingPlanner.prompt'),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.productivity.goalAchievementTracker.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.productivity.goalAchievementTracker.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.productivity.energyManagementSystem.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.productivity.energyManagementSystem.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.productivity.digitalMinimalismTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.productivity.digitalMinimalismTracker.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.healthAndWellness.title'),
+      subPrompt: [
+        {
+          title: t(
+            'common:template.promptBox.ideasList.healthAndWellness.fitnessProgressTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.healthAndWellness.fitnessProgressTracker.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.healthAndWellness.nutritionAndMealPlanning.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.healthAndWellness.nutritionAndMealPlanning.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.healthAndWellness.mentalHealthJournal.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.healthAndWellness.mentalHealthJournal.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.healthAndWellness.sleepOptimizationSystem.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.healthAndWellness.sleepOptimizationSystem.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.healthAndWellness.medicalRecordsManager.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.healthAndWellness.medicalRecordsManager.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.healthAndWellness.wellnessChallengeTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.healthAndWellness.wellnessChallengeTracker.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.contentGenerationAndEditing.title'),
+      subPrompt: [
+        {
+          title: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.blogContentPipeline.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.blogContentPipeline.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.socialMediaContentCalendar.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.socialMediaContentCalendar.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.videoProductionTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.videoProductionTracker.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.podcastManagementSystem.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.podcastManagementSystem.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.newsletterCampaignManager.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.newsletterCampaignManager.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.creativeWritingProjectTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.contentGenerationAndEditing.creativeWritingProjectTracker.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.travelPlanning.title'),
+      subPrompt: [
+        {
+          title: t(
+            'common:template.promptBox.ideasList.travelPlanning.tripItineraryOrganizer.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.travelPlanning.tripItineraryOrganizer.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.travelPlanning.travelExpenseTracker.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.travelPlanning.travelExpenseTracker.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.travelPlanning.travelExperienceJournal.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.travelPlanning.travelExperienceJournal.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.travelPlanning.businessTravelManager.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.travelPlanning.businessTravelManager.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.travelPlanning.groupTravelCoordinator.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.travelPlanning.groupTravelCoordinator.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.travelPlanning.travelPlanningResearchHub.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.travelPlanning.travelPlanningResearchHub.prompt'
+          ),
+        },
+      ],
+    },
+    {
+      title: t('common:template.promptBox.ideasList.entertainment.title'),
+      subPrompt: [
+        {
+          title: t('common:template.promptBox.ideasList.entertainment.movieAndTvShowTracker.title'),
+          prompt: t(
+            'common:template.promptBox.ideasList.entertainment.movieAndTvShowTracker.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.entertainment.bookReadingProgress.title'),
+          prompt: t('common:template.promptBox.ideasList.entertainment.bookReadingProgress.prompt'),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.entertainment.gamingAchievementTracker.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.entertainment.gamingAchievementTracker.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.entertainment.musicDiscoveryAndOrganization.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.entertainment.musicDiscoveryAndOrganization.prompt'
+          ),
+        },
+        {
+          title: t(
+            'common:template.promptBox.ideasList.entertainment.eventAndConcertPlanner.title'
+          ),
+          prompt: t(
+            'common:template.promptBox.ideasList.entertainment.eventAndConcertPlanner.prompt'
+          ),
+        },
+        {
+          title: t('common:template.promptBox.ideasList.entertainment.hobbyProjectManager.title'),
+          prompt: t('common:template.promptBox.ideasList.entertainment.hobbyProjectManager.prompt'),
+        },
+      ],
+    },
+  ] as const;
+  return (
+    <div className="mx-auto flex w-full justify-center px-4 sm:px-6 lg:px-8">
+      <div className="shadow-black/6 w-full max-w-3xl rounded-2xl border bg-card p-4 text-left shadow-sm">
+        <div className="relative space-y-2 rounded-2xl bg-muted px-6 py-3">
+          <textarea
+            id="prompt-box"
+            className="h-[60px] w-full resize-none bg-muted text-sm focus:outline-none focus:ring-0"
+            placeholder={t('common:template.promptBox.placeholder')}
+            rows={3}
+            value={prompt}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.stopPropagation();
+                e.preventDefault();
+                onEnter(prompt);
+                open();
+              }
+            }}
+            onChange={(e) => setPrompt(e.target.value)}
+          />
+
+          <div className="flex items-center justify-between">
+            {/* Plus Icon */}
+            <Plus className="size-5 opacity-0" strokeWidth={1.5} />
+
+            {/* Start Button */}
+            <Button
+              variant={'ghost'}
+              size={'xs'}
+              className="flex items-center gap-2 rounded-lg text-secondary-foreground hover:bg-muted-foreground/5"
+              onClick={() => {
+                onEnter(prompt);
+                open();
+              }}
+            >
+              <span className="text-sm">{t('common:template.promptBox.start')}</span>
+              <CornerDownRight className="size-5" strokeWidth={1.5} />
+            </Button>
+          </div>
+        </div>
+
+        <div className="mt-4 space-y-2.5">
+          <p className="text-sm text-card-foreground/30 dark:text-card/30">
+            {t('common:template.promptBox.ideas')}
+          </p>
+
+          <div className="flex flex-wrap gap-2">
+            {suggestions.map((suggestion) => (
+              <DropdownMenu key={suggestion.title}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={'ghost'}
+                    size={'xs'}
+                    className="bg-sc flex items-center gap-1 rounded-md bg-secondary/50 p-1 py-1.5 text-xs transition-colors"
+                  >
+                    <ChevronRight className="size-3" />
+                    <span className="text-xs">{suggestion.title}</span>
+                  </Button>
+                </DropdownMenuTrigger>
+
+                <DropdownMenuContent className="w-56" align="start">
+                  {suggestion.subPrompt.map((subPrompt) => (
+                    <DropdownMenuItem
+                      key={subPrompt.title}
+                      onClick={() => {
+                        setPrompt(subPrompt.prompt);
+                      }}
+                    >
+                      <span className="text-xs text-secondary-foreground">{subPrompt.title}</span>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/base/ChatPage/Template.tsx b/apps/nextjs-app/src/features/app/base/ChatPage/Template.tsx
new file mode 100644
index 0000000000..9dc1aa63f6
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/base/ChatPage/Template.tsx
@@ -0,0 +1,189 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import type { ITemplateVo } from '@teable/openapi';
+import { getBaseById } from '@teable/openapi';
+import {
+  cn,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@teable/ui-lib';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import React, { useState, useEffect } from 'react';
+import { TemplateModal } from '../../components/space/template';
+import { TemplateContext } from '../../components/space/template/context';
+import { TemplateCard } from '../../components/space/template/TemplateCard';
+import { TemplateDetail } from '../../components/space/template/TemplateDetail';
+
+interface ITemplateCategoryListVo {
+  id: string;
+  name: string;
+  order: number;
+}
+
+interface TemplateCategory extends ITemplateCategoryListVo {
+  image?: string;
+}
+
+export interface TemplateType extends ITemplateVo {
+  category?: TemplateCategory;
+}
+
+interface TemplateProps {
+  initialTemplates: TemplateType[];
+  categories: ITemplateCategoryListVo[];
+}
+
+export const Template: React.FC<TemplateProps> = ({ initialTemplates: templates, categories }) => {
+  const [displayCount, setDisplayCount] = useState(4);
+  const [hasMore, setHasMore] = useState(templates.length > 4);
+  const [activeCategory, setActiveCategory] = useState('all');
+  const { t } = useTranslation(['common', 'space']);
+  const [open, setOpen] = useState(false);
+  const [currentTemplateId, setCurrentTemplateId] = useState<string | null>(null);
+  // Generate dynamic category filters based on actual data
+  const categoryFilters = React.useMemo(() => {
+    const baseCats = [{ id: 'all', name: 'All', icon: null }];
+
+    const uniqueCategories = categories.map((cat) => ({
+      id: cat.id,
+      name: cat.name,
+    }));
+
+    return [...baseCats, ...uniqueCategories];
+  }, [categories]);
+
+  // Filter templates by category
+  const filteredTemplates = React.useMemo(() => {
+    if (activeCategory === 'all') {
+      return templates;
+    }
+    return templates.filter((template) => template.categoryId === activeCategory);
+  }, [templates, activeCategory]);
+
+  // Load more templates
+  const handleLoadMore = () => {
+    // Increase display count by 4 (1 more row)
+    const newCount = displayCount + 4;
+    setDisplayCount(newCount);
+
+    // Check if we've shown all templates
+    if (newCount >= filteredTemplates.length) {
+      setHasMore(false);
+    }
+  };
+
+  const displayedTemplates = filteredTemplates.slice(0, displayCount);
+
+  const router = useRouter();
+  const baseId = router.query.baseId as string;
+
+  const { data: baseInfo } = useQuery({
+    queryKey: ['baseInfo', baseId],
+    queryFn: () => getBaseById(baseId),
+    enabled: !!baseId,
+  });
+
+  const spaceId = baseInfo?.data.spaceId as string;
+
+  // Update hasMore when category changes
+  useEffect(() => {
+    setDisplayCount(4);
+    setHasMore(filteredTemplates.length > 4);
+  }, [activeCategory, filteredTemplates.length]);
+
+  if (templates.length === 0) {
+    return (
+      <div className="flex w-full items-center justify-center py-20">
+        <div className="text-center">
+          <div className="mb-2 dark:text-zinc-400">{t('common:template.noTemplates')}</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <TemplateContext.Provider value={{ spaceId }}>
+      <div className="relative mx-auto flex w-full max-w-[1158px] flex-col items-center justify-start gap-2 p-4 sm:px-6 lg:px-8">
+        {/* Title */}
+        <div className="flex items-start justify-start self-stretch">
+          <h1 className="text-2xl font-bold">{t('common:template.templateTitle')}</h1>
+        </div>
+
+        {/* Filter and Sort Header */}
+        <div className="flex w-full shrink-0 grow-0 flex-col justify-around overflow-hidden sm:flex-row">
+          {/* Category Filters */}
+          <div className="flex flex-1 shrink-0 flex-wrap justify-start gap-1 overflow-auto">
+            {categoryFilters.map((category) => (
+              <Button
+                key={category.id}
+                variant="ghost"
+                size="xs"
+                onClick={() => setActiveCategory(category.id)}
+                className={cn(
+                  'flex justify-center items-center relative gap-1 px-3 py-2 rounded-lg border transition-all duration-200 text-card-foreground bg-card',
+                  {
+                    'text-card-foreground bg-secondary': activeCategory === category.id,
+                  }
+                )}
+              >
+                <p className="text-left text-xs">{category.name}</p>
+              </Button>
+            ))}
+          </div>
+
+          <TemplateModal spaceId={spaceId}>
+            <Button variant="ghost" size="sm">
+              <p className="shrink-0 grow-0 text-left text-xs">{t('common:template.browseAll')}</p>
+            </Button>
+          </TemplateModal>
+        </div>
+
+        {/* Templates Grid */}
+        <div className="flex shrink-0 grow-0 flex-col items-start justify-start gap-5 self-stretch">
+          <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {displayedTemplates.map((template) => (
+              <TemplateCard
+                key={template.id}
+                template={template}
+                onClickTemplateCardHandler={() => {
+                  setCurrentTemplateId(template.id);
+                  setOpen(true);
+                }}
+              />
+            ))}
+          </div>
+        </div>
+
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="flex h-[85%] max-w-[80%] flex-col gap-y-1 p-0">
+            <DialogHeader className="flex w-full border-b p-3">
+              <DialogTitle>{t('space:template.title')}</DialogTitle>
+              <DialogDescription>{t('space:template.description')}</DialogDescription>
+            </DialogHeader>
+            {currentTemplateId && <TemplateDetail templateId={currentTemplateId} />}
+          </DialogContent>
+        </Dialog>
+
+        {/* Load More Button */}
+        {hasMore && (
+          <div className="flex shrink-0 grow-0 flex-col items-start justify-start">
+            <Button size="sm" variant="ghost" onClick={handleLoadMore}>
+              <p className="shrink-0 grow-0 text-left text-xs">{t('common:template.loadMore')}</p>
+            </Button>
+          </div>
+        )}
+
+        {!hasMore && filteredTemplates.length > 0 && (
+          <div className="mt-4 text-center text-sm text-[#4c5564]">
+            {t('common:template.allTemplatesLoaded')}
+          </div>
+        )}
+      </div>
+    </TemplateContext.Provider>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/base/ChatPage/index.ts b/apps/nextjs-app/src/features/app/base/ChatPage/index.ts
new file mode 100644
index 0000000000..736d5cf638
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/base/ChatPage/index.ts
@@ -0,0 +1 @@
+export * from './ChatPage';
diff --git a/apps/nextjs-app/src/features/app/base/CommunityPage.tsx b/apps/nextjs-app/src/features/app/base/CommunityPage.tsx
new file mode 100644
index 0000000000..9fe454117f
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/base/CommunityPage.tsx
@@ -0,0 +1,38 @@
+import { Trans, useTranslation } from 'next-i18next';
+import { tableConfig } from '@/features/i18n/table.config';
+
+export const CommunityPage = () => {
+  const { t } = useTranslation(tableConfig.i18nNamespaces);
+  return (
+    <div className="h-full flex-col md:flex">
+      <div className="flex h-full flex-1 flex-col gap-2 lg:gap-4">
+        <div className="items-center justify-between space-y-2 px-8 pb-2 pt-6 lg:flex">
+          <h2 className="text-3xl font-bold tracking-tight">{t('table:welcome.title')}</h2>
+        </div>
+        <div className="flex h-full flex-col items-center justify-center p-4">
+          <ul className="mb-4 space-y-2 text-left">
+            <li>{t('table:welcome.description')}</li>
+            <li>
+              <Trans
+                ns="table"
+                i18nKey="welcome.help"
+                components={{
+                  HelpCenter: (
+                    <a
+                      href={t('help.mainLink')}
+                      className="text-blue-500 hover:text-blue-700"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {t('table:welcome.helpCenter')}
+                    </a>
+                  ),
+                }}
+              ></Trans>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/blocks/admin/template/TemplatePage.tsx b/apps/nextjs-app/src/features/app/blocks/admin/template/TemplatePage.tsx
index e1843d0089..107303dcdc 100644
--- a/apps/nextjs-app/src/features/app/blocks/admin/template/TemplatePage.tsx
+++ b/apps/nextjs-app/src/features/app/blocks/admin/template/TemplatePage.tsx
@@ -15,7 +15,7 @@ export const TemplatePage = () => {
     },
   });
   return (
-    <div className="flex size-full flex-col px-8 py-6">
+    <div className="flex size-full flex-col overflow-auto px-8 py-6">
       <div className="flex items-center justify-between p-2">
         <div className="text-2xl font-semibold">{t('settings.templateAdmin.title')}</div>
         <Button variant="outline" onClick={() => createTemplateFn({})}>
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/AiSuggestionControl.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/AiSuggestionControl.tsx
new file mode 100644
index 0000000000..e829fcff00
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/AiSuggestionControl.tsx
@@ -0,0 +1,123 @@
+import { useMutation } from '@tanstack/react-query';
+import { Undo2, Redo2 } from '@teable/icons';
+import { undo, McpToolInvocationName, redo } from '@teable/openapi';
+import { Spin } from '@teable/ui-lib/base';
+import { Button, useToast } from '@teable/ui-lib/shadcn';
+import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useChatControlStore } from '../store/useChatControl';
+
+export const AiSuggestionControl = () => {
+  const { t } = useTranslation(['table', 'sdk']);
+  const [undoAccessible, setUndoAccessible] = useState(true);
+  const { toast } = useToast();
+  const [undoLoading, setUndoLoading] = useState(false);
+  const [redoLoading, setRedoLoading] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout>();
+
+  const { mutate: undoFn } = useMutation({
+    mutationFn: ({ tableId }: { tableId: string }) => undo(tableId),
+  });
+
+  const { mutate: redoFn } = useMutation({
+    mutationFn: ({ tableId }: { tableId: string }) => redo(tableId),
+  });
+
+  const { toolCallInfo, setToolCallInfo } = useChatControlStore();
+
+  const { tableId, toolName } = toolCallInfo;
+
+  const refreshTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      setToolCallInfo(null, null);
+    }, 5000);
+  }, [setToolCallInfo]);
+
+  const revokeHandle = async () => {
+    toast({
+      title: t('sdk:undoRedo.undoing'),
+    });
+    setUndoLoading(true);
+    if (tableId) {
+      await undoFn({ tableId });
+      refreshTimer();
+    }
+    setUndoLoading(false);
+    toast({
+      title: t('sdk:undoRedo.undoSucceed'),
+    });
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const redoHandle = async () => {
+    toast({
+      title: t('sdk:undoRedo.redoing'),
+    });
+    setRedoLoading(true);
+    if (tableId) {
+      await redoFn({ tableId });
+      refreshTimer();
+    }
+    setRedoLoading(false);
+    toast({
+      title: t('sdk:undoRedo.redoSucceed'),
+    });
+  };
+
+  const shouldControl = useMemo(() => {
+    const notAllowUndoRedoActions = [
+      McpToolInvocationName.CreateTable,
+      McpToolInvocationName.DeleteTable,
+    ];
+    return tableId && !notAllowUndoRedoActions.includes(toolName as McpToolInvocationName);
+  }, [tableId, toolName]);
+
+  useEffect(() => {
+    if (shouldControl) {
+      refreshTimer();
+    }
+  }, [shouldControl, refreshTimer]);
+
+  return (
+    shouldControl && (
+      <div className="absolute bottom-44 left-1/2 z-[51] flex -translate-x-1/2 gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={async () => {
+            await revokeHandle();
+            setUndoAccessible(false);
+          }}
+          disabled={!undoAccessible}
+        >
+          {t('table:aiChat.control.undo')}
+          {undoLoading && <Spin className="size-4" />}
+          <Undo2 className="size-4" />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={async () => {
+            await redoHandle();
+            setUndoAccessible(true);
+          }}
+          disabled={undoAccessible}
+        >
+          {t('table:aiChat.control.redo')}
+          {redoLoading && <Spin />}
+          <Redo2 className="size-4 " />
+        </Button>
+      </div>
+    )
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/Message.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/Message.tsx
index 0e008ea447..30fabf8f6f 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/components/Message.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/Message.tsx
@@ -1,8 +1,7 @@
 import type { UseChatHelpers } from '@ai-sdk/react';
-import { UserAvatar } from '@teable/sdk/components';
-import { useSession } from '@teable/sdk/hooks';
 import { cn } from '@teable/ui-lib/shadcn';
-import { BotIcon } from 'lucide-react';
+import { TeableLogo } from '@/components/TeableLogo';
+import { useBrand } from '@/features/app/hooks/useBrand';
 import { LoadingDot } from './LoadingDot';
 import { ReasonMessagePart } from './message-part/ReasonMessagePart';
 import { TextMessagePart } from './message-part/TextMessagePart';
@@ -59,15 +58,17 @@ export const MessageWrapper = ({
   message,
   children,
 }: IMessage & { children: React.ReactNode | React.ReactNode[] }) => {
-  const { user } = useSession();
+  const { brandName } = useBrand();
+
   return (
     <div className="group/message" data-role={message.role}>
+      {message.role === 'assistant' && (
+        <div className="flex items-center gap-2 pb-1">
+          <TeableLogo className="size-4 text-black" />
+          <span className="text-sm font-medium">{brandName}</span>
+        </div>
+      )}
       <div className="flex gap-4 group-data-[role=user]/message:ml-14">
-        {message.role === 'assistant' && (
-          <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-background ring-1 ring-border">
-            <BotIcon className="size-4" />
-          </div>
-        )}
         <div
           className={cn('flex w-full overflow-hidden flex-col gap-4', {
             'w-fit ml-auto overflow-hidden rounded-xl !bg-muted px-3 py-2': message.role === 'user',
@@ -75,11 +76,6 @@ export const MessageWrapper = ({
         >
           {children}
         </div>
-        {message.role === 'user' && (
-          <div className="mt-1 flex size-7 shrink-0 items-center justify-center rounded-full bg-background ring-1 ring-border">
-            <UserAvatar name={user?.name} avatar={user?.avatar} />
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageContext.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageContext.tsx
index e99172f762..a111a3da16 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageContext.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageContext.tsx
@@ -62,7 +62,7 @@ export const MessageContext = () => {
             role="combobox"
             aria-expanded={open}
             size="xs"
-            className="h-6 justify-between gap-0.5 border border-zinc-200 bg-muted px-1.5 font-normal text-muted-foreground dark:border-zinc-700"
+            className="h-6 justify-between gap-0.5 border bg-slate-100 px-1.5 font-normal text-muted-foreground dark:border-zinc-700 dark:bg-zinc-700"
           >
             <span className="text-xs">@</span>
             {!context?.tables?.length && (
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageInput.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageInput.tsx
index 3eab5e5ce6..f7a70d0b9d 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageInput.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/MessageInput.tsx
@@ -1,15 +1,17 @@
-import type { UseChatHelpers } from '@ai-sdk/react';
-import { ArrowUpRight, Plus } from '@teable/icons';
+import type { UseChatHelpers, Message } from '@ai-sdk/react';
+import { Plus, ArrowUp, Square } from '@teable/icons';
+import type { IToolInvocationUIPart } from '@teable/openapi';
 import { useBase } from '@teable/sdk/hooks';
 import { Button, cn, Textarea } from '@teable/ui-lib/shadcn';
-import { PauseIcon } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
 import { LoadingDot } from './LoadingDot';
 import { MessageContext } from './MessageContext';
 import { ModelSelector } from './ModelSelector';
 
 export const MessageInput = ({
+  messages,
   modelKey,
   models,
   modelLoading,
@@ -22,6 +24,7 @@ export const MessageInput = ({
   setMessages,
   handleSubmit,
 }: {
+  messages: Message[];
   modelKey: string;
   models: { modelKey: string; isInstance?: boolean }[];
   modelLoading?: boolean;
@@ -42,7 +45,14 @@ export const MessageInput = ({
 
   const hasRequesting = ['submitted', 'streaming'].includes(status);
 
-  const disabledSubmit = input.length === 0 || !hasModel || hasRequesting;
+  const hasUnCallTools = useMemo(() => {
+    return messages
+      ?.map((m) => m.parts)
+      .flat()
+      .some((p) => (p as IToolInvocationUIPart)?.toolInvocation?.state === 'call');
+  }, [messages]);
+
+  const disabledSubmit = input.length === 0 || !hasModel || hasRequesting || hasUnCallTools;
 
   const onLinkIntegration = () => {
     router.push({
@@ -52,72 +62,75 @@ export const MessageInput = ({
   };
 
   return (
-    <div className="rounded-lg border bg-muted px-2 py-1">
-      <MessageContext />
-      <Textarea
-        placeholder={t('table:aiChat.inputPlaceholder')}
-        value={input}
-        onChange={(event) => setInput(event.target.value)}
-        className={cn(
-          'h-20 resize-none border-none bg-transparent px-0 text-[13px] shadow-none focus-visible:ring-0',
-          textareaClassName
-        )}
-        rows={2}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
-            event.preventDefault();
+    <div className="px-2">
+      <div className="rounded-lg border p-2">
+        <MessageContext />
+        <Textarea
+          placeholder={t('table:aiChat.inputPlaceholder')}
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          className={cn(
+            'h-20 resize-none border-none bg-transparent px-0 text-[13px] shadow-none focus-visible:ring-0',
+            textareaClassName
+          )}
+          rows={2}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+              event.preventDefault();
 
-            if (!disabledSubmit) {
-              handleSubmit();
+              if (!disabledSubmit) {
+                handleSubmit();
+              }
             }
-          }
-        }}
-      />
-      <div className="flex h-8 items-center justify-between gap-2 pb-1">
-        {hasModel ? (
-          <ModelSelector models={models} value={modelKey} onValueChange={setModelKey} />
-        ) : modelLoading ? (
-          <LoadingDot dotClassName="size-0.5" />
-        ) : (
-          <div className="flex items-center gap-2 text-xs text-destructive">
+          }}
+        />
+        <div className="flex h-8 items-center justify-between gap-2 pb-1">
+          {hasModel ? (
+            <ModelSelector models={models} value={modelKey} onValueChange={setModelKey} />
+          ) : modelLoading ? (
+            <LoadingDot dotClassName="size-0.5" />
+          ) : (
+            <div className="flex items-center gap-2 text-xs text-destructive">
+              <Button
+                variant="outline"
+                size="xs"
+                className="h-5 px-[2px] text-xs text-muted-foreground"
+                onClick={(e) => {
+                  e.preventDefault();
+                  onLinkIntegration();
+                }}
+              >
+                <Plus className="size-4" />
+              </Button>
+              {t('table:aiChat.noModel')}
+            </div>
+          )}
+          {hasRequesting ? (
             <Button
-              variant="outline"
-              size="xs"
-              className="h-5 px-[2px] text-xs text-muted-foreground"
-              onClick={(e) => {
-                e.preventDefault();
-                onLinkIntegration();
+              size={'xs'}
+              onClick={(event) => {
+                event.preventDefault();
+                stop();
+                setMessages((messages) => messages);
               }}
+              className="h-7 w-8"
             >
-              <Plus className="size-4" />
+              <Square className="size-3" />
             </Button>
-            {t('table:aiChat.noModel')}
-          </div>
-        )}
-        {hasRequesting ? (
-          <Button
-            size={'xs'}
-            onClick={(event) => {
-              event.preventDefault();
-              stop();
-              setMessages((messages) => messages);
-            }}
-          >
-            <PauseIcon size={14} />
-          </Button>
-        ) : (
-          <Button
-            size={'xs'}
-            className="h-auto py-1"
-            onClick={(event) => {
-              event.preventDefault();
-              handleSubmit();
-            }}
-            disabled={disabledSubmit}
-          >
-            <ArrowUpRight className="size-4" />
-          </Button>
-        )}
+          ) : (
+            <Button
+              size={'xs'}
+              className="w-8 py-1"
+              onClick={(event) => {
+                event.preventDefault();
+                handleSubmit();
+              }}
+              disabled={disabledSubmit}
+            >
+              <ArrowUp className="size-4" />
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/Messages.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/Messages.tsx
index 563de1bd86..8ff70c3b68 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/components/Messages.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/Messages.tsx
@@ -1,6 +1,7 @@
 import type { UseChatHelpers } from '@ai-sdk/react';
 import { isEqual } from 'lodash';
 import { useState, useCallback, useEffect, memo } from 'react';
+import { AiSuggestionControl } from './AiSuggestionControl';
 import { LoadingDot } from './LoadingDot';
 import { Message, MessageWrapper } from './Message';
 import type { IMessageMeta } from './types';
@@ -42,33 +43,37 @@ export const PureMessages = ({ messages, status, messageMetaMap }: IMessages) =>
   }, [messagesContainerRef]);
 
   return (
-    <div
-      className="flex min-w-0 flex-1 flex-col gap-4 overflow-y-scroll px-4 py-8"
-      ref={messagesContainerRef}
-      onScroll={handleScroll}
-    >
-      {messages.map((message, i) => (
-        <Message
-          key={message.id}
-          message={message}
-          meta={messageMetaMap?.[message.id]}
-          isLoading={i === length - 1 && isStreaming}
-        />
-      ))}
-      {isLoadingAI && (
-        <MessageWrapper
-          message={{
-            id: 'thinking',
-            role: 'assistant',
-            content: 'Thinking...',
-            parts: [],
-          }}
-        >
-          <LoadingDot />
-        </MessageWrapper>
-      )}
-      <div ref={messagesEndRef} className="min-h-px min-w-[24px] shrink-0" />
-    </div>
+    <>
+      <div
+        className="relative flex min-w-0 flex-1 flex-col gap-4 overflow-y-scroll px-4 py-8"
+        ref={messagesContainerRef}
+        onScroll={handleScroll}
+      >
+        {messages.map((message, i) => (
+          <Message
+            key={message.id}
+            message={message}
+            meta={messageMetaMap?.[message.id]}
+            isLoading={i === length - 1 && isStreaming}
+          />
+        ))}
+        {isLoadingAI && (
+          <MessageWrapper
+            message={{
+              id: 'thinking',
+              role: 'assistant',
+              content: 'Thinking...',
+              parts: [],
+            }}
+          >
+            <LoadingDot />
+          </MessageWrapper>
+        )}
+        <div ref={messagesEndRef} className="min-h-px min-w-[24px] shrink-0" />
+      </div>
+
+      <AiSuggestionControl />
+    </>
   );
 };
 
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/Markdown.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/Markdown.tsx
index cda5494ba6..a43f46b557 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/Markdown.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/Markdown.tsx
@@ -66,6 +66,10 @@ const NonMemoizedMarkdown = ({
         },
         p(props) {
           const { children } = props;
+          const content = String(children).trim();
+          if (content === 'EOF' || content === '"EOF"') {
+            return null;
+          }
           return (
             // eslint-disable-next-line tailwindcss/enforces-shorthand
             <p className="!mb-2 !mt-2">{children}</p>
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/ToolMessagePart.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/ToolMessagePart.tsx
index aada9aa702..8e60be35d9 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/ToolMessagePart.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/ToolMessagePart.tsx
@@ -1,33 +1,61 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import type { UseChatHelpers } from '@ai-sdk/react';
-import { Check, ChevronDown } from '@teable/icons';
+import { ViewType } from '@teable/core';
+import { Check, X, LocateFixed } from '@teable/icons';
+import type { IToolInvocationUIPart, IUpdateRecordsToolParams } from '@teable/openapi';
 import { McpToolInvocationName } from '@teable/openapi';
+import { useTables, useView } from '@teable/sdk/hooks';
 import { Spin } from '@teable/ui-lib/base';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@teable/ui-lib/shadcn';
+import { cn, useToast } from '@teable/ui-lib/shadcn';
 import { isEqual } from 'lodash';
-import { ChevronRight } from 'lucide-react';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { memo, useMemo, useState } from 'react';
-import { Markdown } from './Markdown';
+import { memo, useContext, useMemo, useState } from 'react';
+import { useGridSearchStore } from '@/features/app/blocks/view/grid/useGridSearchStore';
+import { ChatContext } from '../../context/ChatContext';
+import { useMcpToolExecution } from '../../hooks/useMcpToolExecution';
+import { useChatControlStore } from '../../store/useChatControl';
+import { PreviewRender } from './preview/PreviewRender';
 
-interface IToolMessagePart {
+export interface IToolMessagePart {
   id: string;
   part: UseChatHelpers['messages'][number]['parts'][number] & {
     type: 'tool-invocation';
   };
+  mode?: 'manual' | 'agent';
 }
 
 export const PureToolMessagePart = ({ id, part }: IToolMessagePart) => {
   const { toolInvocation } = part;
 
-  const [isExpanded, setIsExpanded] = useState(false);
+  const { toast } = useToast();
+
   const { t } = useTranslation(['table']);
+  const [loading, setLoading] = useState(false);
+
+  const toolExecutionMap = useMcpToolExecution();
+
+  const { addToolResult } = useContext(ChatContext);
+
+  const needConfirm = toolInvocation.state === 'call';
+
+  const { gridRef, recordMap } = useGridSearchStore();
+
+  const { setToolCallInfo } = useChatControlStore();
+
+  const rejectedTool =
+    (toolInvocation as unknown as IToolInvocationUIPart['toolInvocation'])?.result
+      ?.toolCallStatus === 'rejected';
+
+  const shouldLocateDiffPosition = useMemo(() => {
+    const locatePositionActions = [
+      McpToolInvocationName.UpdateRecords,
+      McpToolInvocationName.DeleteRecords,
+    ];
+
+    return locatePositionActions.includes(toolInvocation.toolName as McpToolInvocationName);
+  }, [toolInvocation.toolName]);
 
   const toolName = useMemo(() => {
     switch (toolInvocation.toolName) {
@@ -35,6 +63,10 @@ export const PureToolMessagePart = ({ id, part }: IToolMessagePart) => {
         return t('aiChat.tool.getTableFields');
       case McpToolInvocationName.GetTablesMeta:
         return t('aiChat.tool.getTablesMeta');
+      case McpToolInvocationName.GetRecords:
+        return t('aiChat.tool.getRecords');
+      case McpToolInvocationName.GetTableViews:
+        return t('aiChat.tool.getTableViews');
       case McpToolInvocationName.SqlQuery:
         return t('aiChat.tool.sqlQuery');
       case McpToolInvocationName.GenerateScriptAction:
@@ -43,117 +75,239 @@ export const PureToolMessagePart = ({ id, part }: IToolMessagePart) => {
         return t('aiChat.tool.getScriptInput');
       case McpToolInvocationName.GetTeableApi:
         return t('aiChat.tool.getTeableApi');
+      case McpToolInvocationName.CreateTable:
+        return t('aiChat.tool.createTable');
+      case McpToolInvocationName.CreateViews:
+      case McpToolInvocationName.CreateView:
+        return t('aiChat.tool.createView');
+      case McpToolInvocationName.CreateFields:
+      case McpToolInvocationName.CreateField:
+        return t('aiChat.tool.createField');
+      case McpToolInvocationName.CreateRecords:
+        return t('aiChat.tool.createRecords');
+      case McpToolInvocationName.RunScripts:
+        return t('aiChat.tool.runScripts');
+
+      case McpToolInvocationName.UpdateTableName:
+        return t('aiChat.tool.updateTableName');
+      case McpToolInvocationName.UpdateField:
+        return t('aiChat.tool.updateField');
+      case McpToolInvocationName.UpdateRecords:
+        return t('aiChat.tool.updateRecords');
+      case McpToolInvocationName.DeleteFields:
+        return t('aiChat.tool.deleteField');
+      case McpToolInvocationName.DeleteTable:
+        return t('aiChat.tool.deleteTable');
+      case McpToolInvocationName.GetUpdateFieldsParams:
+        return t('aiChat.tool.getUpdateFieldsParams');
+      case McpToolInvocationName.UpdateViewName:
+        return t('aiChat.tool.updateViewName');
+      case McpToolInvocationName.DeleteView:
+        return t('aiChat.tool.deleteView');
+      case McpToolInvocationName.DeleteRecords:
+        return t('aiChat.tool.deleteRecords');
       default:
         return toolInvocation.toolName;
     }
   }, [toolInvocation.toolName, t]);
 
-  const isResult = toolInvocation.state === 'result';
+  const router = useRouter();
+  const currentTableId = router.query.tableId;
+  const currentBaseId = router.query.baseId;
 
-  return (
-    <Accordion
-      type="single"
-      collapsible
-      value={isExpanded ? 'expanded' : 'collapsed'}
-      onValueChange={(value) => {
-        setIsExpanded(value === 'expanded');
-      }}
-      className="w-full"
-    >
-      <AccordionItem
-        value="expanded"
-        className="font-sm rounded-lg border bg-neutral-50 px-2 dark:bg-neutral-900/80"
-      >
-        <AccordionTrigger
-          headerClassName="flex-1"
-          hiddenChevron
-          className="gap-1 py-2 text-xs font-normal text-muted-foreground hover:no-underline"
-        >
-          <div className="flex items-center gap-2">
-            {isExpanded ? <ChevronDown className="size-4" /> : <ChevronRight className="size-4" />}
-            <div>{toolName}</div>
-          </div>
-          <div className="flex items-center gap-2">
-            {isResult ? <Check className="size-4 text-green-500" /> : <Spin className="size-4" />}
-          </div>
-        </AccordionTrigger>
-        <AccordionContent>
-          <div className="space-y-2 px-3 text-muted-foreground">
-            <div className="space-y-1">
-              <div className="text-sm">{t('table:aiChat.tool.args')}: </div>
-              <ContentRenderer id={id} content={JSON.stringify(toolInvocation.args, null, 2)} />
-            </div>
-            {isResult && (
-              <div className="space-y-1">
-                <div className="text-sm">{t('table:aiChat.tool.result')}: </div>
-                <ToolsResultRenderer id={id} toolInvocation={toolInvocation} />
-              </div>
-            )}
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
+  const tables = useTables();
 
-const PureToolsResultRenderer = ({
-  id,
-  toolInvocation,
-}: {
-  id: string;
-  toolInvocation: IToolMessagePart['part']['toolInvocation'] & { state: 'result' };
-}) => {
-  const result = toolInvocation.result?.['content']?.[0]?.text;
+  const view = useView();
+
+  const tableIds = useMemo(() => {
+    return tables.map((table) => table.id);
+  }, [tables]);
 
-  const content = useMemo(() => {
+  /* eslint-disable sonarjs/cognitive-complexity */
+  const locatePosition = () => {
     switch (toolInvocation.toolName) {
-      case McpToolInvocationName.SqlQuery: {
-        let res = result;
-        try {
-          res = JSON.stringify(JSON.parse(result), null, 2);
-        } catch (error) {
-          console.error(error);
+      case McpToolInvocationName.UpdateRecords: {
+        const { updateRecordsRo, tableId } = toolInvocation.args as IUpdateRecordsToolParams;
+
+        if (tableId !== currentTableId && tableIds.includes(tableId)) {
+          router.push(
+            {
+              pathname: `/base/[baseId]/[tableId]/`,
+              query: {
+                baseId: currentBaseId,
+                tableId: tableId,
+              },
+            },
+            undefined,
+            {
+              shallow: Boolean(tableId),
+            }
+          );
         }
-        return res;
+
+        if (view?.type !== ViewType.Grid) {
+          toast({
+            title: t('aiChat.tool.tips.title'),
+            description: t('aiChat.tool.tips.description'),
+          });
+          return;
+        }
+
+        const { records } = updateRecordsRo;
+        const lastRecordId = records.map((record) => record.id).at(-1);
+        if (!lastRecordId) {
+          return;
+        }
+
+        for (const [key, value] of Object.entries(recordMap || {})) {
+          if (value?.id === lastRecordId) {
+            gridRef?.current?.scrollToItem([0, Number(key)]);
+          }
+        }
+        break;
       }
-      case McpToolInvocationName.GetTableFields:
-      case McpToolInvocationName.GetTablesMeta:
-        return result;
-      default:
-        return JSON.stringify(toolInvocation.result, null, 2);
-    }
-  }, [result, toolInvocation.result, toolInvocation.toolName]);
+      case McpToolInvocationName.DeleteRecords: {
+        const { recordIds, tableId } = toolInvocation.args;
+        const lastRecordId = recordIds.at(-1);
+        if (!lastRecordId) {
+          return;
+        }
 
-  return <ContentRenderer id={id} content={content} />;
-};
+        if (tableId !== currentTableId && tableIds.includes(tableId)) {
+          router.push(
+            {
+              pathname: `/base/[baseId]/[tableId]/`,
+              query: {
+                baseId: currentBaseId,
+                tableId: tableId,
+              },
+            },
+            undefined,
+            {
+              shallow: Boolean(tableId),
+            }
+          );
+        }
 
-const ToolsResultRenderer = memo(PureToolsResultRenderer, (prev, next) => {
-  if (prev.id !== next.id) return false;
-  if (isEqual(prev.toolInvocation, next.toolInvocation)) return true;
-  return false;
-});
+        for (const [key, value] of Object.entries(recordMap || {})) {
+          if (value?.id === lastRecordId) {
+            gridRef?.current?.scrollToItem([0, Number(key)]);
+          }
+        }
+        break;
+      }
+      case McpToolInvocationName.DeleteFields: {
+        break;
+      }
+      default: {
+        return;
+      }
+    }
+  };
 
-const ContentRenderer = ({ id, content }: { id: string; content: string }) => {
   return (
-    <Markdown
-      id={id}
-      className="p-0"
-      components={{
-        pre(props) {
-          const { children, ...rest } = props;
-          return (
-            <pre
-              {...rest}
-              style={{
-                padding: 0,
-              }}
-            >
-              {children}
-            </pre>
-          );
-        },
-      }}
-    >{`\`\`\`json\n${content}`}</Markdown>
+    <div className="flex flex-col">
+      <div className="flex justify-between gap-1 py-2 text-xs font-normal text-muted-foreground hover:no-underline">
+        <div className="flex items-center gap-2">
+          <div>{toolName}</div>
+        </div>
+        <div className="flex items-center gap-2">
+          {rejectedTool ? (
+            <X className="size-4 text-red-500" />
+          ) : loading ? (
+            <Spin className="size-4" />
+          ) : (
+            <div className="flex items-center gap-2">
+              {needConfirm && shouldLocateDiffPosition && (
+                <LocateFixed
+                  className="size-4 hover:opacity-80"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    locatePosition();
+                  }}
+                />
+              )}
+              <Check
+                className={cn('size-4 hover:opacity-80', {
+                  'text-green-500': !needConfirm,
+                  'cursor-pointer': needConfirm,
+                })}
+                onClick={async (e) => {
+                  e.stopPropagation();
+                  if (!needConfirm) {
+                    return;
+                  }
+                  setLoading(true);
+                  try {
+                    const { execute, callBack } = toolExecutionMap[toolInvocation.toolName];
+                    if (!execute || !callBack) {
+                      return;
+                    }
+                    const result = await execute(toolInvocation.args);
+                    callBack(result, toolInvocation.args);
+                    addToolResult({
+                      toolCallId: toolInvocation.toolCallId,
+                      result: {
+                        content: [
+                          {
+                            text: JSON.stringify(result),
+                            type: 'text',
+                          },
+                        ],
+                        toolCallStatus: 'success',
+                      },
+                    });
+                    setToolCallInfo(
+                      toolInvocation?.args?.tableId || null,
+                      toolInvocation.toolName as McpToolInvocationName
+                    );
+                  } catch (error) {
+                    addToolResult({
+                      toolCallId: toolInvocation.toolCallId,
+                      result: {
+                        content: [
+                          {
+                            text: `execute tool failed reason: ${JSON.stringify(error)}`,
+                            type: 'text',
+                          },
+                        ],
+                        toolCallStatus: 'error',
+                      },
+                    });
+                  }
+                  setLoading(false);
+                }}
+              />
+              {needConfirm && (
+                <X
+                  className={cn('size-4 hover:opacity-80', {
+                    'cursor-pointer': needConfirm,
+                  })}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    addToolResult({
+                      toolCallId: toolInvocation.toolCallId,
+                      result: {
+                        content: [
+                          {
+                            text: `reject to execute this tool.`,
+                            type: 'text',
+                          },
+                        ],
+                        toolCallStatus: 'rejected',
+                      },
+                    });
+                  }}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="space-y-2 border-l pl-3 text-muted-foreground">
+        <PreviewRender toolInvocation={toolInvocation} id={id} />
+      </div>
+    </div>
   );
 };
 
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/DefaultRender.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/DefaultRender.tsx
new file mode 100644
index 0000000000..528b3462ef
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/DefaultRender.tsx
@@ -0,0 +1,96 @@
+import { McpToolInvocationName } from '@teable/openapi';
+import { isEqual } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import { memo, useMemo } from 'react';
+import { Markdown } from '../Markdown';
+import type { IToolMessagePart } from '../ToolMessagePart';
+
+interface IDefaultRenderProps {
+  id: string;
+  toolInvocation: IToolMessagePart['part']['toolInvocation'] & { state: 'result' };
+}
+
+const ContentRenderer = ({ id, content }: { id: string; content: string }) => {
+  return (
+    <Markdown
+      id={id}
+      className="p-0"
+      components={{
+        pre(props) {
+          const { children, ...rest } = props;
+          return (
+            <pre
+              {...rest}
+              className="bg-card"
+              style={{
+                padding: 0,
+                backgroundColor: 'var(--card-background)',
+              }}
+            >
+              {children}
+            </pre>
+          );
+        },
+      }}
+    >{`\`\`\`json\n${content}`}</Markdown>
+  );
+};
+
+const PureToolsResultRenderer = ({
+  id,
+  toolInvocation,
+}: {
+  id: string;
+  toolInvocation: IToolMessagePart['part']['toolInvocation'] & { state: 'result' };
+}) => {
+  const result = toolInvocation.result?.['content']?.[0]?.text;
+
+  const content = useMemo(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.RunScripts:
+      case McpToolInvocationName.SqlQuery: {
+        let res = result;
+        try {
+          res = JSON.stringify(JSON.parse(result), null, 2);
+        } catch (error) {
+          console.error(error);
+        }
+        return res;
+      }
+      case McpToolInvocationName.GetTableFields:
+      case McpToolInvocationName.GetTablesMeta:
+        return result;
+      default:
+        return JSON.stringify(toolInvocation.result, null, 2);
+    }
+  }, [result, toolInvocation.result, toolInvocation.toolName]);
+
+  return <ContentRenderer id={id} content={content} />;
+};
+
+const ToolsResultRenderer = memo(PureToolsResultRenderer, (prev, next) => {
+  if (prev.id !== next.id) return false;
+  if (isEqual(prev.toolInvocation, next.toolInvocation)) return true;
+  return false;
+});
+
+export const DefaultRender = (props: IDefaultRenderProps) => {
+  const { id, toolInvocation } = props;
+  const { t } = useTranslation(['table']);
+  const isResult = toolInvocation.state === 'result';
+
+  return (
+    <>
+      <div className="space-y-1">
+        <div className="text-sm">{t('table:aiChat.tool.args')}: </div>
+        <ContentRenderer id={id} content={JSON.stringify(toolInvocation.args, null, 2)} />
+      </div>
+      {isResult && (
+        <div className="space-y-1">
+          <div className="text-sm">{t('table:aiChat.tool.result')}: </div>
+          <ToolsResultRenderer id={id} toolInvocation={toolInvocation} />
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ErrorFallback.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ErrorFallback.tsx
new file mode 100644
index 0000000000..6134f13a66
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ErrorFallback.tsx
@@ -0,0 +1,12 @@
+import { useTranslation } from 'next-i18next';
+
+export const ErrorFallback = () => {
+  const { t } = useTranslation(['table']);
+  return (
+    <div className="flex h-48 items-center justify-center rounded-md border border-dashed border-gray-300 bg-gray-50 p-4">
+      <div className="text-center text-sm text-gray-500">
+        {t('table:aiChat.fallback.previewLoadFailed')}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/GridPreview.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/GridPreview.tsx
new file mode 100644
index 0000000000..4d0f97fe40
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/GridPreview.tsx
@@ -0,0 +1,509 @@
+import { useQuery } from '@tanstack/react-query';
+import { generateFieldId } from '@teable/core';
+import type { FieldType, ILinkCellValue } from '@teable/core';
+import { getRecords, McpToolInvocationName } from '@teable/openapi';
+import type {
+  ICreateRecordsRo,
+  IDeleteRecordsToolParams,
+  IGetRecordsRo,
+  IUpdateRecordsRo,
+  IUpdateRecordsToolParams,
+} from '@teable/openapi';
+import type {
+  ICellItem,
+  IGridRef,
+  CombinedSelection,
+  ICell,
+  IRecordIndexMap,
+  IGridColumn,
+} from '@teable/sdk/components';
+import {
+  CellType,
+  Grid,
+  hexToRGBA,
+  useGridAsyncRecords,
+  useGridColumns,
+  useGridIcons,
+  useGridTheme,
+} from '@teable/sdk/components';
+import { useFields, useRowCount } from '@teable/sdk/hooks';
+import type { IFieldInstance, Record as IRecordInstance } from '@teable/sdk/model';
+import type { ForwardRefRenderFunction } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import type { IToolMessagePart } from '../ToolMessagePart';
+import { PreviewActionColorMap } from './constant';
+
+interface IGridPreviewProps {
+  hiddenFieldIds?: string[];
+  readonly?: boolean;
+  isMultiple?: boolean;
+  recordQuery?: IGetRecordsRo;
+  cellValue?: ILinkCellValue | ILinkCellValue[];
+  onChange?: (value?: ILinkCellValue[]) => void;
+  toolInvocation: IToolMessagePart['part']['toolInvocation'];
+}
+
+export interface IGridPreviewRef {
+  onReset: () => void;
+  onForceUpdate: () => void;
+  setSelection: (selection: CombinedSelection) => void;
+  scrollToItem: (position: [columnIndex: number, rowIndex: number]) => void;
+}
+
+const GridPreviewBase: ForwardRefRenderFunction<IGridPreviewRef, IGridPreviewProps> = (
+  props,
+  forwardRef
+) => {
+  const { recordQuery, hiddenFieldIds, toolInvocation } = props;
+  const rowCount = useRowCount() || 0;
+  useImperativeHandle(forwardRef, () => ({
+    onReset,
+    onForceUpdate,
+    setSelection: (selection: CombinedSelection) => {
+      gridRef.current?.setSelection(selection);
+    },
+    scrollToItem: (position: [columnIndex: number, rowIndex: number]) => {
+      gridRef.current?.scrollToItem(position);
+    },
+  }));
+
+  const theme = useGridTheme();
+  const customIcons = useGridIcons();
+  const { columns, cellValue2GridDisplay } = useGridColumns(false, hiddenFieldIds);
+
+  const allFields = useFields();
+  const fieldMap = allFields.reduce(
+    (acc, field) => {
+      acc[field.id] = field;
+      return acc;
+    },
+    {} as Record<string, IFieldInstance>
+  );
+
+  const fieldMapWithName = useMemo(() => {
+    return allFields.reduce(
+      (acc, field) => {
+        acc[field.id] = field;
+        acc[field.name] = field;
+        return acc;
+      },
+      {} as Record<string, IFieldInstance>
+    );
+  }, [allFields]);
+
+  const deleteRecordIds = useMemo(() => {
+    const toolName = toolInvocation.toolName as McpToolInvocationName;
+    if (toolName !== McpToolInvocationName.DeleteRecords) return [];
+    const deleteRecords = toolInvocation?.args;
+    const { recordIds } = deleteRecords as IDeleteRecordsToolParams;
+    return recordIds;
+  }, [toolInvocation]);
+
+  const updateRecordIds = useMemo(() => {
+    const toolName = toolInvocation.toolName as McpToolInvocationName;
+    if (toolName !== McpToolInvocationName.UpdateRecords) return [];
+    const updateRecords = toolInvocation?.args;
+    const {
+      updateRecordsRo: { records },
+    } = updateRecords as IUpdateRecordsToolParams;
+    return records.map((record) => record.id);
+  }, [toolInvocation]);
+
+  const finalRowCount = useMemo(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.DeleteRecords: {
+        return deleteRecordIds.length;
+      }
+      case McpToolInvocationName.CreateRecords: {
+        const createRecords = toolInvocation.args?.createRecordsRo;
+        const { records } = createRecords as ICreateRecordsRo;
+        return records.length;
+      }
+      case McpToolInvocationName.UpdateRecords: {
+        const updateRecords = toolInvocation.args?.updateRecordsRo;
+        const { records } = updateRecords as IUpdateRecordsRo;
+        return records.length;
+      }
+      default: {
+        return rowCount;
+      }
+    }
+  }, [
+    deleteRecordIds.length,
+    rowCount,
+    toolInvocation.args?.createRecordsRo,
+    toolInvocation.args?.updateRecordsRo,
+    toolInvocation.toolName,
+  ]);
+
+  const { data: deleteRecords } = useQuery({
+    queryKey: [
+      'deleteRecordIds',
+      deleteRecordIds,
+      toolInvocation.args?.tableId,
+      toolInvocation.toolCallId,
+    ],
+    queryFn: () => {
+      return getRecords(toolInvocation.args?.tableId, { selectedRecordIds: deleteRecordIds });
+    },
+    enabled: Boolean(deleteRecordIds?.length),
+  });
+
+  const { data: updateRecords } = useQuery({
+    queryKey: [
+      'updateRecordIds',
+      updateRecordIds,
+      toolInvocation.args?.tableId,
+      toolInvocation.toolCallId,
+    ],
+    queryFn: () => {
+      return getRecords(toolInvocation.args?.tableId, { selectedRecordIds: updateRecordIds });
+    },
+    enabled: Boolean(updateRecordIds?.length),
+  });
+
+  const searchHitIndex = useMemo(() => {
+    const toolName = toolInvocation.toolName as McpToolInvocationName;
+
+    if (toolName !== McpToolInvocationName.UpdateRecords) return undefined;
+    const {
+      updateRecordsRo: { records },
+    } = toolInvocation.args as IUpdateRecordsToolParams;
+
+    if (!records) return undefined;
+
+    const searchHitIndex: { fieldId: string; recordId: string }[] = [];
+    for (const record of records) {
+      const fieldMap = record.fields;
+      Object.keys(fieldMap).forEach((key) => {
+        const field = fieldMapWithName[key];
+        if (field) {
+          searchHitIndex.push({
+            fieldId: field.id,
+            recordId: record.id,
+          });
+        }
+      });
+    }
+
+    return searchHitIndex;
+  }, [fieldMapWithName, toolInvocation.args, toolInvocation.toolName]);
+
+  const gridRef = useRef<IGridRef>(null);
+  const rowCountRef = useRef<number>(rowCount);
+  rowCountRef.current = rowCount;
+
+  const { recordMap, onReset, onForceUpdate } = useGridAsyncRecords(undefined, recordQuery);
+
+  const finalColumns = useMemo(() => {
+    const toolName = toolInvocation.toolName as McpToolInvocationName;
+    switch (toolName) {
+      case McpToolInvocationName.DeleteFields: {
+        const fieldIds = toolInvocation.args?.['fieldIds'];
+        return columns.map((column) => {
+          const theme = fieldIds.includes(column.id)
+            ? {
+                columnHeaderBgHovered: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+                columnHeaderBg: hexToRGBA(PreviewActionColorMap['delete'], 0.3),
+                cellBg: hexToRGBA(PreviewActionColorMap['delete'], 0.3),
+                cellBgHovered: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+              }
+            : column.customTheme;
+          return {
+            ...column,
+            customTheme: theme,
+          };
+        });
+      }
+      case McpToolInvocationName.CreateFields: {
+        const { state } = toolInvocation;
+        const createFields = toolInvocation.args?.['fields'] as {
+          name: string;
+          type: FieldType;
+          id?: string;
+        }[];
+        const names = createFields.map(({ name }) => name);
+        if (state === 'result') {
+          return columns.map((column) => {
+            return {
+              ...column,
+              customTheme: names?.includes(column.name)
+                ? {
+                    columnHeaderBgHovered: hexToRGBA(PreviewActionColorMap['create'], 0.5),
+                    columnHeaderBg: hexToRGBA(PreviewActionColorMap['create'], 0.3),
+                  }
+                : undefined,
+            };
+          });
+        }
+        const newColumns = createFields.map((column) => {
+          return {
+            ...column,
+            name: createFields.find(({ id }) => id === column.id)?.name,
+            icon: createFields.find(({ id }) => id === column.id)?.type,
+            id: generateFieldId(),
+            customTheme: {
+              columnHeaderBgHovered: hexToRGBA(PreviewActionColorMap['create'], 0.5),
+              columnHeaderBg: hexToRGBA(PreviewActionColorMap['create'], 0.3),
+            },
+          };
+        });
+        return [...columns, ...newColumns];
+      }
+      case McpToolInvocationName.UpdateField: {
+        const { fieldId, updateFieldRo } = toolInvocation.args;
+        return columns.map((column) => {
+          const theme =
+            fieldId === column.id
+              ? {
+                  columnHeaderBgHovered: hexToRGBA(PreviewActionColorMap['update'], 0.5),
+                  columnHeaderBg: hexToRGBA(PreviewActionColorMap['update'], 0.3),
+                }
+              : column.customTheme;
+          return {
+            ...column,
+            customTheme: theme,
+            name: fieldId === column.id ? updateFieldRo?.name || column.name : column.name,
+            icon: fieldId === column.id ? updateFieldRo?.type || column.icon : column.icon,
+          };
+        });
+      }
+      case McpToolInvocationName.CreateRecords: {
+        return columns.map((column) => {
+          return {
+            ...column,
+            id: generateFieldId(),
+            name: column.name || '',
+            customTheme: {
+              cellBg: hexToRGBA(PreviewActionColorMap['create'], 0.3),
+              cellBgHovered: hexToRGBA(PreviewActionColorMap['create'], 0.5),
+            },
+          };
+        });
+      }
+      case McpToolInvocationName.UpdateRecords: {
+        return columns.map((column) => {
+          return {
+            ...column,
+            customTheme: {
+              searchTargetIndexBg: hexToRGBA(PreviewActionColorMap['create'], 0.5),
+            },
+          };
+        });
+      }
+      case McpToolInvocationName.DeleteRecords: {
+        return columns.map((column) => {
+          return {
+            ...column,
+            name: column.name || '',
+            customTheme: {
+              cellBg: hexToRGBA(PreviewActionColorMap['delete'], 0.3),
+              cellBgHovered: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+            },
+          };
+        });
+      }
+      default: {
+        return columns;
+      }
+    }
+  }, [columns, toolInvocation]);
+
+  useEffect(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.CreateFields: {
+        const columnIndex = columns.length + 1;
+        gridRef.current?.scrollToItem([columnIndex, 0]);
+        break;
+      }
+      case McpToolInvocationName.DeleteFields: {
+        const fieldIds = toolInvocation.args?.['fieldIds'];
+        const firstFieldId = fieldIds[0];
+        const columnIndex = finalColumns.findIndex((column) => column.id === firstFieldId);
+        columnIndex > -1 && gridRef.current?.scrollToItem([columnIndex, 0]);
+        break;
+      }
+      case McpToolInvocationName.UpdateField: {
+        const { fieldId } = toolInvocation.args;
+        const columnIndex = finalColumns.findIndex((column) => column.id === fieldId);
+        gridRef.current?.scrollToItem([columnIndex, 0]);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }, [columns.length, finalColumns, toolInvocation.args, toolInvocation.toolName]);
+
+  const finalRecordMap = useMemo(() => {
+    const toolName = toolInvocation.toolName as McpToolInvocationName;
+    switch (toolName) {
+      case McpToolInvocationName.CreateRecords: {
+        const createRecords = toolInvocation.args?.createRecordsRo;
+        const { records, fieldKeyType } = createRecords as ICreateRecordsRo;
+
+        if (!fieldMap || !allFields) return recordMap;
+
+        const newRecords = records.map((record, index) => ({
+          autoNumber: index + 1,
+          name: '',
+          fieldMap,
+          fields: allFields,
+          isLocked: () => {
+            return false;
+          },
+          isHidden: () => {
+            return false;
+          },
+          getCellValue: (fieldId: string) => {
+            const field = fieldMap[fieldId];
+            const key = fieldKeyType === 'id' ? 'id' : 'name';
+            const keyValue = field[key];
+            if (!field) return '';
+            return field.cellValue2String(record?.fields?.[keyValue]);
+          },
+        })) as unknown as IRecordInstance[];
+        return newRecords.reduce((acc: IRecordIndexMap, record: IRecordInstance, index: number) => {
+          acc[index] = record;
+          return acc;
+        }, {} as IRecordIndexMap);
+      }
+      case McpToolInvocationName.UpdateRecords: {
+        if (!updateRecords?.data?.records?.length) return recordMap;
+        const {
+          updateRecordsRo: { records },
+        } = toolInvocation.args as IUpdateRecordsToolParams;
+
+        if (!records || !allFields || !fieldMap) return recordMap;
+
+        const newRecords = records.map((record, index) => ({
+          id: record.id,
+          autoNumber: index + 1,
+          name: '',
+          fieldMap,
+          fields: allFields,
+          isLocked: () => {
+            return false;
+          },
+          isHidden: () => {
+            return false;
+          },
+          getCellValue: (fieldId: string) => {
+            const field = fieldMap[fieldId];
+            const name = field.name;
+            const id = field.id;
+
+            if (!field) return '';
+            const recordField = updateRecords?.data?.records?.find(
+              ({ id: recordId }) => record.id === recordId
+            );
+            const value =
+              record?.fields?.[name] ??
+              record?.fields?.[id] ??
+              recordField?.fields?.[name] ??
+              recordField?.fields?.[id];
+            const cellValueString = field.cellValue2String(value);
+            return field.convertStringToCellValue(cellValueString);
+          },
+        })) as unknown as IRecordInstance[];
+        return newRecords.reduce((acc: IRecordIndexMap, record: IRecordInstance, index: number) => {
+          acc[index] = record;
+          return acc;
+        }, {} as IRecordIndexMap);
+      }
+      case McpToolInvocationName.DeleteRecords: {
+        if (!deleteRecords?.data?.records?.length) return recordMap;
+
+        const newRecords = deleteRecords.data.records.map((record, index) => ({
+          id: record.id,
+          autoNumber: index + 1,
+          name: '',
+          fieldMap,
+          fields: allFields,
+          isLocked: () => {
+            return false;
+          },
+          isHidden: () => {
+            return false;
+          },
+          getCellValue: (fieldId: string) => {
+            const field = fieldMap[fieldId];
+            const key = 'name';
+            const keyValue = field[key];
+            if (!field) return '';
+            return field.cellValue2String(record?.fields?.[keyValue]);
+          },
+        })) as unknown as IRecordInstance[];
+        return newRecords.reduce((acc: IRecordIndexMap, record: IRecordInstance, index: number) => {
+          acc[index] = record;
+          return acc;
+        }, {} as IRecordIndexMap);
+      }
+      case McpToolInvocationName.CreateField: {
+        return recordMap;
+      }
+      default: {
+        return recordMap;
+      }
+    }
+  }, [
+    toolInvocation.toolName,
+    toolInvocation.args,
+    fieldMap,
+    allFields,
+    recordMap,
+    updateRecords?.data,
+    deleteRecords?.data?.records,
+  ]);
+
+  const finalTheme = useMemo(() => {
+    const toolName = toolInvocation.toolName as McpToolInvocationName;
+    return toolName === McpToolInvocationName.UpdateRecords
+      ? { ...theme, searchTargetIndexBg: hexToRGBA(PreviewActionColorMap['update'], 0.5) }
+      : theme;
+  }, [theme, toolInvocation.toolName]);
+
+  useEffect(() => {
+    if (!rowCount) return;
+  }, [rowCount]);
+
+  const getCellContent = useCallback<(cell: ICellItem) => ICell>(
+    (cell: ICellItem) => {
+      const [colIndex, rowIndex] = cell;
+      const record = finalRecordMap[rowIndex];
+      if (record !== undefined) {
+        const fieldId = finalColumns[colIndex]?.id;
+        if (!fieldId) return { type: CellType.Loading };
+        return cellValue2GridDisplay(record, colIndex);
+      }
+      return { type: CellType.Loading };
+    },
+    [finalRecordMap, finalColumns, cellValue2GridDisplay]
+  );
+
+  if (columns?.length === 0) return null;
+
+  return (
+    <>
+      <Grid
+        ref={gridRef}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        scrollBufferX={0}
+        scrollBufferY={0}
+        theme={finalTheme}
+        columns={finalColumns as unknown as IGridColumn[]}
+        rowCount={finalRowCount}
+        rowIndexVisible={false}
+        customIcons={customIcons}
+        rowControls={[]}
+        getCellContent={getCellContent}
+        searchHitIndex={searchHitIndex}
+      />
+    </>
+  );
+};
+
+export const GridPreView = forwardRef(GridPreviewBase);
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/PreviewRender.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/PreviewRender.tsx
new file mode 100644
index 0000000000..95fdda5c71
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/PreviewRender.tsx
@@ -0,0 +1,78 @@
+import { McpToolInvocationName } from '@teable/openapi';
+import {
+  AnchorContext,
+  FieldProvider,
+  RowCountProvider,
+  TablePermissionProvider,
+} from '@teable/sdk/context';
+import { useBaseId } from '@teable/sdk/hooks/use-base-id';
+import { ErrorBoundary } from 'react-error-boundary';
+import type { IToolMessagePart } from '../ToolMessagePart';
+import { DefaultRender } from './DefaultRender';
+import { ErrorFallback } from './ErrorFallback';
+import { GridPreView } from './GridPreview';
+import { TableListDiffPreview } from './TableListDiffPreview';
+import { ViewListDiffPreview } from './ViewListDiffPreview';
+
+interface IAIChangePreviewProps {
+  id: string;
+  toolInvocation: IToolMessagePart['part']['toolInvocation'];
+}
+
+export const PreviewRender = (props: IAIChangePreviewProps) => {
+  const { toolInvocation, id } = props;
+  const baseId = useBaseId()!;
+  const tableId = toolInvocation.args?.['tableId'];
+  const toolName = toolInvocation.toolName;
+
+  const previewRender = () => {
+    switch (toolName) {
+      case McpToolInvocationName.CreateTable:
+      case McpToolInvocationName.DeleteTable:
+      case McpToolInvocationName.UpdateTableName: {
+        return <TableListDiffPreview toolInvocation={toolInvocation} />;
+      }
+      case McpToolInvocationName.CreateView:
+      case McpToolInvocationName.DeleteView:
+      case McpToolInvocationName.UpdateViewName: {
+        return <ViewListDiffPreview toolInvocation={toolInvocation} />;
+      }
+      case McpToolInvocationName.CreateFields:
+      case McpToolInvocationName.CreateRecords:
+      case McpToolInvocationName.DeleteFields:
+      case McpToolInvocationName.DeleteRecords:
+      case McpToolInvocationName.UpdateField:
+      case McpToolInvocationName.UpdateRecords: {
+        return (
+          <div className="relative h-48">
+            <RowCountProvider>
+              <GridPreView toolInvocation={toolInvocation} />
+            </RowCountProvider>
+          </div>
+        );
+      }
+      case McpToolInvocationName.GetTableFields:
+      default: {
+        return (
+          <DefaultRender
+            id={id}
+            toolInvocation={
+              toolInvocation as IToolMessagePart['part']['toolInvocation'] & { state: 'result' }
+            }
+          />
+        );
+      }
+    }
+  };
+  return (
+    <>
+      <AnchorContext.Provider key={tableId} value={{ baseId, tableId }}>
+        <TablePermissionProvider baseId={baseId}>
+          <FieldProvider>
+            <ErrorBoundary FallbackComponent={ErrorFallback}>{previewRender()}</ErrorBoundary>
+          </FieldProvider>
+        </TablePermissionProvider>
+      </AnchorContext.Provider>
+    </>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/TableListDiffPreview.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/TableListDiffPreview.tsx
new file mode 100644
index 0000000000..0faee9d272
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/TableListDiffPreview.tsx
@@ -0,0 +1,286 @@
+import { Table2 } from '@teable/icons';
+import type { ITableFullVo, ITableListVo, IToolInvocationUIPart } from '@teable/openapi';
+import { McpToolInvocationName } from '@teable/openapi';
+import { hexToRGBA } from '@teable/sdk/components';
+import { useTables } from '@teable/sdk/hooks';
+import { Button } from '@teable/ui-lib/shadcn';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useRef } from 'react';
+import { Emoji } from '@/features/app/components/emoji/Emoji';
+import type { IToolMessagePart } from '../ToolMessagePart';
+import { PreviewActionColorMap } from './constant';
+
+interface ITableListPreviewProps {
+  toolInvocation: IToolMessagePart['part']['toolInvocation'];
+}
+
+const TableItem = (props: {
+  id: string;
+  name: string;
+  icon: string | undefined;
+  style?: React.CSSProperties;
+  changeTableId?: string;
+  tables: ITableListVo;
+}) => {
+  const { id, name, icon, style, changeTableId, tables } = props;
+  const ref = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!changeTableId) {
+      return;
+    }
+    if (ref.current && id === changeTableId) {
+      ref.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [changeTableId, id]);
+  const router = useRouter();
+  const baseId = router.query.baseId as string;
+  const currentTableId = router.query.tableId as string;
+  const isExpired = !tables.find((table) => table.id === id);
+
+  return (
+    <Button
+      style={style}
+      variant={'ghost'}
+      className={'flex h-7 items-center gap-2 rounded border p-1 px-2 text-foreground'}
+      ref={ref}
+      disabled={isExpired}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (id === currentTableId || isExpired) {
+          return;
+        }
+        router.push(
+          {
+            pathname: `/base/[baseId]/[tableId]/`,
+            query: {
+              baseId,
+              tableId: id,
+            },
+          },
+          undefined,
+          {
+            shallow: Boolean(id),
+          }
+        );
+      }}
+    >
+      {icon ? (
+        <Emoji emoji={icon} size={'1rem'} className="size-4 shrink-0" />
+      ) : (
+        <Table2 className="size-4 shrink-0" />
+      )}
+      <p className="grow truncate text-left text-xs">{' ' + name}</p>
+    </Button>
+  );
+};
+
+export const TableListDiffPreview = (props: ITableListPreviewProps) => {
+  const { toolInvocation } = props;
+
+  const tables = useTables();
+
+  const changeTableId = useMemo(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.CreateTable: {
+        let result: {
+          table: ITableFullVo;
+        };
+        const newToolInvocation =
+          toolInvocation as unknown as IToolInvocationUIPart['toolInvocation'];
+        try {
+          const resultText = newToolInvocation?.result?.content?.[0]?.text;
+          result = JSON.parse(resultText);
+          return result?.table?.id;
+        } catch (e) {
+          console.error(e);
+        }
+        return null;
+      }
+      case McpToolInvocationName.UpdateTableName:
+      case McpToolInvocationName.DeleteTable: {
+        const { tableId } = toolInvocation.args;
+        return tableId;
+      }
+      default: {
+        return null;
+      }
+    }
+  }, [toolInvocation]);
+
+  /* eslint-disable sonarjs/cognitive-complexity */
+  const tableList = useMemo<
+    {
+      id: string;
+      name: string;
+      icon: string | undefined;
+      style?: React.CSSProperties;
+    }[]
+  >(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.CreateTable: {
+        let table: ITableFullVo;
+        const newToolInvocation =
+          toolInvocation as unknown as IToolInvocationUIPart['toolInvocation'];
+        try {
+          const resultText = newToolInvocation?.result?.content?.[0]?.text;
+          const result = JSON.parse(resultText);
+          table = result?.table;
+        } catch (e) {
+          console.error(e);
+          return tables.map((table) => ({
+            id: table.id,
+            name: table.name,
+            icon: table.icon,
+          }));
+        }
+
+        const tableId = table?.id;
+
+        const newTables = tables.map((table) => ({
+          id: table.id,
+          name: table.name,
+          icon: table.icon,
+          style: {},
+        }));
+
+        const tableExist = !!newTables.find((table) => table.id === tableId);
+
+        if (tableExist) {
+          return tables.map((table) => {
+            return {
+              id: table.id,
+              name: table.name,
+              icon: table.icon,
+              style:
+                changeTableId === table.id
+                  ? {
+                      backgroundColor: hexToRGBA(PreviewActionColorMap['create'], 0.5),
+                      borderColor: PreviewActionColorMap['create'],
+                    }
+                  : {},
+            };
+          });
+        } else {
+          newTables.push({
+            id: table?.id,
+            name: table?.name,
+            icon: table?.icon,
+            style: {
+              backgroundColor: hexToRGBA(PreviewActionColorMap['expired'], 0.5),
+              borderColor: PreviewActionColorMap['expired'],
+            },
+          });
+          return newTables;
+        }
+      }
+      case McpToolInvocationName.UpdateTableName: {
+        const { tableId, updateTableNameRo } = toolInvocation.args;
+        const { name: newName } = updateTableNameRo;
+        const isExpired = !tables.find((table) => table.id === tableId);
+
+        if (isExpired) {
+          const newTables = tables.map((table) => ({
+            id: table.id,
+            name: table.name,
+            icon: table.icon,
+            style: {},
+          }));
+
+          newTables.push({
+            id: tableId,
+            name: newName,
+            icon: undefined,
+            style: {
+              backgroundColor: hexToRGBA(PreviewActionColorMap['expired'], 0.5),
+              borderColor: PreviewActionColorMap['expired'],
+            },
+          });
+          return newTables;
+        } else {
+          return tables.map((table) => ({
+            id: table.id,
+            name: tableId === table.id ? newName : table.name,
+            icon: table.icon,
+            style:
+              tableId === table.id
+                ? {
+                    backgroundColor: hexToRGBA(PreviewActionColorMap['update'], 0.5),
+                    borderColor: PreviewActionColorMap['update'],
+                  }
+                : undefined,
+          }));
+        }
+      }
+      case McpToolInvocationName.DeleteTable: {
+        const { tableId } = toolInvocation.args;
+
+        const isExpired = !tables.find((table) => table.id === tableId);
+
+        if (isExpired) {
+          const newToolInvocation =
+            toolInvocation as unknown as IToolInvocationUIPart['toolInvocation'];
+          let deletedTable: {
+            id: string;
+            name: string;
+            icon: string | undefined;
+            order: number;
+          };
+          try {
+            deletedTable = JSON.parse(newToolInvocation?.result?.content?.[0]?.text);
+          } catch (e) {
+            console.error(e);
+            return tables.map((table) => ({
+              id: table.id,
+              name: table.name,
+              icon: table.icon,
+              style: {},
+            }));
+          }
+          const newTables = tables.map((table) => ({
+            id: table.id,
+            name: table.name,
+            icon: table.icon,
+            style: {},
+          }));
+
+          newTables.splice(deletedTable?.order ?? tables.length, 0, {
+            id: tableId,
+            name: deletedTable?.name,
+            icon: undefined,
+            style: {
+              backgroundColor: hexToRGBA(PreviewActionColorMap['expired'], 0.5),
+              borderColor: PreviewActionColorMap['expired'],
+            },
+          });
+          return newTables;
+        } else {
+          return tables.map((table) => {
+            return {
+              id: table.id,
+              name: table.name,
+              icon: table.icon,
+              style:
+                tableId === table.id
+                  ? {
+                      backgroundColor: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+                      borderColor: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+                    }
+                  : undefined,
+            };
+          });
+        }
+      }
+      default: {
+        return tables.map((table) => ({ id: table.id, name: table.name, icon: table.icon }));
+      }
+    }
+  }, [changeTableId, tables, toolInvocation]);
+
+  return (
+    <div className="flex max-h-48 flex-col gap-2 overflow-y-auto">
+      {tableList.map((table) => (
+        <TableItem key={table.id} {...table} tables={tables} changeTableId={changeTableId} />
+      ))}
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ViewListDiffPreview.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ViewListDiffPreview.tsx
new file mode 100644
index 0000000000..5b445572ff
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/ViewListDiffPreview.tsx
@@ -0,0 +1,234 @@
+import { useQuery } from '@tanstack/react-query';
+import type { IViewOptions, IViewVo } from '@teable/core';
+import { ViewType } from '@teable/core';
+import { Lock } from '@teable/icons';
+import type { IToolInvocationUIPart } from '@teable/openapi';
+import { getViewList, McpToolInvocationName } from '@teable/openapi';
+import { hexToRGBA } from '@teable/sdk/components';
+import { VIEW_ICON_MAP } from '@teable/sdk/components/view/constant';
+import { ReactQueryKeys } from '@teable/sdk/config';
+import { Button } from '@teable/ui-lib/shadcn';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { Fragment, useEffect, useMemo, useRef } from 'react';
+import type { IToolMessagePart } from '../ToolMessagePart';
+import { PreviewActionColorMap } from './constant';
+
+interface IViewListPreviewProps {
+  toolInvocation: IToolMessagePart['part']['toolInvocation'];
+}
+
+const ViewItem = (props: {
+  id: string;
+  name: string;
+  type: ViewType;
+  isLocked?: boolean;
+  options?: IViewOptions;
+  style?: React.CSSProperties;
+  changeViewIdId?: string;
+  views: {
+    id: string;
+    name: string;
+    type: ViewType;
+    isLocked?: boolean;
+    options?: IViewOptions;
+    style?: React.CSSProperties;
+  }[];
+}) => {
+  const { id, name, type, isLocked, style, options, changeViewIdId, views } = props;
+  const ref = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (!changeViewIdId) {
+      return;
+    }
+    if (ref.current && id === changeViewIdId) {
+      ref.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [changeViewIdId, id]);
+  const ViewIcon = VIEW_ICON_MAP[type];
+  const router = useRouter();
+  const baseId = router.query.baseId as string;
+  const tableId = router.query.tableId as string;
+  const currentViewId = router.query.viewId as string;
+
+  const isExpired = !views.find((view) => view.id === id);
+
+  console.log('ViewItemViewItemViewItem', views, currentViewId);
+
+  return (
+    <Button
+      style={style}
+      variant="ghost"
+      className={
+        'flex h-7 min-w-20 shrink-0 items-center gap-2 overflow-hidden rounded border p-1 text-foreground'
+      }
+      ref={ref}
+      disabled={isExpired}
+      onClick={() => {
+        if (isExpired || id === currentViewId) {
+          return;
+        }
+
+        router.push(
+          {
+            pathname: `/base/[baseId]/[tableId]/[viewId]`,
+            query: {
+              baseId,
+              tableId,
+              viewId: id,
+            },
+          },
+          undefined,
+          {
+            shallow: Boolean(id),
+          }
+        );
+      }}
+    >
+      {type === ViewType.Plugin ? (
+        <Image
+          className="mr-1 size-4 shrink-0"
+          width={16}
+          height={16}
+          src={(options as IViewOptions & { pluginLogo: string })?.pluginLogo}
+          alt={name}
+        />
+      ) : (
+        <Fragment>
+          {isLocked && <Lock className="mr-[2px] size-4 shrink-0" />}
+          <ViewIcon className="mr-1 size-4 shrink-0" />
+        </Fragment>
+      )}
+      <div className="flex flex-1 items-center justify-center overflow-hidden">
+        <div className="truncate text-xs font-medium leading-5">{name}</div>
+      </div>
+    </Button>
+  );
+};
+
+export const ViewListDiffPreview = (props: IViewListPreviewProps) => {
+  const { toolInvocation } = props;
+
+  const tableId = toolInvocation?.args?.tableId;
+
+  const { data: views = [] as IViewVo[] } = useQuery({
+    queryKey: ReactQueryKeys.viewList(tableId),
+    queryFn: () => getViewList(tableId).then((res) => res.data),
+    enabled: !!tableId && toolInvocation.toolName !== McpToolInvocationName.CreateView,
+  });
+
+  const changeViewIdId = useMemo(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.CreateView: {
+        const resultString = (toolInvocation as unknown as IToolInvocationUIPart['toolInvocation'])
+          ?.result?.content?.[0]?.text;
+        try {
+          const result = JSON.parse(resultString);
+          return result?.view?.id;
+        } catch (err) {
+          console.error('createView parse error', err);
+          return null;
+        }
+      }
+      case McpToolInvocationName.UpdateViewName:
+      case McpToolInvocationName.DeleteView: {
+        const { viewId } = toolInvocation.args;
+        return viewId;
+      }
+      default: {
+        return null;
+      }
+    }
+  }, [toolInvocation]);
+
+  const viewList = useMemo<
+    {
+      id: string;
+      name: string;
+      type: ViewType;
+      isLocked?: boolean;
+      options?: IViewOptions;
+      style?: React.CSSProperties;
+    }[]
+  >(() => {
+    switch (toolInvocation.toolName) {
+      case McpToolInvocationName.CreateView: {
+        const resultString = (toolInvocation as unknown as IToolInvocationUIPart['toolInvocation'])
+          ?.result?.content?.[0]?.text;
+        try {
+          const result = JSON.parse(resultString);
+          const createdView = result?.view;
+          return [
+            {
+              id: createdView.id,
+              name: createdView.name,
+              type: createdView.type,
+              isLocked: createdView.isLocked,
+              style: {
+                backgroundColor: hexToRGBA(PreviewActionColorMap['create'], 0.5),
+                borderColor: PreviewActionColorMap['create'],
+              },
+            },
+          ];
+        } catch (err) {
+          console.error('createView parse error', err);
+          return [];
+        }
+      }
+      case McpToolInvocationName.UpdateViewName: {
+        const { viewId, updateViewNameRo } = toolInvocation.args;
+        const { name: newName } = updateViewNameRo;
+        return views.map((view) => ({
+          id: view.id,
+          name: viewId === view.id ? newName : view.name,
+          type: view.type,
+          isLocked: view.isLocked,
+          options: view.options,
+          style:
+            viewId === view.id
+              ? {
+                  backgroundColor: hexToRGBA(PreviewActionColorMap['update'], 0.5),
+                  borderColor: hexToRGBA(PreviewActionColorMap['update'], 0.5),
+                }
+              : undefined,
+        }));
+      }
+      case McpToolInvocationName.DeleteView: {
+        return views.map((view) => {
+          const style =
+            changeViewIdId === view.id
+              ? {
+                  backgroundColor: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+                  borderColor: hexToRGBA(PreviewActionColorMap['delete'], 0.5),
+                }
+              : undefined;
+          return {
+            id: view.id,
+            name: view.name,
+            type: view.type,
+            isLocked: view.isLocked,
+            options: view.options,
+            style,
+          };
+        });
+      }
+      default: {
+        return views.map((view) => ({
+          id: view.id,
+          name: view.name,
+          type: view.type,
+          isLocked: view.isLocked,
+          options: view.options,
+        }));
+      }
+    }
+  }, [toolInvocation, views, changeViewIdId]);
+
+  return (
+    <div className="flex gap-2 overflow-x-auto p-2">
+      {viewList.map((view) => (
+        <ViewItem key={view.id} {...view} changeViewIdId={changeViewIdId} views={viewList} />
+      ))}
+    </div>
+  );
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/constant.ts b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/constant.ts
new file mode 100644
index 0000000000..0b9889180e
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/components/message-part/preview/constant.ts
@@ -0,0 +1,24 @@
+import { McpToolInvocationName } from '@teable/openapi';
+import colors from 'tailwindcss/colors';
+
+export const PreviewActionColorMap = {
+  create: colors.green[400],
+  delete: colors.red[400],
+  update: colors.yellow[400],
+  expired: colors.gray[400],
+};
+
+export const PreviewMcpToolInvocationNames = [
+  McpToolInvocationName.CreateTable,
+  McpToolInvocationName.CreateView,
+  McpToolInvocationName.CreateFields,
+  McpToolInvocationName.CreateRecords,
+  McpToolInvocationName.UpdateTableName,
+  McpToolInvocationName.UpdateViewName,
+  McpToolInvocationName.UpdateRecords,
+  McpToolInvocationName.UpdateField,
+  McpToolInvocationName.DeleteTable,
+  McpToolInvocationName.DeleteFields,
+  McpToolInvocationName.DeleteRecords,
+  McpToolInvocationName.DeleteView,
+];
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatContext.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatContext.tsx
index 40b6537fb9..2dc224c8f3 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatContext.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatContext.tsx
@@ -1,4 +1,5 @@
 import type { IChatContext } from '@teable/openapi';
+import { noop } from 'lodash';
 import { createContext } from 'react';
 
 export const ChatContext = createContext<{
@@ -7,6 +8,7 @@ export const ChatContext = createContext<{
   clearActiveChatId: () => void;
   context?: IChatContext;
   setContext: (context: IChatContext) => void;
+  addToolResult: (toolResult: { toolCallId: string; result: unknown }) => void;
 }>({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   setContext: () => {},
@@ -14,4 +16,5 @@ export const ChatContext = createContext<{
   setActiveChatId: () => {},
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   clearActiveChatId: () => {},
+  addToolResult: noop,
 });
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatProvider.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatProvider.tsx
index 12de4f660a..004c1636c0 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatProvider.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/context/ChatProvider.tsx
@@ -1,4 +1,5 @@
 import type { IChatContext } from '@teable/openapi';
+import { noop } from 'lodash';
 import { useCallback, useState } from 'react';
 import { ChatContext } from './ChatContext';
 
@@ -25,6 +26,7 @@ export const ChatProvider = ({ children }: { children: React.ReactNode }) => {
         clearActiveChatId,
         context,
         setContext: updateContext,
+        addToolResult: noop,
       }}
     >
       {children}
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/hooks/useMcpToolExecution.ts b/apps/nextjs-app/src/features/app/components/ai-chat/hooks/useMcpToolExecution.ts
new file mode 100644
index 0000000000..56bc4ac1b5
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/hooks/useMcpToolExecution.ts
@@ -0,0 +1,315 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { IConvertFieldRo, IViewVo } from '@teable/core';
+import type { ITableNameRo, ITableVo, IUpdateRecordsRo, IViewNameRo } from '@teable/openapi';
+import {
+  convertField,
+  deleteFields,
+  deleteRecords,
+  deleteTable,
+  deleteView,
+  McpToolInvocationName,
+  updateRecords,
+  updateTableName,
+  updateViewName,
+} from '@teable/openapi';
+import { ReactQueryKeys } from '@teable/sdk/config';
+import { useBaseId, useTableId, useTables } from '@teable/sdk/hooks';
+import { pick } from 'lodash';
+import router from 'next/router';
+import { useCallback } from 'react';
+
+export const useMcpToolExecution = () => {
+  const queryClient = useQueryClient();
+
+  const baseId = useBaseId();
+
+  const tableId = useTableId();
+
+  const tables = useTables();
+
+  const callBack = useCallback(
+    (toolName: McpToolInvocationName, result: unknown, args: unknown) => {
+      switch (toolName) {
+        case McpToolInvocationName.CreateField:
+        case McpToolInvocationName.CreateRecords: {
+          const { tableId: newTableId } = args as {
+            tableId: string;
+          };
+          if (tableId !== newTableId) {
+            router.push(
+              {
+                pathname: `/base/[baseId]/[tableId]/`,
+                query: {
+                  baseId,
+                  tableId: newTableId,
+                },
+              },
+              undefined,
+              {
+                shallow: Boolean(tableId),
+              }
+            );
+          }
+          break;
+        }
+        case McpToolInvocationName.CreateView: {
+          const { tableId: newTableId } = args as {
+            tableId: string;
+          };
+          const { id: newViewId } = result as IViewVo;
+          if (tableId !== newTableId) {
+            router.push(
+              {
+                pathname: `/base/[baseId]/[tableId]/[viewId]`,
+                query: {
+                  baseId,
+                  tableId: newTableId,
+                  viewId: newViewId,
+                },
+              },
+              undefined,
+              {
+                shallow: Boolean(tableId),
+              }
+            );
+          }
+          break;
+        }
+        case McpToolInvocationName.CreateTable:
+          {
+            const res = result as ITableVo;
+            const newTableId = res.id;
+            if (tableId !== newTableId) {
+              router.push(
+                {
+                  pathname: `/base/[baseId]/[tableId]/`,
+                  query: {
+                    baseId,
+                    tableId: newTableId,
+                  },
+                },
+                undefined,
+                {
+                  shallow: Boolean(tableId),
+                }
+              );
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [baseId, tableId]
+  );
+
+  const { mutateAsync: convertFieldMutate } = useMutation({
+    mutationFn: ({
+      tableId,
+      fieldId,
+      fieldRo,
+    }: {
+      tableId: string;
+      fieldId: string;
+      fieldRo: IConvertFieldRo;
+    }) => convertField(tableId, fieldId, fieldRo),
+    onSuccess: (_, query) => {
+      queryClient.invalidateQueries(ReactQueryKeys.fieldList(query.tableId));
+    },
+  });
+
+  const { mutateAsync: deleteFieldsMutate } = useMutation({
+    mutationFn: ({ tableId, fieldIds }: { tableId: string; fieldIds: string[] }) =>
+      deleteFields(tableId, fieldIds),
+    onSuccess: (_, query) => {
+      queryClient.invalidateQueries(ReactQueryKeys.fieldList(query.tableId));
+    },
+  });
+
+  const { mutateAsync: updateRecordsMutate } = useMutation({
+    mutationFn: ({
+      tableId,
+      updateRecordsRo,
+    }: {
+      tableId: string;
+      updateRecordsRo: IUpdateRecordsRo;
+    }) => updateRecords(tableId, updateRecordsRo),
+  });
+
+  const { mutateAsync: updateViewNameMutate } = useMutation({
+    mutationFn: ({
+      tableId,
+      viewId,
+      updateViewNameRo,
+    }: {
+      tableId: string;
+      viewId: string;
+      updateViewNameRo: IViewNameRo;
+    }) => updateViewName(tableId, viewId, updateViewNameRo),
+  });
+
+  const { mutateAsync: updateTableNameMutate } = useMutation({
+    mutationFn: ({
+      baseId,
+      tableId,
+      updateTableNameRo,
+    }: {
+      baseId: string;
+      tableId: string;
+      updateTableNameRo: ITableNameRo;
+    }) => updateTableName(baseId, tableId, updateTableNameRo),
+  });
+
+  const { mutateAsync: deleteTableMutate } = useMutation({
+    mutationFn: ({ tableId, baseId }: { baseId: string; tableId: string }) =>
+      deleteTable(baseId, tableId),
+  });
+
+  const { mutateAsync: deleteRecordsMutate } = useMutation({
+    mutationFn: ({ tableId, recordIds }: { tableId: string; recordIds: string[] }) =>
+      deleteRecords(tableId, recordIds),
+  });
+
+  const { mutateAsync: deleteViewsMutate } = useMutation({
+    mutationFn: ({ tableId, viewId }: { tableId: string; viewId: string }) =>
+      deleteView(tableId, viewId),
+  });
+
+  if (!baseId) {
+    return {} as Record<
+      string,
+      {
+        execute: (params: unknown) => Promise<unknown>;
+        callBack: (result: unknown, args: unknown) => void;
+      }
+    >;
+  }
+
+  return {
+    [McpToolInvocationName.UpdateField]: {
+      execute: async (params: unknown) => {
+        const { tableId, fieldId, updateFieldRo } = params as {
+          tableId: string;
+          fieldId: string;
+          updateFieldRo: IConvertFieldRo;
+        };
+        return (
+          await convertFieldMutate({
+            tableId,
+            fieldId,
+            fieldRo: updateFieldRo,
+          })
+        ).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.UpdateField, result, args);
+      },
+    },
+    [McpToolInvocationName.UpdateRecords]: {
+      execute: async (params: unknown) => {
+        const { tableId, updateRecordsRo } = params as {
+          tableId: string;
+          updateRecordsRo: IUpdateRecordsRo;
+        };
+        return (await updateRecordsMutate({ tableId, updateRecordsRo })).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.UpdateRecords, result, args);
+      },
+    },
+    [McpToolInvocationName.UpdateViewName]: {
+      execute: async (params: unknown) => {
+        const { tableId, updateViewNameRo, viewId } = params as {
+          tableId: string;
+          viewId: string;
+          updateViewNameRo: { name: string };
+        };
+
+        return (
+          await updateViewNameMutate({
+            tableId,
+            viewId,
+            updateViewNameRo,
+          })
+        ).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.UpdateViewName, result, args);
+      },
+    },
+    [McpToolInvocationName.UpdateTableName]: {
+      execute: async (params: unknown) => {
+        const { tableId, updateTableNameRo } = params as {
+          tableId: string;
+          updateTableNameRo: { name: string };
+        };
+        return (
+          await updateTableNameMutate({
+            tableId,
+            baseId,
+            updateTableNameRo,
+          })
+        ).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.UpdateViewName, result, args);
+      },
+    },
+    [McpToolInvocationName.DeleteRecords]: {
+      execute: async (params: unknown) => {
+        const { tableId, recordIds } = params as {
+          tableId: string;
+          recordIds: string[];
+        };
+        return (await deleteRecordsMutate({ tableId, recordIds })).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.DeleteFields, result, args);
+      },
+    },
+    [McpToolInvocationName.DeleteFields]: {
+      execute: async (params: unknown) => {
+        const { tableId, fieldIds } = params as {
+          tableId: string;
+          fieldIds: string[];
+        };
+        return (await deleteFieldsMutate({ tableId, fieldIds })).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.DeleteFields, result, args);
+      },
+    },
+    [McpToolInvocationName.DeleteTable]: {
+      execute: async (params: unknown) => {
+        const { baseId, tableId } = params as {
+          baseId: string;
+          tableId: string;
+        };
+        const deletedTable = tables.find((table) => table.id === tableId);
+        await deleteTableMutate({ baseId, tableId });
+        return pick(deletedTable, ['id', 'name', 'icon', 'order']);
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.DeleteTable, result, args);
+      },
+    },
+    [McpToolInvocationName.DeleteView]: {
+      execute: async (params: unknown) => {
+        const { tableId, viewId } = params as {
+          tableId: string;
+          viewId: string;
+        };
+        return (await deleteViewsMutate({ tableId, viewId })).data;
+      },
+      callBack: (result: unknown, args: unknown) => {
+        callBack(McpToolInvocationName.DeleteView, result, args);
+      },
+    },
+  } as Record<
+    string,
+    {
+      execute: (params: unknown) => Promise<unknown>;
+      callBack: (result: unknown, args: unknown) => void;
+    }
+  >;
+};
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatContainer.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatContainer.tsx
index 77f39f8f96..dacae9f962 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatContainer.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatContainer.tsx
@@ -1,26 +1,57 @@
-import { useChat, type UseChatHelpers } from '@ai-sdk/react';
+import { useChat } from '@ai-sdk/react';
+import type { UseChatOptions, UseChatHelpers } from '@ai-sdk/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { generateChatId } from '@teable/core';
-import { getAIConfig, getChatMessages } from '@teable/openapi';
+import type { IToolInvocationUIPart } from '@teable/openapi';
+import { getAIConfig, getChatMessages, McpToolInvocationName } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import { toast } from '@teable/ui-lib/shadcn/ui/sonner';
-import { useEffect, useMemo, useRef } from 'react';
+import { useRouter } from 'next/router';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { generateModelKeyList } from '@/features/app/blocks/admin/setting/components/ai-config/utils';
 import { MessageInput } from '../components/MessageInput';
 import { Messages } from '../components/Messages';
 import type { IMessageMeta } from '../components/types';
+import { ChatContext } from '../context/ChatContext';
 import { useChatContext } from '../context/useChatContext';
 import { useActiveChat } from '../hooks/useActiveChat';
 import { useChatStore } from '../store/useChatStore';
 
-export const ChatContainer = ({ baseId }: { baseId: string }) => {
+export interface ChatContainerRef {
+  setInputValue: (value: string) => void;
+  submit: () => void;
+}
+
+export const ChatContainer = forwardRef<
+  ChatContainerRef,
+  {
+    baseId: string;
+    autoOpen?: boolean;
+    onToolCall?: (
+      toolCall: Parameters<Required<UseChatOptions>['onToolCall']>[0] & { chatId: string }
+    ) => void;
+  }
+>(({ baseId, autoOpen = false, onToolCall }, ref) => {
   const chatIdRef = useRef(generateChatId());
   const { modelKey, setModelKey } = useChatStore();
+  const tableIdRef = useRef<string | undefined>();
+  const viewIdRef = useRef<string | undefined>();
   const activeChat = useActiveChat(baseId);
   const queryClient = useQueryClient();
-  const { context, setActiveChatId } = useChatContext();
+  const chatContext = useChatContext();
+  const { context, setActiveChatId } = chatContext;
   const isActiveChat = Boolean(activeChat);
   const chatId = isActiveChat ? activeChat!.id : chatIdRef.current;
+  const router = useRouter();
+  const tableId = router.query.tableId as string | undefined;
+
+  useEffect(() => {
+    tableIdRef.current = tableId;
+  }, [tableId]);
+
+  useEffect(() => {
+    viewIdRef.current = router.query.viewId as string | undefined;
+  }, [router.query.viewId]);
 
   const { data: baseAiConfig, isLoading: isBaseAiConfigLoading } = useQuery({
     queryKey: ['ai-config', baseId],
@@ -86,30 +117,155 @@ export const ChatContainer = ({ baseId }: { baseId: string }) => {
     };
   }, [isActiveChat, chatId]);
 
-  const { messages, setMessages, handleSubmit, input, setInput, status, stop } = useChat({
-    id: chatId,
-    api: `/api/base/${baseId}/chat`,
-    initialMessages: convertToUIMessages,
-    body: {
-      chatId,
-      model: validModelKey,
-      context,
-    },
-    onFinish: () => {
-      const { isActiveChat, chatId } = useChatRef.current;
-      if (isActiveChat) {
-        queryClient.invalidateQueries({ queryKey: ['chat-message', chatId] });
-        return;
-      }
-      queryClient.refetchQueries({ queryKey: ReactQueryKeys.chatHistory(baseId) }).then(() => {
-        setActiveChatId(chatId);
-        chatIdRef.current = generateChatId();
-      });
-    },
-    onError: (error) => {
-      toast.error(error.message);
-    },
-  });
+  const { messages, setMessages, handleSubmit, input, setInput, status, stop, addToolResult } =
+    useChat({
+      id: chatId,
+      api: `/api/base/${baseId}/chat`,
+      initialMessages: convertToUIMessages,
+      body: {
+        chatId,
+        model: validModelKey,
+        context,
+      },
+      onFinish: () => {
+        const { isActiveChat, chatId } = useChatRef.current;
+        if (isActiveChat) {
+          queryClient.invalidateQueries({ queryKey: ['chat-message', chatId] });
+          return;
+        }
+        queryClient.refetchQueries({ queryKey: ReactQueryKeys.chatHistory(baseId) }).then(() => {
+          setActiveChatId(chatId);
+          chatIdRef.current = generateChatId();
+        });
+      },
+      onToolCall: ({ toolCall }) => {
+        const args = toolCall.args as Record<string, unknown>;
+        onToolCall?.({ toolCall, chatId });
+        const currentTableId = tableIdRef.current;
+        switch (toolCall.toolName) {
+          case McpToolInvocationName.CreateFields:
+          case McpToolInvocationName.CreateRecords: {
+            if ('tableId' in args && args.tableId !== currentTableId) {
+              router.push(
+                {
+                  pathname: `/base/[baseId]/[tableId]/`,
+                  query: {
+                    baseId,
+                    tableId: args.tableId as string,
+                  },
+                },
+                undefined,
+                {
+                  shallow: Boolean(currentTableId),
+                }
+              );
+            }
+            break;
+          }
+          case McpToolInvocationName.CreateView: {
+            setTimeout(() => {
+              const { toolCallId } = toolCall;
+              const { tableId } = toolCall.args as { tableId: string };
+              const partItem = messagesRef?.current
+                ?.map(({ parts }) => parts)
+                .flat()
+                ?.find(
+                  (part) =>
+                    (part as unknown as IToolInvocationUIPart)?.toolInvocation?.toolCallId ===
+                    toolCallId
+                );
+              const toolInvocation = (partItem as IToolInvocationUIPart)?.toolInvocation;
+              if (!toolInvocation) {
+                return;
+              }
+              let createdViewId: string | undefined;
+              try {
+                const { result } = toolInvocation;
+                const createdView = JSON.parse(result?.content?.[0]?.text);
+                createdViewId = createdView?.view.id;
+              } catch (error) {
+                console.error('parse created table error', error);
+              }
+              if (!createdViewId) {
+                return;
+              }
+              if (createdViewId !== currentTableId) {
+                router.push(
+                  {
+                    pathname: `/base/[baseId]/[tableId]/[viewId]`,
+                    query: {
+                      baseId,
+                      tableId,
+                      viewId: createdViewId,
+                    },
+                  },
+                  undefined,
+                  {
+                    shallow: Boolean(currentTableId),
+                  }
+                );
+              }
+            }, 3000);
+            break;
+          }
+          case McpToolInvocationName.CreateTable: {
+            setTimeout(() => {
+              const { toolCallId } = toolCall;
+              const partItem = messagesRef?.current
+                ?.map(({ parts }) => parts)
+                .flat()
+                ?.find(
+                  (part) =>
+                    (part as unknown as IToolInvocationUIPart)?.toolInvocation?.toolCallId ===
+                    toolCallId
+                );
+              const toolInvocation = (partItem as IToolInvocationUIPart)?.toolInvocation;
+              if (!toolInvocation) {
+                return;
+              }
+              let createdTableId: string | undefined;
+              try {
+                const { result } = toolInvocation;
+                const createdTable = JSON.parse(result?.content?.[0]?.text);
+                createdTableId = createdTable?.table.id;
+                console.log('createdTablecreatedTablecreatedTable', createdTable);
+              } catch (error) {
+                console.error('createdTablecreatedTablecreatedTable', error);
+                console.error('parse created table error', error);
+              }
+              if (!createdTableId) {
+                return;
+              }
+              if (createdTableId !== currentTableId) {
+                router.push(
+                  {
+                    pathname: `/base/[baseId]/[tableId]/`,
+                    query: {
+                      baseId,
+                      tableId: createdTableId,
+                    },
+                  },
+                  undefined,
+                  {
+                    shallow: Boolean(currentTableId),
+                  }
+                );
+              }
+            }, 3000);
+            break;
+          }
+        }
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      },
+    });
+
+  const messagesRef = useRef(messages);
+
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
 
   useEffect(() => {
     if (status === 'streaming' && !isActiveChat) {
@@ -121,28 +277,49 @@ export const ChatContainer = ({ baseId }: { baseId: string }) => {
     }
   }, [status, setActiveChatId, chatId, isActiveChat, queryClient, baseId]);
 
+  useImperativeHandle(ref, () => ({
+    setInputValue: (value: string) => {
+      setInput(value);
+    },
+    submit: () => {
+      handleSubmit();
+    },
+  }));
+
   return (
-    <div className="flex flex-1 flex-col overflow-hidden pb-3">
-      <Messages
-        messages={messages}
-        messageMetaMap={messageMetaMap}
-        chatId={chatId}
-        status={status}
-      />
-      <form className="px-2">
-        <MessageInput
-          modelKey={validModelKey}
-          models={models}
-          input={input}
-          setInput={setInput}
-          status={status}
-          stop={stop}
-          setModelKey={setModelKey}
-          setMessages={setMessages}
-          handleSubmit={handleSubmit}
-          modelLoading={isBaseAiConfigLoading}
-        />
-      </form>
+    <div className="flex w-full flex-1 flex-col overflow-hidden pb-1">
+      {(messages.length > 0 || !autoOpen) && (
+        <ChatContext.Provider
+          value={{
+            ...chatContext,
+            addToolResult,
+          }}
+        >
+          <div className="flex flex-1 flex-col overflow-hidden pb-1">
+            <Messages
+              messages={messages}
+              messageMetaMap={messageMetaMap}
+              chatId={chatId}
+              status={status}
+            />
+            <MessageInput
+              messages={messages}
+              modelKey={validModelKey}
+              models={models}
+              input={input}
+              setInput={setInput}
+              status={status}
+              stop={stop}
+              setModelKey={setModelKey}
+              setMessages={setMessages}
+              handleSubmit={handleSubmit}
+              modelLoading={isBaseAiConfigLoading}
+            />
+          </div>
+        </ChatContext.Provider>
+      )}
     </div>
   );
-};
+});
+
+ChatContainer.displayName = 'ChatContainer';
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanel.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanel.tsx
index ea97da5180..0bf51863d4 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanel.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanel.tsx
@@ -1,5 +1,4 @@
 import { useBaseId } from '@teable/sdk/hooks';
-import { ChatProvider } from '../context/ChatProvider';
 import { useChatEnabled } from '../hooks/useChatEnabled';
 import { useChatPanelStore } from '../store/useChatPanelStore';
 import { PanelContainer } from './PanelContainer';
@@ -11,9 +10,5 @@ export const ChatPanel = () => {
 
   if (!isVisible || !baseId || !chatEnabled) return <></>;
 
-  return (
-    <ChatProvider>
-      <PanelContainer baseId={baseId} />
-    </ChatProvider>
-  );
+  return <PanelContainer baseId={baseId} />;
 };
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanelHeader.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanelHeader.tsx
index 4cd33a8069..69f622727f 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanelHeader.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/panel/ChatPanelHeader.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next';
 import { useChatContext } from '../context/useChatContext';
 import { useActiveChat } from '../hooks/useActiveChat';
 import { useChatPanelStore } from '../store/useChatPanelStore';
+import { useChatStore } from '../store/useChatStore';
 import { ChatHistory } from './ChatHistory';
 
 export const ChatPanelHeader = ({ baseId }: { baseId: string }) => {
@@ -12,6 +13,7 @@ export const ChatPanelHeader = ({ baseId }: { baseId: string }) => {
   const { clearActiveChatId } = useChatContext();
   const { t } = useTranslation(['table']);
   const title = activeChat?.name ?? t('table:aiChat.newChat');
+  const { setMessages } = useChatStore();
 
   return (
     <div className="flex h-[42px] items-center border-b pl-2 align-middle">
@@ -27,7 +29,14 @@ export const ChatPanelHeader = ({ baseId }: { baseId: string }) => {
             <History className="size-4 font-normal" />
           </Button>
         </ChatHistory>
-        <Button variant="ghost" size="xs" onClick={closePanel}>
+        <Button
+          variant="ghost"
+          size="xs"
+          onClick={() => {
+            closePanel();
+            setMessages([]);
+          }}
+        >
           <X className="size-4 font-normal" />
         </Button>
       </div>
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/panel/PanelContainer.tsx b/apps/nextjs-app/src/features/app/components/ai-chat/panel/PanelContainer.tsx
index 1ce0a870be..a345d14395 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/panel/PanelContainer.tsx
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/panel/PanelContainer.tsx
@@ -1,55 +1,76 @@
 import { useIsMobile } from '@teable/sdk/hooks';
 import { Resizable } from 're-resizable';
+import { useRef, forwardRef, useImperativeHandle } from 'react';
 import { useChatPanelStore } from '../store/useChatPanelStore';
+import type { ChatContainerRef } from './ChatContainer';
 import { ChatContainer } from './ChatContainer';
 import { ChatPanelHeader } from './ChatPanelHeader';
 
 const DEFAULT_PANEL_WIDTH = '300px';
 
-export const PanelContainer = ({ baseId }: { baseId: string }) => {
-  const { width = DEFAULT_PANEL_WIDTH, updateWidth } = useChatPanelStore();
-  const isMobile = useIsMobile();
+export interface PanelContainerRef {
+  setInputValue: (value: string) => void;
+  submit: () => void;
+}
+
+export const PanelContainer = forwardRef<PanelContainerRef, { baseId: string; maxWidth?: string }>(
+  ({ baseId, maxWidth = '60%' }, ref) => {
+    const { width = DEFAULT_PANEL_WIDTH, updateWidth } = useChatPanelStore();
+    const isMobile = useIsMobile();
+    const chatContainerRef = useRef<ChatContainerRef>(null);
+
+    useImperativeHandle(ref, () => ({
+      setInputValue: (value: string) => {
+        chatContainerRef.current?.setInputValue(value);
+      },
+      submit: () => {
+        chatContainerRef.current?.submit();
+      },
+    }));
+
+    if (isMobile) {
+      return (
+        <div className="fixed z-50 flex size-full flex-col overflow-hidden bg-background px-1">
+          <ChatPanelHeader baseId={baseId} />
+          <ChatContainer baseId={baseId} ref={chatContainerRef} />
+        </div>
+      );
+    }
 
-  if (isMobile) {
     return (
-      <div className="fixed z-50 flex size-full flex-col overflow-hidden bg-background px-1">
+      <Resizable
+        className="ml-1 flex h-full flex-col overflow-hidden bg-background px-1"
+        size={{ width, height: '100%' }}
+        defaultSize={{ width: DEFAULT_PANEL_WIDTH, height: '100%' }}
+        maxWidth={maxWidth}
+        minWidth={'300px'}
+        enable={{
+          left: true,
+        }}
+        onResizeStop={(_e, _direction, ref) => {
+          updateWidth(ref.style.width);
+        }}
+        handleClasses={{
+          left: 'group',
+        }}
+        handleStyles={{
+          left: {
+            width: '4px',
+            left: '0',
+            zIndex: 50,
+          },
+        }}
+        handleComponent={{
+          left: (
+            <div className="h-full w-px bg-border group-hover:px-[1.5px] group-active:px-[1.5px]"></div>
+          ),
+        }}
+      >
         <ChatPanelHeader baseId={baseId} />
-        <ChatContainer baseId={baseId} />
-      </div>
+        <ChatContainer baseId={baseId} ref={chatContainerRef} />
+      </Resizable>
     );
   }
+);
 
-  return (
-    <Resizable
-      className="ml-1 flex h-full flex-col overflow-hidden bg-background px-1"
-      size={{ width, height: '100%' }}
-      defaultSize={{ width: DEFAULT_PANEL_WIDTH, height: '100%' }}
-      maxWidth={'60%'}
-      minWidth={'300px'}
-      enable={{
-        left: true,
-      }}
-      onResizeStop={(_e, _direction, ref) => {
-        updateWidth(ref.style.width);
-      }}
-      handleClasses={{
-        left: 'group',
-      }}
-      handleStyles={{
-        left: {
-          width: '4px',
-          left: '0',
-          zIndex: 50,
-        },
-      }}
-      handleComponent={{
-        left: (
-          <div className="h-full w-px bg-border group-hover:px-[1.5px] group-active:px-[1.5px]"></div>
-        ),
-      }}
-    >
-      <ChatPanelHeader baseId={baseId} />
-      <ChatContainer baseId={baseId} />
-    </Resizable>
-  );
-};
+PanelContainer.displayName = 'PanelContainer';
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatControl.ts b/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatControl.ts
new file mode 100644
index 0000000000..ca0b6438b5
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatControl.ts
@@ -0,0 +1,19 @@
+import type { McpToolInvocationName } from '@teable/openapi';
+import { create } from 'zustand';
+
+interface IChatControlState {
+  toolCallInfo: {
+    tableId: string | null;
+    toolName: McpToolInvocationName | null;
+  };
+  setToolCallInfo: (tableId: string | null, toolName: McpToolInvocationName | null) => void;
+}
+
+export const useChatControlStore = create<IChatControlState>()((set) => ({
+  toolCallInfo: {
+    tableId: null,
+    toolName: null,
+  },
+  setToolCallInfo: (tableId: string | null, toolName: McpToolInvocationName | null) =>
+    set({ toolCallInfo: { tableId, toolName } }),
+}));
diff --git a/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatStore.ts b/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatStore.ts
index a3c95664ad..a5577fc5ea 100644
--- a/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatStore.ts
+++ b/apps/nextjs-app/src/features/app/components/ai-chat/store/useChatStore.ts
@@ -1,9 +1,12 @@
+import type { UseChatHelpers } from '@ai-sdk/react';
 import { LocalStorageKeys } from '@teable/sdk/config';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 interface IChatState {
   modelKey?: string;
   setModelKey: (modelKey: string) => void;
+  messages: UseChatHelpers['messages'];
+  setMessages: (messages: UseChatHelpers['messages']) => void;
 }
 
 export const useChatStore = create<IChatState>()(
@@ -12,6 +15,8 @@ export const useChatStore = create<IChatState>()(
       activeChatId: undefined,
       modelKey: undefined,
       setModelKey: (modelKey: string) => set({ modelKey }),
+      messages: [],
+      setMessages: (messages) => set({ messages }),
     }),
     {
       name: LocalStorageKeys.Chat,
diff --git a/apps/nextjs-app/src/features/app/components/space/SpaceActionBar.tsx b/apps/nextjs-app/src/features/app/components/space/SpaceActionBar.tsx
index aa3160b74a..a2da19228c 100644
--- a/apps/nextjs-app/src/features/app/components/space/SpaceActionBar.tsx
+++ b/apps/nextjs-app/src/features/app/components/space/SpaceActionBar.tsx
@@ -1,16 +1,18 @@
-import { hasPermission } from '@teable/core';
+import { useMutation } from '@tanstack/react-query';
+import { hasPermission, getUniqName } from '@teable/core';
 import { MoreHorizontal, UserPlus } from '@teable/icons';
-import type { IGetSpaceVo } from '@teable/openapi';
+import { createBase, type IGetSpaceVo } from '@teable/openapi';
 import type { ButtonProps } from '@teable/ui-lib';
-import { Button } from '@teable/ui-lib';
+import { Button, Spin } from '@teable/ui-lib';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { GUIDE_CREATE_BASE } from '@/components/Guide';
 import { spaceConfig } from '@/features/i18n/space.config';
 import { SpaceActionTrigger } from '../../blocks/space/component/SpaceActionTrigger';
 import { UploadPanelDialog } from '../../blocks/space/component/upload-panel';
+import { useBaseList } from '../../blocks/space/useBaseList';
 import { SpaceCollaboratorModalTrigger } from '../collaborator-manage/space/SpaceCollaboratorModalTrigger';
-import { CreateBaseModalTrigger } from './CreateBaseModal';
 
 interface ActionBarProps {
   space: IGetSpaceVo;
@@ -37,14 +39,35 @@ export const SpaceActionBar: React.FC<ActionBarProps> = (props) => {
 
   const { t } = useTranslation(spaceConfig.i18nNamespaces);
 
+  const router = useRouter();
+
+  const allBases = useBaseList();
+  const bases = allBases?.filter((base) => base.spaceId === space.id);
+
+  const { mutate: createBaseMutator, isLoading: createBaseLoading } = useMutation({
+    mutationFn: createBase,
+    onSuccess: ({ data }) => {
+      router.push({
+        pathname: '/base/[baseId]',
+        query: { baseId: data.id },
+      });
+    },
+  });
+
   return (
     <div className={className}>
       {hasPermission(space.role, 'base|create') && (
-        <CreateBaseModalTrigger spaceId={space.id}>
-          <Button className={GUIDE_CREATE_BASE} size={buttonSize}>
-            {t('space:action.createBase')}
-          </Button>
-        </CreateBaseModalTrigger>
+        <Button
+          className={GUIDE_CREATE_BASE}
+          size={buttonSize}
+          onClick={() => {
+            const name = getUniqName(t('common:noun.base'), bases?.map((base) => base.name) || []);
+            createBaseMutator({ spaceId: space.id, name });
+          }}
+        >
+          {t('space:action.createBase')}
+          {createBaseLoading && <Spin />}
+        </Button>
       )}
       {!disallowSpaceInvitation && (
         <SpaceCollaboratorModalTrigger space={space}>
diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx
index 8d84b0faee..84cf4c710d 100644
--- a/apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx
+++ b/apps/nextjs-app/src/features/app/components/space/template/TemplateDetail.tsx
@@ -5,7 +5,7 @@ import {
   getPublishedTemplateCategoryList,
   getTemplateDetail,
 } from '@teable/openapi';
-import { MarkdownPreview } from '@teable/sdk';
+import { MarkdownPreview, useTables } from '@teable/sdk';
 import { ReactQueryKeys } from '@teable/sdk/config/react-query-keys';
 import { Spin } from '@teable/ui-lib/base';
 import { Button } from '@teable/ui-lib/shadcn';
@@ -15,7 +15,7 @@ import { useMemo } from 'react';
 import { useSpaceId } from './hooks/use-space-id';
 interface ITemplateDetailProps {
   templateId: string;
-  onBackToTemplateList: () => void;
+  onBackToTemplateList?: () => void;
 }
 export const TemplateDetail = (props: ITemplateDetailProps) => {
   const { templateId, onBackToTemplateList } = props;
@@ -38,6 +38,8 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
 
   const router = useRouter();
   const spaceId = useSpaceId();
+  const routerBaseId = router.query.baseId as string | undefined;
+  const tables = useTables();
 
   const { mutateAsync: createTemplateToBase, isLoading } = useMutation({
     mutationFn: () =>
@@ -45,9 +47,14 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
         spaceId: spaceId as string,
         templateId,
         withRecords: true,
+        baseId: routerBaseId,
       }),
     onSuccess: (res) => {
       const { id: baseId } = res.data;
+      if (routerBaseId && tables.length > 0) {
+        router.push(`/base/${baseId}/table/${tables[0].id}`);
+        return;
+      }
       router.push(`/base/${baseId}`);
     },
   });
@@ -56,20 +63,22 @@ export const TemplateDetail = (props: ITemplateDetailProps) => {
     <div className="mx-6 mt-2 flex flex-1 items-start justify-center overflow-auto">
       <div className="relative grid w-full grid-cols-8">
         <div className="sticky top-0 col-span-8 flex flex-col self-start pb-12 pr-8 sm:col-span-2 sm:pb-0">
-          <div
-            className="flex cursor-pointer items-center gap-1 pb-4 text-sm text-foreground transition-colors hover:text-foreground/80"
-            role="button"
-            tabIndex={0}
-            onClick={() => onBackToTemplateList()}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                onBackToTemplateList();
-              }
-            }}
-          >
-            <ArrowLeft />
-            {t('common:settings.templateAdmin.backToTemplateList')}
-          </div>
+          {onBackToTemplateList && (
+            <div
+              className="flex cursor-pointer items-center gap-1 pb-4 text-sm text-foreground transition-colors hover:text-foreground/80"
+              role="button"
+              tabIndex={0}
+              onClick={() => onBackToTemplateList?.()}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  onBackToTemplateList?.();
+                }
+              }}
+            >
+              <ArrowLeft />
+              {t('common:settings.templateAdmin.backToTemplateList')}
+            </div>
+          )}
           <h1 className="z-10 bg-background text-lg font-bold">{name}</h1>
           <p className="overflow-hidden text-wrap break-words text-base text-gray-500">
             {description}
diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplateModal.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplateModal.tsx
index 3869f2b883..3f3b295226 100644
--- a/apps/nextjs-app/src/features/app/components/space/template/TemplateModal.tsx
+++ b/apps/nextjs-app/src/features/app/components/space/template/TemplateModal.tsx
@@ -40,8 +40,8 @@ export const TemplateModal = (props: TemplateModalProps) => {
         <DialogHeader className="flex w-full border-b p-4">
           <div className="relative flex w-full items-center justify-center gap-2">
             <div className="absolute left-0 flex shrink-0 flex-col gap-0.5">
-              <DialogTitle>{t('template.title')}</DialogTitle>
-              <DialogDescription>{t('template.description')}</DialogDescription>
+              <DialogTitle>{t('common:template.title')}</DialogTitle>
+              <DialogDescription>{t('common:template.description')}</DialogDescription>
             </div>
             <Input
               placeholder={t('common:settings.templateAdmin.baseSelectPanel.search')}
diff --git a/apps/nextjs-app/src/features/app/components/space/template/TemplateSheet.tsx b/apps/nextjs-app/src/features/app/components/space/template/TemplateSheet.tsx
index 83c13bb8a9..e0d4a0e3f3 100644
--- a/apps/nextjs-app/src/features/app/components/space/template/TemplateSheet.tsx
+++ b/apps/nextjs-app/src/features/app/components/space/template/TemplateSheet.tsx
@@ -36,7 +36,7 @@ export const TemplateSheet = (props: ITemplateSheetProps) => {
           <div className="flex w-full items-center justify-start gap-2">
             <div className="left-0 flex flex-1 flex-col gap-1 p-0.5 pr-2">
               <div className="flex gap-2">
-                <SheetTitle>{t('template.title')}</SheetTitle>
+                <SheetTitle>{t('common:template.title')}</SheetTitle>
                 <Input
                   placeholder={t('common:settings.templateAdmin.baseSelectPanel.search')}
                   value={search}
@@ -47,7 +47,7 @@ export const TemplateSheet = (props: ITemplateSheetProps) => {
                 />
               </div>
               <SheetDescription className="text-start">
-                {t('template.description')}
+                {t('common:template.description')}
               </SheetDescription>
             </div>
           </div>
diff --git a/apps/nextjs-app/src/features/app/layouts/BaseLayout.tsx b/apps/nextjs-app/src/features/app/layouts/BaseLayout.tsx
index ce16becacd..9ecd619329 100644
--- a/apps/nextjs-app/src/features/app/layouts/BaseLayout.tsx
+++ b/apps/nextjs-app/src/features/app/layouts/BaseLayout.tsx
@@ -10,6 +10,7 @@ import { AppLayout } from '@/features/app/layouts';
 import { BaseSideBar } from '../blocks/base/base-side-bar/BaseSideBar';
 import { BaseSidebarHeaderLeft } from '../blocks/base/base-side-bar/BaseSidebarHeaderLeft';
 import { BasePermissionListener } from '../blocks/base/BasePermissionListener';
+import { ChatProvider } from '../components/ai-chat/context/ChatProvider';
 import { UsageLimitModal } from '../components/billing/UsageLimitModal';
 import { Sidebar } from '../components/sidebar/Sidebar';
 import { SideBarFooter } from '../components/SideBarFooter';
@@ -41,24 +42,26 @@ export const BaseLayout: React.FC<{
               <BaseProvider>
                 <BasePermissionListener />
                 <TableProvider serverData={tableServerData}>
-                  <div
-                    id="portal"
-                    className="relative flex h-screen w-full items-start"
-                    onContextMenu={(e) => e.preventDefault()}
-                  >
-                    <div className="flex h-screen w-full">
-                      <Sidebar headerLeft={<BaseSidebarHeaderLeft />}>
-                        <Fragment>
-                          <div className="flex flex-col gap-2 divide-y divide-solid overflow-auto py-2">
-                            <BaseSideBar />
-                          </div>
-                          <div className="grow basis-0" />
-                          <SideBarFooter />
-                        </Fragment>
-                      </Sidebar>
-                      <div className="min-w-80 flex-1">{children}</div>
+                  <ChatProvider>
+                    <div
+                      id="portal"
+                      className="relative flex h-screen w-full items-start"
+                      onContextMenu={(e) => e.preventDefault()}
+                    >
+                      <div className="flex h-screen w-full">
+                        <Sidebar headerLeft={<BaseSidebarHeaderLeft />}>
+                          <Fragment>
+                            <div className="flex flex-col gap-2 divide-y divide-solid overflow-auto py-2">
+                              <BaseSideBar />
+                            </div>
+                            <div className="grow basis-0" />
+                            <SideBarFooter />
+                          </Fragment>
+                        </Sidebar>
+                        <div className="min-w-80 flex-1">{children}</div>
+                      </div>
                     </div>
-                  </div>
+                  </ChatProvider>
                   <UsageLimitModal />
                 </TableProvider>
               </BaseProvider>
diff --git a/apps/nextjs-app/src/pages/base/[baseId].tsx b/apps/nextjs-app/src/pages/base/[baseId].tsx
index 4d87733c7a..78cbef2cca 100644
--- a/apps/nextjs-app/src/pages/base/[baseId].tsx
+++ b/apps/nextjs-app/src/pages/base/[baseId].tsx
@@ -2,10 +2,9 @@ import { dehydrate, QueryClient } from '@tanstack/react-query';
 import { LastVisitResourceType, type ITableVo } from '@teable/openapi';
 import { ReactQueryKeys } from '@teable/sdk/config';
 import type { GetServerSideProps } from 'next';
-import { Trans, useTranslation } from 'next-i18next';
 import type { ReactElement } from 'react';
+import { CommunityPage } from '@/features/app/base/CommunityPage';
 import { BaseLayout } from '@/features/app/layouts/BaseLayout';
-import { dashboardConfig } from '@/features/i18n/dashboard.config';
 import ensureLogin from '@/lib/ensureLogin';
 import { getTranslationsProps } from '@/lib/i18n';
 import type { NextPageWithLayout } from '@/lib/type';
@@ -13,39 +12,7 @@ import withAuthSSR from '@/lib/withAuthSSR';
 import withEnv from '@/lib/withEnv';
 
 const Node: NextPageWithLayout = () => {
-  const { t } = useTranslation(dashboardConfig.i18nNamespaces);
-  return (
-    <div className="h-full flex-col md:flex">
-      <div className="flex h-full flex-1 flex-col gap-2 lg:gap-4">
-        <div className="items-center justify-between space-y-2 px-8 pb-2 pt-6 lg:flex">
-          <h2 className="text-3xl font-bold tracking-tight">{t('table:welcome.title')}</h2>
-        </div>
-        <div className="flex h-full flex-col items-center justify-center p-4">
-          <ul className="mb-4 space-y-2 text-left">
-            <li>{t('table:welcome.description')}</li>
-            <li>
-              <Trans
-                ns="table"
-                i18nKey="welcome.help"
-                components={{
-                  HelpCenter: (
-                    <a
-                      href={t('help.mainLink')}
-                      className="text-blue-500 hover:text-blue-700"
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      {t('table:welcome.helpCenter')}
-                    </a>
-                  ),
-                }}
-              ></Trans>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
+  return <CommunityPage />;
 };
 
 export const getServerSideProps: GetServerSideProps = withEnv(
diff --git a/packages/common-i18n/src/locales/en/common.json b/packages/common-i18n/src/locales/en/common.json
index 4ccbf37d12..c81899b4d3 100644
--- a/packages/common-i18n/src/locales/en/common.json
+++ b/packages/common-i18n/src/locales/en/common.json
@@ -54,13 +54,290 @@
   "password": {
     "setInvalid": "The password is invalid, at least 8 characters, and must contain at least one letter and one number."
   },
+  "template": {
+    "aiTitle": "Build your internal tool",
+    "aiSubTitle": "The first AI platform where teams collaborate on data and generate production apps",
+    "title": "Template",
+    "description": "Create a new base from a template",
+    "browseAll": "Browse All",
+    "templateTitle": "Start with template",
+    "loadMore": "Load More",
+    "allTemplatesLoaded": "All templates loaded",
+    "noTemplates": "No templates available",
+    "promptBox": {
+      "placeholder": "Build your business app with Teable",
+      "start": "Start it",
+      "ideas": "Some ideas to get started:",
+      "ideasList": {
+        "crm": {
+          "title": "CRM",
+          "crmForArtists": {
+            "title": "CRM for Artists",
+            "prompt": "I'm an independent artist who needs to manage my collectors, artwork inventory, and sales pipeline. I want to track which clients are interested in specific styles, monitor my piece availability, record sales transactions, and keep tabs on upcoming exhibitions. I'd love insights into my best-selling works, identify repeat buyers, and get notifications when pieces are running low or important shows are approaching."
+          },
+          "crmForRealEstate": {
+            "title": "CRM for Real Estate",
+            "prompt": "I'm a real estate agent who needs to manage my clients, properties, and sales pipeline. I want to track which clients are interested in specific properties, monitor property availability, record sales transactions, and keep tabs on upcoming open houses. I'd love insights into my best-selling properties, identify repeat buyers, and get notifications when properties are running low or important open houses are approaching."
+          },
+          "crmForLawyers": {
+            "title": "CRM for Lawyers/Legal Practices",
+            "prompt": "Our law firm handles client matters across various practice areas and needs to streamline case management. We track case progression, critical deadlines, billing cycles, and attorney workloads. I want oversight of our revenue streams, practice area distribution, and automated alerts for upcoming court dates, overdue invoices, and client check-ins."
+          },
+          "crmForPhotographers": {
+            "title": "CRM for Photographers",
+            "prompt": "As a freelance photographer, I manage client bookings, shoot schedules, and deliverable timelines across wedding, portrait, and commercial work. I need insights into revenue by photography type, equipment usage, post-production workflow, and automated reminders for project deadlines and outstanding payments."
+          },
+          "crmForHealthcare": {
+            "title": "CRM for Healthcare Practices",
+            "prompt": "Our medical practice manages patient records, appointment scheduling, and treatment protocols. We want to track patient visit history, treatment outcomes, follow-up compliance, and operational metrics. The system should send appointment reminders, schedule follow-ups, manage provider availability, and analyze our most successful treatment programs."
+          },
+          "crmForInfluencers": {
+            "title": "CRM for Influencers/Content Creators",
+            "prompt": "I'm a content creator managing brand partnerships, content calendars, and audience engagement across multiple platforms. I need to track campaign performance, collaboration revenue, content metrics, and partnership deliverables. I want growth analytics, performance insights, and reminders for content deadlines and payment milestones."
+          },
+          "crmForWeddingPlanners": {
+            "title": "CRM for Wedding Planners",
+            "prompt": "I run a wedding planning business coordinating couples, vendors, and event timelines. I need to manage wedding budgets, task completion, vendor performance, and client satisfaction. The system should alert me to important wedding milestones, vendor contract renewals, and help me analyze our most popular wedding packages."
+          },
+          "crmForFitnessTrainers": {
+            "title": "CRM for Fitness Trainers/Gyms",
+            "prompt": "I operate a fitness studio managing member profiles, class schedules, and training progress. I want to track member engagement, attendance patterns, renewal rates, and trainer schedules. I need insights into popular class types, member retention, and automated alerts for membership renewals and low-attendance members."
+          },
+          "crmForMusicians": {
+            "title": "CRM for Musicians/Bands",
+            "prompt": "Our band manages fan relationships, tour logistics, and merchandise sales. We track concert ticket sales, fan engagement, merch inventory, and music performance metrics. We want to see our popularity across different markets and get automated fan notifications for new releases and upcoming shows."
+          },
+          "crmForConstruction": {
+            "title": "CRM for Construction Contractors",
+            "prompt": "I'm a general contractor overseeing multiple projects, client relationships, and construction timelines. I need to monitor project costs, material procurement, schedule adherence, and payment cycles. I want profitability insights, resource utilization reports, and alerts for project milestones and payment due dates."
+          }
+        },
+        "devProductivity": {
+          "title": "Dev Productivity",
+          "codeReviewTracker": {
+            "title": "Code Review Tracker",
+            "prompt": "I'm a software developer who needs to manage my code reviews. I want to track which code reviews are pending, which ones are in progress, and which ones are completed. I'd love to see a list of all code reviews, their status, and the reviewers. I'd also like to be able to filter code reviews by status, reviewer, and project."
+          },
+          "bugTrackingSystem": {
+            "title": "Bug Tracking System",
+            "prompt": "Our engineering team needs to streamline bug reporting, triage, and resolution workflows. I want to track bug severity distribution, time-to-resolution metrics, developer workload balance, and identify recurring issue patterns. The system should prioritize critical bugs, assign based on expertise, and provide progress visibility to stakeholders."
+          },
+          "sprintPlanningDashboard": {
+            "title": "Sprint Planning Dashboard",
+            "prompt": "I'm a scrum master coordinating sprint planning, story point estimation, and velocity tracking for multiple development teams. I need visibility into team capacity, sprint completion rates, backlog prioritization, and impediment resolution. I want predictive analytics for delivery timelines and automated alerts for scope creep."
+          },
+          "apiDocumentationManager": {
+            "title": "API Documentation Manager",
+            "prompt": "Our development team maintains numerous APIs and microservices that need comprehensive documentation tracking. I want to monitor documentation coverage, API usage analytics, deprecation timelines, and integration health. The system should alert us to outdated docs, breaking changes, and help maintain API versioning consistency."
+          },
+          "techDebtTracker": {
+            "title": "Tech Debt Tracker",
+            "prompt": "I need to systematically track, prioritize, and manage technical debt across our codebase. I want to catalog legacy code sections, assess refactoring priorities, track improvement progress, and measure the impact of debt reduction efforts. The system should help balance feature development with maintenance work."
+          },
+          "developerOnboardingSystem": {
+            "title": "Developer Onboarding System",
+            "prompt": "I'm responsible for streamlining the onboarding process for new developers joining our team. I need to track completion of setup tasks, skill assessment progress, mentorship assignments, and early productivity metrics. I want insights into onboarding bottlenecks and automated progress notifications for both new hires and mentors."
+          }
+        },
+        "educational": {
+          "title": "Educational",
+          "studentPerformanceTracker": {
+            "title": "Student Performance Tracker",
+            "prompt": "I'm an educator managing student progress across multiple courses and assessment types. I need to track attendance, assignment completion, grade trends, and learning objective mastery. I want early intervention alerts for struggling students, insights into successful teaching methods, and automated parent communication for progress updates."
+          },
+          "courseContentManagement": {
+            "title": "Course Content Management",
+            "prompt": "I manage curriculum development and content delivery across multiple educational programs. I need to organize learning materials, track content effectiveness, monitor engagement metrics, and coordinate with other instructors. I want insights into which content resonates best and automated scheduling for content reviews and updates."
+          },
+          "onlineLearningPlatform": {
+            "title": "Online Learning Platform",
+            "prompt": "I run an online education platform managing student enrollments, course completions, and instructor performance. I need to track engagement metrics, completion rates, student satisfaction, and revenue by course type. I want predictive analytics for student success and automated recommendations for course improvements."
+          },
+          "researchProjectManager": {
+            "title": "Research Project Manager",
+            "prompt": "I'm coordinating academic research projects involving multiple students, faculty, and external collaborators. I need to track research milestones, budget allocation, publication progress, and resource utilization. I want insights into productive research patterns and automated reminders for grant deadlines and project deliverables."
+          },
+          "schoolAdministrationSystem": {
+            "title": "School Administration System",
+            "prompt": "I manage school operations including enrollment, scheduling, staff coordination, and resource allocation. I need visibility into classroom utilization, teacher workloads, student demographics, and budget management. I want operational insights and automated notifications for enrollment periods, staffing needs, and facility maintenance."
+          },
+          "trainingProgramTracker": {
+            "title": "Training Program Tracker",
+            "prompt": "I oversee professional development and certification programs for working adults. I need to manage enrollment cycles, track skill progression, monitor instructor effectiveness, and measure career impact. I want insights into program ROI and automated alerts for certification renewals and program improvements."
+          }
+        },
+        "personalFinance": {
+          "title": "Personal Finance",
+          "investmentPortfolioTracker": {
+            "title": "Investment Portfolio Tracker",
+            "prompt": "I'm managing my investment portfolio across stocks, bonds, crypto, and real estate. I need to track asset allocation, performance metrics, dividend income, and rebalancing opportunities. I want insights into my investment patterns, risk exposure analysis, and automated alerts for significant market movements or rebalancing needs."
+          },
+          "budgetManagementSystem": {
+            "title": "Budget Management System",
+            "prompt": "I need comprehensive tracking of my monthly income, expenses, and savings goals across multiple accounts and categories. I want to monitor spending patterns, identify cost-saving opportunities, track progress toward financial goals, and receive alerts for budget overruns or unusual spending patterns."
+          },
+          "debtPayoffPlanner": {
+            "title": "Debt Payoff Planner",
+            "prompt": "I'm managing multiple debts including credit cards, student loans, and mortgages with different interest rates and payment schedules. I need to track payoff progress, optimize payment strategies, monitor interest savings, and maintain motivation through goal visualization. I want automated reminders and payment optimization suggestions."
+          },
+          "retirementPlanningDashboard": {
+            "title": "Retirement Planning Dashboard",
+            "prompt": "I'm planning for retirement and need to track contributions across 401k, IRA, and other investment accounts. I want to model different retirement scenarios, monitor progress toward retirement goals, track employer matching, and optimize tax-advantaged contributions. The system should provide retirement readiness insights and adjustment recommendations."
+          },
+          "taxPreparationOrganizer": {
+            "title": "Tax Preparation Organizer",
+            "prompt": "I need to organize tax-related documents, track deductible expenses, monitor tax-loss harvesting opportunities, and prepare for annual tax filing. I want to categorize income sources, track business expenses, monitor charitable contributions, and receive reminders for important tax deadlines and document collection."
+          },
+          "sideHustleRevenueTracker": {
+            "title": "Side Hustle Revenue Tracker",
+            "prompt": "I'm managing income from multiple side businesses including freelancing, rental properties, and online sales. I need to track revenue streams, business expenses, tax obligations, and profitability by venture. I want insights into my most profitable activities and automated tracking for business mileage and expense categorization."
+          }
+        },
+        "productivity": {
+          "title": "Productivity",
+          "taskManagementSystem": {
+            "title": "Task Management System",
+            "prompt": "I need to organize my daily tasks, project deadlines, and personal goals across work and personal life. I want to track completion rates, time allocation, priority management, and productivity patterns. The system should help me focus on high-impact activities and provide insights into my most productive working styles."
+          },
+          "habitTrackingDashboard": {
+            "title": "Habit Tracking Dashboard",
+            "prompt": "I'm building positive habits and breaking negative ones across health, career, and personal development areas. I need to track consistency, identify trigger patterns, monitor progress streaks, and maintain motivation. I want insights into successful habit formation strategies and automated reminders and encouragement."
+          },
+          "timeBlockingPlanner": {
+            "title": "Time Blocking Planner",
+            "prompt": "I use time blocking to manage my calendar and want to optimize my schedule for maximum productivity. I need to track time allocation across different activities, identify scheduling conflicts, monitor focus time availability, and analyze productive vs. unproductive time blocks. I want automated scheduling suggestions and protected focus time."
+          },
+          "goalAchievementTracker": {
+            "title": "Goal Achievement Tracker",
+            "prompt": "I'm working toward multiple personal and professional goals with different timelines and success metrics. I need to break down large goals into actionable steps, track milestone progress, monitor motivation levels, and adjust strategies based on results. I want visual progress tracking and automated check-ins for goal review."
+          },
+          "energyManagementSystem": {
+            "title": "Energy Management System",
+            "prompt": "I want to optimize my daily energy levels by tracking sleep, exercise, nutrition, and work patterns. I need to identify what activities drain or boost my energy, monitor optimal working hours, track recovery periods, and correlate lifestyle factors with productivity. I want personalized recommendations for energy optimization."
+          },
+          "digitalMinimalismTracker": {
+            "title": "Digital Minimalism Tracker",
+            "prompt": "I'm reducing digital distractions and want to track screen time, app usage, notification patterns, and digital wellness metrics. I need to monitor progress toward reduced device dependency, track focused work sessions, and identify digital habits that support or hinder my goals. I want insights into healthy digital boundaries."
+          }
+        },
+        "healthAndWellness": {
+          "title": "Health and Wellness",
+          "fitnessProgressTracker": {
+            "title": "Fitness Progress Tracker",
+            "prompt": "I'm tracking my fitness journey including workouts, strength progression, cardio performance, and body composition changes. I need to monitor exercise consistency, track personal records, plan workout rotations, and correlate fitness activities with energy and mood. I want insights into effective workout patterns and automated rest day recommendations."
+          },
+          "nutritionAndMealPlanning": {
+            "title": "Nutrition and Meal Planning",
+            "prompt": "I want to plan healthy meals, track nutritional intake, monitor dietary goals, and manage grocery shopping efficiently. I need to track macronutrients, identify nutritional gaps, plan meals around dietary restrictions, and correlate nutrition with energy and health markers. I want meal suggestions and automated shopping lists."
+          },
+          "mentalHealthJournal": {
+            "title": "Mental Health Journal",
+            "prompt": "I'm tracking my mental health through mood patterns, stress levels, therapy progress, and coping strategy effectiveness. I need to identify emotional triggers, monitor medication effects, track therapy insights, and maintain consistent self-care practices. I want trend analysis and automated reminders for mental health check-ins."
+          },
+          "sleepOptimizationSystem": {
+            "title": "Sleep Optimization System",
+            "prompt": "I'm improving my sleep quality by tracking sleep duration, bedtime routines, environmental factors, and wake-up patterns. I need to correlate sleep quality with daily activities, monitor sleep debt, track bedtime consistency, and identify factors that improve or disrupt sleep. I want personalized sleep hygiene recommendations."
+          },
+          "medicalRecordsManager": {
+            "title": "Medical Records Manager",
+            "prompt": "I need to organize medical appointments, track health symptoms, manage medication schedules, and monitor health metrics over time. I want to prepare for doctor visits, track treatment effectiveness, manage insurance information, and maintain family health history. The system should provide health trend insights and appointment reminders."
+          },
+          "wellnessChallengeTracker": {
+            "title": "Wellness Challenge Tracker",
+            "prompt": "I'm participating in various wellness challenges and want to track progress across fitness goals, healthy habits, and lifestyle improvements. I need to monitor challenge completion, compare with friends or groups, track motivation levels, and celebrate achievements. I want social accountability features and progress sharing capabilities."
+          }
+        },
+        "contentGenerationAndEditing": {
+          "title": "Content Generation and Editing",
+          "blogContentPipeline": {
+            "title": "Blog Content Pipeline",
+            "prompt": "I manage a content blog and need to track article ideas, writing progress, publication schedules, and performance metrics. I want to organize content by topic, monitor writing productivity, track engagement analytics, and coordinate with editors and collaborators. I need insights into high-performing content and automated publishing workflows."
+          },
+          "socialMediaContentCalendar": {
+            "title": "Social Media Content Calendar",
+            "prompt": "I'm managing social media content across multiple platforms and need to plan posts, track engagement, monitor brand consistency, and analyze performance. I want to schedule content in advance, track hashtag effectiveness, monitor audience growth, and coordinate campaigns across different social channels."
+          },
+          "videoProductionTracker": {
+            "title": "Video Production Tracker",
+            "prompt": "I'm producing video content and need to manage scripts, filming schedules, editing progress, and publication timelines. I want to track video performance metrics, manage equipment and location bookings, coordinate with team members, and monitor production costs. I need insights into successful video formats and automated workflow notifications."
+          },
+          "podcastManagementSystem": {
+            "title": "Podcast Management System",
+            "prompt": "I run a podcast and need to manage episode planning, guest coordination, recording schedules, and publication workflows. I want to track listener analytics, manage sponsor relationships, organize episode archives, and coordinate post-production tasks. I need insights into audience engagement and automated guest communication."
+          },
+          "newsletterCampaignManager": {
+            "title": "Newsletter Campaign Manager",
+            "prompt": "I manage email newsletters and need to track subscriber growth, content performance, send schedules, and engagement metrics. I want to segment subscribers, A/B test subject lines, monitor unsubscribe rates, and optimize send times. I need insights into content that resonates and automated follow-up sequences."
+          },
+          "creativeWritingProjectTracker": {
+            "title": "Creative Writing Project Tracker",
+            "prompt": "I'm working on creative writing projects including novels, short stories, and poetry. I need to track writing sessions, word count progress, character development, plot timelines, and submission status. I want to maintain consistency in writing habits, organize research materials, and track publication opportunities and rejections."
+          }
+        },
+        "travelPlanning": {
+          "title": "Travel Planning",
+          "tripItineraryOrganizer": {
+            "title": "Trip Itinerary Organizer",
+            "prompt": "I'm planning multiple trips and need to organize flight details, accommodation bookings, activity schedules, and transportation arrangements. I want to track trip expenses, manage confirmation numbers, store important documents, and share itineraries with travel companions. I need automated reminders for check-ins and booking deadlines."
+          },
+          "travelExpenseTracker": {
+            "title": "Travel Expense Tracker",
+            "prompt": "I need to track travel expenses across multiple trips for both personal and business purposes. I want to categorize expenses, track currency conversions, monitor budget adherence, and prepare expense reports. The system should help with tax deductions and provide insights into travel cost patterns and optimization opportunities."
+          },
+          "travelExperienceJournal": {
+            "title": "Travel Experience Journal",
+            "prompt": "I want to document my travel experiences including photos, memories, recommendations, and ratings for places visited. I need to organize by destination, track travel companions, note favorite experiences, and maintain a bucket list of future destinations. I want to create shareable travel guides and preserve travel memories."
+          },
+          "businessTravelManager": {
+            "title": "Business Travel Manager",
+            "prompt": "I frequently travel for business and need to coordinate meeting schedules, track travel policies compliance, manage loyalty programs, and optimize travel efficiency. I want to monitor travel patterns, track time zones, manage corporate bookings, and ensure policy adherence while maximizing comfort and productivity."
+          },
+          "groupTravelCoordinator": {
+            "title": "Group Travel Coordinator",
+            "prompt": "I organize group trips and need to manage multiple travelers' preferences, coordinate group bookings, track payments and deposits, and communicate updates to all participants. I want to plan group activities, manage dietary restrictions and special needs, and ensure everyone has the information they need for a successful trip."
+          },
+          "travelPlanningResearchHub": {
+            "title": "Travel Planning Research Hub",
+            "prompt": "I'm researching destinations and need to organize travel inspiration, compare options, track visa requirements, monitor weather patterns, and save potential accommodations and activities. I want to build detailed destination knowledge, track price changes, and maintain organized research for future trip planning decisions."
+          }
+        },
+        "entertainment": {
+          "title": "Entertainment",
+          "movieAndTvShowTracker": {
+            "title": "Movie and TV Show Tracker",
+            "prompt": "I want to track movies and TV shows I've watched, plan my viewing queue, rate content, and discover new recommendations. I need to organize by genre, track progress on series, monitor streaming platform availability, and share recommendations with friends. I want insights into my viewing patterns and automated recommendations based on my preferences."
+          },
+          "bookReadingProgress": {
+            "title": "Book Reading Progress",
+            "prompt": "I'm tracking my reading goals, book progress, genre preferences, and reading insights. I need to organize my reading list, track pages read, monitor reading speed, rate books, and maintain notes and quotes. I want to discover new books, track reading challenges, and analyze my reading habits for improvement."
+          },
+          "gamingAchievementTracker": {
+            "title": "Gaming Achievement Tracker",
+            "prompt": "I'm tracking my gaming progress across multiple platforms and games. I need to monitor achievement completion, track time played, organize game libraries, and plan gaming sessions. I want insights into gaming patterns, track multiplayer sessions with friends, and maintain a backlog of games to play."
+          },
+          "musicDiscoveryAndOrganization": {
+            "title": "Music Discovery and Organization",
+            "prompt": "I want to organize my music collection, discover new artists, track concert attendance, and manage playlists across different platforms. I need to monitor listening patterns, rate albums, track music purchases, and plan concert attendance. I want insights into my musical preferences and automated recommendations for new discoveries."
+          },
+          "eventAndConcertPlanner": {
+            "title": "Event and Concert Planner",
+            "prompt": "I'm planning events and concerts and need to manage guest lists, track RSVPs, coordinate transportation, and manage event budgets. I want to monitor attendance patterns, track event popularity, coordinate with vendors, and ensure everyone has a great experience. I need insights into event success and automated reminders for follow-ups."
+          },
+          "hobbyProjectManager": {
+            "title": "Hobby Project Manager",
+            "prompt": "I have multiple creative hobbies and need to track project progress, supply inventory, skill development, and time investment. I want to organize projects by type, track completion status, monitor costs, and document learning progress. I need insights into productive hobby time and automated reminders for project milestones."
+          }
+        }
+      }
+    }
+  },
   "settings": {
     "title": "Settings",
     "templateAdmin": {
       "title": "Template Admin",
       "noData": "No data",
       "importing": "Importing...",
-      "usageCount": "Usage count: {{count}}",
+      "usageCount": "Used: {{count}}",
       "useTemplate": "Use this template",
       "createdBy": "by {{user}}",
       "backToTemplateList": "Back to template list",
diff --git a/packages/common-i18n/src/locales/en/table.json b/packages/common-i18n/src/locales/en/table.json
index 515a341855..45e18364d4 100644
--- a/packages/common-i18n/src/locales/en/table.json
+++ b/packages/common-i18n/src/locales/en/table.json
@@ -644,12 +644,36 @@
     "tool": {
       "getTableFields": "Get table fields",
       "getTablesMeta": "Get tables meta",
+      "getRecords": "Get records",
+      "getUpdateFieldsParams": "Get update fields params",
+      "getTableViews": "Get table views info",
       "sqlQuery": "Execute SQL query",
       "generateScriptAction": "Generate script action",
       "getScriptInput": "Get script input",
       "getTeableApi": "Get API",
+      "createFields": "Create fields",
+      "createRecords": "Create records",
+      "createTable": "Create table",
+      "createField": "Create field",
+      "createView": "Create view",
+      "runScripts": "Run scripts",
+      "updateTableName": "Update table name",
+      "updateViewName": "Update view name",
+      "updateField": "Update field",
+      "updateRecords": "Update records",
+      "deleteTable": "Delete table",
+      "deleteView": "Delete view",
+      "deleteField": "Delete field",
+      "deleteRecords": "Delete records",
       "args": "Arguments",
-      "result": "Result"
+      "result": "Result",
+      "tips": {
+        "title": "Tips",
+        "description": "Current view type does not support positioning, only grid view is supported"
+      }
+    },
+    "fallback": {
+      "previewLoadFailed": "Preview load failed, please try again later"
     },
     "codeBlock": {
       "hiddenLines": "{{count}} lines hidden",
@@ -657,6 +681,10 @@
       "code": "Code",
       "preview": "Preview"
     },
+    "control": {
+      "undo": "Undo",
+      "redo": "Redo"
+    },
     "newChat": "New Chat",
     "noModel": "No available models",
     "noHistory": "No chat history",
@@ -675,12 +703,12 @@
       "emptyContext": "No context to add"
     },
     "inputPlaceholder": "Send message...",
-    "thought": "Thinking",
     "meta": {
       "timeCostUnit": "s",
       "timeCostDescription": "Generation time: {{timeCost}}s",
       "creditDescription": "{{credits}} credits consumed",
       "tokenDescription": "Tokens used: {{tokens}}"
-    }
+    },
+    "thought": "Thinking"
   }
 }
diff --git a/packages/common-i18n/src/locales/zh/common.json b/packages/common-i18n/src/locales/zh/common.json
index cb1d8ebe80..0d31e4cb5f 100644
--- a/packages/common-i18n/src/locales/zh/common.json
+++ b/packages/common-i18n/src/locales/zh/common.json
@@ -54,6 +54,283 @@
   "password": {
     "setInvalid": "设置的密码无效，至少需要8个字符，且必须包含至少一个字母和一个数字。"
   },
+  "template": {
+    "aiTitle": "打造你的专属内部应用",
+    "aiSubTitle": "首个让团队在数据协作并生成生产级应用的 AI 平台",
+    "title": "模板中心",
+    "description": "快速从模板创建一个新数据库",
+    "browseAll": "浏览全部",
+    "templateTitle": "从模板开始",
+    "loadMore": "加载更多",
+    "allTemplatesLoaded": "所有模板已加载",
+    "noTemplates": "暂无模板",
+    "promptBox": {
+      "placeholder": "使用 Teable 构建你的业务应用",
+      "start": "开始",
+      "ideas": "从一些想法开始：",
+      "ideasList": {
+        "crm": {
+          "title": "CRM 系统",
+          "crmForArtists": {
+            "title": "艺术家 CRM 系统",
+            "prompt": "我是一个独立艺术家，需要管理我的收藏家、艺术品库存和销售管道。我想跟踪哪些客户对特定风格感兴趣，监控我的作品可用性，记录销售交易，并关注即将到来的展览。我希望了解我的畅销作品，识别重复买家，并在作品即将售罄或重要展览即将到来时收到通知。"
+          },
+          "crmForRealEstate": {
+            "title": "房地产 CRM 系统",
+            "prompt": "我是一个房地产经纪人，需要管理我的客户、房产和销售管道。我想跟踪哪些客户对特定房产感兴趣，监控房产可用性，记录销售交易，并关注即将到来的开放日。我希望了解我的畅销房产，识别重复买家，并在房产即将售罄或重要开放日即将到来时收到通知。"
+          },
+          "crmForLawyers": {
+            "title": "律师 CRM 系统",
+            "prompt": "我们的律师事务所处理各种法律实践领域的客户事务，需要简化案件管理。我们跟踪案件进展、关键截止日期、账单周期和律师工作量。我希望监督我们的收入流、实践领域分布，并收到即将到来的法庭日期、逾期发票和客户检查的自动提醒。"
+          },
+          "crmForPhotographers": {
+            "title": "摄影师 CRM 系统",
+            "prompt": "我是一个自由摄影师，需要管理客户预约、拍摄计划和交付时间表。我希望了解不同摄影类型的收入、设备使用、后期制作流程，并收到项目截止日期和未付款的自动提醒。"
+          },
+          "crmForHealthcare": {
+            "title": "医疗 CRM 系统",
+            "prompt": "我们的医疗实践管理患者记录、预约安排和治疗方案。我们想跟踪患者就诊历史、治疗结果、后续合规性和运营指标。系统应发送预约提醒、安排后续跟进、管理提供者可用性，并分析我们最成功的治疗方案。"
+          },
+          "crmForInfluencers": {
+            "title": "内容创作者 CRM 系统",
+            "prompt": "我是一个内容创作者，需要管理品牌合作、内容日历和跨多个平台的受众参与。我想跟踪活动表现、合作收入、内容指标和合作伙伴交付。我希望获得增长分析、性能洞察和内容截止日期和付款里程碑的提醒。"
+          },
+          "crmForWeddingPlanners": {
+            "title": "婚礼策划师 CRM 系统",
+            "prompt": "我经营一家婚礼策划业务，需要协调夫妻、供应商和活动时间表。我需要管理婚礼预算、任务完成、供应商表现和客户满意度。系统应提醒我重要婚礼里程碑、供应商合同续签，并帮助我分析我们最受欢迎的婚礼套餐。"
+          },
+          "crmForFitnessTrainers": {
+            "title": "健身教练 CRM 系统",
+            "prompt": "我经营一家健身工作室，需要管理会员资料、课程表和训练进度。我想跟踪会员参与度、出席模式、续费率和教练时间表。我希望了解最受欢迎的课程类型、会员保留率和会员续签和低出席率的自动提醒。"
+          },
+          "crmForMusicians": {
+            "title": "音乐家 CRM 系统",
+            "prompt": "我们的乐队管理粉丝关系、巡回演出物流和商品销售。我们跟踪演唱会门票销售、粉丝参与、商品库存和音乐表演指标。我们希望看到我们在不同市场的受欢迎程度，并收到新发行和即将到来的演出的自动粉丝通知。"
+          },
+          "crmForConstruction": {
+            "title": "建筑承包商 CRM 系统",
+            "prompt": "我是一个总承包商，需要管理多个项目、客户关系和建筑时间表。我需要监控项目成本、材料采购、进度遵守和付款周期。我希望获得盈利洞察、资源利用报告和项目里程碑和付款截止日期的提醒。"
+          }
+        },
+        "devProductivity": {
+          "title": "开发效率",
+          "codeReviewTracker": {
+            "title": "代码审查跟踪器",
+            "prompt": "我是一个软件开发人员，需要管理我的代码审查。我想跟踪哪些代码审查是待处理的，哪些正在进行，哪些已完成。我希望看到所有代码审查的列表、状态和审查者。我还希望能够按状态、审查者和项目过滤代码审查。"
+          },
+          "bugTrackingSystem": {
+            "title": "Bug 跟踪系统",
+            "prompt": "我们的工程团队需要简化错误报告、分类和解决工作流程。我想跟踪错误严重性分布、解决时间指标、开发人员工作量平衡，并识别重复问题模式。系统应优先处理关键错误，根据专业知识分配，并向利益相关者提供进度可见性。"
+          },
+          "sprintPlanningDashboard": {
+            "title": "冲刺规划仪表板",
+            "prompt": "我是一个 scrum 主管，需要协调冲刺规划、故事点估计和多个开发团队的速度跟踪。我希望看到团队容量、冲刺完成率、积压优先级和障碍解决。我希望获得交付时间线的预测分析和范围蠕变的自动提醒。"
+          },
+          "apiDocumentationManager": {
+            "title": "API 文档管理器",
+            "prompt": "我们的开发团队维护多个 API 和微服务，需要全面的文档跟踪。我想监控文档覆盖率、API 使用分析、弃用时间线和集成健康状况。系统应提醒我们过时的文档、突破性变化，并帮助维护 API 版本一致性。"
+          },
+          "techDebtTracker": {
+            "title": "技术债务跟踪器",
+            "prompt": "我需要系统地跟踪、优先处理和跨我们的代码库管理技术债务。我想记录遗留代码部分、评估重构优先级、跟踪改进进度，并衡量债务减少工作的影响。系统应帮助平衡功能开发和维护工作。"
+          },
+          "developerOnboardingSystem": {
+            "title": "开发人员入职系统",
+            "prompt": "我负责简化新开发人员加入我们团队的过程。我需要跟踪完成设置任务、技能评估进度、导师任务和早期生产力指标。我希望获得入职瓶颈的洞察力和新员工和导师的自动进度通知。"
+          }
+        },
+        "educational": {
+          "title": "教育",
+          "studentPerformanceTracker": {
+            "title": "学生表现跟踪器",
+            "prompt": "我是一个教育工作者，需要管理多个课程和评估类型的学生进度。我需要跟踪出勤、作业完成、成绩趋势和学习目标掌握。我希望收到早期干预警报，了解成功的教学方法，并自动与家长沟通进度更新。"
+          },
+          "courseContentManagement": {
+            "title": "课程内容管理",
+            "prompt": "我管理多个教育项目的课程开发和内容交付。我需要组织学习材料、跟踪内容有效性、监控参与度指标，并与其他教师协调。我希望了解哪些内容最受欢迎，并自动安排内容审查和更新。"
+          },
+          "onlineLearningPlatform": {
+            "title": "在线学习平台",
+            "prompt": "我经营一个在线教育平台，管理学生注册、课程完成和教师表现。我需要跟踪参与度指标、完成率、学生满意度和课程类型收入。我希望获得学生成功的预测分析和课程改进的自动建议。"
+          },
+          "researchProjectManager": {
+            "title": "研究项目经理",
+            "prompt": "我协调涉及多个学生、教职员工和外部合作者的学术研究项目。我需要跟踪研究里程碑、预算分配、出版进度和资源利用。我希望获得富有成效的研究模式洞察力和自动提醒，用于资助截止日期和项目交付。"
+          },
+          "schoolAdministrationSystem": {
+            "title": "学校管理",
+            "prompt": "我管理学校运营，包括注册、排课、员工协调和资源分配。我希望看到课堂利用率、教师工作量、学生人口统计和预算管理。我希望获得运营洞察力和自动通知，用于注册期、人员需求和设施维护。"
+          },
+          "trainingProgramTracker": {
+            "title": "培训项目跟踪器",
+            "prompt": "我监督成人专业发展和认证计划。我需要管理注册周期、跟踪技能进展、监控教师有效性，并衡量职业影响。我希望获得程序 ROI 洞察力和自动提醒，用于认证续签和程序改进。"
+          }
+        },
+        "personalFinance": {
+          "title": "个人财务",
+          "investmentPortfolioTracker": {
+            "title": "投资组合跟踪器",
+            "prompt": "我管理我的投资组合，包括股票、债券、加密货币和房地产。我需要跟踪资产配置、绩效指标、股息收入和再平衡机会。我希望获得投资模式洞察、风险暴露分析和自动提醒，用于重大市场波动或再平衡需求。"
+          },
+          "budgetManagementSystem": {
+            "title": "预算管理系统",
+            "prompt": "我需要跨多个账户和类别跟踪我的每月收入、支出和储蓄目标。我想监控支出模式、识别成本节约机会、跟踪实现财务目标的进度，并收到预算超支或异常支出模式的提醒。"
+          },
+          "debtPayoffPlanner": {
+            "title": "债务偿还规划器",
+            "prompt": "我管理多个债务，包括信用卡、学生贷款和抵押贷款，具有不同的利率和还款计划。我需要跟踪偿还进度、优化支付策略、监控利息节省，并通过目标可视化保持动力。我希望收到自动提醒和支付优化建议。"
+          },
+          "retirementPlanningDashboard": {
+            "title": "退休规划仪表板",
+            "prompt": "我计划退休，需要跨 401k、IRA 和其他投资账户跟踪贡献。我想模拟不同的退休场景、监控退休目标的进展、跟踪雇主匹配、优化税收优惠贡献。系统应提供退休准备洞察和调整建议。"
+          },
+          "taxPreparationOrganizer": {
+            "title": "税务准备组织者",
+            "prompt": "我需要组织税务相关文档、跟踪可扣除费用、监控税收损失收割机会，并准备年度税务申报。我想分类收入来源、跟踪业务费用、监控慈善捐赠，并收到重要税务截止日期和文档收集的提醒。"
+          },
+          "sideHustleRevenueTracker": {
+            "title": "副业收入跟踪器",
+            "prompt": "我管理来自多个副业的多重收入，包括自由职业、租赁物业和在线销售。我需要跟踪收入流、业务费用、税负和盈利能力。我希望获得最赚钱活动的洞察力和自动跟踪业务里程和费用分类。"
+          }
+        },
+        "productivity": {
+          "title": "生产力",
+          "taskManagementSystem": {
+            "title": "任务管理系统",
+            "prompt": "我需要组织我的日常任务、项目截止日期和个人目标，跨越工作和个人生活。我想跟踪完成率、时间分配、优先级管理和工作效率模式。系统应帮助我专注于高影响力活动，并提供有关我最有效工作风格的洞察。"
+          },
+          "habitTrackingDashboard": {
+            "title": "习惯跟踪仪表板",
+            "prompt": "我在健康、职业和个人发展领域建立积极习惯并打破消极习惯。我需要跟踪一致性、识别触发模式、监控进展连击，并保持动力。我希望获得成功习惯形成策略的洞察力和自动提醒和鼓励。"
+          },
+          "timeBlockingPlanner": {
+            "title": "时间块规划器",
+            "prompt": "我使用时间块管理我的日历，并希望优化我的日程安排以实现最大生产力。我需要跨不同活动跟踪时间分配、识别调度冲突、监控专注时间可用性，并分析生产与非生产时间块。我希望收到自动调度建议和受保护的专注时间。"
+          },
+          "goalAchievementTracker": {
+            "title": "目标成就跟踪器",
+            "prompt": "我朝着多个个人和职业目标努力，具有不同的截止日期和成功指标。我需要将大目标分解为可操作的步骤、跟踪里程碑进度、监控动力水平，并根据结果调整策略。我希望看到视觉进度跟踪和自动目标审查检查。"
+          },
+          "energyManagementSystem": {
+            "title": "能量管理系统",
+            "prompt": "我想要优化我的日常能量水平，通过跟踪睡眠、锻炼、营养和工作模式。我需要识别哪些活动消耗或增加我的能量、监控最佳工作时间、跟踪恢复期，并关联生活方式因素与生产力。我希望收到个性化的能量优化建议。"
+          },
+          "digitalMinimalismTracker": {
+            "title": "数字极简主义跟踪器",
+            "prompt": "I'm reducing digital distractions and want to track screen time, app usage, notification patterns, and digital wellness metrics. I need to monitor progress toward reduced device dependency, track focused work sessions, and identify digital habits that support or hinder my goals. I want insights into healthy digital boundaries."
+          }
+        },
+        "healthAndWellness": {
+          "title": "健康与福祉",
+          "fitnessProgressTracker": {
+            "title": "健身进度跟踪器",
+            "prompt": "我跟踪我的健身之旅，包括锻炼、力量进展、心肺表现和身体成分变化。我需要监控锻炼一致性、跟踪个人记录、计划锻炼轮换，并关联健身活动与能量和情绪。我希望获得有效锻炼模式的洞察力和自动休息日建议。"
+          },
+          "nutritionAndMealPlanning": {
+            "title": "营养与膳食规划",
+            "prompt": "我想计划健康膳食、跟踪营养摄入、监控膳食目标，并高效管理杂货购物。我需要跟踪宏量营养素、识别营养缺口、围绕膳食限制计划膳食，并关联营养与能量和健康指标。我希望收到膳食建议和自动购物清单。"
+          },
+          "mentalHealthJournal": {
+            "title": "心理健康日记",
+            "prompt": "我通过情绪模式、压力水平、治疗进展和应对策略有效性来跟踪我的心理健康。我需要识别情绪触发因素、监控药物影响、跟踪治疗见解，并保持一致的自我护理实践。我希望获得趋势分析和自动提醒，用于心理健康检查。"
+          },
+          "sleepOptimizationSystem": {
+            "title": "睡眠优化系统",
+            "prompt": "我通过跟踪睡眠持续时间、睡前习惯、环境因素和醒来模式来改善睡眠质量。我需要将睡眠质量与日常活动相关联、监控睡眠债务、跟踪就寝一致性，并识别改善或扰乱睡眠的因素。我希望收到个性化的睡眠卫生建议。"
+          },
+          "medicalRecordsManager": {
+            "title": "医疗记录管理器",
+            "prompt": "我需要组织医疗预约、跟踪健康症状、管理药物时间表，并随着时间的推移监控健康指标。我希望为医生预约做准备、跟踪治疗有效性、管理保险信息，并维护家庭健康史。系统应提供健康趋势见解和预约提醒。"
+          },
+          "wellnessChallengeTracker": {
+            "title": "健康挑战跟踪器",
+            "prompt": "我参与各种健康挑战，希望跟踪健身目标、健康习惯和生活改善的进展。我需要监控挑战完成情况、与朋友或团队比较、跟踪动力水平，并庆祝成就。我希望获得社交责任感功能和进度分享能力。"
+          }
+        },
+        "contentGenerationAndEditing": {
+          "title": "内容生成和编辑",
+          "blogContentPipeline": {
+            "title": "博客内容管道",
+            "prompt": "我管理一个内容博客，需要跟踪文章想法、写作进度、出版时间表和性能指标。我希望按主题组织内容、监控写作生产力、跟踪参与度分析，并与编辑和合作者协调。我希望获得高绩效内容见解和自动出版工作流。"
+          },
+          "socialMediaContentCalendar": {
+            "title": "社交媒体内容日历",
+            "prompt": "我管理多个社交媒体平台的内容，需要规划帖子、跟踪参与度、监控品牌一致性，并分析性能。我希望提前安排内容、跟踪标签有效性、监控受众增长，并在不同的社交媒体渠道协调活动。"
+          },
+          "videoProductionTracker": {
+            "title": "视频生产跟踪器",
+            "prompt": "我制作视频内容，需要管理脚本、拍摄时间表、编辑进度和出版时间表。我希望跟踪视频性能指标、管理设备和地点预订、与团队成员协调，并监控生产成本。我希望获得成功视频格式见解和自动工作流通知。"
+          },
+          "podcastManagementSystem": {
+            "title": "播客管理系统",
+            "prompt": "我运行一个播客，需要管理节目规划、嘉宾协调、录制时间表和出版工作流。我希望跟踪听众分析、管理赞助关系、组织节目档案，并协调后期制作任务。我希望获得受众参与见解和自动嘉宾沟通。"
+          },
+          "newsletterCampaignManager": {
+            "title": "新闻通讯活动管理器",
+            "prompt": "我管理电子邮件新闻通讯，需要跟踪订阅者增长、内容性能、发送时间表和参与度指标。我希望细分订阅者、A/B 测试主题行、监控退订率，并优化发送时间。我希望获得与受众共鸣的内容见解和自动跟进序列。"
+          },
+          "creativeWritingProjectTracker": {
+            "title": "创意写作项目跟踪器",
+            "prompt": "我从事创意写作项目，包括小说、短篇故事和诗歌。我需要跟踪写作会话、字数进度、人物发展、情节时间表和提交状态。我希望保持写作习惯的一致性、组织研究材料，并跟踪出版机会和拒绝。"
+          }
+        },
+        "travelPlanning": {
+          "title": "旅行规划",
+          "tripItineraryOrganizer": {
+            "title": "行程规划器",
+            "prompt": "我计划多次旅行，需要组织航班细节、住宿预订、活动时间表和交通安排。我希望跟踪旅行费用、管理确认号码、存储重要文件，并与旅行同伴分享行程。我希望收到自动提醒，用于入住和预订截止日期。"
+          },
+          "travelExpenseTracker": {
+            "title": "旅行费用跟踪器",
+            "prompt": "我需要跟踪多个旅行的旅行费用，包括个人和商务目的。我希望分类费用、跟踪货币转换、监控预算遵守情况，并准备费用报告。系统应帮助进行税收扣除，并提供有关旅行成本模式和优化机会的见解。"
+          },
+          "travelExperienceJournal": {
+            "title": "旅行体验日记",
+            "prompt": "我想要记录我的旅行经历，包括照片、回忆、推荐和访问地点的评分。我需要按目的地组织、跟踪旅行同伴、记录最喜欢的经历，并维护未来目的地的愿望清单。我希望创建可共享的旅行指南并保留旅行记忆。"
+          },
+          "businessTravelManager": {
+            "title": "商务旅行管理器",
+            "prompt": "我经常出差，需要协调会议时间表、跟踪旅行政策遵守情况、管理忠诚度计划，并优化旅行效率。我希望监控旅行模式、跟踪时区、管理企业预订，并在最大化舒适度和生产力的同时确保政策遵守。"
+          },
+          "groupTravelCoordinator": {
+            "title": "团体旅行协调员",
+            "prompt": "我组织团体旅行，需要管理多个旅行者的偏好、协调团体预订、跟踪付款和押金，并通知所有参与者。我希望规划团体活动、管理饮食限制和特殊需求，并确保每个人都能获得成功旅行的必要信息。"
+          },
+          "travelPlanningResearchHub": {
+            "title": "旅行规划研究中心",
+            "prompt": "我正在研究目的地，需要组织旅行灵感、比较选项、跟踪签证要求、监控天气模式，并保存潜在的住宿和活动。我希望建立详细的地点知识、跟踪价格变化，并维护有组织的研究，用于未来的旅行规划决策。"
+          }
+        },
+        "entertainment": {
+          "title": "娱乐",
+          "movieAndTvShowTracker": {
+            "title": "电影和电视节目跟踪器",
+            "prompt": "我想跟踪我观看的电影和电视节目，计划我的观看队列、评分内容，并发现新的推荐。我需要按类型组织、跟踪系列进度、监控流媒体平台可用性，并与朋友分享推荐。我希望获得观看模式见解和基于我偏好的自动推荐。"
+          },
+          "bookReadingProgress": {
+            "title": "阅读进度跟踪器",
+            "prompt": "我跟踪我的阅读目标、阅读进度、流派偏好和阅读见解。我需要组织我的阅读列表、跟踪阅读页数、监控阅读速度、评分书籍，并维护笔记和引用。我希望发现新书、跟踪阅读挑战，并分析我的阅读习惯以改进。"
+          },
+          "gamingAchievementTracker": {
+            "title": "游戏成就跟踪器",
+            "prompt": "我跨多个平台和游戏跟踪我的游戏进度。我需要监控成就完成情况、跟踪游戏时间、组织游戏库，并计划游戏会话。我希望获得游戏模式见解、跟踪与朋友的多人会话，并维护待玩游戏列表。"
+          },
+          "musicDiscoveryAndOrganization": {
+            "title": "音乐发现和组织",
+            "prompt": "我想组织我的音乐收藏、发现新艺术家、跟踪音乐会出席、并在不同的平台上管理播放列表。我需要监控收听模式、评分专辑、跟踪音乐购买、并计划音乐会出席。我希望获得我的音乐偏好见解和自动推荐新发现。"
+          },
+          "eventAndConcertPlanner": {
+            "title": "活动和音乐会规划器",
+            "prompt": "我计划活动和音乐会，需要管理嘉宾列表、跟踪 RSVP、协调交通、并管理活动预算。我希望监控出席模式、跟踪活动人气、与供应商协调，并确保每个人都能获得出色的体验。我希望获得活动成功见解和自动提醒跟进。"
+          },
+          "hobbyProjectManager": {
+            "title": "爱好项目管理器",
+            "prompt": "我有多个创意爱好，需要跟踪项目进度、供应库存、技能发展，并投资时间。我希望按类型组织项目、跟踪完成状态、监控成本，并记录学习进度。我希望获得有成效的爱好时间见解和自动提醒项目里程碑。"
+          }
+        }
+      }
+    }
+  },
   "settings": {
     "title": "设置",
     "templateAdmin": {
diff --git a/packages/common-i18n/src/locales/zh/table.json b/packages/common-i18n/src/locales/zh/table.json
index adbf8560d5..851e9cdb85 100644
--- a/packages/common-i18n/src/locales/zh/table.json
+++ b/packages/common-i18n/src/locales/zh/table.json
@@ -644,12 +644,36 @@
     "tool": {
       "getTableFields": "获取表格字段",
       "getTablesMeta": "获取表格元数据",
+      "getRecords": "获取记录",
+      "getUpdateFieldsParams": "获取更新字段参数",
+      "getTableViews": "获取表格视图信息",
       "sqlQuery": "执行 SQL 查询",
       "generateScriptAction": "生成脚本",
       "getScriptInput": "获取脚本输入",
       "getTeableApi": "获取 API",
+      "createFields": "创建字段",
+      "createRecords": "创建记录",
+      "createTable": "创建表格",
+      "createView": "创建视图",
+      "createField": "创建字段",
+      "runScripts": "执行脚本",
+      "updateTableName": "更新表格名称",
+      "updateViewName": "更新视图名称",
+      "updateField": "更新字段",
+      "updateRecords": "更新记录",
+      "deleteTable": "删除表格",
+      "deleteView": "删除视图",
+      "deleteField": "删除字段",
+      "deleteRecords": "删除记录",
       "args": "参数",
-      "result": "结果"
+      "result": "结果",
+      "tips": {
+        "title": "提示",
+        "description": "当前视图类型不支持定位, 暂只支持表格视图"
+      }
+    },
+    "fallback": {
+      "previewLoadFailed": "预览加载失败，请稍后重试"
     },
     "codeBlock": {
       "hiddenLines": "{{count}}行已隐藏",
@@ -657,6 +681,10 @@
       "code": "代码",
       "preview": "预览"
     },
+    "control": {
+      "undo": "撤销",
+      "redo": "重做"
+    },
     "newChat": "新对话",
     "noModel": "暂无可用模型",
     "noHistory": "暂无聊天记录",
@@ -675,12 +703,12 @@
       "emptyContext": "暂无可添加的上下文"
     },
     "inputPlaceholder": "发送消息...",
-    "thought": "深度思考",
     "meta": {
       "timeCostUnit": "秒",
       "timeCostDescription": "生成耗时{{timeCost}}秒",
       "creditDescription": "消耗{{credits}}算力",
       "tokenDescription": "本次消耗：{{tokens}} tokens"
-    }
+    },
+    "thought": "深度思考"
   }
 }
diff --git a/packages/core/src/models/field/derivate/abstract/select.field.abstract.ts b/packages/core/src/models/field/derivate/abstract/select.field.abstract.ts
index 833730696b..a724cfaab7 100644
--- a/packages/core/src/models/field/derivate/abstract/select.field.abstract.ts
+++ b/packages/core/src/models/field/derivate/abstract/select.field.abstract.ts
@@ -22,11 +22,13 @@ export const selectFieldOptionsSchema = z.object({
   preventAutoNewOptions: z.boolean().optional(),
 });
 
-export const selectFieldOptionsRoSchema = z.object({
-  choices: z.array(selectFieldChoiceRoSchema),
-  defaultValue: z.union([z.string(), z.array(z.string())]).optional(),
-  preventAutoNewOptions: z.boolean().optional(),
-});
+export const selectFieldOptionsRoSchema = z
+  .object({
+    choices: z.array(selectFieldChoiceRoSchema),
+    defaultValue: z.union([z.string(), z.array(z.string())]).optional(),
+    preventAutoNewOptions: z.boolean().optional(),
+  })
+  .describe('options for both single and multiple select fields');
 
 export type ISelectFieldOptions = z.infer<typeof selectFieldOptionsSchema>;
 
diff --git a/packages/core/src/models/field/derivate/date.field.ts b/packages/core/src/models/field/derivate/date.field.ts
index 4f7377c8be..ee2602ad47 100644
--- a/packages/core/src/models/field/derivate/date.field.ts
+++ b/packages/core/src/models/field/derivate/date.field.ts
@@ -16,16 +16,18 @@ extend(timezone);
 extend(customParseFormat);
 extend(utc);
 
-export const dateFieldOptionsSchema = z.object({
-  formatting: datetimeFormattingSchema,
-  defaultValue: z
-    .enum(['now'] as const)
-    .optional()
-    .openapi({
-      description:
-        'Whether the new row is automatically filled with the current time, caveat: the defaultValue is just a flag, it dose not effect the storing value of the record',
-    }),
-});
+export const dateFieldOptionsSchema = z
+  .object({
+    formatting: datetimeFormattingSchema,
+    defaultValue: z
+      .enum(['now'] as const)
+      .optional()
+      .openapi({
+        description:
+          'Whether the new row is automatically filled with the current time, caveat: the defaultValue is just a flag, it dose not effect the storing value of the record',
+      }),
+  })
+  .describe('options for date fields');
 
 export type IDateFieldOptions = z.infer<typeof dateFieldOptionsSchema>;
 
diff --git a/packages/core/src/models/field/derivate/formula.field.ts b/packages/core/src/models/field/derivate/formula.field.ts
index c813fbfbb6..064704a968 100644
--- a/packages/core/src/models/field/derivate/formula.field.ts
+++ b/packages/core/src/models/field/derivate/formula.field.ts
@@ -13,10 +13,11 @@ import { getShowAsSchema, unionShowAsSchema } from '../show-as';
 import { FormulaAbstractCore } from './abstract/formula.field.abstract';
 
 export const formulaFieldOptionsSchema = z.object({
-  expression: z.string().openapi({
-    description:
-      'The formula including fields referenced by their IDs. For example, LEFT(4, {Birthday}) input will be returned as LEFT(4, {fldXXX}) via API.',
-  }),
+  expression: z
+    .string()
+    .describe(
+      'The formula including fields referenced by their IDs. For example, LEFT(4, {Birthday}) input will be returned as LEFT(4, {fldXXX}) via API. The formula syntax in Teable is basically the same as Airtable'
+    ),
   timeZone: timeZoneStringSchema.optional(),
   formatting: unionFormattingSchema.optional(),
   showAs: unionShowAsSchema.optional(),
diff --git a/packages/core/src/models/field/derivate/number.field.ts b/packages/core/src/models/field/derivate/number.field.ts
index b5ecd0326a..ffd0dfa849 100644
--- a/packages/core/src/models/field/derivate/number.field.ts
+++ b/packages/core/src/models/field/derivate/number.field.ts
@@ -15,10 +15,12 @@ export const numberFieldOptionsSchema = z.object({
   defaultValue: z.number().optional(),
 });
 
-export const numberFieldOptionsRoSchema = numberFieldOptionsSchema.partial({
-  formatting: true,
-  showAs: true,
-});
+export const numberFieldOptionsRoSchema = numberFieldOptionsSchema
+  .partial({
+    formatting: true,
+    showAs: true,
+  })
+  .describe('options for number fields');
 
 export type INumberFieldOptionsRo = z.infer<typeof numberFieldOptionsRoSchema>;
 
diff --git a/packages/core/src/models/field/derivate/rating.field.ts b/packages/core/src/models/field/derivate/rating.field.ts
index 35fb41d744..701c87dc68 100644
--- a/packages/core/src/models/field/derivate/rating.field.ts
+++ b/packages/core/src/models/field/derivate/rating.field.ts
@@ -25,11 +25,13 @@ export const ratingColorsSchema = z.enum(RATING_ICON_COLORS);
 
 export type IRatingColors = z.infer<typeof ratingColorsSchema>;
 
-export const ratingFieldOptionsSchema = z.object({
-  icon: z.nativeEnum(RatingIcon),
-  color: ratingColorsSchema,
-  max: z.number().int().max(10).min(1),
-});
+export const ratingFieldOptionsSchema = z
+  .object({
+    icon: z.nativeEnum(RatingIcon),
+    color: ratingColorsSchema,
+    max: z.number().int().max(10).min(1),
+  })
+  .describe('options for rating field');
 
 export type IRatingFieldOptions = z.infer<typeof ratingFieldOptionsSchema>;
 
diff --git a/packages/icons/src/components/LocateFixed.tsx b/packages/icons/src/components/LocateFixed.tsx
new file mode 100644
index 0000000000..a6df614374
--- /dev/null
+++ b/packages/icons/src/components/LocateFixed.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const LocateFixed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M2 12H5" stroke="black" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M19 12H22"
+      stroke="black"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path d="M12 2V5" stroke="black" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    <path
+      d="M12 19V22"
+      stroke="black"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19Z"
+      stroke="black"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+      stroke="black"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default LocateFixed;
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 0196762d2e..89ff9bc90b 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -104,6 +104,7 @@ export { default as Link } from './components/Link';
 export { default as ListChecks } from './components/ListChecks';
 export { default as ListOrdered } from './components/ListOrdered';
 export { default as Loader2 } from './components/Loader2';
+export { default as LocateFixed } from './components/LocateFixed';
 export { default as Lock } from './components/Lock';
 export { default as LongText } from './components/LongText';
 export { default as MagicAi } from './components/MagicAi';
diff --git a/packages/openapi/package.json b/packages/openapi/package.json
index fae8784280..ac3a515707 100644
--- a/packages/openapi/package.json
+++ b/packages/openapi/package.json
@@ -39,6 +39,7 @@
     "zod": "3.23.8"
   },
   "devDependencies": {
+    "@ai-sdk/provider-utils": "2.2.8",
     "@ai-sdk/ui-utils": "1.2.8",
     "@teable/eslint-config-bases": "workspace:^",
     "@vitest/coverage-v8": "2.1.5",
diff --git a/packages/openapi/src/base/create-from-template.ts b/packages/openapi/src/base/create-from-template.ts
index 05c77aff9d..4eaac388b8 100644
--- a/packages/openapi/src/base/create-from-template.ts
+++ b/packages/openapi/src/base/create-from-template.ts
@@ -8,9 +8,10 @@ import { createBaseVoSchema } from './create';
 export const CREATE_BASE_FROM_TEMPLATE = '/base/create-from-template';
 
 export const createBaseFromTemplateRoSchema = z.object({
-  spaceId: z.string(),
-  templateId: z.string(),
-  withRecords: z.boolean().optional(),
+  spaceId: z.string().describe('The space id to create a base from'),
+  templateId: z.string().describe('The template id to create a base from'),
+  withRecords: z.boolean().optional().describe('Whether to create records from the template'),
+  baseId: z.string().optional().describe('The base id to apply the template to'),
 });
 
 export type ICreateBaseFromTemplateRo = z.infer<typeof createBaseFromTemplateRoSchema>;
@@ -18,7 +19,8 @@ export type ICreateBaseFromTemplateRo = z.infer<typeof createBaseFromTemplateRoS
 export const CreateBaseFromTemplateRoute: RouteConfig = registerRoute({
   method: 'post',
   path: CREATE_BASE_FROM_TEMPLATE,
-  description: 'Create a base from template',
+  summary: 'Create a base from template or apply a template to a base',
+  description: 'Create a base from template or apply a template to a base',
   request: {
     body: {
       content: {
diff --git a/packages/openapi/src/base/duplicate.ts b/packages/openapi/src/base/duplicate.ts
index 17adba1201..67b608997d 100644
--- a/packages/openapi/src/base/duplicate.ts
+++ b/packages/openapi/src/base/duplicate.ts
@@ -20,6 +20,7 @@ export const duplicateBaseRoSchema = z.object({
   name: z.string().optional().openapi({
     description: 'The name of the duplicated base',
   }),
+  baseId: z.string().optional(),
 });
 
 export type IDuplicateBaseRo = z.infer<typeof duplicateBaseRoSchema>;
diff --git a/packages/openapi/src/chat/get-messages.ts b/packages/openapi/src/chat/get-messages.ts
index 25aa868f4f..d5f93a2820 100644
--- a/packages/openapi/src/chat/get-messages.ts
+++ b/packages/openapi/src/chat/get-messages.ts
@@ -1,4 +1,5 @@
-import type { Message } from '@ai-sdk/ui-utils';
+import type { ToolResult } from '@ai-sdk/provider-utils';
+import type { Message, ToolInvocation } from '@ai-sdk/ui-utils';
 import { axios } from '../axios';
 import { registerRoute, urlBuilder } from '../utils';
 import { z } from '../zod';
@@ -22,6 +23,15 @@ export interface IChatMessageVo {
   messages: IChatMessage[];
 }
 
+export type IToolInvocationUIPart = {
+  type: 'tool-invocation';
+  /**
+   * The tool invocation.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  toolInvocation: ToolInvocation & ToolResult<string, any, any>;
+};
+
 export const getChatMessagesRoute = registerRoute({
   method: 'get',
   path: GET_CHAT_MESSAGES,
diff --git a/packages/openapi/src/chat/types.ts b/packages/openapi/src/chat/types.ts
index 1e93e640de..86ad721b27 100644
--- a/packages/openapi/src/chat/types.ts
+++ b/packages/openapi/src/chat/types.ts
@@ -1,12 +1,44 @@
+import { recordSchema } from '@teable/core';
+import { fieldKeyTypeRoSchema, recordInsertOrderRoSchema, typecastSchema } from '../record';
 import { z } from '../zod';
 
 export enum McpToolInvocationName {
+  GetDeleteTablesParams = 'get-delete-tables-params',
+  GetTableViews = 'get-table-views',
   GetTableFields = 'get-table-fields',
+  GetUpdateRecordsParams = 'get-update-records-params',
+  GetUpdateFieldsParams = 'get-update-fields-params',
+  GetDeleteFieldsParams = 'get-delete-fields-params',
   GetTablesMeta = 'get-tables-meta',
+  GetRecords = 'get-records',
   SqlQuery = 'sql-query',
   GenerateScriptAction = 'generate-script-action',
   GetScriptInput = 'get-script-input',
   GetTeableApi = 'get-teable-api',
+
+  CreateTable = 'create-table',
+  CreateView = 'create-view',
+  CreateField = 'create-field',
+  CreateRecords = 'create-records',
+  CreateFields = 'create-fields',
+  CreateViews = 'create-views',
+
+  RunScripts = 'run-scripts',
+
+  UpdateTableName = 'update-table-name',
+  UpdateView = 'update-view',
+  UpdateField = 'update-field',
+  UpdateRecords = 'update-records',
+  UpdateViewName = 'update-view-name',
+
+  DeleteTable = 'delete-tables',
+  DeleteView = 'delete-views',
+  DeleteFields = 'delete-fields',
+  DeleteRecords = 'delete-records',
+}
+
+export enum ChatToolInvocationName {
+  Finish = 'finish',
 }
 
 export const chatContextSchema = z.object({
@@ -30,3 +62,31 @@ export type IChatMessageUsage = {
   completionTokens: number;
   credit?: number;
 };
+
+export const deleteRecordsToolParamsSchema = z.object({
+  tableId: z.string().describe('The table id to delete records from'),
+  recordIds: z.array(z.string().startsWith('rec')).describe('The record ids to delete'),
+});
+
+export type IDeleteRecordsToolParams = z.infer<typeof deleteRecordsToolParamsSchema>;
+
+export const updateRecordsToolParamsSchema = z.object({
+  tableId: z.string().describe('The table id to create the field in'),
+  updateRecordsRo: z
+    .object({
+      fieldKeyType: fieldKeyTypeRoSchema,
+      typecast: typecastSchema,
+      records: z.array(
+        z.object({
+          id: z.string().startsWith('rec').describe('The record id to update'),
+          fields: recordSchema.shape.fields,
+        })
+      ),
+      order: recordInsertOrderRoSchema.optional(),
+    })
+    .openapi({
+      description: 'update one or multiple records',
+    }),
+});
+
+export type IUpdateRecordsToolParams = z.infer<typeof updateRecordsToolParamsSchema>;
diff --git a/packages/sdk/src/components/grid/renderers/layout-renderer/layoutRenderer.ts b/packages/sdk/src/components/grid/renderers/layout-renderer/layoutRenderer.ts
index 6418292f96..3dcd9bfe58 100644
--- a/packages/sdk/src/components/grid/renderers/layout-renderer/layoutRenderer.ts
+++ b/packages/sdk/src/components/grid/renderers/layout-renderer/layoutRenderer.ts
@@ -712,7 +712,7 @@ const getVisibleCollaborators = (
   ];
 
   for (const i of columnIndices) {
-    for (let j = startRowIndex; j < stopRowIndex; j++) {
+    for (let j = startRowIndex; j <= stopRowIndex; j++) {
       const realIndex = getLinearRow(j).realIndex;
       const cell = getCellContent([i, realIndex]);
       if (!cell?.id) {
@@ -992,7 +992,7 @@ export const getVisibleSearchTargetIndex = (
   const searchCellIds = searchHitIndex?.map((item) => `${item.recordId}-${item.fieldId}`) || [];
 
   for (const i of columnIndices) {
-    for (let j = startRowIndex; j < stopRowIndex; j++) {
+    for (let j = startRowIndex; j <= stopRowIndex; j++) {
       const line = getLinearRow(j);
       const { realIndex } = line;
       const cell = getCellContent([i, realIndex]);
diff --git a/packages/sdk/src/components/plate/ui/toolbar.tsx b/packages/sdk/src/components/plate/ui/toolbar.tsx
index cfce8e7c13..c6174548d8 100644
--- a/packages/sdk/src/components/plate/ui/toolbar.tsx
+++ b/packages/sdk/src/components/plate/ui/toolbar.tsx
@@ -8,7 +8,6 @@ import {
   DropdownMenuSeparator,
   Separator,
   Tooltip,
-  TooltipPortal,
   TooltipTrigger,
 } from '@teable/ui-lib';
 import { type VariantProps, cva } from 'class-variance-authority';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69c9f8b644..8e2176ccd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1399,6 +1399,9 @@ importers:
         specifier: 3.23.8
         version: 3.23.8
     devDependencies:
+      '@ai-sdk/provider-utils':
+        specifier: 2.2.8
+        version: 2.2.8(zod@3.23.8)
       '@ai-sdk/ui-utils':
         specifier: 1.2.8
         version: 1.2.8(zod@3.23.8)
@@ -7874,6 +7877,7 @@ packages:
   '@univerjs/core@0.3.0':
     resolution: {integrity: sha512-eUOpkFxsMT95fk+3wNDxU6g8g0XTE0waiCngrswnPy2YO0ezkXUF9dzkrT5mAiDC/k8KP/nCMr/U+iHTpThFLA==}
     peerDependencies:
+      '@univerjs/core': 0.3.0
       react: ^16.9.0 || ^17.0.0 || ^18.0.0
       rxjs: '>=7.0.0'
 
@@ -8125,6 +8129,7 @@ packages:
       '@univerjs/core': 0.3.0
       '@univerjs/engine-formula': 0.3.0
       '@univerjs/sheets': 0.3.0
+      '@univerjs/sheets-hyper-link': 0.3.0
       rxjs: '>=7.0.0'
 
   '@univerjs/sheets-numfmt@0.3.0':
@@ -8187,6 +8192,7 @@ packages:
       '@univerjs/engine-formula': 0.3.0
       '@univerjs/engine-numfmt': 0.3.0
       '@univerjs/rpc': 0.3.0
+      '@univerjs/sheets': 0.3.0
       rxjs: '>=7.0.0'
 
   '@univerjs/telemetry@0.3.0':
@@ -8221,6 +8227,7 @@ packages:
       '@univerjs/core': 0.3.0
       '@univerjs/design': 0.3.0
       '@univerjs/engine-render': 0.3.0
+      '@univerjs/ui': 0.3.0
       clsx: '>=2.0.0'
       react: ^16.9.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.9.0 || ^17.0.0 || ^18.0.0
@@ -24977,6 +24984,7 @@ snapshots:
 
   '@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1)':
     dependencies:
+      '@univerjs/core': 0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1)
       '@univerjs/protocol': 0.1.39-alpha.15(@grpc/grpc-js@1.12.4)(rxjs@7.8.1)
       '@wendellhu/redi': 0.16.1
       lodash-es: 4.17.21
@@ -25304,6 +25312,7 @@ snapshots:
       '@univerjs/engine-formula': 0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1)
       '@univerjs/protocol': 0.1.39-alpha.15(@grpc/grpc-js@1.12.4)(rxjs@7.8.1)
       '@univerjs/sheets': 0.3.0(@grpc/grpc-js@1.12.4)(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/engine-formula@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1))(@univerjs/engine-numfmt@0.3.0)(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1)
+      '@univerjs/sheets-hyper-link': 0.3.0(@grpc/grpc-js@1.12.4)(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/engine-formula@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1))(@univerjs/sheets@0.3.0(@grpc/grpc-js@1.12.4)(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/engine-formula@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1))(@univerjs/engine-numfmt@0.3.0)(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1)
       rxjs: 7.8.1
     transitivePeerDependencies:
       - '@grpc/grpc-js'
@@ -25396,6 +25405,7 @@ snapshots:
       '@univerjs/engine-numfmt': 0.3.0
       '@univerjs/protocol': 0.1.39-alpha.15(@grpc/grpc-js@1.12.4)(rxjs@7.8.1)
       '@univerjs/rpc': 0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1)
+      '@univerjs/sheets': 0.3.0(@grpc/grpc-js@1.12.4)(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/engine-formula@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1))(@univerjs/engine-numfmt@0.3.0)(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1)
       rxjs: 7.8.1
     transitivePeerDependencies:
       - '@grpc/grpc-js'
@@ -25438,6 +25448,7 @@ snapshots:
       '@univerjs/engine-formula': 0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(rxjs@7.8.1)
       '@univerjs/engine-render': 0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1)
       '@univerjs/icons': 0.1.87(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@univerjs/ui': 0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(@univerjs/design@0.3.0(clsx@2.1.1)(date-fns@4.1.0)(dayjs@1.11.10)(luxon@3.5.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@univerjs/engine-render@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(@univerjs/rpc@0.3.0(@univerjs/core@0.3.0(@grpc/grpc-js@1.12.4)(react@18.3.1)(rxjs@7.8.1))(rxjs@7.8.1))(clsx@2.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rxjs@7.8.1)(typescript@5.4.3)
       clsx: 2.1.1
       localforage: 1.10.0
       rc-notification: 5.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)