Feat: Render the mcp list on the agent page #3221 (#8829)

### What problem does this PR solve?
Feat: Render the mcp list on the agent page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/profile-setting/mcp/edit-mcp-form.tsx

@@ -15,9 +15,12 @@ import { Input } from '@/components/ui/input';
 import { RAGFlowSelect } from '@/components/ui/select';
 import { IModalProps } from '@/interfaces/common';
 import { buildOptions } from '@/utils/form';
+import { Editor, loader } from '@monaco-editor/react';
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
 
+loader.config({ paths: { vs: '/vs' } });
+
 export const FormId = 'EditMcpForm';
 
 export enum ServerType {
@@ -50,7 +53,7 @@ export function useBuildFormSchema() {
         message: t('common.namePlaceholder'),
       })
       .trim(),
-    // variables: z.object({}).optional(),
+    headers: z.record(z.string(), z.any()).optional(),
   });
 
   return FormSchema;
@@ -137,6 +140,28 @@ export function EditMcpForm({
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="headers"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Headers</FormLabel>
+              <FormControl>
+                <Editor
+                  height={200}
+                  defaultLanguage="json"
+                  theme="vs-dark"
+                  {...field}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setFieldChanged(true);
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       </form>
     </Form>
   );