diff --git a/packages/web/public/locales/translation/en.yaml b/packages/web/public/locales/translation/en.yaml
index 9ca77c541..56a7af118 100644
--- a/packages/web/public/locales/translation/en.yaml
+++ b/packages/web/public/locales/translation/en.yaml
@@ -40,6 +40,7 @@ agent_builder:
   description_placeholder: Describe what your agent does...
   description_too_long: Description must be 500 characters or less
   edit_agent: Edit Agent
+  editor: Editor
   enable_code_execution: Enabling code execution
   enter_agent_name: Enter the agent name
   enter_system_prompt: Enter a system prompt that defines the agent behavior
@@ -59,6 +60,9 @@ agent_builder:
   failed_to_update_agent: Failed to update agent
   favorites: Favorites
   filter_by_tag: Filter by tag
+  generate_short: Generate
+  generate_with_ai: Generate with AI
+  generating_prompt: Generating system prompt...
   loading_agent: Loading agent...
   mcp_server_configuration: MCP Server Configuration
   mcp_server_description: >-
@@ -78,6 +82,10 @@ agent_builder:
   no_mcp_servers_match_filter: No MCP servers match your current filter.
   no_mcp_servers_selected: No MCP servers selected. Your agent will have basic functionality only.
   no_public_agents_available: No public agents available
+  overwrite_confirm: Overwrite
+  overwrite_prompt_message: A system prompt already exists. Do you want to overwrite it with AI-generated prompt?
+  overwrite_prompt_title: Overwrite System Prompt Confirmation
+  preview: Preview
   public: Public Agents
   public_sharing_description: >-
     Make this agent available on public agent directories and be discovered and
diff --git a/packages/web/public/locales/translation/ja.yaml b/packages/web/public/locales/translation/ja.yaml
index ecb8e83bf..69dc2fa4c 100644
--- a/packages/web/public/locales/translation/ja.yaml
+++ b/packages/web/public/locales/translation/ja.yaml
@@ -41,6 +41,7 @@ agent_builder:
   description_placeholder: エージェントの機能を説明してください...
   description_too_long: 説明は500文字以下である必要があります
   edit_agent: エージェントを編集
+  editor: エディター
   enable_code_execution: コード実行を有効にする
   enter_agent_name: エージェント名を入力
   enter_system_prompt: エージェントの動作を定義するシステムプロンプトを入力
@@ -59,6 +60,9 @@ agent_builder:
   failed_to_update_agent: エージェントの更新に失敗しました
   favorites: お気に入り
   filter_by_tag: タグでフィルター
+  generate_short: 生成
+  generate_with_ai: AIにより生成する
+  generating_prompt: システムプロンプトを生成中...
   loading_agent: エージェントを読み込み中...
   mcp_server_configuration: MCPサーバー設定
   mcp_server_description: エージェントに追加機能を提供するMCPサーバーを選択してください。これらのサーバーはセキュリティのため管理者によって事前設定されています。
@@ -76,6 +80,10 @@ agent_builder:
   no_mcp_servers_match_filter: 現在のフィルターに一致するMCPサーバーがありません。
   no_mcp_servers_selected: MCPサーバーが選択されていません。エージェントは基本機能のみ利用できます。
   no_public_agents_available: 利用可能な公開エージェントがありません
+  overwrite_confirm: 上書きする
+  overwrite_prompt_message: すでにシステムプロンプトが入力されています。AIで生成したプロンプトで上書きしますか？
+  overwrite_prompt_title: システムプロンプトの上書き確認
+  preview: プレビュー
   public: 公開エージェント
   public_sharing_description: >-
     このエージェントを公開し、他のユーザーが発見して利用できるようにします。エージェントはすべてのユーザーに表示されますが、オリジナルを変更することはできません。
diff --git a/packages/web/src/components/agentBuilder/AgentForm.tsx b/packages/web/src/components/agentBuilder/AgentForm.tsx
index b834fc127..a7345d967 100644
--- a/packages/web/src/components/agentBuilder/AgentForm.tsx
+++ b/packages/web/src/components/agentBuilder/AgentForm.tsx
@@ -1,19 +1,24 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
 import InputText from '../InputText';
 import Textarea from '../Textarea';
 import Select from '../Select';
 import MCPServerManager from './MCPServerManager';
