diff --git a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue
index 360a340adfb1007e014489b9754dc07c256a339d..f8bb244c78ff7c8925cd784aee09ad30eb8f736e 100644
--- a/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue
+++ b/ee/app/assets/javascripts/ai/catalog/components/ai_catalog_item_consumer_modal.vue
@@ -1,17 +1,19 @@
 <script>
 import { uniqueId } from 'lodash';
-import { GlForm, GlFormGroup, GlFormInput, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import { AI_CATALOG_ITEM_LABELS } from '../constants';
+import FormProjectDropdown from './form_project_dropdown.vue';
 
 const formId = uniqueId('ai-catalog-item-consumer-form-');
 
 export default {
   name: 'AiCatalogItemConsumerModal',
   components: {
+    FormProjectDropdown,
+    GlAlert,
     GlForm,
     GlFormGroup,
-    GlFormInput,
     GlModal,
     GlSprintf,
   },
@@ -24,7 +26,8 @@ export default {
   data() {
     return {
       isOpen: true,
-      targetId: this.item.project?.id,
+      targetId: this.item.project?.id || null,
+      error: null,
     };
   },
   computed: {
@@ -46,21 +49,14 @@ export default {
     },
   },
   methods: {
+    onError(error) {
+      this.error = error;
+    },
     handleSubmit() {
-      // TODO: This is a tmp solution until we're using
-      // a project dropdown select instead of an
-      // input field.
-      const isProjectSelected = this.targetId.toLowerCase().includes('project');
-
-      if (!isProjectSelected) {
-        // eslint-disable-next-line
-        console.error(
-          // eslint-disable-next-line
-          'Invalid State. Target ID must contain "project"',
-        );
+      if (this.targetId === null) {
+        this.onError(s__('AICatalog|Project is required.'));
         return;
       }
-
       this.$emit('submit', { projectId: this.targetId });
     },
   },
@@ -90,6 +86,10 @@ export default {
     @primary.prevent
     @hidden="$emit('hide')"
   >
+    <gl-alert v-if="error" variant="danger" class="gl-mb-5" @dismiss="error = null">
+      {{ error }}
+    </gl-alert>
+
     <dl>
       <dt class="gl-mb-2 gl-font-bold">
         <gl-sprintf :message="s__('AICatalog|Selected %{itemType}')">
@@ -101,11 +101,11 @@ export default {
 
     <gl-form :id="formId" @submit.prevent="handleSubmit">
       <gl-form-group
-        :label="s__('AICatalog|Project ID')"
+        :label="s__('AICatalog|Project')"
         :label-description="projectLabelDescription"
         label-for="target-id"
       >
-        <gl-form-input id="target-id" v-model="targetId" required data-testid="target-id" />
+        <form-project-dropdown id="target-id" v-model="targetId" @error="onError" />
       </gl-form-group>
     </gl-form>
   </gl-modal>
diff --git a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
index 84725ab70b219f6afdb9b3c5016c65c84f4c5042..2d69ca062bb5c13399f0e8222b3bd5b59b57ef9f 100644
--- a/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
+++ b/ee/spec/frontend/ai/catalog/components/ai_catalog_item_consumer_modal_spec.js
@@ -1,21 +1,25 @@
+import { nextTick } from 'vue';
 import { noop } from 'lodash';
-import { GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
+import { GlAlert, GlForm, GlFormGroup, GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AiCatalogItemConsumerModal from 'ee/ai/catalog/components/ai_catalog_item_consumer_modal.vue';
-import { mockBaseAgent } from '../mock_data';
+import FormProjectDropdown from 'ee/ai/catalog/components/form_project_dropdown.vue';
+import { mockAgents } from '../mock_data';
 
 describe('AiCatalogItemConsumerModal', () => {
   let wrapper;
+  const agent = mockAgents[0];
 
   const findModal = () => wrapper.findComponent(GlModal);
   const findForm = () => wrapper.findComponent(GlForm);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
-  const findTargetIdInput = () => wrapper.findByTestId('target-id');
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findProjectDropdown = () => wrapper.findComponent(FormProjectDropdown);
 
-  const createWrapper = () => {
+  const createWrapper = ({ item = agent } = {}) => {
     wrapper = shallowMountExtended(AiCatalogItemConsumerModal, {
       propsData: {
-        item: mockBaseAgent,
+        item,
       },
       stubs: {
         GlSprintf,
@@ -31,26 +35,50 @@ describe('AiCatalogItemConsumerModal', () => {
     it('renders modal and item name', () => {
       expect(findModal().props('title')).toBe('Add this agent to a project');
       expect(findModal().find('dt').text()).toBe('Selected agent');
-      expect(findModal().find('dd').text()).toBe(mockBaseAgent.name);
+      expect(findModal().find('dd').text()).toBe(agent.name);
     });
 
-    it('renders project id input', () => {
+    it('renders the label description of the project field', () => {
       expect(findFormGroup().props('labelDescription')).toBe(
         'Select a project to which you want to add this agent.',
       );
     });
-  });
 
-  describe('when submitting the form', () => {
-    beforeEach(() => {
-      findTargetIdInput().vm.$emit('input', 'gid://gitlab/Project/1000000');
+    it('preselects the project id of the item', () => {
+      expect(findProjectDropdown().props('value')).toBe(agent.project.id);
     });
 
-    it('emits the submit event', () => {
+    it('renders alert when there was a problem fetching the projects', async () => {
+      const error = 'Failed to load projects.';
+
+      await findProjectDropdown().vm.$emit('error', error);
+
+      expect(findAlert().text()).toBe(error);
+    });
+  });
+
+  describe('when submitting the form', () => {
+    it('emits the submit event', async () => {
+      const projectId = 'gid://gitlab/Project/1000000';
+      await findProjectDropdown().vm.$emit('input', projectId);
       findForm().vm.$emit('submit', { preventDefault: noop });
 
       expect(wrapper.emitted('submit')[0][0]).toStrictEqual({
-        projectId: 'gid://gitlab/Project/1000000',
+        projectId,
+      });
+    });
+
+    describe('when there is no project selected', () => {
+      beforeEach(() => {
+        createWrapper({ item: { ...agent, project: null } });
+      });
+
+      it('renders alert', async () => {
+        findForm().vm.$emit('submit', { preventDefault: noop });
+        await nextTick();
+
+        expect(findAlert().text()).toBe('Project is required.');
+        expect(wrapper.emitted('submit')).toBeUndefined();
       });
     });
   });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index acebe4296602a4b7af80c9ac020b6e226bd8e013..098cf04aea6e626be905efbe13b2abacd08e4730 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2647,9 +2647,6 @@ msgstr ""
 msgid "AICatalog|Project"
 msgstr ""
 
-msgid "AICatalog|Project ID"
-msgstr ""
-
 msgid "AICatalog|Project is required."
 msgstr ""