diff --git a/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue b/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue
index 5e6b7a80e981c0219d6255e99d925dd1ce99efd1..542adad0d52b2c53baa13e966611db8315c830b2 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/visibility_level_radio_group.vue
@@ -28,6 +28,10 @@ export default {
       type: Boolean,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
     texts: {
       type: Object,
       required: true,
@@ -82,6 +86,7 @@ export default {
 <template>
   <gl-form-radio-group
     :id="id"
+    :disabled="disabled"
     :state="validationState"
     :checked="value"
     @input="(value) => $emit('input', value)"
diff --git a/ee/app/assets/javascripts/ai/catalog/router/constants.js b/ee/app/assets/javascripts/ai/catalog/router/constants.js
index 91583b0d8df45a6291fbb30036b1407adadbc57c..43a598f7c278fb568941f128f4615613fa2ed812 100644
--- a/ee/app/assets/javascripts/ai/catalog/router/constants.js
+++ b/ee/app/assets/javascripts/ai/catalog/router/constants.js
@@ -1,6 +1,7 @@
 export const AI_CATALOG_INDEX_ROUTE = 'ai-catalog';
 export const AI_CATALOG_AGENTS_ROUTE = '/agents';
 export const AI_CATALOG_AGENTS_SHOW_ROUTE = '/agents/:id';
+export const AI_CATALOG_AGENTS_VIEW_ROUTE = '/agents/:id';
 export const AI_CATALOG_AGENTS_EDIT_ROUTE = '/agents/:id/edit';
 export const AI_CATALOG_AGENTS_RUN_ROUTE = '/agents/:id/run';
 export const AI_CATALOG_AGENTS_NEW_ROUTE = '/agents/new';
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7d1bf6e8f73080462341fcc5be8355c50af96594
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/components/agent_form.vue
@@ -0,0 +1,447 @@
+<script>
+import { uniqueId } from 'lodash';
+import {
+  GlAlert,
+  GlButton,
+  GlForm,
+  GlFormFields,
+  GlFormTextarea,
+  GlTokenSelector,
+  GlTooltipDirective,
+} from '@gitlab/ui';
+import {
+  VISIBILITY_LEVEL_PUBLIC_STRING,
+  VISIBILITY_LEVEL_PRIVATE_STRING,
+} from '~/visibility_level/constants';
+import {
+  MAX_LENGTH_NAME,
+  MAX_LENGTH_DESCRIPTION,
+  MAX_LENGTH_PROMPT,
+  VISIBILITY_LEVEL_PRIVATE,
+  VISIBILITY_LEVEL_PUBLIC,
+  AGENT_VISIBILITY_LEVEL_DESCRIPTIONS,
+} from 'ee/ai/catalog/constants';
+import PageHeading from '~/vue_shared/components/page_heading.vue';
+import { __, s__ } from '~/locale';
+import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import {
+  AI_CATALOG_AGENTS_ROUTE,
+  AI_CATALOG_AGENTS_EDIT_ROUTE,
+} from 'ee/ai/catalog/router/constants';
+import { createFieldValidators } from 'ee/ai/catalog/utils';
+import aiCatalogBuiltInToolsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_built_in_tools.query.graphql';
+import AiCatalogFormButtons from 'ee/ai/catalog/components/ai_catalog_form_buttons.vue';
+import VisibilityLevelRadioGroup from 'ee/ai/catalog/components/visibility_level_radio_group.vue';
+
+export default {
+  components: {
+    GlAlert,
+    ErrorsAlert,
+    AiCatalogFormButtons,
+    GlButton,
+    GlForm,
+    GlFormFields,
+    GlFormTextarea,
+    GlTokenSelector,
+    PageHeading,
+    VisibilityLevelRadioGroup,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [glFeatureFlagsMixin()],
+  apollo: {
+    availableTools: {
+      query: aiCatalogBuiltInToolsQuery,
+      update: (data) => data.aiCatalogBuiltInTools.nodes.map((t) => ({ id: t.id, name: t.title })),
+    },
+  },
+  props: {
+    mode: {
+      type: String,
+      required: true,
+      validator: (mode) => ['edit', 'create', 'view'].includes(mode),
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    errors: {
+      type: Array,
+      required: true,
+    },
+    initialValues: {
+      type: Object,
+      required: false,
+      default() {
+        return {
+          name: '',
+          description: '',
+          systemPrompt: '',
+          userPrompt: '',
+          public: false,
+          release: true,
+          tools: [],
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      availableTools: [],
+      showTestRunWarning: false,
+      toolFilter: '',
+      formValues: {
+        ...this.initialValues,
+        visibilityLevel: this.initialValues.public
+          ? VISIBILITY_LEVEL_PUBLIC
+          : VISIBILITY_LEVEL_PRIVATE,
+      },
+      formErrors: [],
+    };
+  },
+  computed: {
+    heading() {
+      return this.initialValues?.name || s__('AICatalog|New agent');
+    },
+    formId() {
+      return uniqueId('ai-catalog-agent-form-');
+    },
+    isEditMode() {
+      return this.mode === 'edit';
+    },
+    isViewMode() {
+      return this.mode === 'view';
+    },
+    allErrors() {
+      return [...this.errors, ...this.formErrors];
+    },
+    submitButtonText() {
+      if (this.isEditMode) {
+        return s__('AICatalog|Save changes');
+      }
+      if (this.isViewMode) {
+        return s__('AICatalog|Edit');
+      }
+      return s__('AICatalog|Create agent');
+    },
+    submitButtonIcon() {
+      if (this.isEditMode) {
+        return 'check';
+      }
+      if (this.isViewMode) {
+        return 'pencil';
+      }
+      return 'check';
+    },
+    fields() {
+      return {
+        name: {
+          label: __('Name'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|Name is required.'),
+            maxLength: MAX_LENGTH_NAME,
+          }),
+          inputAttrs: {
+            'data-testid': 'agent-form-input-name',
+            placeholder: s__('AICatalog|e.g., Research Assistant, Creative Writer, Code Helper'),
+            disabled: this.isViewMode,
+          },
+          groupAttrs: {
+            labelDescription: s__('AICatalog|Choose a memorable name for your AI agent.'),
+          },
+        },
+        description: {
+          label: __('Description'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|Description is required.'),
+            maxLength: MAX_LENGTH_DESCRIPTION,
+          }),
+          groupAttrs: {
+            disabled: this.isViewMode,
+            labelDescription: s__(
+              'AICatalog|Briefly describe what this agent is designed to do and its key capabilities.',
+            ),
+          },
+        },
+        tools: {
+          label: s__('AICatalog|Tools'),
+          groupAttrs: {
+            optional: true,
+            labelDescription: s__('AICatalog|Select tools that this agent will have access to.'),
+          },
+        },
+        systemPrompt: {
+          label: s__('AICatalog|System prompt'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|System prompt is required.'),
+            maxLength: MAX_LENGTH_PROMPT,
+            disabled: this.isViewMode,
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              "AICatalog|Define the agent's personality, expertise, and behavioral guidelines. This shapes how the agent responds and approaches tasks.",
+            ),
+            disabled: this.isViewMode,
+          },
+        },
+        userPrompt: {
+          label: s__('AICatalog|User prompt'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|User prompt is required.'),
+            maxLength: MAX_LENGTH_PROMPT,
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              'AICatalog|Provide default instructions or context that will be included with every user interaction.',
+            ),
+          },
+        },
+        visibilityLevel: {
+          label: __('Visibility level'),
+          validators: createFieldValidators({
+            requiredLabel: s__('AICatalog|Visibility level is required.'),
+          }),
+          groupAttrs: {
+            labelDescription: s__(
+              'AICatalog|Choose who can view and interact with this agent after it is published to the public AI catalog.',
+            ),
+          },
+        },
+      };
+    },
+    filteredAvailableTools() {
+      return this.availableTools.filter((tool) =>
+        tool.name.toLowerCase().includes(this.toolFilter.toLowerCase()),
+      );
+    },
+    selectedTools() {
+      return this.formValues.tools.map((toolId) => ({
+        id: toolId,
+        name: this.availableTools.find((tool) => tool.id === toolId)?.name,
+      }));
+    },
+  },
+  mounted() {
+    console.log('mounted');
+    document.addEventListener('agent-form:update', this.handleFormUpdate);
+  },
+  beforeDestroy() {
+    document.removeEventListener('agent-form:update', this.handleFormUpdate);
+  },
+  methods: {
+    handleTestRunClick() {
+      if (this.isViewMode) {
+        this.$toast.show(s__('AICatalog|Let us open the Duo Chat and test run the agent!'));
+        return;
+      }
+
+      this.showTestRunWarning = true;
+    },
+    handleEditClick() {
+      this.$router.push({
+        name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+        params: { id: this.$route.params.id },
+      });
+    },
+    handleSubmit() {
+      const transformedValues = {
+        name: this.formValues.name.trim(),
+        description: this.formValues.description.trim(),
+        systemPrompt: this.formValues.systemPrompt.trim(),
+        userPrompt: this.formValues.userPrompt.trim(),
+        public: this.formValues.visibilityLevel === VISIBILITY_LEVEL_PUBLIC,
+        release: this.initialValues.release,
+        tools: this.formValues.tools,
+      };
+      this.$emit('submit', transformedValues);
+    },
+    handleToolsInput(input) {
+      this.formValues.tools = input.map((t) => t.id);
+    },
+    handleToolSearch(search) {
+      this.toolFilter = search;
+    },
+    dismissErrors() {
+      this.formErrors = [];
+      this.$emit('dismiss-errors');
+    },
+    handleFormUpdate(event) {
+      if (event.detail && typeof event.detail === 'object') {
+        console.log(event)
+        // Update form values with the provided data
+        this.formValues = {
+          ...this.formValues,
+          ...event.detail,
+        };
+      }
+    },
+  },
+  indexRoute: AI_CATALOG_AGENTS_ROUTE,
+  visibilityLevelTexts: {
+    textPrivate: AGENT_VISIBILITY_LEVEL_DESCRIPTIONS[VISIBILITY_LEVEL_PRIVATE_STRING],
+    textPublic: AGENT_VISIBILITY_LEVEL_DESCRIPTIONS[VISIBILITY_LEVEL_PUBLIC_STRING],
+    alertTextPrivate: s__('AICatalog|This agent can be made private if it is not used.'),
+    alertTextPublic: s__('AICatalog|A public agent can be made private only if it is not used.'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <page-heading :heading="heading" class="gl-border-b gl-pb-6">
+      <template #actions>
+        <gl-button
+          v-gl-tooltip
+          :title="
+            !isViewMode
+              ? s__(
+                  'AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving.',
+                )
+              : ''
+          "
+          :class="{ '!gl-cursor-not-allowed !gl-opacity-5': !isViewMode }"
+          class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+          variant="confirm"
+          type="button"
+          icon="duo-chat"
+          category="primary"
+          data-testid="agent-form-test-run-button"
+          @click="handleTestRunClick"
+        >
+          {{ s__('AICatalog|Test run') }}
+        </gl-button>
+        <ai-catalog-form-buttons :is-disabled="isLoading" :index-route="$options.indexRoute">
+          <gl-button
+            v-if="!isViewMode"
+            class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+            type="submit"
+            variant="confirm"
+            form="formId"
+            :icon="submitButtonIcon"
+            category="primary"
+            data-testid="agent-form-submit-button"
+            :loading="isLoading"
+            @click="handleSubmit"
+          >
+            {{ submitButtonText }}
+          </gl-button>
+          <gl-button
+            v-else
+            class="js-no-auto-disable gl-w-full sm:gl-w-auto"
+            variant="confirm"
+            type="button"
+            :icon="submitButtonIcon"
+            category="primary"
+            data-testid="agent-form-submit-button"
+            :loading="isLoading"
+            @click="handleEditClick"
+          >
+            {{ submitButtonText }}
+          </gl-button>
+        </ai-catalog-form-buttons>
+      </template>
+    </page-heading>
+    <gl-alert v-if="isViewMode" variant="info" class="gl-mb-5">
+      {{
+        s__(
+          'AICatalog|These settings will be applied when you click "Test Run" to deploy and test your agent',
+        )
+      }}
+    </gl-alert>
+    <gl-alert v-if="showTestRunWarning" variant="warning" class="gl-mb-5">
+      {{
+        s__(
+          'AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving.',
+        )
+      }}
+    </gl-alert>
+    <errors-alert :errors="allErrors" @dismiss="dismissErrors" />
+    <gl-form :id="formId" @submit.prevent="">
+      <gl-form-fields
+        v-model="formValues"
+        :form-id="formId"
+        :fields="fields"
+        @submit="handleSubmit"
+      >
+        <template #input(description)="{ id, input, value, blur, validation }">
+          <gl-form-textarea
+            :id="id"
+            :no-resize="false"
+            :placeholder="
+              s__(
+                'AICatalog|This agent specializes in... It can help you with... Best suited for...',
+              )
+            "
+            :disabled="isViewMode"
+            :state="validation.state"
+            :value="value"
+            data-testid="agent-form-textarea-description"
+            @blur="blur"
+            @update="input"
+          />
+        </template>
+        <template #input(systemPrompt)="{ id, input, value, blur, validation }">
+          <gl-form-textarea
+            :id="id"
+            :disabled="isViewMode"
+            :no-resize="false"
+            :placeholder="
+              s__(
+                'AICatalog|You are an expert in [domain]. Your communication style is [style]. When helping users, you should always... Your key strengths include... You approach problems by...',
+              )
+            "
+            :state="validation.state"
+            :value="value"
+            data-testid="agent-form-textarea-system-prompt"
+            @blur="blur"
+            @update="input"
+          />
+        </template>
+        <template #input(userPrompt)="{ id, input, value, blur, validation }">
+          <gl-form-textarea
+            :id="id"
+            :disabled="isViewMode"
+            :no-resize="false"
+            :placeholder="
+              s__(
+                'AICatalog|Please consider my background in... When explaining concepts, use... My preferred format for responses is... Always include...',
+              )
+            "
+            :rows="10"
+            :state="validation.state"
+            :value="value"
+            data-testid="agent-form-textarea-user-prompt"
+            @blur="blur"
+            @update="input"
+          />
+        </template>
+        <template #input(tools)>
+          <gl-token-selector
+            :view-only="isViewMode"
+            :selected-tokens="selectedTools"
+            :dropdown-items="filteredAvailableTools"
+            :placeholder="s__('AICatalog|Search and select tools for this agent.')"
+            allow-clear-all
+            data-testid="agent-form-token-selector-tools"
+            @input="handleToolsInput"
+            @text-input="handleToolSearch"
+          />
+        </template>
+        <template #input(visibilityLevel)="{ id, input, validation, value }">
+          <visibility-level-radio-group
+            :id="id"
+            :disabled="isViewMode"
+            :is-edit-mode="isEditMode"
+            :initial-value="initialValues.public"
+            :validation-state="validation.state"
+            :value="value"
+            :texts="$options.visibilityLevelTexts"
+            @input="input"
+          />
+        </template>
+      </gl-form-fields>
+    </gl-form>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8549b772e62171842d1d492d1ffe080148d54356
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
+import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
+import AiAgentsEditWrapper from './ai_agents_edit_wrapper.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiAgentsEditWrapper,
+    GlLoadingIcon,
+  },
+  inject: ['projectId'],
+  data() {
+    return {
+      aiCatalogAgent: null,
+    };
+  },
+  apollo: {
+    aiCatalogAgent: {
+      query: aiCatalogAgentQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(TYPENAME_AI_CATALOG_ITEM, this.$route.params.id),
+        };
+      },
+      update(data) {
+        return data?.aiCatalogItem || {};
+      },
+      error() {
+        // todo
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.aiCatalogAgent.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="xl" />
+    <ai-agents-edit-wrapper v-else-if="aiCatalogAgent" :ai-catalog-agent="aiCatalogAgent" />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f714e83d6d657aea9ec8facd3a136285e8c727f
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/edit/ai_agents_edit_wrapper.vue
@@ -0,0 +1,90 @@
+<script>
+import { s__ } from '~/locale';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import { AI_CATALOG_AGENTS_VIEW_ROUTE } from 'ee/ai/catalog/router/constants';
+import updateAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/update_ai_catalog_agent.mutation.graphql';
+import AiCatalogAgentForm from '../components/agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+  },
+  props: {
+    aiCatalogAgent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    initialValues() {
+      return {
+        name: this.aiCatalogAgent.name,
+        description: this.aiCatalogAgent.description,
+        systemPrompt: this.aiCatalogAgent.latestVersion?.systemPrompt,
+        userPrompt: this.aiCatalogAgent.latestVersion?.userPrompt,
+        public: this.aiCatalogAgent.public,
+        tools: this.aiCatalogAgent.latestVersion?.tools?.nodes.map((t) => t.id) || [],
+      };
+    },
+  },
+  methods: {
+    async handleSubmit(formValues) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: updateAiCatalogAgent,
+          variables: {
+            input: {
+              ...formValues,
+              id: this.aiCatalogAgent.id,
+            },
+          },
+        });
+
+        if (data) {
+          const { errors } = data.aiCatalogAgentUpdate;
+          if (errors.length > 0) {
+            this.errors = errors;
+            return;
+          }
+
+          this.$toast.show(s__('AICatalog|Agent updated successfully.'));
+          this.$router.push({
+            name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+            params: { id: this.$route.params.id },
+          });
+        }
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be updated. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-agent-form
+      mode="edit"
+      :errors="errors"
+      :initial-values="initialValues"
+      :is-loading="isSubmitting"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..801773a5c4ca6ca1f53729c9d9243fa1f43c4de5
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/agent_list.vue
@@ -0,0 +1,72 @@
+<script>
+import { GlKeysetPagination } from '@gitlab/ui';
+import EMPTY_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-ai-catalog-md.svg?url';
+import ResourceListsLoadingStateList from '~/vue_shared/components/resource_lists/loading_state_list.vue';
+import ResourceListsEmptyState from '~/vue_shared/components/resource_lists/empty_state.vue';
+import AiCatalogListItem from './list_item.vue';
+
+export default {
+  name: 'AiCatalogList',
+  components: {
+    AiCatalogListItem,
+    GlKeysetPagination,
+    ResourceListsLoadingStateList,
+    ResourceListsEmptyState,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    itemTypeConfig: {
+      type: Object,
+      required: true,
+    },
+    isLoading: {
+      type: Boolean,
+      required: true,
+    },
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  EMPTY_SVG_URL,
+};
+</script>
+
+<template>
+  <div>
+    <resource-lists-loading-state-list v-if="isLoading" />
+
+    <template v-else-if="items.length > 0">
+      <ul class="gl-list-none gl-p-0">
+        <ai-catalog-list-item
+          v-for="item in items"
+          :key="item.id"
+          :item="item"
+          :item-type-config="itemTypeConfig"
+        />
+      </ul>
+
+      <gl-keyset-pagination
+        v-bind="pageInfo"
+        class="gl-mt-5 gl-flex gl-justify-center"
+        @prev="$emit('prev-page')"
+        @next="$emit('next-page')"
+      />
+    </template>
+
+    <template v-else>
+      <slot name="empty-state">
+        <resource-lists-empty-state
+          :title="s__('AICatalog|Get started with the AI Catalog')"
+          :description="
+            s__('AICatalog|Build AI agents and flows to automate repetitive tasks and processes.')
+          "
+          :svg-path="$options.EMPTY_SVG_URL"
+        />
+      </slot>
+    </template>
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/ai_agents.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
similarity index 67%
rename from ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/ai_agents.vue
rename to ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
index 41d6ec8f2c53519f92f7621db6770d19eee0e1c5..ce31e4ebbaba90b8c42f00c24053eb5cc80748e4 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/ai_agents.vue
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/ai_agents.vue
@@ -1,26 +1,24 @@
 <script>
 import EMPTY_SVG_URL from '@gitlab/svgs/dist/illustrations/empty-state/empty-ai-catalog-md.svg?url';
 import { GlButton, GlExperimentBadge } from '@gitlab/ui';
-import { __, s__, sprintf } from '~/locale';
-import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { __ } from '~/locale';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { fetchPolicies } from '~/lib/graphql';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import ErrorsAlert from '~/vue_shared/components/errors_alert.vue';
 import PageHeading from '~/vue_shared/components/page_heading.vue';
 import ResourceListsEmptyState from '~/vue_shared/components/resource_lists/empty_state.vue';
-import AiCatalogList from 'ee/ai/catalog/components/ai_catalog_list.vue';
-import AiCatalogItemDrawer from 'ee/ai/catalog/components/ai_catalog_item_drawer.vue';
 import aiCatalogConfiguredItemsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_configured_items.query.graphql';
 import aiCatalogProjectUserPermissionsQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_project_user_permissions.query.graphql';
 import aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
-import deleteAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/delete_ai_catalog_item_consumer.mutation.graphql';
 import { AI_CATALOG_TYPE_AGENT, PAGE_SIZE } from 'ee/ai/catalog/constants';
 import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
-import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
 import {
   AI_CATALOG_AGENTS_ROUTE,
+  AI_CATALOG_AGENTS_NEW_ROUTE,
   AI_CATALOG_SHOW_QUERY_PARAM,
 } from 'ee/ai/catalog/router/constants';
+import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
+import AiCatalogList from './agent_list.vue';
 
 export default {
   name: 'AiAgents',
@@ -31,7 +29,6 @@ export default {
     ResourceListsEmptyState,
     ErrorsAlert,
     AiCatalogList,
-    AiCatalogItemDrawer,
   },
   inject: {
     projectId: {
@@ -134,58 +131,8 @@ export default {
         },
       };
     },
-    activeAgent() {
-      if (!this.isItemDetailsLoading) return this.aiCatalogAgent;
-
-      // Returns the fully-loaded agent if available from aiAgents
-      const iid = this.$route.query[AI_CATALOG_SHOW_QUERY_PARAM];
-      if (!iid) return {};
-
-      const fromList = this.aiAgents.find(
-        (n) => this.formatId(n.item.id).toString() === String(iid),
-      );
-      return fromList?.item || { iid };
-    },
   },
   methods: {
-    formatId(id) {
-      return getIdFromGraphQLId(id);
-    },
-    closeDrawer() {
-      const { show, ...otherQuery } = this.$route.query;
-
-      this.$router.push({
-        path: this.$route.path,
-        query: otherQuery,
-      });
-    },
-    async deleteAgent(item) {
-      const { id } = item.itemConsumer;
-
-      try {
-        const { data } = await this.$apollo.mutate({
-          mutation: deleteAiCatalogItemConsumer,
-          variables: {
-            id,
-          },
-          refetchQueries: [aiCatalogConfiguredItemsQuery],
-        });
-
-        if (!data.aiCatalogItemConsumerDelete.success) {
-          this.errors = [
-            sprintf(s__('AICatalog|Failed to remove agent. %{error}'), {
-              error: data.aiCatalogItemConsumerDelete.errors?.[0],
-            }),
-          ];
-          return;
-        }
-
-        this.$toast.show(s__('AICatalog|Agent removed successfully from this project.'));
-      } catch (error) {
-        this.errors = [sprintf(s__('AICatalog|Failed to remove agent. %{error}'), { error })];
-        Sentry.captureException(error);
-      }
-    },
     handleNextPage() {
       this.$apollo.queries.aiAgents.refetch({
         ...this.$apollo.queries.aiAgents.variables,
@@ -206,17 +153,20 @@ export default {
     },
   },
   EMPTY_SVG_URL,
+  AI_CATALOG_AGENTS_NEW_ROUTE,
 };
 </script>
 
 <template>
   <div>
-    <page-heading>
-      <template #heading>
-        <div class="gl-flex">
-          <span>{{ s__('AICatalog|Agents') }}</span>
-          <gl-experiment-badge class="gl-self-center" />
-        </div>
+    <page-heading :heading="s__('AICatalog|Agents')">
+      <template #description>
+        {{ s__('DuoAgentsPlatform|Manage automated flows within your project.') }}
+      </template>
+      <template #actions>
+        <gl-button variant="confirm" :to="{ name: $options.AI_CATALOG_AGENTS_NEW_ROUTE }">
+          {{ s__('AICatalog|Create agent') }}
+        </gl-button>
       </template>
     </page-heading>
 
@@ -225,9 +175,6 @@ export default {
       :is-loading="isLoading"
       :items="items"
       :item-type-config="itemTypeConfig"
-      :delete-confirm-title="s__('AICatalog|Remove agent from this project')"
-      :delete-confirm-message="s__('AICatalog|Are you sure you want to remove agent %{name}?')"
-      :delete-fn="deleteAgent"
       :page-info="pageInfo"
       @next-page="handleNextPage"
       @prev-page="handlePrevPage"
@@ -246,11 +193,5 @@ export default {
         </resource-lists-empty-state>
       </template>
     </ai-catalog-list>
-    <ai-catalog-item-drawer
-      :is-open="isItemSelected"
-      :is-item-details-loading="isItemDetailsLoading"
-      :active-item="activeAgent"
-      @close="closeDrawer"
-    />
   </div>
 </template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e263c781706658eb03a21ec045f428ac6f45117
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/index/list_item.vue
@@ -0,0 +1,112 @@
+<script>
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import ListItem from '~/vue_shared/components/resource_lists/list_item.vue';
+import { AI_CATALOG_AGENTS_VIEW_ROUTE } from 'ee/ai/catalog/router/constants';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import {
+  VISIBILITY_TYPE_ICON,
+  VISIBILITY_LEVEL_PUBLIC_STRING,
+  VISIBILITY_LEVEL_PRIVATE_STRING,
+} from '~/visibility_level/constants';
+import {
+  TIMESTAMP_TYPE_UPDATED_AT,
+  TIMESTAMP_TYPE_CREATED_AT,
+} from '~/vue_shared/components/resource_lists/constants';
+
+export default {
+  name: 'AiCatalogListItem',
+  components: {
+    GlIcon,
+    ListItem,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    itemTypeConfig: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    formattedItemId() {
+      return getIdFromGraphQLId(this.item.id);
+    },
+    showItemRoute() {
+      return {
+        name: this.$route.name,
+      };
+    },
+    formattedItem() {
+      const updatedAt =
+        this.item.latestVersion.updatedAt > this.item.updatedAt
+          ? this.item.latestVersion.updatedAt
+          : this.item.updatedAt;
+
+      return {
+        ...this.item,
+        id: this.formattedItemId,
+        avatarLabel: this.item.name,
+        avatarUrl: null,
+        fullName: this.item.name,
+        descriptionHtml: this.item.description,
+        relativeWebUrl: this.$router.resolve(this.showItemRoute).href,
+        updatedAt,
+      };
+    },
+    timestampType() {
+      return this.formattedItem.updatedAt > this.formattedItem.createdAt
+        ? TIMESTAMP_TYPE_UPDATED_AT
+        : TIMESTAMP_TYPE_CREATED_AT;
+    },
+    visibilityLevel() {
+      return this.item.public ? VISIBILITY_LEVEL_PUBLIC_STRING : VISIBILITY_LEVEL_PRIVATE_STRING;
+    },
+    visibilityIconName() {
+      return VISIBILITY_TYPE_ICON[this.visibilityLevel];
+    },
+    visibilityTooltip() {
+      return this.itemTypeConfig.visibilityTooltip?.[this.visibilityLevel];
+    },
+  },
+  methods: {
+    onClickAvatar(event) {
+      // The List Item uses GlAvatarLabeled internally. This component uses GlLink, which
+      // would support `href` and `to` (Vue Router Location). However, GlAvatarLabeled currently
+      // only supports href. This is why although setting the href which allows user to use right
+      // click to open the URL in a new tab, we programmitcally push a new route when clicked
+      // https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/blob/main/packages/gitlab-ui/src/components/base/avatar_labeled/avatar_labeled.vue#L80
+      // This can be removed once this issue is resolved:
+      // https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/2935
+      event.preventDefault();
+      this.$router.push({
+        name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+        params: { id: getIdFromGraphQLId(this.formattedItemId) },
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <list-item
+    :resource="formattedItem"
+    :timestamp-type="timestampType"
+    data-testid="ai-catalog-item"
+    @click-avatar="(event) => onClickAvatar(event)"
+  >
+    <template #avatar-meta>
+      <gl-icon
+        v-if="visibilityTooltip"
+        v-gl-tooltip
+        :name="visibilityIconName"
+        :title="visibilityTooltip"
+        variant="subtle"
+      />
+    </template>
+  </list-item>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
new file mode 100644
index 0000000000000000000000000000000000000000..31970342e29567bf5b8b39b9bf4e872504302e34
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/new/ai_agents_new.vue
@@ -0,0 +1,101 @@
+<script>
+import { s__ } from '~/locale';
+import { AI_CATALOG_AGENTS_EDIT_ROUTE } from 'ee/ai/catalog/router/constants';
+import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { TYPENAME_PROJECT } from '~/graphql_shared/constants';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import createAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_agent.mutation.graphql';
+import createAiCatalogItemConsumer from 'ee/ai/catalog/graphql/mutations/create_ai_catalog_item_consumer.mutation.graphql';
+import AiCatalogAgentForm from '../components/agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsNew',
+  components: {
+    AiCatalogAgentForm,
+  },
+  inject: ['projectId'],
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    graphQlProjectId() {
+      return convertToGraphQLId(TYPENAME_PROJECT, this.projectId);
+    },
+  },
+  methods: {
+    async handleSubmit(input) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data: createAgentData } = await this.$apollo.mutate({
+          mutation: createAiCatalogAgent,
+          variables: {
+            input: { ...input, projectId: this.graphQlProjectId },
+          },
+        });
+
+        if (!createAgentData) {
+          return;
+        }
+
+        if (createAgentData.aiCatalogAgentCreate.errors.length > 0) {
+          this.errors = createAgentData.aiCatalogAgentCreate.errors;
+          return;
+        }
+
+        this.$toast.show(s__('AICatalog|Agent created successfully, adding to project...'));
+
+        const { data: createItemConsumerData } = await this.$apollo.mutate({
+          mutation: createAiCatalogItemConsumer,
+          variables: {
+            input: {
+              itemId: createAgentData.aiCatalogAgentCreate.item.id,
+              target: {
+                projectId: this.graphQlProjectId,
+              },
+            },
+          },
+        });
+
+        if (!createItemConsumerData) {
+          return;
+        }
+
+        if (createItemConsumerData.aiCatalogItemConsumerCreate.errors.length > 0) {
+          this.errors = createItemConsumerData.aiCatalogItemConsumerCreate.errors;
+          return;
+        }
+
+        this.$toast.show(s__('AICatalog|Agent added successfully.'));
+        this.$router.push({
+          name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+          params: { id: getIdFromGraphQLId(createAgentData.aiCatalogAgentCreate.item.id) },
+        });
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be added. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-agent-form
+      mode="create"
+      :is-loading="isSubmitting"
+      :errors="errors"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0dfaebe08def80451a36bdb54ba909078cf7dbe0
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view.vue
@@ -0,0 +1,49 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+import aiCatalogAgentQuery from 'ee/ai/catalog/graphql/queries/ai_catalog_agent.query.graphql';
+import { TYPENAME_AI_CATALOG_ITEM } from 'ee/graphql_shared/constants';
+import AiAgentsViewWrapper from './ai_agents_view_wrapper.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiAgentsViewWrapper,
+    GlLoadingIcon,
+  },
+  inject: ['projectId'],
+  data() {
+    return {
+      aiCatalogAgent: null,
+    };
+  },
+  apollo: {
+    aiCatalogAgent: {
+      query: aiCatalogAgentQuery,
+      variables() {
+        return {
+          id: convertToGraphQLId(TYPENAME_AI_CATALOG_ITEM, this.$route.params.id),
+        };
+      },
+      update(data) {
+        return data?.aiCatalogItem || {};
+      },
+      error() {
+        // todo
+      },
+    },
+  },
+  computed: {
+    isLoading() {
+      return this.$apollo.queries.aiCatalogAgent.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-loading-icon v-if="isLoading" size="xl" />
+    <ai-agents-view-wrapper v-else-if="aiCatalogAgent" :ai-catalog-agent="aiCatalogAgent" />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..23a28bd4837dcaec5ea407a87db8ec0d504f789c
--- /dev/null
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/pages/agents/view/ai_agents_view_wrapper.vue
@@ -0,0 +1,85 @@
+<script>
+import { s__ } from '~/locale';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import updateAiCatalogAgent from 'ee/ai/catalog/graphql/mutations/update_ai_catalog_agent.mutation.graphql';
+import AiCatalogAgentForm from '../components/agent_form.vue';
+
+export default {
+  name: 'AiCatalogAgentsEdit',
+  components: {
+    AiCatalogAgentForm,
+  },
+  props: {
+    aiCatalogAgent: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      errors: [],
+      isSubmitting: false,
+    };
+  },
+  computed: {
+    initialValues() {
+      return {
+        name: this.aiCatalogAgent.name,
+        description: this.aiCatalogAgent.description,
+        systemPrompt: this.aiCatalogAgent.latestVersion?.systemPrompt,
+        userPrompt: this.aiCatalogAgent.latestVersion?.userPrompt,
+        public: this.aiCatalogAgent.public,
+        tools: this.aiCatalogAgent.latestVersion?.tools?.nodes.map((t) => t.id) || [],
+      };
+    },
+  },
+  methods: {
+    async handleSubmit(formValues) {
+      this.isSubmitting = true;
+      this.resetErrorMessages();
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: updateAiCatalogAgent,
+          variables: {
+            input: {
+              ...formValues,
+              id: this.aiCatalogAgent.id,
+            },
+          },
+        });
+
+        if (data) {
+          const { errors } = data.aiCatalogAgentUpdate;
+          if (errors.length > 0) {
+            this.errors = errors;
+            return;
+          }
+
+          this.$toast.show(s__('AICatalog|Agent updated successfully.'));
+        }
+      } catch (error) {
+        this.errors = [s__('AICatalog|The agent could not be updated. Try again.')];
+        Sentry.captureException(error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+    resetErrorMessages() {
+      this.errors = [];
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <ai-catalog-agent-form
+      mode="view"
+      :errors="errors"
+      :initial-values="initialValues"
+      :is-loading="isSubmitting"
+      @dismiss-errors="resetErrorMessages"
+      @submit="handleSubmit"
+    />
+  </div>
+</template>
diff --git a/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js b/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
index 4fa4f0c3ea7a140818e2a730a0420db970126731..e3e41eb9cc5c2c27162b270e5948a798641741ad 100644
--- a/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
+++ b/ee/app/assets/javascripts/ai/duo_agents_platform/router/index.js
@@ -3,8 +3,11 @@ import VueRouter from 'vue-router';
 import { s__ } from '~/locale';
 import {
   AI_CATALOG_AGENTS_ROUTE,
+  AI_CATALOG_AGENTS_NEW_ROUTE,
   AI_CATALOG_FLOWS_ROUTE,
   AI_CATALOG_FLOWS_EDIT_ROUTE,
+  AI_CATALOG_AGENTS_EDIT_ROUTE,
+  AI_CATALOG_AGENTS_VIEW_ROUTE,
 } from 'ee/ai/catalog/router/constants';
 import NestedRouteApp from '../nested_route_app.vue';
 import AgentsPlatformShow from '../pages/show/duo_agents_platform_show.vue';
@@ -12,7 +15,10 @@ import AgentsPlatformNew from '../pages/new/duo_agents_platform_new.vue';
 import FlowTriggersIndex from '../pages/flow_triggers/index/flow_triggers_index.vue';
 import FlowTriggersNew from '../pages/flow_triggers/flow_triggers_new.vue';
 import FlowTriggersEdit from '../pages/flow_triggers/flow_triggers_edit.vue';
-import AiAgents from '../pages/agents/ai_agents.vue';
+import AiAgentsIndex from '../pages/agents/index/ai_agents.vue';
+import AiAgentsNew from '../pages/agents/new/ai_agents_new.vue';
+import AiAgentsEdit from '../pages/agents/edit/ai_agents_edit.vue';
+import AiAgentsView from '../pages/agents/view/ai_agents_view.vue';
 import AiFlows from '../pages/flows/ai_flows.vue';
 import AiFlowsEdit from '../pages/flows/ai_flows_edit.vue';
 import {
@@ -116,7 +122,31 @@ export const createRouter = (base, namespace) => {
           {
             name: AI_CATALOG_AGENTS_ROUTE,
             path: '',
-            component: AiAgents,
+            component: AiAgentsIndex,
+          },
+          {
+            name: AI_CATALOG_AGENTS_NEW_ROUTE,
+            path: 'new',
+            component: AiAgentsNew,
+            meta: {
+              text: s__('AICatalog|New agent'),
+            },
+          },
+          {
+            name: AI_CATALOG_AGENTS_VIEW_ROUTE,
+            path: ':id(\\d+)',
+            component: AiAgentsView,
+            meta: {
+              text: s__('AICatalog|View agent'),
+            },
+          },
+          {
+            name: AI_CATALOG_AGENTS_EDIT_ROUTE,
+            path: ':id(\\d+)/edit',
+            component: AiAgentsEdit,
+            meta: {
+              text: s__('AICatalog|Edit agent'),
+            },
           },
         ],
       },
diff --git a/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js b/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
index c6289bda29359e66c864357dc5477aae77b29af7..6120df529d4c41c0870e3b08d027224d9306f68b 100644
--- a/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
+++ b/ee/app/assets/javascripts/ai/tanuki_bot/store/actions.js
@@ -9,8 +9,34 @@ const proxyMessageContent = (message, propsToUpdate) => {
   };
 };
 
+
+const publishFormDataFromMessage = (messageContent = '') => {
+  const prefix = "```agent-form"
+  const suffix = "```"
+
+  // find the context between prefix and suffix in messageContent. Prefix can be anywhere in the
+  // string, and might even not exist
+  let extractedContent = '';
+  const startIndex = messageContent.indexOf(prefix);
+
+  if (startIndex === -1) return;
+
+  const contentAfterPrefix = messageContent.substring(startIndex + prefix.length);
+  const endIndex = contentAfterPrefix.indexOf(suffix);
+
+  if (endIndex === -1) return;
+
+  extractedContent = contentAfterPrefix.substring(0, endIndex).trim();
+
+  const event = new CustomEvent("agent-form:update", {
+    detail: JSON.parse(extractedContent)
+  });
+
+  document.dispatchEvent(event);
+};
+
 export const addDuoChatMessage = async ({ commit }, messageData = { content: '' }) => {
-  const { errors = [], content = '' } = messageData || {};
+  const { errors = [], content = '', status = null } = messageData || {};
   const msgContent = content || errors.join('; ');
 
   if (msgContent) {
@@ -20,6 +46,10 @@ export const addDuoChatMessage = async ({ commit }, messageData = { content: ''
       commit(types.ADD_TOOL_MESSAGE, message);
     } else {
       commit(types.ADD_MESSAGE, message);
+
+      if (message.role.toLowerCase() === GENIE_CHAT_MODEL_ROLES.assistant && status === 'success') {
+        publishFormDataFromMessage(msgContent)
+      }
     }
   }
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 45945203286d81845351ae468322f3d91b137815..995bd487b9360ab3008c0f9cc691e33bed0a126d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2471,9 +2471,15 @@ msgstr ""
 msgid "AICatalog|Agent added successfully to %{name}."
 msgstr ""
 
+msgid "AICatalog|Agent added successfully."
+msgstr ""
+
 msgid "AICatalog|Agent could not be added: %{agentName}"
 msgstr ""
 
+msgid "AICatalog|Agent created successfully, adding to project..."
+msgstr ""
+
 msgid "AICatalog|Agent created successfully."
 msgstr ""
 
@@ -2486,9 +2492,6 @@ msgstr ""
 msgid "AICatalog|Agent not found."
 msgstr ""
 
-msgid "AICatalog|Agent removed successfully from this project."
-msgstr ""
-
 msgid "AICatalog|Agent updated successfully."
 msgstr ""
 
@@ -2510,9 +2513,6 @@ msgstr ""
 msgid "AICatalog|Are you sure you want to delete flow %{name}?"
 msgstr ""
 
-msgid "AICatalog|Are you sure you want to remove agent %{name}?"
-msgstr ""
-
 msgid "AICatalog|Are you sure you want to remove flow %{name}?"
 msgstr ""
 
@@ -2612,9 +2612,6 @@ msgstr ""
 msgid "AICatalog|Failed to delete flow. %{error}"
 msgstr ""
 
-msgid "AICatalog|Failed to remove agent. %{error}"
-msgstr ""
-
 msgid "AICatalog|Failed to remove flow. %{error}"
 msgstr ""
 
@@ -2657,6 +2654,9 @@ msgstr ""
 msgid "AICatalog|Input cannot exceed %{value} characters. Please shorten your input."
 msgstr ""
 
+msgid "AICatalog|Let us open the Duo Chat and test run the agent!"
+msgstr ""
+
 msgid "AICatalog|Modify the agent settings and configuration."
 msgstr ""
 
@@ -2702,9 +2702,6 @@ msgstr ""
 msgid "AICatalog|Provide instructions or context that will be included for this run."
 msgstr ""
 
-msgid "AICatalog|Remove agent from this project"
-msgstr ""
-
 msgid "AICatalog|Remove flow from this project"
 msgstr ""
 
@@ -2717,6 +2714,9 @@ msgstr ""
 msgid "AICatalog|Save changes"
 msgstr ""
 
+msgid "AICatalog|Save your configuration changes before running tests. The Test Run button will be enabled after saving."
+msgstr ""
+
 msgid "AICatalog|Search and select tools for this agent."
 msgstr ""
 
@@ -2756,6 +2756,9 @@ msgstr ""
 msgid "AICatalog|The agent could not be added to the project. Check that the project meets the %{link_start}prerequisites%{link_end} and try again."
 msgstr ""
 
+msgid "AICatalog|The agent could not be added. Try again."
+msgstr ""
+
 msgid "AICatalog|The agent could not be updated. Try again."
 msgstr ""
 
@@ -2777,6 +2780,9 @@ msgstr ""
 msgid "AICatalog|The test run failed. %{error}"
 msgstr ""
 
+msgid "AICatalog|These settings will be applied when you click \"Test Run\" to deploy and test your agent"
+msgstr ""
+
 msgid "AICatalog|This %{itemType} is private and can only be added to the project it was created in. Duplicate the agent to use the same configuration in other projects."
 msgstr ""
 
@@ -2816,6 +2822,9 @@ msgstr ""
 msgid "AICatalog|Version"
 msgstr ""
 
+msgid "AICatalog|View agent"
+msgstr ""
+
 msgid "AICatalog|Visibility level is required."
 msgstr ""
 
diff --git a/workhorse/internal/ai_assist/duoworkflow/handler.go b/workhorse/internal/ai_assist/duoworkflow/handler.go
index 7ac0415651de8f18a9298c8b1105a7d2c00fbbdc..e881eabac949737a03faef1d2a8c9a84f3d13462 100644
--- a/workhorse/internal/ai_assist/duoworkflow/handler.go
+++ b/workhorse/internal/ai_assist/duoworkflow/handler.go
@@ -11,7 +11,11 @@ import (
 	"github.com/gorilla/websocket"
 )
 
-var upgrader = websocket.Upgrader{}
+var upgrader = websocket.Upgrader{
+    CheckOrigin: func(r *http.Request) bool {
+        return true
+   },
+}
 
 // Handler creates an HTTP handler for Duo Workflow WebSocket connections.
 func Handler(rails *api.API) http.Handler {