+import ModalDialog from '../ModalDialog';
 import { MODELS } from '../../hooks/useModel';
 import { AgentConfiguration } from 'generative-ai-use-cases';
+import usePromptGeneration from '../../hooks/usePromptGeneration';
+import useMCPServers from '../../hooks/useMCPServers';
+import { PiSparkle, PiStop } from 'react-icons/pi';
 
 export interface AgentFormData {
   name: string;
   description: string;
   systemPrompt: string;
   modelId: string;
-  mcpServers: string[]; // Changed to string array
+  mcpServers: string[];
   codeExecutionEnabled: boolean;
   isPublic: boolean;
   tags: string[];
@@ -55,6 +60,38 @@ const AgentForm: React.FC<AgentFormProps> = ({
   });
 
   const [tagsInput, setTagsInput] = useState('');
+  const [showOverwriteDialog, setShowOverwriteDialog] = useState(false);
+
+  // Load available MCP servers using the shared hook
+  const availableMCPServers = useMCPServers();
+
+  // Use the prompt generation hook
+  const {
+    generatedPrompt,
+    suggestedMCPServers,
+    isGenerating,
+    generate: generatePrompt,
+    cancel: cancelGeneration,
+  } = usePromptGeneration({
+    modelId: formData.modelId,
+    agentName: formData.name,
+    agentDescription: formData.description,
+    availableMCPServers,
+  });
+
+  // Update systemPrompt when generation produces new content
+  useEffect(() => {
+    if (generatedPrompt) {
+      setFormData((prev) => ({ ...prev, systemPrompt: generatedPrompt }));
+    }
+  }, [generatedPrompt]);
+
+  // Update MCP servers when AI suggests them
+  useEffect(() => {
+    if (suggestedMCPServers.length > 0) {
+      setFormData((prev) => ({ ...prev, mcpServers: suggestedMCPServers }));
+    }
+  }, [suggestedMCPServers]);
 
   // Update formData.modelId when availableModels becomes available
   useEffect(() => {
@@ -86,7 +123,6 @@ const AgentForm: React.FC<AgentFormProps> = ({
   // Notify parent component when form data changes
   useEffect(() => {
     if (onFormDataChange) {
-      // Parse tags from input for real-time updates
       const tags = tagsInput
         .split(',')
         .map((tag) => tag.trim())
@@ -103,7 +139,6 @@ const AgentForm: React.FC<AgentFormProps> = ({
 
   const handleSave = useCallback(async () => {
     try {
-      // Parse tags from input
       const tags = tagsInput
         .split(',')
         .map((tag) => tag.trim())
@@ -115,11 +150,34 @@ const AgentForm: React.FC<AgentFormProps> = ({
       };
 
       await onSave(agentData);
-    } catch (error) {
-      console.error('Error saving agent:', error);
+    } catch (err) {
+      console.error('Error saving agent:', err);
     }
   }, [formData, tagsInput, onSave]);
 
+  const handleGenerateClick = useCallback(() => {
+    if (formData.systemPrompt.trim()) {
+      setShowOverwriteDialog(true);
+    } else {
+      setFormData((prev) => ({ ...prev, systemPrompt: '' }));
+      generatePrompt();
+    }
+  }, [formData.systemPrompt, generatePrompt]);
+
+  const handleConfirmOverwrite = useCallback(() => {
+    setShowOverwriteDialog(false);
+    setFormData((prev) => ({ ...prev, systemPrompt: '' }));
+    generatePrompt();
+  }, [generatePrompt]);
+
+  const handleCancelGeneration = useCallback(() => {
+    cancelGeneration();
+  }, [cancelGeneration]);
+
+  // Check if generate button should be disabled
+  const isGenerateDisabled =
+    !formData.name.trim() || !formData.description.trim() || loading;
+
   const isFormValid =
     formData.name && formData.systemPrompt && formData.modelId;
 
@@ -202,10 +260,33 @@ const AgentForm: React.FC<AgentFormProps> = ({
 
       {/* System Prompt */}
       <div className="rounded-lg border bg-white p-6">
-        {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content */}
-        <h2 className="mb-4 text-lg font-semibold">
-          {t('agent_builder.system_prompt')} {'*'}
-        </h2>
+        <div className="mb-4 flex items-center justify-between">
+          {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content */}
+          <h2 className="text-lg font-semibold">
+            {t('agent_builder.system_prompt')} {'*'}
+          </h2>
+          <div className="flex items-center gap-2">
+            {isGenerating ? (
+              <ButtonIcon onClick={handleCancelGeneration}>
+                <PiStop className="text-red-500" />
+              </ButtonIcon>
+            ) : (
+              <Button
+                onClick={handleGenerateClick}
+                outlined
+                disabled={isGenerateDisabled || isGenerating}
+                className="flex items-center gap-1 text-sm">
+                <PiSparkle />
+                <span className="hidden sm:inline">
+                  {t('agent_builder.generate_with_ai')}
+                </span>
+                <span className="sm:hidden">
+                  {t('agent_builder.generate_short')}
+                </span>
+              </Button>
+            )}
+          </div>
+        </div>
 
         <Textarea
           value={formData.systemPrompt}
@@ -214,9 +295,35 @@ const AgentForm: React.FC<AgentFormProps> = ({
           }
           placeholder={t('agent_builder.enter_system_prompt')}
           rows={12}
+          disabled={isGenerating || loading}
         />
+        {isGenerating && (
+          <p className="mt-2 text-sm text-gray-500">
+            {t('agent_builder.generating_prompt')}
+          </p>
+        )}
       </div>
 
+      {/* Overwrite Confirmation Dialog */}
+      <ModalDialog
+        isOpen={showOverwriteDialog}
+        title={t('agent_builder.overwrite_prompt_title')}
+        onClose={() => setShowOverwriteDialog(false)}>
+        <div className="space-y-4">
+          <p className="text-gray-700">
+            {t('agent_builder.overwrite_prompt_message')}
+          </p>
+          <div className="flex justify-end gap-3">
+            <Button outlined onClick={() => setShowOverwriteDialog(false)}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleConfirmOverwrite}>
+              {t('agent_builder.overwrite_confirm')}
+            </Button>
+          </div>
+        </div>
+      </ModalDialog>
+
       {/* MCP Server Configuration */}
       <div className="rounded-lg border bg-white p-6">
         <MCPServerManager
@@ -288,10 +395,12 @@ const AgentForm: React.FC<AgentFormProps> = ({
 
       {/* Form Actions */}
       <div className="flex justify-end gap-3">
-        <Button outlined onClick={onCancel}>
+        <Button outlined onClick={onCancel} disabled={isGenerating}>
           {t('common.cancel')}
         </Button>
-        <Button onClick={handleSave} disabled={loading || !isFormValid}>
+        <Button
+          onClick={handleSave}
+          disabled={loading || !isFormValid || isGenerating}>
           {isEditMode ? t('common.update') : t('common.create')}
         </Button>
       </div>
diff --git a/packages/web/src/components/agentBuilder/MCPServerManager.tsx b/packages/web/src/components/agentBuilder/MCPServerManager.tsx
index 56488694d..1091a4658 100644
--- a/packages/web/src/components/agentBuilder/MCPServerManager.tsx
+++ b/packages/web/src/components/agentBuilder/MCPServerManager.tsx
@@ -2,36 +2,13 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiInfo, PiMagnifyingGlass, PiX } from 'react-icons/pi';
 import { AvailableMCPServer } from 'generative-ai-use-cases';
+import useMCPServers from '../../hooks/useMCPServers';
 
 interface MCPServerManagerProps {
   servers: string[];
   onChange: (servers: string[]) => void;
 }
 
-// Load MCP servers from environment variable
-const loadMCPServersFromEnv = (): AvailableMCPServer[] => {
-  try {
-    const mcpConfig = import.meta.env.VITE_APP_MCP_SERVERS_CONFIG;
-    if (!mcpConfig) {
-      console.warn('VITE_APP_MCP_SERVERS_CONFIG not found, using fallback');
-      return [];
-    }
-
-    const parsedConfig = JSON.parse(mcpConfig);
-    return Object.keys(parsedConfig).map((serverName) => {
-      const metadata = parsedConfig[serverName]?.metadata || {};
-      return {
-        name: serverName,
-        description: metadata.description || `MCP server: ${serverName}`,
-        category: metadata.category || 'Other',
-      };
-    });
-  } catch (error) {
-    console.error('Error parsing MCP servers config:', error);
-    return [];
-  }
-};
-
 const MCPServerManager: React.FC<MCPServerManagerProps> = ({
   servers,
   onChange,
@@ -43,8 +20,8 @@ const MCPServerManager: React.FC<MCPServerManagerProps> = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
 
-  // Load available MCP servers from environment
-  const AVAILABLE_MCP_SERVERS = useMemo(() => loadMCPServersFromEnv(), []);
+  // Load available MCP servers from environment using the shared hook
+  const AVAILABLE_MCP_SERVERS = useMCPServers();
 
   // Initialize selected servers from props
   useEffect(() => {
diff --git a/packages/web/src/hooks/useMCPServers.ts b/packages/web/src/hooks/useMCPServers.ts
new file mode 100644
index 000000000..99fb539d7
--- /dev/null
+++ b/packages/web/src/hooks/useMCPServers.ts
@@ -0,0 +1,48 @@
+/**
+ * useMCPServers Hook
+ *
+ * Provides MCP server configuration loaded from environment variables.
+ * Consolidates the logic previously duplicated in AgentForm and MCPServerManager.
+ */
+
+import { useMemo } from 'react';
+import { AvailableMCPServer } from 'generative-ai-use-cases';
+
+/**
+ * Loads MCP servers configuration from the VITE_APP_MCP_SERVERS_CONFIG environment variable.
+ *
+ * @returns Array of available MCP servers with name, description, and category
+ */
+export const loadMCPServersFromEnv = (): AvailableMCPServer[] => {
+  try {
+    const mcpConfig = import.meta.env.VITE_APP_MCP_SERVERS_CONFIG;
+    if (!mcpConfig) {
+      console.warn('VITE_APP_MCP_SERVERS_CONFIG not found');
+      return [];
+    }
+
+    const parsedConfig = JSON.parse(mcpConfig);
+    return Object.keys(parsedConfig).map((serverName) => {
+      const metadata = parsedConfig[serverName]?.metadata || {};
+      return {
+        name: serverName,
+        description: metadata.description || `MCP server: ${serverName}`,
+        category: metadata.category || 'Other',
+      };
+    });
+  } catch (error) {
+    console.error('Error parsing MCP servers config:', error);
+    return [];
+  }
+};
+
+/**
+ * Custom hook that provides memoized MCP server configurations.
+ *
+ * @returns Memoized array of available MCP servers
+ */
+export const useMCPServers = (): AvailableMCPServer[] => {
+  return useMemo(() => loadMCPServersFromEnv(), []);
+};
+
+export default useMCPServers;
diff --git a/packages/web/src/hooks/usePromptGeneration.ts b/packages/web/src/hooks/usePromptGeneration.ts
new file mode 100644
index 000000000..4a2a51749
--- /dev/null
+++ b/packages/web/src/hooks/usePromptGeneration.ts
@@ -0,0 +1,226 @@
+/**
+ * usePromptGeneration Hook
+ *
+ * A custom hook for generating AI agent system prompts using LLM streaming.
+ * Also automatically selects appropriate MCP servers based on the agent description.
+ */
+
+import { useState, useCallback, useRef } from 'react';
+import { AvailableMCPServer } from 'generative-ai-use-cases';
+import useChatApi from './useChatApi';
+import { parseStreamChunk, extractTextFromChunks } from '../utils/streamParser';
+import {
+  buildAgentSystemPromptGeneratorPrompt,
+  MCP_SERVERS_START_MARKER,
+  MCP_SERVERS_END_MARKER,
+  SYSTEM_PROMPT_START_MARKER,
+  SYSTEM_PROMPT_END_MARKER,
+} from '../prompts/agentSystemPromptGenerator';
+
+export interface UsePromptGenerationParams {
+  modelId: string;
+  agentName: string;
+  agentDescription: string;
+  availableMCPServers: AvailableMCPServer[];
+}
+
+export interface UsePromptGenerationReturn {
+  generatedPrompt: string;
+  suggestedMCPServers: string[];
+  isGenerating: boolean;
+  error: Error | null;
+  generate: () => Promise<string>;
+  cancel: () => void;
+  reset: () => void;
+}
+
+/**
+ * Parses MCP server names from the raw output between markers.
+ *
+ * @param rawOutput - The accumulated raw output from the LLM
+ * @returns Array of MCP server names, or null if markers not yet complete
+ */
+const parseMCPServers = (rawOutput: string): string[] | null => {
+  const startIndex = rawOutput.indexOf(MCP_SERVERS_START_MARKER);
+  const endIndex = rawOutput.indexOf(MCP_SERVERS_END_MARKER);
+
+  if (startIndex === -1 || endIndex === -1 || endIndex <= startIndex) {
+    return null;
+  }
+
+  const content = rawOutput.slice(
+    startIndex + MCP_SERVERS_START_MARKER.length,
+    endIndex
+  );
+
+  return content
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0);
+};
+
+/**
+ * Extracts the system prompt content from raw output, handling streaming.
+ *
+ * @param rawOutput - The accumulated raw output from the LLM
+ * @returns The extracted system prompt (may be partial during streaming)
+ */
+const extractSystemPrompt = (rawOutput: string): string => {
+  const startIndex = rawOutput.indexOf(SYSTEM_PROMPT_START_MARKER);
+
+  if (startIndex === -1) {
+    return '';
+  }
+
+  const contentStart = startIndex + SYSTEM_PROMPT_START_MARKER.length;
+  const endIndex = rawOutput.indexOf(SYSTEM_PROMPT_END_MARKER, contentStart);
+
+  if (endIndex === -1) {
+    // Still streaming - return content after start marker
+    return rawOutput.slice(contentStart).trimStart();
+  }
+
+  // Complete - return content between markers
+  return rawOutput.slice(contentStart, endIndex).trim();
+};
+
+/**
+ * Custom hook for generating system prompts using AI.
+ * Also suggests appropriate MCP servers based on the agent's purpose.
+ *
+ * @param params - Generation parameters including model ID and agent info
+ * @returns Object containing generation state and control functions
+ */
+export const usePromptGeneration = (
+  params: UsePromptGenerationParams
+): UsePromptGenerationReturn => {
+  const { modelId, agentName, agentDescription, availableMCPServers } = params;
+  const { predictStream } = useChatApi();
+
+  const [generatedPrompt, setGeneratedPrompt] = useState('');
+  const [suggestedMCPServers, setSuggestedMCPServers] = useState<string[]>([]);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const mcpServersParsedRef = useRef(false);
+
+  /**
+   * Generates a system prompt using the LLM.
+   * Updates generatedPrompt and suggestedMCPServers states as chunks are received.
+   *
+   * @returns The complete generated prompt
+   */
+  const generate = useCallback(async (): Promise<string> => {
+    setIsGenerating(true);
+    setError(null);
+    setGeneratedPrompt('');
+    setSuggestedMCPServers([]);
+    mcpServersParsedRef.current = false;
+    abortControllerRef.current = new AbortController();
+
+    let rawOutput = '';
+
+    try {
+      // Build the prompt with available MCP servers
+      const prompt = buildAgentSystemPromptGeneratorPrompt({
+        name: agentName,
+        description: agentDescription,
+        availableMCPServers:
+          availableMCPServers.length > 0 ? availableMCPServers : undefined,
+      });
+
+      // Stream the response
+      for await (const chunk of predictStream({
+        model: {
+          type: 'bedrock',
+          modelId,
+        },
+        messages: [
+          {
+            role: 'user',
+            content: prompt,
+          },
+        ],
+        id: crypto.randomUUID(),
+      })) {
+        if (abortControllerRef.current?.signal.aborted) {
+          break;
+        }
+
+        // Parse the chunk and extract text
+        const chunkStr = chunk as string;
+        const parsedChunks = parseStreamChunk(chunkStr);
+        const text = extractTextFromChunks(parsedChunks);
+
+        if (text) {
+          rawOutput += text;
+
+          // Try to parse MCP servers once we have the complete section
+          if (!mcpServersParsedRef.current) {
+            const servers = parseMCPServers(rawOutput);
+            if (servers !== null) {
+              setSuggestedMCPServers(servers);
+              mcpServersParsedRef.current = true;
+            }
+          }
+
+          // Extract and update system prompt (streaming)
+          const systemPrompt = extractSystemPrompt(rawOutput);
+          if (systemPrompt) {
+            setGeneratedPrompt(systemPrompt);
+          }
+        }
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name !== 'AbortError') {
+        console.error('Error generating system prompt:', err);
+        setError(err);
+      }
+    } finally {
+      setIsGenerating(false);
+      abortControllerRef.current = null;
+    }
+
+    // Return the final extracted prompt
+    return extractSystemPrompt(rawOutput);
+  }, [
+    modelId,
+    agentName,
+    agentDescription,
+    availableMCPServers,
+    predictStream,
+  ]);
+
+  /**
+   * Cancels an in-progress generation.
+   */
+  const cancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    setIsGenerating(false);
+  }, []);
+
+  /**
+   * Resets the generation state.
+   */
+  const reset = useCallback(() => {
+    setGeneratedPrompt('');
+    setSuggestedMCPServers([]);
+    setError(null);
+    setIsGenerating(false);
+    mcpServersParsedRef.current = false;
+  }, []);
+
+  return {
+    generatedPrompt,
+    suggestedMCPServers,
+    isGenerating,
+    error,
+    generate,
+    cancel,
+    reset,
+  };
+};
+
+export default usePromptGeneration;
diff --git a/packages/web/src/pages/agentBuilder/AgentBuilderEditPage.tsx b/packages/web/src/pages/agentBuilder/AgentBuilderEditPage.tsx
index f56aa2281..7a2df3718 100644
--- a/packages/web/src/pages/agentBuilder/AgentBuilderEditPage.tsx
+++ b/packages/web/src/pages/agentBuilder/AgentBuilderEditPage.tsx
@@ -8,7 +8,12 @@ import AgentForm, {
 import AgentTester from '../../components/agentBuilder/AgentTester';
 import { useAgentBuilder } from '../../hooks/agentBuilder/useAgentBuilder';
 import useAgentBuilderList from '../../hooks/agentBuilder/useAgentBuilderList';
-import { PiRobot as RobotIcon, PiArrowLeft as BackIcon } from 'react-icons/pi';
+import {
+  PiRobot as RobotIcon,
+  PiArrowLeft as BackIcon,
+  PiPencilSimple,
+  PiEye,
+} from 'react-icons/pi';
 
 const AgentBuilderEditPage: React.FC = () => {
   const { t } = useTranslation();
@@ -26,6 +31,9 @@ const AgentBuilderEditPage: React.FC = () => {
     null
   );
 
+  // View toggle state for responsive layout
+  const [activeView, setActiveView] = useState<'editor' | 'preview'>('editor');
+
   const handleSave = useCallback(
     async (formData: AgentFormData) => {
       if (agentId && isEditMode) {
@@ -118,24 +126,55 @@ const AgentBuilderEditPage: React.FC = () => {
   }
 
   return (
-    <div className="container mx-auto max-w-6xl px-4 py-8">
+    <div className="w-full px-8 py-8">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
         <div className="flex items-center gap-4">
           <Button outlined onClick={handleCancel}>
-            <BackIcon className="mr-2 h-4 w-4" />
-            {t('common.back')}
+            <BackIcon className="h-4 w-4 sm:mr-2" />
+            <span className="hidden sm:inline">{t('common.back')}</span>
           </Button>
           <div>
             <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
           </div>
         </div>
+
+        {/* View Toggle for small screens - aligned with title on right */}
+        <div className="lg:hidden">
+          <div className="flex rounded border text-xs font-bold">
+            <div
+              className={`my-1 ml-1 flex cursor-pointer items-center rounded px-2 py-1 ${
+                activeView === 'editor'
+                  ? 'bg-gray-600 text-white'
+                  : 'text-gray-600'
+              }`}
+              onClick={() => setActiveView('editor')}>
+              <PiPencilSimple className="text-base sm:mr-1" />
+              <span className="hidden sm:inline">
+                {t('agent_builder.editor')}
+              </span>
+            </div>
+            <div
+              className={`my-1 mr-1 flex cursor-pointer items-center rounded px-2 py-1 ${
+                activeView === 'preview'
+                  ? 'bg-gray-600 text-white'
+                  : 'text-gray-600'
+              }`}
+              onClick={() => setActiveView('preview')}>
+              <PiEye className="text-base sm:mr-1" />
+              <span className="hidden sm:inline">
+                {t('agent_builder.preview')}
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
 
-      {/* Content */}
+      {/* Content - Large screens: side-by-side, Small screens: toggle view */}
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        {/* Agent Configuration */}
-        <div className="space-y-6">
+        {/* Agent Configuration - Always visible on large screens, toggle on small */}
+        <div
+          className={`space-y-6 ${activeView !== 'editor' ? 'hidden lg:block' : ''}`}>
           <AgentForm
             initialData={agent || undefined}
             onSave={handleSave}
@@ -147,9 +186,10 @@ const AgentBuilderEditPage: React.FC = () => {
           />
         </div>
 
-        {/* Agent Testing */}
+        {/* Agent Testing - Always visible on large screens, toggle on small */}
         {(currentFormData || agent) && (
-          <div className="space-y-6">
+          <div
+            className={`space-y-6 ${activeView !== 'preview' ? 'hidden lg:block' : ''}`}>
             <AgentTester
               agent={{
                 // Use current form data if available, otherwise use existing agent data
diff --git a/packages/web/src/prompts/agentSystemPromptGenerator.ts b/packages/web/src/prompts/agentSystemPromptGenerator.ts
new file mode 100644
index 000000000..1d41cf064
--- /dev/null
+++ b/packages/web/src/prompts/agentSystemPromptGenerator.ts
@@ -0,0 +1,106 @@
+/**
+ * Agent System Prompt Generator
+ *
+ * Template for generating system prompts for AI agents using LLM.
+ * Includes automatic MCP server selection based on agent description.
+ */
+
+export interface MCPServerForPrompt {
+  name: string;
+  description: string;
+  category: string;
+}
+
+export interface AgentPromptParams {
+  name: string;
+  description: string;
+  availableMCPServers?: MCPServerForPrompt[];
+}
+
+// Markers for parsing AI output
+export const MCP_SERVERS_START_MARKER = '<SELECTED_MCP_SERVERS>';
+export const MCP_SERVERS_END_MARKER = '</SELECTED_MCP_SERVERS>';
+export const SYSTEM_PROMPT_START_MARKER = '<SYSTEM_PROMPT>';
+export const SYSTEM_PROMPT_END_MARKER = '</SYSTEM_PROMPT>';
+
+/**
+ * Builds the prompt template for generating an AI agent's system prompt.
+ * The AI will also select appropriate MCP servers based on the agent's purpose.
+ *
+ * @param params - Agent information including name, description, and available MCP servers
+ * @returns The formatted prompt string to send to the LLM
+ */
+export const buildAgentSystemPromptGeneratorPrompt = (
+  params: AgentPromptParams
+): string => {
+  const { name, description, availableMCPServers } = params;
+
+  const mcpServersSection =
+    availableMCPServers && availableMCPServers.length > 0
+      ? `
+## Available MCP Servers (Tools)
+Select the most appropriate servers for this agent based on its purpose.
+${availableMCPServers.map((s) => `- ${s.name} [${s.category}]: ${s.description}`).join('\n')}
+`
+      : '';
+
+  const mcpOutputInstructions =
+    availableMCPServers && availableMCPServers.length > 0
+      ? `First, output the selected MCP server names (one per line) between ${MCP_SERVERS_START_MARKER} and ${MCP_SERVERS_END_MARKER} tags.
+Then, output the system prompt between ${SYSTEM_PROMPT_START_MARKER} and ${SYSTEM_PROMPT_END_MARKER} tags.`
+      : `Output the system prompt between ${SYSTEM_PROMPT_START_MARKER} and ${SYSTEM_PROMPT_END_MARKER} tags.`;
+
+  const mcpRequirements =
+    availableMCPServers && availableMCPServers.length > 0
+      ? `
+3. Select ONLY the MCP servers that are relevant to the agent's purpose (can be zero or more)
+4. In the system prompt, describe how to effectively utilize the selected tools`
+      : '';
+
+  return `You are an expert in creating system prompts for AI agents.
+Based on the following information, generate an optimal system prompt for this agent.
+
+## Agent Information
+- Name: ${name}
+- Description: ${description}
+${mcpServersSection}
+## Requirements
+1. Clearly define the role and purpose of the agent
+2. Describe the personality and behavior the agent should have${mcpRequirements}
+5. Include guidelines for interaction with users
+6. List any constraints or important notes
+7. Write the system prompt in the same language as the Name and Description provided above
+
+## Output Format
+${mcpOutputInstructions}
+
+Example output format:
+${
+  availableMCPServers && availableMCPServers.length > 0
+    ? `${MCP_SERVERS_START_MARKER}
+server-name-1
+server-name-2
+${MCP_SERVERS_END_MARKER}
+
+`
+    : ''
+}${SYSTEM_PROMPT_START_MARKER}
+Your system prompt content here...
+${SYSTEM_PROMPT_END_MARKER}
+
+Output only the formatted response. No additional explanations.`;
+};
+
+/**
+ * Formats MCP server information for inclusion in the prompt.
+ *
+ * @param servers - Array of server objects with name and description
+ * @returns Formatted string of MCP server information
+ */
+export const formatMCPServersInfo = (
+  servers: { name: string; description: string }[]
+): string => {
+  return servers
+    .map((server) => `- ${server.name}: ${server.description}`)
+    .join('\n');
+};
diff --git a/packages/web/src/utils/streamParser.ts b/packages/web/src/utils/streamParser.ts
new file mode 100644
index 000000000..c9392b2e8
--- /dev/null
+++ b/packages/web/src/utils/streamParser.ts
@@ -0,0 +1,38 @@
+import { StreamingChunk } from 'generative-ai-use-cases';
+
+/**
+ * Parses a streamed JSON chunk string into structured data.
+ * Handles multiple JSON objects separated by newlines within a single chunk.
+ *
+ * @param chunk - The raw chunk string from the stream
+ * @returns An array of parsed StreamingChunk objects
+ */
+export const parseStreamChunk = (chunk: string): StreamingChunk[] => {
+  const results: StreamingChunk[] = [];
+  const lines = chunk.split('\n').filter((line) => line.trim());
+
+  for (const line of lines) {
+    try {
+      const payload = JSON.parse(line) as StreamingChunk;
+      results.push(payload);
+    } catch {
+      // Skip lines that can't be parsed as JSON
+      console.warn('Failed to parse stream chunk line:', line);
+    }
+  }
+
+  return results;
+};
+
+/**
+ * Extracts text content from stream chunks.
+ *
+ * @param chunks - Array of StreamingChunk objects
+ * @returns Concatenated text from all chunks
+ */
+export const extractTextFromChunks = (chunks: StreamingChunk[]): string => {
+  return chunks
+    .filter((chunk) => chunk.text && chunk.text.length > 0)
+    .map((chunk) => chunk.text)
+    .join('');
+};