diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.scss b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.scss
new file mode 100644
index 0000000000000000000000000000000000000000..600aa3589a8cde6a8b39f71d6ed9b343165d6735
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.scss
@@ -0,0 +1,14 @@
+.duo-chat-context-search-result-item.disabled {
+  > button {
+    @apply gl-cursor-not-allowed gl-text-secondary #{!important};
+
+    &:hover {
+      @apply gl-text-secondary #{!important};
+    }
+
+    &:active,
+    &:focus {
+      @apply gl-shadow-none #{!important};
+    }
+  }
+}
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..9b00f21425ba6b655b7e87cdd15d6c0506311b88
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js
@@ -0,0 +1,255 @@
+import { shallowMount } from '@vue/test-utils';
+import { getMockContextItems, MOCK_CATEGORIES } from '../mock_context_data';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import GlDuoChatContextItemMenu from './duo_chat_context_item_menu.vue';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
+
+jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
+
+describe('GlDuoChatContextItemMenu', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, options = {}) => {
+    wrapper = shallowMount(GlDuoChatContextItemMenu, {
+      propsData: {
+        open: true,
+        categories: MOCK_CATEGORIES,
+        selections: [],
+        loading: false,
+        error: null,
+        results: [],
+        ...props,
+      },
+      ...options,
+    });
+  };
+
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+
+  const findMenu = () => findByTestId('context-item-menu');
+  const findContextItemSelections = () => wrapper.findComponent(GlDuoChatContextItemSelections);
+  const findCategoryItems = () => wrapper.findComponent(GlDuoChatContextItemMenuCategoryItems);
+  const findResultItems = () => wrapper.findComponent(GlDuoChatContextItemMenuSearchItems);
+
+  // Keyboard events are passed by $ref from the parent GlDuoChat component, simulate that here
+  const triggerKeyUp = async (key) => wrapper.vm.handleKeyUp({ key, preventDefault: jest.fn() });
+
+  describe('context item selection', () => {
+    describe('and there are selections', () => {
+      it('renders context item selections', () => {
+        const selections = getMockContextItems().slice(0, 2);
+        createComponent({ open: false, selections });
+
+        expect(findContextItemSelections().props('removable')).toBe(true);
+        expect(findContextItemSelections().props('defaultCollapsed')).toBe(false);
+        expect(findContextItemSelections().props('title')).toBe('Included references');
+      });
+
+      it('emits "remove" event when an item is removed', () => {
+        const selections = getMockContextItems().slice(0, 2);
+        createComponent({ open: false, selections });
+
+        const removed = selections.at(0);
+        findContextItemSelections().vm.$emit('remove', removed);
+
+        expect(wrapper.emitted('remove').at(0)).toEqual([removed]);
+      });
+    });
+
+    describe('and there are no selections', () => {
+      it('does not render selections', () => {
+        createComponent({ open: false, selections: [] });
+
+        expect(findContextItemSelections().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('when the menu is closed', () => {
+    it('does not render any menu', () => {
+      createComponent({ open: false });
+
+      expect(findMenu().exists()).toBe(false);
+    });
+  });
+
+  describe('when the menu is open', () => {
+    describe('when a category has not been selected', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('shows categories', () => {
+        expect(findCategoryItems().props()).toEqual({
+          activeIndex: 0,
+          categories: MOCK_CATEGORIES,
+        });
+      });
+
+      it('cycles through the categories when the arrow keys are pressed', async () => {
+        expect(findCategoryItems().props('activeIndex')).toBe(0);
+        await triggerKeyUp('ArrowDown');
+        expect(findCategoryItems().props('activeIndex')).toBe(1);
+        await triggerKeyUp('ArrowDown');
+        expect(findCategoryItems().props('activeIndex')).toBe(2);
+        await triggerKeyUp('ArrowUp');
+        expect(findCategoryItems().props('activeIndex')).toBe(1);
+      });
+
+      it('emits "close" event when escape is pressed', async () => {
+        await triggerKeyUp('Escape');
+
+        expect(wrapper.emitted('close')).toHaveLength(1);
+      });
+
+      it('selects the category when enter is pressed', async () => {
+        await triggerKeyUp('Enter');
+
+        expect(wrapper.emitted('search').at(0)).toEqual([
+          {
+            category: MOCK_CATEGORIES[0].value,
+            query: '',
+          },
+        ]);
+      });
+    });
+
+    describe.each([
+      CONTEXT_ITEM_TYPE_ISSUE,
+      CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+      CONTEXT_ITEM_TYPE_PROJECT_FILE,
+    ])('when a "%s" category has been selected', (categoryValue) => {
+      let category;
+      let results;
+      beforeEach(() => {
+        category = MOCK_CATEGORIES.find((cat) => cat.value === categoryValue);
+        results = getMockContextItems()
+          .filter((item) => item.type === categoryValue)
+          .map((item, index) => ({
+            ...item,
+            isEnabled: index % 2 === 0, // disable odd indexed items
+          }));
+
+        createComponent({
+          results,
+        });
+
+        return findCategoryItems().vm.$emit('select', category);
+      });
+
+      it('shows search result items', () => {
+        expect(findResultItems().props()).toEqual({
+          activeIndex: 0,
+          category,
+          error: null,
+          loading: false,
+          results,
+          searchQuery: '',
+        });
+      });
+
+      it('cycles through the items when the arrow keys are pressed', async () => {
+        expect(findResultItems().props('activeIndex')).toBe(0);
+        await triggerKeyUp('ArrowDown');
+        expect(findResultItems().props('activeIndex')).toBe(2);
+        await triggerKeyUp('ArrowUp');
+        expect(findResultItems().props('activeIndex')).toBe(0);
+      });
+
+      it('does not cycle to the next item if it is disabled', async () => {
+        await triggerKeyUp('ArrowDown');
+        expect(findResultItems().props('activeIndex')).toBe(2);
+        await triggerKeyUp('ArrowDown');
+        expect(findResultItems().props('activeIndex')).not.toBe(1); // odd indexes disabled
+        expect(findResultItems().props('activeIndex')).toBe(0); // cycles back to first result
+        await triggerKeyUp('ArrowDown');
+        expect(findResultItems().props('activeIndex')).toBe(2);
+      });
+
+      it('clears category selection when escape is pressed', async () => {
+        await triggerKeyUp('Escape');
+        expect(findCategoryItems().exists()).toBe(true);
+        expect(findResultItems().exists()).toBe(false);
+      });
+
+      it('selects the item when enter is pressed', async () => {
+        await triggerKeyUp('Enter');
+        expect(wrapper.emitted('select').at(0)).toEqual([results.at(0)]);
+      });
+
+      it('selects the item when clicked', async () => {
+        await findResultItems().vm.$emit('select', results.at(0));
+        expect(wrapper.emitted('select').at(0)).toEqual([results.at(0)]);
+      });
+
+      it('emits "close" event when selecting an item', async () => {
+        await findResultItems().vm.$emit('select', results.at(0));
+        expect(wrapper.emitted('close')).toHaveLength(1);
+      });
+
+      it('does not select a disabled item when clicked', async () => {
+        await findResultItems().vm.$emit('select', results.at(1));
+        expect(wrapper.emitted('select')).toBeUndefined();
+      });
+
+      describe('when searching', () => {
+        const query = 'e';
+        beforeEach(async () => {
+          await findResultItems().vm.$emit('update:searchQuery', query);
+
+          await wrapper.setProps({
+            loading: true,
+          });
+        });
+
+        it('emits search event', async () => {
+          expect(wrapper.emitted('search').at(1)).toEqual([
+            {
+              category: categoryValue,
+              query,
+            },
+          ]);
+        });
+
+        it('shows loading state', async () => {
+          expect(findResultItems().props('loading')).toBe(true);
+        });
+
+        describe('when there is an error', () => {
+          beforeEach(async () => {
+            await wrapper.setProps({
+              loading: false,
+              error: 'oh no',
+            });
+          });
+
+          it('shows error state', async () => {
+            expect(findResultItems().props('error')).toBe('oh no');
+          });
+        });
+
+        describe('when there are results', () => {
+          let matchingResult;
+
+          beforeEach(async () => {
+            matchingResult = results.at(0);
+            await wrapper.setProps({
+              loading: false,
+              results: [matchingResult],
+            });
+          });
+
+          it('shows matching results', async () => {
+            expect(findResultItems().props('results')).toEqual([matchingResult]);
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.stories.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c2d3180207dfc767af1481a375aa467b4f3d859
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.stories.js
@@ -0,0 +1,93 @@
+import { makeContainer } from '../../../../../../../utils/story_decorators/container';
+import { setStoryTimeout } from '../../../../../../../utils/test_utils';
+import { getMockContextItems, MOCK_CATEGORIES } from '../mock_context_data';
+import GlDuoChatContextItemMenu from './duo_chat_context_item_menu.vue';
+
+const sampleCategories = MOCK_CATEGORIES;
+const sampleContextItems = getMockContextItems();
+
+export default {
+  title: 'experimental/duo/chat/components/duo-chat-context/duo-chat-context-item-menu',
+  component: GlDuoChatContextItemMenu,
+  decorators: [makeContainer({ height: '300px' })],
+  tags: ['skip-visual-test'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Allows selecting and removing context items for the conversation.
+
+Note that keyboard events don't work properly in this story (independently of the main GlDuoChat component), this will soon be available in the GlDuoChat interactive story with the /include command.`,
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatContextItemMenu },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      isOpen: this.open,
+      isLoading: this.loading,
+      errorMessage: this.error,
+      searchResults: this.results,
+      selectedItems: this.selections,
+    };
+  },
+  methods: {
+    handleContextItemsSearch({ category, query }) {
+      this.isLoading = true;
+      this.errorMessage = null;
+      setStoryTimeout(() => {
+        this.isLoading = false;
+        // this.errorMessage = 'OH NO SOME ERROR';
+        this.searchResults = sampleContextItems
+          .filter((item) => item.type === category)
+          .filter(
+            (item) => !query || item.metadata.name.toLowerCase().includes(query.toLowerCase())
+          )
+          .filter((item) => !this.selectedItems.some((contextItem) => contextItem.id === item.id));
+      }, 300);
+    },
+    handleContextItemSelect(item) {
+      if (!this.selectedItems.some((i) => i.id === item.id)) {
+        this.selectedItems.push(item);
+      }
+    },
+    handleContextItemRemove(item) {
+      const index = this.selectedItems.findIndex((i) => i.id === item.id);
+      if (index !== -1) {
+        this.selectedItems.splice(index, 1);
+      }
+    },
+  },
+  template: `
+    <div class="gl-h-full gl-flex gl-flex-col gl-justify-end">
+      <div class="gl-relative gl-max-w-full">
+        <gl-duo-chat-context-item-menu
+          :open="isOpen"
+          :selections="selectedItems"
+          :categories="categories"
+          :loading="isLoading"
+          :error="errorMessage"
+          :results="searchResults"
+          @search="handleContextItemsSearch"
+          @select="handleContextItemSelect"
+          @remove="handleContextItemRemove"
+          @close="isOpen = false"
+        />
+      </div>
+      <button @click="isOpen = !isOpen">Toggle Context Menu</button>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  open: false,
+  loading: false,
+  error: null,
+  categories: sampleCategories,
+  results: [],
+  selections: [],
+};
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2eb12f2730125c818618432ba84885378ab6f07
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue
@@ -0,0 +1,238 @@
+<script>
+import debounce from 'lodash/debounce';
+import { translate } from '../../../../../../../utils/i18n';
+import GlCard from '../../../../../../base/card/card.vue';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import { categoriesValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
+
+const SEARCH_DEBOUNCE_MS = 30;
+
+export default {
+  name: 'GlDuoChatContextItemMenu',
+  components: {
+    GlCard,
+    GlDuoChatContextItemMenuCategoryItems,
+    GlDuoChatContextItemMenuSearchItems,
+    GlDuoChatContextItemSelections,
+  },
+  props: {
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    selections: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    error: {
+      type: [String, null],
+      required: false,
+      default: null,
+    },
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+  },
+  data() {
+    return {
+      selectedCategory: null,
+      searchQuery: '',
+      activeIndex: 0,
+    };
+  },
+  computed: {
+    showCategorySelection() {
+      return this.open && !this.selectedCategory;
+    },
+    allResultsAreDisabled() {
+      return this.results.every((result) => !result.isEnabled);
+    },
+  },
+  watch: {
+    open(isOpen) {
+      if (!isOpen) {
+        this.resetSelection();
+      }
+    },
+    searchQuery(query) {
+      this.debouncedSearch(query);
+    },
+  },
+  methods: {
+    async focusSearchInput() {
+      await this.$nextTick();
+
+      if (this.showCategorySelection) {
+        return;
+      }
+
+      this.$refs.contextMenuSearchInput?.$el?.focus();
+    },
+    selectCategory(category) {
+      this.selectedCategory = category;
+      this.searchQuery = '';
+      this.activeIndex = 0;
+      this.$emit('search', {
+        category: category.value,
+        query: '',
+      });
+
+      this.focusSearchInput();
+    },
+    debouncedSearch: debounce(function search(query) {
+      this.$emit('search', {
+        category: this.selectedCategory.value,
+        query,
+      });
+    }, SEARCH_DEBOUNCE_MS),
+    selectItem(item) {
+      if (!item.isEnabled) {
+        return;
+      }
+
+      this.$emit(
+        'select',
+        this.results.find((result) => result.id === item.id)
+      );
+      this.$emit('close');
+      this.resetSelection();
+    },
+    removeItem(item) {
+      this.$emit('remove', item);
+    },
+    resetSelection() {
+      this.selectedCategory = null;
+      this.searchQuery = '';
+      this.activeIndex = 0;
+    },
+    async scrollActiveItemIntoView() {
+      await this.$nextTick();
+
+      const activeItem = document.getElementById(`dropdown-item-${this.activeIndex}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+      }
+    },
+    handleKeyUp(e) {
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          this.moveActiveIndex(e.key === 'ArrowDown' ? 1 : -1);
+          this.scrollActiveItemIntoView();
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.selectCategory(this.categories[this.activeIndex]);
+            return;
+          }
+          if (!this.results.length) {
+            return;
+          }
+          this.selectItem(this.results[this.activeIndex]);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.$emit('close');
+            return;
+          }
+
+          this.selectedCategory = null;
+          break;
+        default:
+          break;
+      }
+    },
+    moveActiveIndex(step) {
+      if (this.showCategorySelection) {
+        // Categories cannot be disabled, so just loop to the next/prev one
+        this.activeIndex =
+          (this.activeIndex + step + this.categories.length) % this.categories.length;
+        return;
+      }
+
+      if (!this.results.length) {
+        return;
+      }
+      if (this.allResultsAreDisabled) {
+        return;
+      }
+
+      // contextItems CAN be disabled, so loop to next/prev but ensure we don't land on a disabled one
+      let newIndex = this.activeIndex;
+      do {
+        newIndex = (newIndex + step + this.results.length) % this.results.length;
+
+        if (newIndex === this.activeIndex) {
+          // If we've looped through all items and found no enabled ones, keep the current index
+          return;
+        }
+      } while (!this.results[newIndex].isEnabled);
+
+      this.activeIndex = newIndex;
+    },
+  },
+  i18n: {
+    selectedContextItemsTitle: translate(
+      'GlDuoChatContextItemMenu.selectedContextItemsTitle',
+      'Included references'
+    ),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-duo-chat-context-item-selections
+      v-if="selections.length"
+      :selections="selections"
+      :removable="true"
+      :title="$options.i18n.selectedContextItemsTitle"
+      :default-collapsed="false"
+      class="gl-mb-3"
+      @remove="removeItem"
+    />
+    <gl-card
+      v-if="open"
+      class="slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md"
+      body-class="!gl-p-2"
+      data-testid="context-item-menu"
+    >
+      <gl-duo-chat-context-item-menu-category-items
+        v-if="showCategorySelection"
+        :active-index="activeIndex"
+        :categories="categories"
+        @select="selectCategory"
+        @active-index-change="activeIndex = $event"
+      />
+      <gl-duo-chat-context-item-menu-search-items
+        v-else
+        v-model="searchQuery"
+        :active-index="activeIndex"
+        :category="selectedCategory"
+        :loading="loading"
+        :error="error"
+        :results="results"
+        @select="selectItem"
+        @keyup="handleKeyUp"
+        @active-index-change="activeIndex = $event"
+      />
+    </gl-card>
+  </div>
+</template>
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..b24d31a7a9cb5dd602548a2145099a786cd906e4
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js
@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { MOCK_CATEGORIES } from '../mock_context_data';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+
+describe('GlDuoChatContextItemMenuCategoryItems', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(GlDuoChatContextItemMenuCategoryItems, {
+      propsData: {
+        categories: MOCK_CATEGORIES,
+        activeIndex: 0,
+      },
+    });
+  };
+
+  const findActiveItem = () => wrapper.find('.active-command');
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+
+  beforeEach(() => createWrapper());
+
+  it('selects the category when clicked', async () => {
+    await findActiveItem().vm.$emit('click');
+
+    expect(wrapper.emitted('select').at(0)).toEqual([MOCK_CATEGORIES.at(0)]);
+  });
+
+  it('updates active index when hovering over item', () => {
+    findDropdownItems().wrappers.at(1).find('div').trigger('mouseenter');
+
+    expect(wrapper.emitted('active-index-change').at(0)).toEqual([1]);
+  });
+
+  it('renders the category details', () => {
+    const dropdownItems = findDropdownItems();
+
+    expect(dropdownItems).toHaveLength(MOCK_CATEGORIES.length);
+
+    dropdownItems.wrappers.forEach((dropdownItem, index) => {
+      const expectedCategory = MOCK_CATEGORIES.at(index);
+      expect(dropdownItem.text()).toEqual(expectedCategory.label);
+      expect(dropdownItem.findComponent(GlIcon).props('name')).toEqual(expectedCategory.icon);
+    });
+  });
+
+  it('marks the correct category as active', async () => {
+    expect(findActiveItem().text()).toBe(MOCK_CATEGORIES.at(0).label);
+
+    await wrapper.setProps({ activeIndex: 1 });
+    expect(findActiveItem().text()).toBe(MOCK_CATEGORIES.at(1).label);
+
+    await wrapper.setProps({ activeIndex: 2 });
+    expect(findActiveItem().text()).toBe(MOCK_CATEGORIES.at(2).label);
+  });
+});
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9fa44966481b8b944bcd68a993e6be0ae509454
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue
@@ -0,0 +1,45 @@
+<script>
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { categoriesValidator } from '../utils';
+
+export default {
+  name: 'GlDuoChatContextItemMenuCategoryItems',
+  components: { GlIcon, GlDropdownItem },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    selectCategory(category) {
+      this.$emit('select', category);
+    },
+    setActiveIndex(index) {
+      this.$emit('active-index-change', index);
+    },
+  },
+};
+</script>
+<template>
+  <ul class="list-unstyled gl-mb-0">
+    <gl-dropdown-item
+      v-for="(category, index) in categories"
+      :key="category.value"
+      :class="{ 'active-command': index === activeIndex }"
+      data-testid="category-item"
+      @click="selectCategory(category)"
+    >
+      <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
+        <gl-icon :name="category.icon" class="gl-mr-2" />
+        {{ category.label }}
+      </div>
+    </gl-dropdown-item>
+  </ul>
+</template>
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..1516efc56cdde92ca0f9a7eccf57aaac651d7078
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.spec.js
@@ -0,0 +1,64 @@
+import { shallowMount } from '@vue/test-utils';
+import {
+  MOCK_CATEGORIES,
+  MOCK_CONTEXT_ITEM_FILE,
+  MOCK_CONTEXT_ITEM_ISSUE,
+  MOCK_CONTEXT_ITEM_MERGE_REQUEST,
+} from '../mock_context_data';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
+
+describe('GlDuoChatContextItemMenuContextSearchItem', () => {
+  let wrapper;
+
+  const createWrapper = (props) => {
+    wrapper = shallowMount(GlDuoChatContextItemMenuSearchItem, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+  const findCategoryIcon = () => findByTestId('category-icon');
+  const findContextItemPopover = () => wrapper.findComponent(GlDuoChatContextItemPopover);
+
+  describe.each([
+    {
+      category: MOCK_CATEGORIES.find((cat) => cat.value === CONTEXT_ITEM_TYPE_PROJECT_FILE),
+      item: MOCK_CONTEXT_ITEM_FILE,
+    },
+    {
+      category: MOCK_CATEGORIES.find((cat) => cat.value === CONTEXT_ITEM_TYPE_ISSUE),
+      item: MOCK_CONTEXT_ITEM_ISSUE,
+    },
+    {
+      category: MOCK_CATEGORIES.find((cat) => cat.value === CONTEXT_ITEM_TYPE_MERGE_REQUEST),
+      item: MOCK_CONTEXT_ITEM_MERGE_REQUEST,
+    },
+  ])('for "$category"', ({ category, item }) => {
+    beforeEach(() => createWrapper({ category, item }));
+
+    it('renders the category icon', () => {
+      expect(findCategoryIcon().props('name')).toBe(category.icon);
+    });
+
+    it('renders the context item popover', () => {
+      expect(findContextItemPopover().props()).toEqual(
+        expect.objectContaining({
+          item,
+          target: `info-icon-${item.id}`,
+        })
+      );
+    });
+
+    it('renders the default context item title', () => {
+      expect(wrapper.text()).toContain(item.metadata.name);
+    });
+  });
+});
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b94dbfe350e717f702e0455482d623257cb792c8
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue
@@ -0,0 +1,68 @@
+<script>
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { categoryValidator, contextItemValidator } from '../utils';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItem',
+  components: { GlIcon, GlDuoChatContextItemPopover },
+  props: {
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator,
+    },
+    item: {
+      type: Object,
+      required: true,
+      validator: contextItemValidator,
+    },
+  },
+  computed: {
+    title() {
+      return this.item.metadata?.name || '';
+    },
+    secondary() {
+      switch (this.category.value) {
+        case CONTEXT_ITEM_TYPE_PROJECT_FILE:
+          return this.item.metadata.info.relFilePath;
+        case CONTEXT_ITEM_TYPE_ISSUE:
+          return `#${this.item.metadata.info.iid}`;
+        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
+          return `!${this.item.metadata.info.iid}`;
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div class="gl-flex gl-items-center">
+      <gl-icon :name="category.icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
+      <span class="gl-whitespace-nowrap">
+        {{ title }}
+      </span>
+      <gl-icon
+        :id="`info-icon-${item.id}`"
+        name="information-o"
+        class="gl-ml-auto gl-shrink-0 gl-cursor-pointer gl-text-secondary"
+        :size="12"
+      />
+      <gl-duo-chat-context-item-popover
+        :item="item"
+        :target="`info-icon-${item.id}`"
+        placement="left"
+      />
+    </div>
+    <div class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary">
+      {{ secondary }}
+    </div>
+  </div>
+</template>
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e58e4a9cb67e1710fb08e5c98e31c80b845b97db
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.spec.js
@@ -0,0 +1,229 @@
+import { shallowMount } from '@vue/test-utils';
+import { MOCK_CATEGORIES, getMockContextItems } from '../mock_context_data';
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from '../constants';
+import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
+import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
+import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
+
+describe('GlDuoChatContextItemMenuSearchItems', () => {
+  let wrapper;
+  let category;
+  let results;
+
+  const createWrapper = (props = {}) => {
+    category = props.category || MOCK_CATEGORIES.at(0);
+    results = props.results || getMockContextItems().filter((item) => item.type === category.value);
+
+    wrapper = shallowMount(GlDuoChatContextItemMenuSearchItems, {
+      propsData: {
+        activeIndex: 0,
+        searchQuery: '',
+        category,
+        loading: false,
+        error: null,
+        results,
+        ...props,
+      },
+    });
+  };
+
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
+  const findAllByTestId = (testId) => wrapper.findAll(`[data-testid="${testId}"]`);
+
+  const findSearchInput = () => findByTestId('context-menu-search-input');
+  const findLoadingIndicator = () =>
+    wrapper.findComponent(GlDuoChatContextItemMenuSearchItemsLoading);
+  const findLoadingError = () => findByTestId('search-results-error');
+  const findEmptyState = () => findByTestId('search-results-empty-state');
+  const findResultItems = () => findAllByTestId('search-result-item');
+  const findActiveItem = () => wrapper.find('.active-command');
+  const findActiveItemDetails = () =>
+    findActiveItem().find('[data-testid="search-result-item-details"]');
+
+  describe('default rendering', () => {
+    beforeEach(() => createWrapper());
+
+    it('renders the search input', () => {
+      expect(findSearchInput().exists()).toBe(true);
+    });
+
+    it('emits "keyup" event', async () => {
+      const event = new Event('keyup');
+
+      findSearchInput().vm.$emit('keyup', event);
+
+      expect(wrapper.emitted('keyup').at(0)).toEqual([event]);
+    });
+
+    it('does not render the loading state', () => {
+      expect(findLoadingIndicator().exists()).toBe(false);
+    });
+
+    it('does not render the error state', () => {
+      expect(findLoadingError().exists()).toBe(false);
+    });
+
+    it('does not render the empty state', () => {
+      expect(findEmptyState().exists()).toBe(false);
+    });
+  });
+
+  describe('when searching', () => {
+    const query = 'e';
+    beforeEach(async () => {
+      createWrapper();
+      await findSearchInput().vm.$emit('input', query);
+
+      await wrapper.setProps({
+        loading: true,
+        searchQuery: query,
+      });
+    });
+
+    it('emits query input', async () => {
+      expect(wrapper.emitted('update:searchQuery').at(0)).toEqual([query]);
+    });
+
+    it('shows loading state', async () => {
+      expect(findLoadingIndicator().exists()).toBe(true);
+    });
+
+    describe('when there is an error', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          loading: false,
+          error: 'oh no',
+        });
+      });
+
+      it('shows error state', async () => {
+        expect(findLoadingError().text()).toBe('oh no');
+      });
+
+      it('does not render the loading state', () => {
+        expect(findLoadingIndicator().exists()).toBe(false);
+      });
+
+      it('does not render the empty state', () => {
+        expect(findEmptyState().exists()).toBe(false);
+      });
+    });
+
+    describe('when there are no results', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          loading: false,
+          error: null,
+          results: [],
+        });
+      });
+
+      it('shows empty state', async () => {
+        expect(findEmptyState().text()).toBe('No results found');
+      });
+
+      it('does not render the loading state', () => {
+        expect(findLoadingIndicator().exists()).toBe(false);
+      });
+
+      it('does not render the error state', () => {
+        expect(findLoadingError().exists()).toBe(false);
+      });
+    });
+
+    describe('when there are results', () => {
+      beforeEach(() =>
+        wrapper.setProps({
+          loading: false,
+        })
+      );
+
+      it('shows matching results', async () => {
+        const matchingResult = results.at(0);
+        await wrapper.setProps({
+          results: [matchingResult],
+        });
+
+        expect(findResultItems()).toHaveLength(1);
+        expect(wrapper.findComponent(GlDuoChatContextItemMenuSearchItem).props()).toEqual(
+          expect.objectContaining({
+            item: matchingResult,
+            category,
+          })
+        );
+      });
+
+      it('marks the correct item as active', async () => {
+        expect(findActiveItemDetails().props('item')).toEqual(results.at(0));
+
+        await wrapper.setProps({
+          activeIndex: 1,
+        });
+
+        expect(findActiveItemDetails().props('item')).toEqual(results.at(1));
+      });
+
+      it('emits "active-index-change" event when hovering over an item', async () => {
+        const index = 1;
+        await findResultItems().wrappers.at(index).find('div').trigger('mouseenter');
+
+        expect(wrapper.emitted('active-index-change').at(0)).toEqual([index]);
+      });
+
+      describe('when there are disabled results', () => {
+        let disabledItem;
+        beforeEach(async () => {
+          const disabledIndex = 2;
+          await wrapper.setProps({
+            results: results.map((result, index) => ({
+              ...result,
+              isEnabled: index !== disabledIndex,
+            })),
+          });
+
+          disabledItem = findResultItems().at(disabledIndex);
+        });
+
+        it('does not emit "active-index-change" event when hovering over a disabled item', async () => {
+          await disabledItem.find('div').trigger('mouseenter');
+
+          expect(wrapper.emitted('active-index-change')).toBeUndefined();
+        });
+
+        it('disables the item', () => {
+          expect(disabledItem.attributes('tabindex')).toBe('-1');
+          expect(disabledItem.classes()).toContain('disabled');
+        });
+      });
+    });
+  });
+
+  describe.each([
+    {
+      testCase: MOCK_CATEGORIES.find((cat) => cat.value === CONTEXT_ITEM_TYPE_PROJECT_FILE),
+      expectedPlaceholder: 'Search files...',
+    },
+    {
+      testCase: MOCK_CATEGORIES.find((cat) => cat.value === CONTEXT_ITEM_TYPE_ISSUE),
+      expectedPlaceholder: 'Search issues...',
+    },
+    {
+      testCase: MOCK_CATEGORIES.find((cat) => cat.value === CONTEXT_ITEM_TYPE_MERGE_REQUEST),
+      expectedPlaceholder: 'Search merge requests...',
+    },
+  ])('when category is "$testCase.label"', ({ testCase, expectedPlaceholder }) => {
+    beforeEach(() =>
+      createWrapper({
+        category: testCase,
+      })
+    );
+
+    it('renders the expected input placeholder text', () => {
+      expect(findSearchInput().attributes('placeholder')).toEqual(expectedPlaceholder);
+    });
+  });
+});
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b7140700d2e08fdba7323a5abf236f223a85cb93
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.vue
@@ -0,0 +1,146 @@
+<script>
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlFormInput from '../../../../../../base/form/form_input/form_input.vue';
+import GlAlert from '../../../../../../base/alert/alert.vue';
+import { sprintf, translate } from '../../../../../../../utils/i18n';
+import { categoryValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
+import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItems',
+  components: {
+    GlAlert,
+    GlFormInput,
+    GlDropdownItem,
+    GlDuoChatContextItemMenuSearchItem,
+    GlDuoChatContextItemMenuSearchItemsLoading,
+  },
+  model: {
+    prop: 'searchQuery',
+    event: 'update:searchQuery',
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+    searchQuery: {
+      type: String,
+      required: true,
+    },
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    error: {
+      type: [String, null],
+      required: false,
+      default: null,
+    },
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+  },
+  data() {
+    return {
+      userInitiatedSearch: false,
+    };
+  },
+  computed: {
+    showEmptyState() {
+      return Boolean(
+        this.userInitiatedSearch && !this.loading && !this.error && !this.results.length
+      );
+    },
+    searchInputPlaceholder() {
+      return sprintf(
+        translate('GlDuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'),
+        {
+          categoryLabel: this.category.label.toLowerCase(),
+        }
+      );
+    },
+  },
+  watch: {
+    searchQuery() {
+      this.userInitiatedSearch = true;
+    },
+  },
+  methods: {
+    selectItem(item) {
+      this.$emit('select', item);
+      this.userInitiatedSearch = false;
+    },
+    handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
+    setActiveIndex(index) {
+      if (this.results[index]?.isEnabled) {
+        this.$emit('active-index-change', index);
+      }
+    },
+  },
+  i18n: {
+    emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found'),
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-max-h-31 gl-overflow-y-scroll">
+      <gl-duo-chat-context-item-menu-search-items-loading v-if="loading" />
+      <gl-alert
+        v-else-if="error"
+        variant="danger"
+        :dismissible="false"
+        class="gl-m-3"
+        data-testid="search-results-error"
+      >
+        {{ error }}
+      </gl-alert>
+      <div
+        v-else-if="showEmptyState"
+        class="gl-rounded-base gl-p-3 gl-text-center gl-text-secondary"
+        data-testid="search-results-empty-state"
+      >
+        {{ $options.i18n.emptyStateMessage }}
+      </div>
+      <ul v-else class="list-unstyled gl-mb-1 gl-flex-row">
+        <gl-dropdown-item
+          v-for="(item, index) in results"
+          :id="`dropdown-item-${index}`"
+          :key="item.id"
+          :class="[{ 'active-command': index === activeIndex, disabled: !item.isEnabled }]"
+          :tabindex="!item.isEnabled ? -1 : undefined"
+          class="duo-chat-context-search-result-item"
+          data-testid="search-result-item"
+          @click="selectItem(item)"
+        >
+          <div @mouseenter="setActiveIndex(index)">
+            <gl-duo-chat-context-item-menu-search-item
+              :item="item"
+              :category="category"
+              data-testid="search-result-item-details"
+            />
+          </div>
+        </gl-dropdown-item>
+      </ul>
+    </div>
+    <gl-form-input
+      ref="contextMenuSearchInput"
+      :value="searchQuery"
+      :placeholder="searchInputPlaceholder"
+      data-testid="context-menu-search-input"
+      @input="$emit('update:searchQuery', $event)"
+      @keyup="handleKeyUp"
+    />
+  </div>
+</template>
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..eab8445547e00ca0da163c4a09067540c8445755
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.spec.js
@@ -0,0 +1,15 @@
+import { shallowMount } from '@vue/test-utils';
+import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
+
+describe('GlDuoChatContextItemMenuSearchItemsLoading', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(GlDuoChatContextItemMenuSearchItemsLoading);
+  };
+
+  it('should render the accessible loading text', () => {
+    createWrapper();
+    expect(wrapper.text()).toContain('Loading...');
+  });
+});
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5da1a5be4e00201e660ceda4c740fe9f0ca5bbc6
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue
@@ -0,0 +1,28 @@
+<script>
+import { translate } from '../../../../../../../utils/i18n';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItemsLoading',
+  i18n: {
+    loadingMessage: translate('GlDuoChatContextItemMenu.loadingMessage', 'Loading...'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="index in 3"
+      :key="index"
+      class="gl-mx-3 gl-mb-4 gl-pt-3"
+      data-testid="search-results-loading"
+    >
+      <div class="gl-mb-2 gl-flex">
+        <div class="gl-animate-skeleton-loader gl-mr-3 gl-h-5 gl-w-5 gl-rounded-base"></div>
+        <div class="gl-animate-skeleton-loader gl-h-5 gl-grow gl-rounded-base"></div>
+      </div>
+      <div class="gl-animate-skeleton-loader gl-h-4 gl-w-1/2 gl-rounded-base"></div>
+    </div>
+    <span class="sr-only">{{ $options.i18n.loadingMessage }}</span>
+  </div>
+</template>
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue
index 61854ec514239eb074ae243bc4e46dfb58aa043e..8baf8857c3bc97cd73447469f8e1e22a3ab99fef 100644
--- a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue
@@ -6,6 +6,7 @@ import {
   CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
+import { contextItemValidator } from '../utils';
 
 const ID_PREFIXES = {
   issue: '#',
@@ -21,6 +22,7 @@ export default {
     item: {
       type: Object,
       required: true,
+      validator: contextItemValidator,
     },
     target: {
       type: String,
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.spec.js
index 0d8800f360628f7fd990fbd14dc7af3aa5499840..4ad71f15223419a7ffebb7285202736aa05c0a3a 100644
--- a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.spec.js
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.spec.js
@@ -144,4 +144,32 @@ describe('GlDuoChatContextItemSelections', () => {
       expect(popover.props('placement')).toBe('bottom');
     });
   });
+
+  describe('removable items', () => {
+    describe('when items cannot be removed', () => {
+      beforeEach(() => createComponent({ removable: false }));
+
+      it('renders view-only tokens', () => {
+        findTokens().wrappers.forEach((token) => {
+          expect(token.props('viewOnly')).toBe(true);
+        });
+      });
+    });
+
+    describe('when items can be removed', () => {
+      beforeEach(() => createComponent({ removable: true }));
+
+      it('renders removable tokens', () => {
+        findTokens().wrappers.forEach((token) => {
+          expect(token.props('viewOnly')).toBe(false);
+        });
+      });
+
+      it('emits remove event when token is closed', async () => {
+        await findTokens().at(0).vm.$emit('close');
+        expect(wrapper.emitted('remove')).toHaveLength(1);
+        expect(wrapper.emitted('remove')[0]).toEqual([MOCK_CONTEXT_ITEM_FILE]);
+      });
+    });
+  });
 });
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue
index ee724fcc22d3bb89b2fb195aa93bceeef2484b0c..df7bb72af5209eabc5efdf3e9731d52e2ec99c68 100644
--- a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue
@@ -8,6 +8,7 @@ import {
   CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
+import { contextItemsValidator } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
@@ -20,6 +21,7 @@ export default {
     selections: {
       type: Array,
       required: true,
+      validator: contextItemsValidator,
     },
     title: {
       type: String,
@@ -29,6 +31,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    removable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -53,6 +60,9 @@ export default {
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
+    onRemoveItem(item) {
+      this.$emit('remove', item);
+    },
   },
 };
 </script>
@@ -75,9 +85,10 @@ export default {
       <gl-token
         v-for="item in selections"
         :key="item.id"
-        :view-only="true"
+        :view-only="!removable"
         variant="default"
         class="gl-mb-2 gl-mr-2"
+        @close="onRemoveItem(item)"
       >
         <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
           <gl-icon :name="getIconName(item.type)" :size="12" class="gl-mr-1" />
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js b/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js
index bd1dc34d03381ff3a8ed1505fc3c995ca0c81f29..95d6cb2cec1c11788f930a949669577e3509fcd3 100644
--- a/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js
@@ -1,3 +1,15 @@
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from './constants';
+
+export const MOCK_CATEGORIES = [
+  { label: 'Files', value: CONTEXT_ITEM_TYPE_PROJECT_FILE, icon: 'document' },
+  { label: 'Issues', value: CONTEXT_ITEM_TYPE_ISSUE, icon: 'issues' },
+  { label: 'Merge Requests', value: CONTEXT_ITEM_TYPE_MERGE_REQUEST, icon: 'merge-request' },
+];
+
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   isEnabled: true,
@@ -8,7 +20,7 @@ export const MOCK_CONTEXT_ITEM_FILE = {
       relFilePath: 'src/plants/strawberry.ts',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 
 export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
@@ -21,7 +33,7 @@ export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
       relFilePath: '/src/VehicleFoo/motorbike.cs',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 const mockFiles = [
   MOCK_CONTEXT_ITEM_FILE,
@@ -35,7 +47,7 @@ const mockFiles = [
         relFilePath: '/src/plants/potato.ts',
       },
     },
-    type: 'project_file',
+    type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
   },
   MOCK_CONTEXT_ITEM_FILE_DISABLED,
 ];
@@ -50,20 +62,20 @@ export const MOCK_CONTEXT_ITEM_ISSUE = {
       iid: 1234,
     },
   },
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
   id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
   isEnabled: false,
   metadata: {
-    name: 'Fix vehicle colours',
+    name: `Fix vehicle colours and make them look real nice and colourful won't that be wonderful wow this issue title is really long I sure hope it's gonna wrap OK`,
     info: {
       project: 'example/vehicle',
       iid: 91011,
     },
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 
 const mockIssues = [
@@ -78,7 +90,7 @@ const mockIssues = [
         iid: 5678,
       },
     },
-    type: 'issue',
+    type: CONTEXT_ITEM_TYPE_ISSUE,
   },
   MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
 ];
@@ -93,7 +105,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
       iid: 1122,
     },
   },
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
@@ -106,7 +118,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
     },
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 
 const mockMergeRequests = [
@@ -122,7 +134,7 @@ const mockMergeRequests = [
       },
     },
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-    type: 'merge_request',
+    type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   },
   MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
 ];
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/utils.js b/src/components/experimental/duo/chat/components/duo_chat_context/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8baa557125040a5294792296bc85fe1a5698a3f
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/utils.js
@@ -0,0 +1,29 @@
+export function categoryValidator(category) {
+  return Boolean(category && category.value && category.label && category.icon);
+}
+
+export function categoriesValidator(categories) {
+  return Array.isArray(categories) && categories.every((category) => categoryValidator(category));
+}
+
+function disabledReasonsValidator(disabledReasons) {
+  return (
+    disabledReasons === undefined ||
+    (Array.isArray(disabledReasons) &&
+      disabledReasons.every((reason) => typeof reason === 'string'))
+  );
+}
+
+export function contextItemValidator(item) {
+  return Boolean(
+    item &&
+      item.id &&
+      item.type &&
+      typeof item.isEnabled === 'boolean' &&
+      disabledReasonsValidator(item.disabledReasons)
+  );
+}
+
+export function contextItemsValidator(items) {
+  return Array.isArray(items) && items.every((item) => contextItemValidator(item));
+}
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/utils.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/utils.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..330cfe1cf17ad3e797b98c40019b773d98eb7213
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/utils.spec.js
@@ -0,0 +1,173 @@
+import {
+  categoriesValidator,
+  categoryValidator,
+  contextItemsValidator,
+  contextItemValidator,
+} from './utils';
+import {
+  MOCK_CATEGORIES,
+  MOCK_CONTEXT_ITEM_FILE,
+  MOCK_CONTEXT_ITEM_FILE_DISABLED,
+  MOCK_CONTEXT_ITEM_MERGE_REQUEST,
+} from './mock_context_data';
+
+describe('duo_chat_context utils', () => {
+  describe('categoryValidator', () => {
+    it.each(MOCK_CATEGORIES)('returns true for a valid category', (category) => {
+      expect(categoryValidator(category)).toBe(true);
+    });
+
+    it.each([
+      { value: { value: 'test', label: 'Test' }, description: 'missing icon' },
+      { value: { value: 'test', icon: 'icon' }, description: 'missing label' },
+      { value: { label: 'Test', icon: 'icon' }, description: 'missing value' },
+      { value: {}, description: 'empty object' },
+      { value: null, description: 'null' },
+      { value: undefined, description: 'undefined' },
+    ])('returns false for "$description"', ({ value }) => {
+      expect(categoryValidator(value)).toBe(false);
+    });
+  });
+
+  describe('categoriesValidator', () => {
+    it('returns true for valid categories', () => {
+      expect(categoriesValidator(MOCK_CATEGORIES)).toBe(true);
+    });
+
+    it.each([
+      { value: null, description: 'null' },
+      { value: undefined, description: 'undefined' },
+      { value: {}, description: 'object instead of array' },
+      { value: 'not an array', description: 'string instead of array' },
+      { value: 42, description: 'number instead of array' },
+      {
+        value: [{ value: 'test', label: 'Test' }],
+        description: 'array with invalid category (missing icon)',
+      },
+      {
+        value: [{ value: 'test', icon: 'icon' }],
+        description: 'array with invalid category (missing label)',
+      },
+      {
+        value: [{ label: 'Test', icon: 'icon' }],
+        description: 'array with invalid category (missing value)',
+      },
+      {
+        value: [MOCK_CATEGORIES.at(0), MOCK_CATEGORIES.at(1), { label: 'Test' }],
+        description: 'array with mix of valid and invalid categories',
+      },
+    ])('returns false for "$description', ({ value }) => {
+      expect(categoriesValidator(value)).toBe(false);
+    });
+  });
+
+  describe('contextItemValidator', () => {
+    describe('with a valid item', () => {
+      it('returns true for a valid file item', () => {
+        expect(contextItemValidator(MOCK_CONTEXT_ITEM_FILE)).toBe(true);
+      });
+
+      it('returns true for a valid merge request item', () => {
+        expect(contextItemValidator(MOCK_CONTEXT_ITEM_MERGE_REQUEST)).toBe(true);
+      });
+
+      it('returns true for a valid disabled item', () => {
+        expect(contextItemValidator(MOCK_CONTEXT_ITEM_FILE_DISABLED)).toBe(true);
+      });
+    });
+
+    describe.each([
+      { value: null, description: 'null' },
+      { value: undefined, description: 'undefined' },
+      { value: {}, description: 'empty object' },
+      { value: 'not an item', description: 'string instead of object' },
+      { value: 42, description: 'number instead of object' },
+      {
+        value: { ...MOCK_CONTEXT_ITEM_FILE, id: undefined },
+        description: 'missing id',
+      },
+      {
+        value: { ...MOCK_CONTEXT_ITEM_FILE, type: undefined },
+        description: 'missing type',
+      },
+      {
+        value: {
+          ...MOCK_CONTEXT_ITEM_FILE,
+          isEnabled: undefined,
+        },
+        description: 'missing enabled',
+      },
+      {
+        value: {
+          ...MOCK_CONTEXT_ITEM_FILE,
+          isEnabled: 'true',
+        },
+        description: 'non-boolean enabled',
+      },
+      {
+        value: {
+          ...MOCK_CONTEXT_ITEM_FILE,
+          disabledReasons: 'not an array',
+        },
+        description: 'non-array disabledReasons',
+      },
+      {
+        value: {
+          ...MOCK_CONTEXT_ITEM_FILE,
+          disabledReasons: [42],
+        },
+        description: 'non-string items in disabledReasons array',
+      },
+    ])('with "$description"', ({ value }) => {
+      it('returns false', () => {
+        expect(contextItemValidator(value)).toBe(false);
+      });
+    });
+  });
+
+  describe('contextItemsValidator', () => {
+    describe.each([
+      { value: [], description: 'empty array' },
+      {
+        value: [MOCK_CONTEXT_ITEM_FILE],
+        description: 'one valid item',
+      },
+      {
+        value: [MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_MERGE_REQUEST],
+        description: 'multiple valid items',
+      },
+    ])('with "$description"', ({ value }) => {
+      it('returns true', () => {
+        expect(contextItemsValidator(value)).toBe(true);
+      });
+    });
+
+    describe.each([
+      { value: null, description: 'null' },
+      { value: undefined, description: 'undefined' },
+      { value: {}, description: 'object instead of array' },
+      { value: 'not an array', description: 'string instead of array' },
+      { value: 42, description: 'number instead of array' },
+      {
+        value: [{ id: '1', metadata: { name: 'Item 1' } }],
+        description: 'array with item missing isEnabled',
+      },
+      {
+        value: [{ metadata: { name: 'Item 1' }, isEnabled: true }],
+        description: 'array with item missing id',
+      },
+      {
+        value: [{ id: '1', metadata: { name: 'Item 1' }, isEnabled: 'true' }],
+        description: 'array with item having non-boolean isEnabled',
+      },
+      {
+        value: [MOCK_CONTEXT_ITEM_FILE, { metadata: { name: 'Item 2' }, isEnabled: false }],
+        description: 'array with one valid and one invalid item',
+      },
+    ])('with "$description"', ({ value }) => {
+      it('returns false', () => {
+        expect(contextItemsValidator(value)).toBe(false);
+      });
+    });
+  });
+});
diff --git a/src/scss/components.scss b/src/scss/components.scss
index c4ea582029a2a2fd08afcea7efd2400b3e63071e..93d3d646fc4549c81045ad7857a5cd9625e1d855 100644
--- a/src/scss/components.scss
+++ b/src/scss/components.scss
@@ -6,6 +6,7 @@
 @import '../components/experimental/duo/chat/duo_chat';
 @import '../components/experimental/duo/chat/components/duo_chat_message/duo_chat_message';
 @import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';
+@import '../components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu';
 @import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
 @import '../components/base/keyset_pagination/keyset_pagination';
 @import '../components/charts/gauge/gauge';
diff --git a/translations.js b/translations.js
index e564a8ef953d151b0f61b42a50a9fb0df6569d03..471d10e74e9926c9ff57aa4f8e209cfc9a9036d3 100644
--- a/translations.js
+++ b/translations.js
@@ -4,6 +4,10 @@ export default {
   'DuoChatContextItemPopover.DisabledReason': 'This item is disabled',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChatContextItemMenu.emptyStateMessage': 'No results found',
+  'GlDuoChatContextItemMenu.loadingMessage': 'Loading...',
+  'GlDuoChatContextItemMenu.searchInputPlaceholder': 'Search %{categoryLabel}...',
+  'GlDuoChatContextItemMenu.selectedContextItemsTitle': 'Included references',
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',