feat: integrate AIAssist for script editing (#8220)

packages/bruno-app/src/components/AIAssist/StyledWrapper.js

@@ -0,0 +1,298 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 10;
+
+  .ai-assist-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    border: 1px solid transparent;
+    background: transparent;
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+    opacity: 0.7;
+
+    &:hover,
+    &.open {
+      opacity: 1;
+      color: ${(props) => props.theme.colors.accent};
+      background: ${(props) => props.theme.colors.accent}10;
+      border-color: ${(props) => props.theme.input.border};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${(props) => props.theme.colors.accent}55;
+      outline-offset: 1px;
+    }
+  }
+
+  .ai-assist-popup {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    width: 360px;
+    background: ${(props) => props.theme.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    border-radius: ${(props) => props.theme.border.radius.md};
+    overflow: hidden;
+  }
+
+  .popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 10px;
+    border-bottom: 1px solid ${(props) => props.theme.input.border};
+  }
+
+  .popup-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: ${(props) => props.theme.text};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
+    svg {
+      color: ${(props) => props.theme.colors.accent};
+    }
+  }
+
+  .popup-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    border: none;
+    background: transparent;
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.input.bg};
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .popup-body {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .popup-input {
+    width: 100%;
+    padding: 8px 10px;
+    font-size: 12px;
+    font-family: inherit;
+    line-height: 1.4;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    border: 1px solid ${(props) => props.theme.input.border};
+    background: ${(props) => props.theme.input.bg};
+    color: ${(props) => props.theme.text};
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.15s ease;
+
+    &::placeholder {
+      color: ${(props) => props.theme.colors.text.muted};
+      opacity: 0.85;
+    }
+
+    &:focus {
+      border-color: ${(props) => props.theme.input.focusBorder};
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  .popup-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .suggestion-chip {
+    padding: 3px 8px;
+    font-size: 11px;
+    border: 1px solid ${(props) => props.theme.input.border};
+    border-radius: 999px;
+    background: ${(props) => props.theme.input.bg};
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      color: ${(props) => props.theme.text};
+      border-color: ${(props) => props.theme.colors.accent}80;
+      background: ${(props) => props.theme.colors.accent}10;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .popup-error {
+    padding: 6px 8px;
+    font-size: 11px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    color: ${(props) => props.theme.colors.text.danger};
+    background: ${(props) => props.theme.colors.bg.danger}15;
+  }
+
+  .popup-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 10px;
+    border-top: 1px solid ${(props) => props.theme.input.border};
+  }
+
+  .popup-hint {
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .popup-loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .loading-spinner {
+    width: 12px;
+    height: 12px;
+    border: 2px solid ${(props) => props.theme.input.border};
+    border-top-color: ${(props) => props.theme.colors.accent};
+    border-radius: 50%;
+    animation: ai-assist-spin 0.7s linear infinite;
+  }
+
+  @keyframes ai-assist-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .btn-generate {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    border: 1px solid ${(props) => props.theme.colors.accent};
+    background: ${(props) => props.theme.colors.accent};
+    color: white;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+
+    &:hover:not(:disabled) {
+      opacity: 0.88;
+    }
+
+    &:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+  }
+
+  .btn-secondary {
+    padding: 5px 12px;
+    font-size: 12px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    border: 1px solid ${(props) => props.theme.input.border};
+    background: transparent;
+    color: ${(props) => props.theme.text};
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background: ${(props) => props.theme.input.bg};
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .preview-section {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .preview-label {
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.text.muted};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .preview-code {
+    max-height: 220px;
+    overflow: auto;
+    padding: 8px 10px;
+    font-family: ${(props) => props.theme.font.monospace || 'monospace'};
+    font-size: 11.5px;
+    line-height: 1.5;
+    color: ${(props) => props.theme.text};
+    background: ${(props) => props.theme.input.bg};
+    border: 1px solid ${(props) => props.theme.input.border};
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    white-space: pre;
+  }
+
+  .preview-modes {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .preview-mode-btn {
+    padding: 2px 6px;
+    border-radius: ${(props) => props.theme.border.radius.sm};
+    border: 1px solid transparent;
+    background: transparent;
+    color: ${(props) => props.theme.colors.text.muted};
+    cursor: pointer;
+    font-size: 11px;
+
+    &.active {
+      color: ${(props) => props.theme.text};
+      border-color: ${(props) => props.theme.input.border};
+      background: ${(props) => props.theme.input.bg};
+    }
+
+    &:hover:not(.active) {
+      color: ${(props) => props.theme.text};
+    }
+  }
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/AIAssist/index.js

@@ -0,0 +1,232 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import get from 'lodash/get';
+import { IconStars, IconX, IconArrowBackUp } from '@tabler/icons';
+import { aiGenerateScript } from 'utils/ai';
+import StyledWrapper from './StyledWrapper';
+
+const SUGGESTIONS = {
+  'tests': [
+    { label: 'Status 200', prompt: 'Add a test asserting the response status code is 200' },
+    { label: 'JSON body', prompt: 'Add tests validating the JSON response body structure and key fields' },
+    { label: 'Headers', prompt: 'Add a test checking the content-type response header' },
+    { label: 'Response time', prompt: 'Add a test asserting the response time is below 1000ms' }
+  ],
+  'pre-request': [
+    { label: 'Auth header', prompt: 'Set an Authorization header from an environment token variable' },
+    { label: 'Timestamp', prompt: 'Set a variable named "timestamp" containing the current epoch ms' },
+    { label: 'Random ID', prompt: 'Set a variable named "requestId" containing a random UUID-style id' }
+  ],
+  'post-response': [
+    { label: 'Save token', prompt: 'Extract a token from the response body and save it to an environment variable' },
+    { label: 'Save id', prompt: 'Extract the primary id from the response body and save it to a variable' },
+    { label: 'Log response', prompt: 'Log the response status and a short summary of the body' }
+  ]
+};
+
+const TITLES = {
+  'tests': 'Generate Tests',
+  'pre-request': 'Generate Pre-Request Script',
+  'post-response': 'Generate Post-Response Script'
+};
+
+const isValidType = (t) => SUGGESTIONS[t] !== undefined;
+
+const AIAssist = ({ scriptType, currentScript, requestContext, onApply }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [prompt, setPrompt] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [generated, setGenerated] = useState(null);
+  const buttonRef = useRef(null);
+
+  const focusOnMount = useCallback((el) => {
+    el?.focus();
+  }, []);
+
+  const preferences = useSelector((state) => state.app.preferences);
+  const isAiEnabled = get(preferences, 'ai.enabled', false);
+
+  const suggestions = useMemo(() => SUGGESTIONS[scriptType] || [], [scriptType]);
+  const title = TITLES[scriptType] || 'Generate with AI';
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setError(null);
+  }, []);
+
+  const attachPopup = useCallback((el) => {
+    if (!el) return undefined;
+    const onDocMouseDown = (e) => {
+      if (!el.contains(e.target) && !buttonRef.current?.contains(e.target)) {
+        close();
+      }
+    };
+    const onKey = (e) => {
+      if (e.key === 'Escape') close();
+    };
+    document.addEventListener('mousedown', onDocMouseDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocMouseDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [close]);
+
+  const handleGenerate = useCallback(
+    async (overridePrompt) => {
+      const text = (overridePrompt ?? prompt).trim();
+      if (!text || isLoading) return;
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const result = await aiGenerateScript({
+          scriptType,
+          prompt: text,
+          currentScript: currentScript || '',
+          requestContext
+        });
+        if (result?.error) {
+          setError(result.error);
+          return;
+        }
+        if (result?.content) {
+          setGenerated(result.content);
+        } else {
+          setError('No content was generated. Try rephrasing your prompt.');
+        }
+      } catch (err) {
+        setError(err?.message || 'Failed to generate script');
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [prompt, isLoading, scriptType, currentScript, requestContext]
+  );
+
+  const handleApply = useCallback(() => {
+    if (generated == null) return;
+    onApply(generated);
+    setGenerated(null);
+    setPrompt('');
+    close();
+  }, [generated, onApply, close]);
+
+  const handleBackToPrompt = useCallback(() => {
+    setGenerated(null);
+    setError(null);
+  }, []);
+
+  if (!isAiEnabled || !isValidType(scriptType)) return null;
+
+  return (
+    <StyledWrapper>
+      <button
+        ref={buttonRef}
+        className={`ai-assist-trigger ${isOpen ? 'open' : ''}`}
+        onClick={() => setIsOpen((v) => !v)}
+        title={title}
+        type="button"
+        aria-label={title}
+      >
+        <IconStars size={14} strokeWidth={1.75} />
+      </button>
+
+      {isOpen && (
+        <div ref={attachPopup} className="ai-assist-popup" role="dialog" aria-label={title}>
+          <div className="popup-header">
+            <span className="popup-title">
+              <IconStars size={12} strokeWidth={1.75} />
+              {title}
+            </span>
+            <button className="popup-close" onClick={close} type="button" aria-label="Close">
+              <IconX size={14} />
+            </button>
+          </div>
+
+          {generated == null ? (
+            <>
+              <div className="popup-body">
+                <textarea
+                  ref={focusOnMount}
+                  className="popup-input"
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                      e.preventDefault();
+                      handleGenerate();
+                    }
+                  }}
+                  placeholder="Describe what you want to generate..."
+                  rows={3}
+                  disabled={isLoading}
+                />
+
+                {!isLoading && !prompt && suggestions.length > 0 && (
+                  <div className="popup-suggestions">
+                    {suggestions.map((s) => (
+                      <button
+                        key={s.label}
+                        className="suggestion-chip"
+                        type="button"
+                        onClick={() => handleGenerate(s.prompt)}
+                        disabled={isLoading}
+                      >
+                        {s.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+                {error && <div className="popup-error">{error}</div>}
+              </div>
+
+              <div className="popup-footer">
+                {isLoading ? (
+                  <span className="popup-loading">
+                    <span className="loading-spinner" />
+                    Generating...
+                  </span>
+                ) : (
+                  <span className="popup-hint">⌘ + Enter to generate</span>
+                )}
+                <button
+                  className="btn-generate"
+                  type="button"
+                  onClick={() => handleGenerate()}
+                  disabled={!prompt.trim() || isLoading}
+                >
+                  Generate
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="popup-body">
+                <div className="preview-section">
+                  <span className="preview-label">Preview · replaces current script</span>
+                  <pre className="preview-code">{generated}</pre>
+                </div>
+              </div>
+
+              <div className="popup-footer">
+                <button className="btn-secondary" type="button" onClick={handleBackToPrompt}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                    <IconArrowBackUp size={12} /> Back
+                  </span>
+                </button>
+                <button className="btn-generate" type="button" onClick={handleApply}>
+                  Apply
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default AIAssist;

packages/bruno-app/src/components/CollectionSettings/Script/index.js

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import find from 'lodash/find';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
 import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -108,39 +109,53 @@ const Script = ({ collection }) => {
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2" dataTestId="collection-pre-request-script-editor">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            docKey="collection-script:pre-request"
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-            initialScroll={preReqScroll}
-            onScroll={setPreReqScroll}
-          />
+          <div className="relative h-full">
+            <CodeEditor
+              ref={preRequestEditorRef}
+              collection={collection}
+              docKey="collection-script:pre-request"
+              value={requestScript || ''}
+              theme={displayedTheme}
+              onEdit={onRequestScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'bru']}
+              initialScroll={preReqScroll}
+              onScroll={setPreReqScroll}
+            />
+            <AIAssist
+              scriptType="pre-request"
+              currentScript={requestScript || ''}
+              onApply={onRequestScriptEdit}
+            />
+          </div>
         </TabsContent>
 
         <TabsContent value="post-response" className="mt-2" dataTestId="collection-post-response-script-editor">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            docKey="collection-script:post-response"
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-            initialScroll={postResScroll}
-            onScroll={setPostResScroll}
-          />
+          <div className="relative h-full">
+            <CodeEditor
+              ref={postResponseEditorRef}
+              collection={collection}
+              docKey="collection-script:post-response"
+              value={responseScript || ''}
+              theme={displayedTheme}
+              onEdit={onResponseScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'res', 'bru']}
+              initialScroll={postResScroll}
+              onScroll={setPostResScroll}
+            />
+            <AIAssist
+              scriptType="post-response"
+              currentScript={responseScript || ''}
+              onApply={onResponseScriptEdit}
+            />
+          </div>
         </TabsContent>
       </Tabs>
 

packages/bruno-app/src/components/CollectionSettings/Tests/index.js

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
 import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
@@ -32,21 +33,24 @@ const Tests = ({ collection }) => {
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
-      <CodeEditor
-        ref={testsEditorRef}
-        collection={collection}
-        docKey="collection-tests"
-        value={tests || ''}
-        theme={displayedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
-        initialScroll={testsScroll}
-        onScroll={setTestsScroll}
-      />
+      <div className="relative h-full">
+        <CodeEditor
+          ref={testsEditorRef}
+          collection={collection}
+          docKey="collection-tests"
+          value={tests || ''}
+          theme={displayedTheme}
+          onEdit={onEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
+          initialScroll={testsScroll}
+          onScroll={setTestsScroll}
+        />
+        <AIAssist scriptType="tests" currentScript={tests || ''} onApply={onEdit} />
+      </div>
 
       <div className="mt-6">
         <Button type="submit" size="sm" onClick={handleSave}>

packages/bruno-app/src/components/FolderSettings/Script/index.js

@@ -3,6 +3,7 @@ import get from 'lodash/get';
 import find from 'lodash/find';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
 import { updateFolderRequestScript, updateFolderResponseScript } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -111,39 +112,53 @@ const Script = ({ collection, folder }) => {
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2" dataTestId="folder-pre-request-script-editor">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            docKey="folder-script:pre-request"
-            value={requestScript || ''}
-            theme={displayedTheme}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'bru']}
-            initialScroll={preReqScroll}
-            onScroll={setPreReqScroll}
-          />
+          <div className="relative h-full">
+            <CodeEditor
+              ref={preRequestEditorRef}
+              collection={collection}
+              docKey="folder-script:pre-request"
+              value={requestScript || ''}
+              theme={displayedTheme}
+              onEdit={onRequestScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'bru']}
+              initialScroll={preReqScroll}
+              onScroll={setPreReqScroll}
+            />
+            <AIAssist
+              scriptType="pre-request"
+              currentScript={requestScript || ''}
+              onApply={onRequestScriptEdit}
+            />
+          </div>
         </TabsContent>
 
         <TabsContent value="post-response" className="mt-2" dataTestId="folder-post-response-script-editor">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            docKey="folder-script:post-response"
-            value={responseScript || ''}
-            theme={displayedTheme}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onSave={handleSave}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            showHintsFor={['req', 'res', 'bru']}
-            initialScroll={postResScroll}
-            onScroll={setPostResScroll}
-          />
+          <div className="relative h-full">
+            <CodeEditor
+              ref={postResponseEditorRef}
+              collection={collection}
+              docKey="folder-script:post-response"
+              value={responseScript || ''}
+              theme={displayedTheme}
+              onEdit={onResponseScriptEdit}
+              mode="javascript"
+              onSave={handleSave}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              showHintsFor={['req', 'res', 'bru']}
+              initialScroll={postResScroll}
+              onScroll={setPostResScroll}
+            />
+            <AIAssist
+              scriptType="post-response"
+              currentScript={responseScript || ''}
+              onApply={onResponseScriptEdit}
+            />
+          </div>
         </TabsContent>
       </Tabs>
 

packages/bruno-app/src/components/FolderSettings/Tests/index.js

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
 import { updateFolderTests } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
@@ -33,21 +34,24 @@ const Tests = ({ collection, folder }) => {
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
-      <CodeEditor
-        ref={testsEditorRef}
-        collection={collection}
-        docKey="folder-tests"
-        value={tests || ''}
-        theme={displayedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-        font={get(preferences, 'font.codeFont', 'default')}
-        fontSize={get(preferences, 'font.codeFontSize')}
-        showHintsFor={['req', 'res', 'bru']}
-        initialScroll={testsScroll}
-        onScroll={setTestsScroll}
-      />
+      <div className="relative h-full">
+        <CodeEditor
+          ref={testsEditorRef}
+          collection={collection}
+          docKey="folder-tests"
+          value={tests || ''}
+          theme={displayedTheme}
+          onEdit={onEdit}
+          mode="javascript"
+          onSave={handleSave}
+          font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
+          showHintsFor={['req', 'res', 'bru']}
+          initialScroll={testsScroll}
+          onScroll={setTestsScroll}
+        />
+        <AIAssist scriptType="tests" currentScript={tests || ''} onApply={onEdit} />
+      </div>
 
       <div className="mt-6">
         <Button type="submit" size="sm" onClick={handleSave}>

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -1,8 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import get from 'lodash/get';
 import find from 'lodash/find';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
+import { buildRequestContextFromItem } from 'utils/ai';
 import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
@@ -78,6 +80,8 @@ const Script = ({ item, collection }) => {
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
+  const requestContext = useMemo(() => buildRequestContextFromItem(item), [item]);
+
   const hasPreRequestScript = requestScript && requestScript.trim().length > 0;
   const hasPostResponseScript = responseScript && responseScript.trim().length > 0;
 
@@ -104,41 +108,57 @@ const Script = ({ item, collection }) => {
         </TabsList>
 
         <TabsContent value="pre-request" className="mt-2" dataTestId="pre-request-script-editor">
-          <CodeEditor
-            ref={preRequestEditorRef}
-            collection={collection}
-            docKey="script:pre-request"
-            value={requestScript || ''}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            onEdit={onRequestScriptEdit}
-            mode="javascript"
-            onRun={onRun}
-            onSave={onSave}
-            showHintsFor={['req', 'bru']}
-            initialScroll={preReqScroll}
-            onScroll={setPreReqScroll}
-          />
+          <div className="relative h-full">
+            <CodeEditor
+              ref={preRequestEditorRef}
+              collection={collection}
+              docKey="script:pre-request"
+              value={requestScript || ''}
+              theme={displayedTheme}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              onEdit={onRequestScriptEdit}
+              mode="javascript"
+              onRun={onRun}
+              onSave={onSave}
+              showHintsFor={['req', 'bru']}
+              initialScroll={preReqScroll}
+              onScroll={setPreReqScroll}
+            />
+            <AIAssist
+              scriptType="pre-request"
+              currentScript={requestScript || ''}
+              requestContext={requestContext}
+              onApply={onRequestScriptEdit}
+            />
+          </div>
         </TabsContent>
 
         <TabsContent value="post-response" className="mt-2" dataTestId="post-response-script-editor">
-          <CodeEditor
-            ref={postResponseEditorRef}
-            collection={collection}
-            docKey="script:post-response"
-            value={responseScript || ''}
-            theme={displayedTheme}
-            font={get(preferences, 'font.codeFont', 'default')}
-            fontSize={get(preferences, 'font.codeFontSize')}
-            onEdit={onResponseScriptEdit}
-            mode="javascript"
-            onRun={onRun}
-            onSave={onSave}
-            showHintsFor={['req', 'res', 'bru']}
-            initialScroll={postResScroll}
-            onScroll={setPostResScroll}
-          />
+          <div className="relative h-full">
+            <CodeEditor
+              ref={postResponseEditorRef}
+              collection={collection}
+              docKey="script:post-response"
+              value={responseScript || ''}
+              theme={displayedTheme}
+              font={get(preferences, 'font.codeFont', 'default')}
+              fontSize={get(preferences, 'font.codeFontSize')}
+              onEdit={onResponseScriptEdit}
+              mode="javascript"
+              onRun={onRun}
+              onSave={onSave}
+              showHintsFor={['req', 'res', 'bru']}
+              initialScroll={postResScroll}
+              onScroll={setPostResScroll}
+            />
+            <AIAssist
+              scriptType="post-response"
+              currentScript={responseScript || ''}
+              requestContext={requestContext}
+              onApply={onResponseScriptEdit}
+            />
+          </div>
         </TabsContent>
       </Tabs>
     </div>

packages/bruno-app/src/components/RequestPane/Tests/index.js

@@ -1,7 +1,9 @@
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import get from 'lodash/get';
 import { useDispatch, useSelector } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
+import AIAssist from 'components/AIAssist';
+import { buildRequestContextFromItem } from 'utils/ai';
 import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
@@ -29,8 +31,10 @@ const Tests = ({ item, collection }) => {
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
+  const requestContext = useMemo(() => buildRequestContextFromItem(item), [item]);
+
   return (
-    <div data-testid="test-script-editor">
+    <div data-testid="test-script-editor" className="relative h-full">
       <CodeEditor
         ref={testsEditorRef}
         collection={collection}
@@ -47,6 +51,7 @@ const Tests = ({ item, collection }) => {
         initialScroll={testsScroll}
         onScroll={setTestsScroll}
       />
+      <AIAssist scriptType="tests" currentScript={tests || ''} requestContext={requestContext} onApply={onEdit} />
     </div>
   );
 };