diff --git a/src/commons/application/actions/__tests__/SessionActions.test.ts b/src/commons/application/actions/__tests__/SessionActions.test.ts
index b8d11c0c8d..77a1d6a65d 100644
--- a/src/commons/application/actions/__tests__/SessionActions.test.ts
+++ b/src/commons/application/actions/__tests__/SessionActions.test.ts
@@ -605,6 +605,8 @@ test('updateGrading generates correct action object', async () => {
   const grading: GradingQuery = {
     answers: [
       {
+        id: 0,
+        prompts: [],
         question: await vi.importMock('../../../../features/grading/GradingTypes'),
         student: {
           name: 'test student',
@@ -620,9 +622,12 @@ test('updateGrading generates correct action object', async () => {
             id: 100
           },
           gradedAt: '2019-08-16T13:26:32+00:00'
-        }
+        },
+        autogradingResults: [],
+        autoGradingStatus: 'N/A'
       }
     ],
+    enable_llm_grading: false,
     assessment: {
       coverPicture: 'https://i.imgur.com/dR7zBPI.jpeg',
       id: 1,
diff --git a/src/commons/application/reducers/__tests__/SessionReducer.test.ts b/src/commons/application/reducers/__tests__/SessionReducer.test.ts
index ff9001f136..e847e002bd 100644
--- a/src/commons/application/reducers/__tests__/SessionReducer.test.ts
+++ b/src/commons/application/reducers/__tests__/SessionReducer.test.ts
@@ -402,8 +402,13 @@ test('UPDATE_ASSESSMENT_OVERVIEWS works correctly in updating assessment overvie
 
 // Test data for UPDATE_GRADING
 const gradingTest1: GradingQuery = {
+  enable_llm_grading: false,
   answers: [
     {
+      id: 0,
+      prompts: [],
+      autogradingResults: [],
+      autoGradingStatus: 'N/A',
       question: await vi.importMock('../../../../features/grading/GradingTypes'),
       student: {
         name: 'test student',
@@ -430,8 +435,13 @@ const gradingTest1: GradingQuery = {
 };
 
 const gradingTest2: GradingQuery = {
+  enable_llm_grading: false,
   answers: [
     {
+      id: 0,
+      prompts: [],
+      autogradingResults: [],
+      autoGradingStatus: 'N/A',
       question: await vi.importMock('../../../../features/grading/GradingTypes'),
       student: {
         name: 'another test student',
diff --git a/src/commons/application/types/SessionTypes.ts b/src/commons/application/types/SessionTypes.ts
index 401466989f..a0e3fe33c0 100644
--- a/src/commons/application/types/SessionTypes.ts
+++ b/src/commons/application/types/SessionTypes.ts
@@ -39,6 +39,10 @@ export type SessionState = {
   readonly enableAchievements?: boolean;
   readonly enableSourcecast?: boolean;
   readonly enableStories?: boolean;
+  readonly enableLlmGrading?: boolean;
+  readonly llmModel?: string;
+  readonly llmApiUrl?: string;
+  readonly llmCourseLevelPrompt?: string;
   readonly enableOverallLeaderboard?: boolean;
   readonly enableContestLeaderboard?: boolean;
   readonly topLeaderboardDisplay?: number;
@@ -109,6 +113,7 @@ export type CourseConfiguration = {
   enableAchievements: boolean;
   enableSourcecast: boolean;
   enableStories: boolean;
+  enableLlmGrading?: boolean;
   enableOverallLeaderboard: boolean;
   enableContestLeaderboard: boolean;
   topLeaderboardDisplay: number;
@@ -117,6 +122,9 @@ export type CourseConfiguration = {
   sourceVariant: Variant;
   moduleHelpText: string;
   assetsPrefix: string;
+  llmModel?: string;
+  llmApiUrl?: string;
+  llmCourseLevelPrompt?: string;
 };
 
 export type AdminPanelCourseRegistration = {
@@ -128,4 +136,4 @@ export type AdminPanelCourseRegistration = {
   group?: string;
 };
 
-export type UpdateCourseConfiguration = Partial<CourseConfiguration>;
+export type UpdateCourseConfiguration = Partial<CourseConfiguration & { llmApiKey: string }>;
diff --git a/src/commons/assessment/AssessmentTypes.ts b/src/commons/assessment/AssessmentTypes.ts
index bbd7b13644..b0abc6f308 100644
--- a/src/commons/assessment/AssessmentTypes.ts
+++ b/src/commons/assessment/AssessmentTypes.ts
@@ -143,6 +143,11 @@ export interface IContestVotingQuestion extends BaseQuestion {
   type: 'voting';
 }
 
+export type LLMPrompt = {
+  role: string;
+  content: string;
+};
+
 export type BaseQuestion = {
   answer: string | number | ContestEntry[] | null;
   comments?: string;
diff --git a/src/commons/dropdown/DropdownCreateCourse.tsx b/src/commons/dropdown/DropdownCreateCourse.tsx
index 2d37ce7eb9..4045f3bbfe 100644
--- a/src/commons/dropdown/DropdownCreateCourse.tsx
+++ b/src/commons/dropdown/DropdownCreateCourse.tsx
@@ -40,9 +40,11 @@ const DropdownCreateCourse: React.FC<Props> = props => {
     enableAchievements: true,
     enableSourcecast: true,
     enableStories: false,
+    enableLlmGrading: false,
     sourceChapter: Chapter.SOURCE_1,
     sourceVariant: Variant.DEFAULT,
-    moduleHelpText: ''
+    moduleHelpText: '',
+    llmApiKey: ''
   });
 
   const [courseHelpTextSelectedTab, setCourseHelpTextSelectedTab] =
@@ -222,7 +224,8 @@ const DropdownCreateCourse: React.FC<Props> = props => {
                 })
               }
             />
-
+          </div>
+          <div>
             <Switch
               checked={courseConfig.enableStories}
               inline
@@ -234,6 +237,18 @@ const DropdownCreateCourse: React.FC<Props> = props => {
                 })
               }
             />
+
+            <Switch
+              checked={courseConfig.enableLlmGrading}
+              inline
+              label="Enable LLM Grading"
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  enableLlmGrading: (e.target as HTMLInputElement).checked
+                })
+              }
+            />
           </div>
         </div>
         <div>
@@ -273,6 +288,24 @@ const DropdownCreateCourse: React.FC<Props> = props => {
               fill
             />
           </FormGroup>
+          <FormGroup
+            helperText="API Key for LLM endpoint. This key will be encrypted and will not be retrievable on the frontend after."
+            label={'LLM API Key'}
+            labelInfo="(optional)"
+            labelFor="llmApiKey"
+          >
+            <InputGroup
+              id="llmApiKey"
+              type="password"
+              value={courseConfig.llmApiKey}
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  llmApiKey: e.target.value
+                })
+              }
+            />
+          </FormGroup>
         </div>
         <div className="create-course-button-container">
           <Button text="Create Course" onClick={submitHandler} />
diff --git a/src/commons/mocks/BackendMocks.ts b/src/commons/mocks/BackendMocks.ts
index d50a365835..cba44a0afb 100644
--- a/src/commons/mocks/BackendMocks.ts
+++ b/src/commons/mocks/BackendMocks.ts
@@ -343,7 +343,11 @@ export function* mockBackendSaga(): SagaIterator {
       return gradingQuestion;
     });
     yield put(
-      actions.updateGrading(submissionId, { answers: newGrading, assessment: grading.assessment })
+      actions.updateGrading(submissionId, {
+        answers: newGrading,
+        assessment: grading.assessment,
+        enable_llm_grading: false
+      })
     );
     yield call(showSuccessMessage, 'Submitted!', 1000);
   };
diff --git a/src/commons/mocks/GradingMocks.ts b/src/commons/mocks/GradingMocks.ts
index 5817ff8b93..02f2e6362d 100644
--- a/src/commons/mocks/GradingMocks.ts
+++ b/src/commons/mocks/GradingMocks.ts
@@ -128,6 +128,10 @@ export const mockTestcases: Testcase[] = [
 
 export const mockGradingAnswer: GradingAnswer = [
   {
+    id: 0,
+    prompts: [],
+    autogradingResults: [],
+    autoGradingStatus: 'N/A',
     question: {
       answer: `function remainder(n, d) {
   return (n - d) < 0 ? n : remainder(n - d, d);
@@ -244,6 +248,10 @@ _italics_
     }
   },
   {
+    id: 1,
+    prompts: [],
+    autogradingResults: [],
+    autoGradingStatus: 'N/A',
     question: {
       prepend: '',
       postpend: '',
@@ -336,6 +344,10 @@ New message from **Avenger**!
     }
   },
   {
+    id: 2,
+    prompts: [],
+    autogradingResults: [],
+    autoGradingStatus: 'N/A',
     question: {
       // C is the answer
       prepend: '',
@@ -434,7 +446,8 @@ Starring: Source Academy`,
 
 export const mockGradingQuery: GradingQuery = {
   answers: mockGradingAnswer,
-  assessment: mockGradingAssessment
+  assessment: mockGradingAssessment,
+  enable_llm_grading: false
 };
 
 /**
diff --git a/src/commons/sagas/BackendSaga.ts b/src/commons/sagas/BackendSaga.ts
index a3be267e85..9e45231bf3 100644
--- a/src/commons/sagas/BackendSaga.ts
+++ b/src/commons/sagas/BackendSaga.ts
@@ -637,7 +637,11 @@ function* sendGrade(
   });
 
   yield put(
-    actions.updateGrading(submissionId, { answers: newGrading, assessment: grading.assessment })
+    actions.updateGrading(submissionId, {
+      answers: newGrading,
+      assessment: grading.assessment,
+      enable_llm_grading: false
+    })
   );
 }
 
diff --git a/src/commons/sagas/RequestsSaga.ts b/src/commons/sagas/RequestsSaga.ts
index 245d155cf0..3f0bf79aeb 100644
--- a/src/commons/sagas/RequestsSaga.ts
+++ b/src/commons/sagas/RequestsSaga.ts
@@ -1030,8 +1030,9 @@ export const getGrading = async (
 
   const gradingResult = await resp.json();
   const grading: GradingAnswer = gradingResult.answers.map((gradingQuestion: any) => {
-    const { student, question, grade, team } = gradingQuestion;
+    const { id, student, question, grade, team } = gradingQuestion;
     const result = {
+      id,
       question: {
         answer: question.answer,
         lastModifiedAt: question.lastModifiedAt,
@@ -1054,7 +1055,9 @@ export const getGrading = async (
         xp: grade.xp,
         xpAdjustment: grade.xpAdjustment,
         comments: grade.comments
-      }
+      },
+      ai_comments: gradingQuestion.ai_comments?.response?.split('|||') || [],
+      prompts: gradingQuestion.prompts
     } as GradingQuestion;
 
     if (gradingQuestion.grade.grader !== null) {
@@ -1064,7 +1067,11 @@ export const getGrading = async (
     return result;
   });
 
-  return { answers: grading, assessment: gradingResult.assessment };
+  return {
+    enable_llm_grading: gradingResult.enable_llm_grading,
+    answers: grading,
+    assessment: gradingResult.assessment
+  };
 };
 
 /**
@@ -1548,6 +1555,36 @@ export const removeAssessmentConfig = async (
   return resp;
 };
 
+/**
+ * POST /courses/{courseId}/admin/generate-comments/{answer_id}/
+ */
+export const postGenerateComments = async (
+  tokens: Tokens,
+  answer_id: number
+): Promise<{ comments: string[] } | null> => {
+  const resp = await request(`${courseId()}/admin/generate-comments/${answer_id}`, 'POST', {
+    ...tokens
+  });
+  if (!resp || !resp.ok) {
+    return null;
+  }
+
+  return await resp.json();
+};
+
+export const saveFinalComment = async (
+  tokens: Tokens,
+  answer_id: number,
+  comment: string
+): Promise<Response | null> => {
+  const resp = await request(`${courseId()}/admin/save-final-comment/${answer_id}`, 'POST', {
+    body: { comment: comment },
+    ...tokens
+  });
+
+  return resp;
+};
+
 /**
  * GET /courses/{courseId}/admin/users
  */
diff --git a/src/features/grading/GradingTypes.ts b/src/features/grading/GradingTypes.ts
index 04c1364c19..88f57ae065 100644
--- a/src/features/grading/GradingTypes.ts
+++ b/src/features/grading/GradingTypes.ts
@@ -4,6 +4,7 @@ import {
   AssessmentStatus,
   AssessmentType,
   AutogradingResult,
+  LLMPrompt,
   MCQChoice,
   ProgressStatus,
   Question,
@@ -99,6 +100,7 @@ export type GradingAssessment = {
 export type GradingQuery = {
   answers: GradingAnswer;
   assessment: GradingAssessment;
+  enable_llm_grading: boolean | null;
 };
 
 export type GradingSubmissionTableProps = {
@@ -168,6 +170,7 @@ export type IGradingTableProperties = {
  * particular question in a submission.
  */
 export type GradingQuestion = {
+  id: number;
   question: AnsweredQuestion;
   team?: Array<{
     username: any;
@@ -189,6 +192,10 @@ export type GradingQuestion = {
     };
     gradedAt?: string;
   };
+  autogradingResults: AutogradingResult[];
+  autoGradingStatus: string;
+  ai_comments?: string[];
+  prompts: LLMPrompt[];
 };
 
 /**
diff --git a/src/pages/academy/adminPanel/AdminPanel.tsx b/src/pages/academy/adminPanel/AdminPanel.tsx
index 2170f773b3..deac09beae 100644
--- a/src/pages/academy/adminPanel/AdminPanel.tsx
+++ b/src/pages/academy/adminPanel/AdminPanel.tsx
@@ -30,7 +30,12 @@ const defaultCourseConfig: UpdateCourseConfiguration = {
   topContestLeaderboardDisplay: 10,
   enableSourcecast: true,
   enableStories: false,
-  moduleHelpText: ''
+  enableLlmGrading: false,
+  moduleHelpText: '',
+  llmApiKey: '',
+  llmModel: '',
+  llmApiUrl: '',
+  llmCourseLevelPrompt: ''
 };
 
 const AdminPanel: React.FC = () => {
@@ -67,7 +72,11 @@ const AdminPanel: React.FC = () => {
       topContestLeaderboardDisplay: session.topContestLeaderboardDisplay,
       enableSourcecast: session.enableSourcecast,
       enableStories: session.enableStories,
-      moduleHelpText: session.moduleHelpText
+      enableLlmGrading: session.enableLlmGrading,
+      moduleHelpText: session.moduleHelpText,
+      llmModel: session.llmModel,
+      llmApiUrl: session.llmApiUrl,
+      llmCourseLevelPrompt: session.llmCourseLevelPrompt
     });
   }, [
     session.courseName,
@@ -80,8 +89,12 @@ const AdminPanel: React.FC = () => {
     session.enableGame,
     session.enableSourcecast,
     session.enableStories,
+    session.enableLlmGrading,
     session.moduleHelpText,
-    session.viewable
+    session.viewable,
+    session.llmModel,
+    session.llmApiUrl,
+    session.llmCourseLevelPrompt
   ]);
 
   const tableRef = useRef<ImperativeAssessmentConfigPanel>(null);
diff --git a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
index 822445b50f..13dc3a4f2c 100644
--- a/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/CourseConfigPanel.tsx
@@ -3,14 +3,19 @@ import {
   FormGroup,
   H2,
   H3,
+  Icon,
   InputGroup,
+  Popover,
+  Position,
   Switch,
   Tab,
   Tabs,
   TextArea
 } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 import { useResponsive } from 'src/commons/utils/Hooks';
+import classes from 'src/styles/CourseConfig.module.scss';
 
 import { UpdateCourseConfiguration } from '../../../../commons/application/types/SessionTypes';
 import Markdown from '../../../../commons/Markdown';
@@ -42,13 +47,18 @@ const CourseConfigPanel: React.FC<Props> = props => {
     topContestLeaderboardDisplay,
     enableSourcecast,
     enableStories,
-    moduleHelpText
+    enableLlmGrading,
+    moduleHelpText,
+    llmApiKey,
+    llmModel,
+    llmApiUrl,
+    llmCourseLevelPrompt
   } = props.courseConfiguration;
 
   const writePanel = (
     <TextArea
       id="moduleHelpText"
-      className="input-textarea"
+      className={classes['input-textarea']}
       fill={true}
       value={moduleHelpText || ''}
       onChange={e =>
@@ -61,7 +71,7 @@ const CourseConfigPanel: React.FC<Props> = props => {
   );
 
   const previewPanel = (
-    <div className="input-markdown">
+    <div className={classes['input-markdown']}>
       <Markdown content={moduleHelpText || ''} openLinksInNewWindow />
     </div>
   );
@@ -81,11 +91,11 @@ const CourseConfigPanel: React.FC<Props> = props => {
   );
 
   return (
-    <div className="course-configuration">
+    <div className={classes['course-configuration']}>
       <H2>{courseName}</H2>
       <H3>{courseShortName}</H3>
-      <div className="inputs">
-        <div className="text">
+      <div className={classes.inputs}>
+        <div className={classes.text}>
           <FormGroup
             helperText="Please enter the course name that will be used for course selection."
             inline={true}
@@ -126,11 +136,7 @@ const CourseConfigPanel: React.FC<Props> = props => {
             label="Module Help Text"
             labelFor="moduleHelpText"
           >
-            <Tabs
-              selectedTabId={courseHelpTextSelectedTab}
-              onChange={onChangeTabs}
-              className="module-help-text-tabs"
-            >
+            <Tabs selectedTabId={courseHelpTextSelectedTab} onChange={onChangeTabs}>
               <Tab id={CourseHelpTextEditorTab.WRITE} title="Write" />
               <Tab id={CourseHelpTextEditorTab.PREVIEW} title="Preview" />
             </Tabs>
@@ -171,9 +177,125 @@ const CourseConfigPanel: React.FC<Props> = props => {
               }
             />
           </FormGroup>
+
+          {enableLlmGrading && (
+            <div className={classes['llm-grading-config']}>
+              <Divider style={{ marginTop: '20px', marginBottom: '20px' }} />
+              <h3>LLM Grading Configuration</h3>
+              <FormGroup
+                helperText="Please enter the LLM Model Name."
+                inline={true}
+                label="LLM Model Name"
+                labelFor="llmModel"
+              >
+                <InputGroup
+                  id="llmModel"
+                  defaultValue={llmModel}
+                  placeholder="e.g gpt-5-mini, gpt-4o"
+                  onChange={e =>
+                    props.setCourseConfiguration({
+                      ...props.courseConfiguration,
+                      llmModel: e.target.value
+                    })
+                  }
+                />
+              </FormGroup>
+              <FormGroup
+                helperText="Please enter the LLM API's Provider URL."
+                inline={true}
+                label="LLM Provider URL"
+                labelFor="llmApiUrl"
+              >
+                <InputGroup
+                  id="llmApiUrl"
+                  defaultValue={llmApiUrl}
+                  placeholder="e.g https://api.openai.com/v1/chat/completions"
+                  onChange={e =>
+                    props.setCourseConfiguration({
+                      ...props.courseConfiguration,
+                      llmApiUrl: e.target.value
+                    })
+                  }
+                />
+              </FormGroup>
+              <FormGroup
+                helperText="Please enter the LLM API Key. This key is encrypted and not editable later."
+                inline={true}
+                label="LLM API Key"
+                labelFor="llmApiKey"
+              >
+                <InputGroup
+                  id="llmApiKey"
+                  type="password"
+                  defaultValue={llmApiKey}
+                  onChange={e =>
+                    props.setCourseConfiguration({
+                      ...props.courseConfiguration,
+                      llmApiKey: e.target.value
+                    })
+                  }
+                />
+              </FormGroup>
+              <FormGroup
+                helperText={
+                  <span>
+                    Please enter the LLM prompt for this course. This is treated as the System
+                    Prompt.
+                    <Popover
+                      content={
+                        <div style={{ maxWidth: '48rem' }}>
+                          <p>
+                            This prompt is prepended to every single LLM Grading prompt as part of
+                            the System Prompt
+                          </p>
+
+                          <p>
+                            <b>Note: </b> You must specify the return format of the comments so that
+                            comments can be parsed correctly. An example is given below:
+                          </p>
+
+                          <code>
+                            Your output must include only the comment suggestions, separated
+                            exclusively by triple pipes ("|||") with no spaces before or after the
+                            pipes, and without any additional formatting, bullet points, or extra
+                            text.
+                            <br />
+                            <br />
+                            For example: "This is a good answer.|||This is a bad answer.|||This is a
+                            great answer.
+                          </code>
+                        </div>
+                      }
+                      interactionKind="hover"
+                      position={Position.TOP}
+                    >
+                      <Icon icon={IconNames.HELP} className={classes['llm-course-prompt-icon']} />
+                    </Popover>
+                  </span>
+                }
+                inline={true}
+                label="LLM Course Prompt"
+                labelFor="llmCoursePrompt"
+              >
+                <TextArea
+                  id="llmCourseLevelPrompt"
+                  className={classes['llm-prompt-input-textarea']}
+                  fill={true}
+                  placeholder="You are looking at a modified version of Javascript"
+                  value={llmCourseLevelPrompt}
+                  onChange={e =>
+                    props.setCourseConfiguration({
+                      ...props.courseConfiguration,
+                      llmCourseLevelPrompt: e.target.value
+                    })
+                  }
+                />
+              </FormGroup>
+            </div>
+          )}
         </div>
         {!isMobileBreakpoint && <Divider />}
-        <div className="booleans">
+        <div className={classes.booleans}>
           <Switch
             checked={viewable}
             label="Viewable"
@@ -224,6 +346,16 @@ const CourseConfigPanel: React.FC<Props> = props => {
               })
             }
           />
+          <Switch
+            checked={enableLlmGrading}
+            label="Enable LLM Grading"
+            onChange={e =>
+              props.setCourseConfiguration({
+                ...props.courseConfiguration,
+                enableLlmGrading: (e.target as HTMLInputElement).checked
+              })
+            }
+          />
           <Switch
             checked={enableOverallLeaderboard}
             label="Enable Overall Leaderboard"
diff --git a/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx b/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
new file mode 100644
index 0000000000..fb9a9cfc64
--- /dev/null
+++ b/src/pages/academy/grading/subcomponents/GradingCommentSelector.tsx
@@ -0,0 +1,44 @@
+import { H5, NonIdealState, Spinner } from '@blueprintjs/core';
+import React from 'react';
+import styles from 'src/styles/GradingCommentSelector.module.scss';
+
+type Props = {
+  comments: string[];
+  isLoading: boolean;
+  onSelect: (comment: string) => void;
+};
+
+const GradingCommentSelector: React.FC<Props> = props => {
+  return (
+    <div className={styles['grading-comment-selector']}>
+      <H5 className={styles['grading-comment-selector-title']}>LLM Comment Suggestions:</H5>
+
+      {props.isLoading ? (
+        <NonIdealState icon={<Spinner />} />
+      ) : (
+        <div>
+          {' '}
+          {props.comments.length > 0 ? (
+            props.comments.map((el, index) => {
+              return (
+                <button
+                  key={index}
+                  className={styles['grading-comment-selector-item']}
+                  onClick={() => {
+                    props.onSelect(el);
+                  }}
+                >
+                  {el}
+                </button>
+              );
+            })
+          ) : (
+            <span>No Comments Generated</span>
+          )}{' '}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GradingCommentSelector;
diff --git a/src/pages/academy/grading/subcomponents/GradingEditor.tsx b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
index 3b834b0845..63539bf23d 100644
--- a/src/pages/academy/grading/subcomponents/GradingEditor.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingEditor.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Dialog,
   Divider,
   H3,
   Icon,
@@ -13,11 +14,15 @@ import { IconNames } from '@blueprintjs/icons';
 import React, { useEffect, useMemo, useState } from 'react';
 import ReactMde, { ReactMdeProps } from 'react-mde';
 import { useDispatch } from 'react-redux';
+import { AutogradingResult, LLMPrompt } from 'src/commons/assessment/AssessmentTypes';
+import { useTokens } from 'src/commons/utils/Hooks';
 
 import SessionActions from '../../../../commons/application/actions/SessionActions';
 import ControlButton from '../../../../commons/ControlButton';
 import Markdown from '../../../../commons/Markdown';
 import { Prompt } from '../../../../commons/ReactRouterPrompt';
+import { postGenerateComments } from '../../../../commons/sagas/RequestsSaga';
+import { saveFinalComment } from '../../../../commons/sagas/RequestsSaga';
 import { getPrettyDate } from '../../../../commons/utils/DateHelper';
 import { showSimpleConfirmDialog } from '../../../../commons/utils/DialogHelper';
 import {
@@ -25,6 +30,7 @@ import {
   showWarningMessage
 } from '../../../../commons/utils/notifications/NotificationsHelper';
 import { convertParamToInt } from '../../../../commons/utils/ParamParseHelper';
+import GradingCommentSelector from './GradingCommentSelector';
 
 type GradingSaveFunction = (
   submissionId: number,
@@ -34,6 +40,8 @@ type GradingSaveFunction = (
 ) => void;
 
 type Props = {
+  prompts: LLMPrompt[];
+  answer_id: number;
   solution: number | string | null;
   questionId: number;
   submissionId: number;
@@ -42,15 +50,21 @@ type Props = {
   maxXp: number;
   studentNames: string[];
   studentUsernames: string[];
+  is_llm: boolean;
   comments: string;
+  autoGradingStatus: string;
+  autoGradingResults: AutogradingResult[];
+  studentAnswer: string | null;
   graderName?: string;
   gradedAt?: string;
+  ai_comments?: string[];
 };
 
 const gradingEditorButtonClass = 'grading-editor-button';
 
 const GradingEditor: React.FC<Props> = props => {
   const dispatch = useDispatch();
+  const tokens = useTokens();
   const { handleGradingSave, handleGradingSaveAndContinue, handleReautogradeAnswer } = useMemo(
     () =>
       ({
@@ -101,11 +115,35 @@ const GradingEditor: React.FC<Props> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.submissionId, props.questionId]);
 
+  const getCommentSuggestions = async () => {
+    const resp = await postGenerateComments(tokens, props.answer_id);
+    return resp;
+  };
+
+  const onSelectGeneratedComments = (comment: string) => {
+    if (!selectedSuggestions.includes(comment)) {
+      setSelectedSuggestions([comment, ...selectedSuggestions]);
+    }
+
+    setEditorValue(editorValue + comment);
+  };
+
+  const postSaveFinalComment = async (comment: string) => {
+    const resp = await saveFinalComment(tokens, props.answer_id, comment);
+    return resp;
+  };
+
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [selectedSuggestions, setSelectedSuggestions] = useState<string[]>([]);
+  const [hasClickedGenerate, setHasClickedGenerate] = useState<boolean>(false);
+  const [isViewLLMPromptOpen, setIsViewLLMPromptOpen] = useState<boolean>(false);
+
   const makeInitialState = () => {
     setXpAdjustmentInput(props.xpAdjustment.toString());
     setEditorValue(props.comments);
     setSelectedTab('write');
     setCurrentlySaving(false);
+    setSuggestions(props.ai_comments || []);
   };
 
   /**
@@ -126,9 +164,10 @@ const GradingEditor: React.FC<Props> = props => {
    */
   const validateXpBeforeSave =
     (handleSaving: GradingSaveFunction): (() => void) =>
-    () => {
+    async () => {
       const newXpAdjustmentInput = convertParamToInt(xpAdjustmentInput || undefined) || undefined;
       const xp = props.initialXp + (newXpAdjustmentInput || 0);
+      await postSaveFinalComment(editorValue);
       if (xp < 0 || xp > props.maxXp) {
         showWarningMessage(
           `XP ${xp.toString()} is out of bounds. Maximum xp is ${props.maxXp.toString()}.`
@@ -216,6 +255,17 @@ const GradingEditor: React.FC<Props> = props => {
       />
     );
 
+  const copyComposedPromptToClipboard = () => {
+    navigator.clipboard.writeText(
+      props.prompts
+        .map(prompt => {
+          return `**${prompt.role} Prompt**\n\n${prompt.content}`;
+        })
+        .join('\n\n')
+    );
+    showSuccessMessage('Composed prompt copied to clipboard!', 2000);
+  };
+
   // Render
   const hasUnsavedChanges = checkHasUnsavedChanges();
   const isNewQuestion = checkIsNewQuestion();
@@ -304,6 +354,71 @@ const GradingEditor: React.FC<Props> = props => {
         </div>
       </div>
 
+      {props.is_llm && (
+        <>
+          <Dialog
+            title="Full Composed LLM Prompt"
+            icon={IconNames.WRENCH}
+            isOpen={isViewLLMPromptOpen}
+            onClose={() => setIsViewLLMPromptOpen(false)}
+          >
+            <div className="llm-prompt-dialog">
+              <div className="forenote-section">
+                <span className="forenote">
+                  <b>Note:</b> The titles here are provided merely to distinguish the different
+                  sections. They are not included in the final prompt.
+                </span>
+                <Button
+                  onClick={() => {
+                    copyComposedPromptToClipboard();
+                  }}
+                >
+                  <Icon icon={IconNames.Clipboard} />
+                </Button>
+              </div>
+              {props.prompts.map(prompt => {
+                return (
+                  <>
+                    <H3>{prompt.role} Level Prompt</H3>
+                    <Divider />
+                    {prompt.content}
+                  </>
+                );
+              })}
+            </div>
+          </Dialog>
+          <div style={{ marginBottom: '10px' }}>
+            <GradingCommentSelector
+              onSelect={onSelectGeneratedComments}
+              isLoading={hasClickedGenerate}
+              comments={suggestions}
+            />
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <Button
+                style={{ marginRight: '1rem' }}
+                onClick={async () => {
+                  setIsViewLLMPromptOpen(true);
+                }}
+              >
+                View Prompt
+              </Button>
+
+              <Button
+                intent="primary"
+                onClick={async () => {
+                  setHasClickedGenerate(true);
+                  const resp = await getCommentSuggestions();
+                  setHasClickedGenerate(false);
+                  setSuggestions(resp ? resp.comments : []);
+                }}
+              >
+                Generate Comments
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+
       <div className="react-mde-parent">
         <ReactMde
           value={editorValue}
diff --git a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
index b9a11c13db..a1273d5c7c 100644
--- a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
+++ b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
@@ -76,6 +76,7 @@ const GradingWorkspace: React.FC<Props> = props => {
 
   const grading = useTypedSelector(state => state.session.gradings[props.submissionId]);
   const courseId = useTypedSelector(state => state.session.courseId);
+  const llm_grading = useTypedSelector(state => state.session.enableLlmGrading);
   const {
     autogradingResults,
     isFolderModeEnabled,
@@ -302,8 +303,11 @@ const GradingWorkspace: React.FC<Props> = props => {
         /* Render an editor with the xp given to the current question. */
         body: (
           <GradingEditor
+            answer_id={grading!.answers[questionId].id}
+            ai_comments={grading!.answers[questionId].ai_comments || []}
             solution={grading!.answers[questionId].question.solution}
             questionId={grading!.answers[questionId].question.id}
+            prompts={grading!.answers[questionId].prompts}
             submissionId={props.submissionId}
             initialXp={grading!.answers[questionId].grade.xp}
             xpAdjustment={grading!.answers[questionId].grade.xpAdjustment}
@@ -312,17 +316,25 @@ const GradingWorkspace: React.FC<Props> = props => {
               grading!.answers[questionId].student.name,
               grading!.answers[questionId].team
             )}
+            studentAnswer={
+              grading!.answers[questionId].question.type === 'programming'
+                ? grading!.answers[questionId].question.answer
+                : 'N/A'
+            }
             studentUsernames={
               grading!.answers[questionId].student.username
                 ? [grading!.answers[questionId].student.username]
                 : grading!.answers[questionId].team!.map(member => member.username)
             }
+            is_llm={!!llm_grading && grading!.answers[questionId].question.type == 'programming'}
             comments={grading!.answers[questionId].grade.comments ?? ''}
             graderName={
               grading!.answers[questionId].grade.grader
                 ? grading!.answers[questionId].grade.grader!.name
                 : undefined
             }
+            autoGradingStatus={grading!.answers[questionId].autoGradingStatus || 'N/A'}
+            autoGradingResults={grading!.answers[questionId].autogradingResults}
             gradedAt={
               grading!.answers[questionId].grade.gradedAt
                 ? grading!.answers[questionId].grade.gradedAt!
diff --git a/src/pages/localStorage.ts b/src/pages/localStorage.ts
index 56b1b30a4f..76c4ef55b0 100644
--- a/src/pages/localStorage.ts
+++ b/src/pages/localStorage.ts
@@ -75,6 +75,8 @@ export const saveState = (state: OverallState) => {
         topContestLeaderboardDisplay: state.session.topContestLeaderboardDisplay,
         enableSourcecast: state.session.enableSourcecast,
         enableStories: state.session.enableStories,
+        enableLlmGrading: state.session.enableLlmGrading,
+        llmCourseLevelPrompt: state.session.llmCourseLevelPrompt,
         moduleHelpText: state.session.moduleHelpText,
         assetsPrefix: state.session.assetsPrefix,
         assessmentConfigurations: state.session.assessmentConfigurations,
diff --git a/src/styles/CourseConfig.module.scss b/src/styles/CourseConfig.module.scss
new file mode 100644
index 0000000000..8abb812752
--- /dev/null
+++ b/src/styles/CourseConfig.module.scss
@@ -0,0 +1,83 @@
+@import '_global';
+
+.course-configuration {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .inputs {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    max-width: 900px;
+    width: 100%;
+
+    .text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+
+      :global(.#{$ns}-tab-list) {
+        margin-left: 8px;
+      }
+
+      .input-textarea {
+        height: 100px;
+      }
+
+      .llm-prompt-input-textarea {
+        height: 300px;
+      }
+
+      .input-markdown {
+        padding: 10px;
+        height: 100px;
+        background-color: #f5f5f5;
+        border-radius: 3px;
+        box-shadow:
+          0 0 0 0 rgb(19 124 189 / 0%),
+          0 0 0 0 rgb(19 124 189 / 0%),
+          inset 0 0 0 1px rgb(16 22 26 / 15%),
+          inset 0 1px 1px rgb(16 22 26 / 20%);
+        overflow: auto;
+        text-align: left;
+      }
+
+      div.input-markdown > div > * {
+        margin: 0;
+      }
+    }
+
+    .llm-grading-config {
+      :global(.#{$ns}-form-group) {
+        display: flex;
+        justify-content: space-between;
+
+        :global(.#{$ns}-label) {
+          margin-right: 10px;
+          width: 180px;
+        }
+
+        :global(.#{$ns}-form-content) {
+          width: 100%;
+        }
+      }
+
+      .llm-course-prompt-icon {
+        margin-left: 5px;
+        vertical-align: text-bottom;
+        cursor: help;
+      }
+    }
+
+    .booleans {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      label {
+        margin-top: 1.5rem;
+      }
+    }
+  }
+}
diff --git a/src/styles/GradingCommentSelector.module.scss b/src/styles/GradingCommentSelector.module.scss
new file mode 100644
index 0000000000..9eeb910d1f
--- /dev/null
+++ b/src/styles/GradingCommentSelector.module.scss
@@ -0,0 +1,31 @@
+@import '_global';
+
+.grading-comment-selector {
+  text-align: center;
+  display: flex !important;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 0.875rem;
+  border-radius: 4px;
+  background-color: $cadet-color-1;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  padding: 8px;
+}
+
+.grading-comment-selector-title {
+  margin-bottom: 12px;
+}
+
+.grading-comment-selector-item {
+  margin: 3px;
+  padding: 7px;
+  background-color: $cadet-color-2;
+  border: 1px solid $cadet-color-3;
+  width: 100%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $cadet-color-3;
+  }
+}
diff --git a/src/styles/_academy.scss b/src/styles/_academy.scss
index 6cdbcb3557..74d2c09c9b 100644
--- a/src/styles/_academy.scss
+++ b/src/styles/_academy.scss
@@ -258,6 +258,29 @@
   }
 }
 
+.llm-prompt-dialog {
+  white-space: pre-wrap; // To allow for "\n" newlines
+  padding: 1rem;
+  h3 {
+    margin-top: 1rem;
+    text-transform: capitalize;
+  }
+  h5 {
+    margin-top: 0.5rem;
+  }
+  .forenote {
+    display: block;
+    font-size: small;
+    color: gray;
+  }
+
+  .forenote-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
 .betcha-dialog,
 .assessment-reset {
   span.warning {
@@ -319,60 +342,6 @@
   resize: none;
 }
 
-.course-configuration {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .inputs {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-    max-width: 900px;
-    width: 100%;
-
-    .text {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-
-      .#{$ns}-tab-list {
-        margin-left: 8px;
-      }
-
-      .input-textarea {
-        height: 100px;
-      }
-
-      .input-markdown {
-        padding: 10px;
-        height: 100px;
-        background-color: #f5f5f5;
-        border-radius: 3px;
-        box-shadow:
-          0 0 0 0 rgb(19 124 189 / 0%),
-          0 0 0 0 rgb(19 124 189 / 0%),
-          inset 0 0 0 1px rgb(16 22 26 / 15%),
-          inset 0 1px 1px rgb(16 22 26 / 20%);
-        overflow: auto;
-        text-align: left;
-      }
-
-      div.input-markdown > div > * {
-        margin: 0;
-      }
-    }
-
-    .booleans {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-evenly;
-      align-items: flex-start;
-    }
-  }
-}
-
 .assessment-configuration {
   .#{$ns}-numeric-input {
     .#{$ns}-input-group {
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
old mode 100755
new mode 100644