diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
index d06e520c6a..49cedd60a5 100644
--- a/packages/base/card-api.gts
+++ b/packages/base/card-api.gts
@@ -22,6 +22,7 @@ import {
   isNotLoadedError,
   isNotReadyError,
   CardError,
+  CardContextName,
   NotLoaded,
   NotReady,
   getField,
@@ -116,7 +117,6 @@ export interface CardContext {
       };
     };
   }>;
-  renderedIn?: Component<any>;
 }
 
 function isNotLoadedValue(val: any): val is NotLoadedValue {
@@ -284,11 +284,7 @@ export interface Field<
   ): Promise<any>;
   emptyValue(instance: BaseDef): any;
   validate(instance: BaseDef, value: any): void;
-  component(
-    model: Box<BaseDef>,
-    defaultFormat: Format,
-    context?: CardContext,
-  ): BoxComponent;
+  component(model: Box<BaseDef>, defaultFormat: Format): BoxComponent;
   getter(instance: BaseDef): BaseInstanceType<CardT>;
   queryableValue(value: any, stack: BaseDef[]): SearchT;
   queryMatcher(
@@ -754,12 +750,8 @@ class Contains<CardT extends FieldDefConstructor> implements Field<CardT, any> {
     );
   }
 
-  component(
-    model: Box<BaseDef>,
-    format: Format,
-    context?: CardContext,
-  ): BoxComponent {
-    return fieldComponent(this, model, format, context);
+  component(model: Box<BaseDef>, format: Format): BoxComponent {
+    return fieldComponent(this, model, format);
   }
 }
 
@@ -1050,18 +1042,14 @@ class LinksTo<CardT extends CardDefConstructor> implements Field<CardT> {
     return fieldInstance;
   }
 
-  component(
-    model: Box<CardDef>,
-    format: Format,
-    context?: CardContext,
-  ): BoxComponent {
+  component(model: Box<CardDef>, format: Format): BoxComponent {
     if (format === 'edit' && !this.computeVia) {
       let innerModel = model.field(
         this.name as keyof BaseDef,
       ) as unknown as Box<CardDef | null>;
-      return getLinksToEditor(innerModel, this, context);
+      return getLinksToEditor(innerModel, this);
     }
-    return fieldComponent(this, model, format, context);
+    return fieldComponent(this, model, format);
   }
 }
 
@@ -1436,11 +1424,7 @@ class LinksToMany<FieldT extends CardDefConstructor>
     return fieldInstances;
   }
 
-  component(
-    model: Box<CardDef>,
-    format: Format,
-    context?: CardContext,
-  ): BoxComponent {
+  component(model: Box<CardDef>, format: Format): BoxComponent {
     let fieldName = this.name as keyof BaseDef;
     let arrayField = model.field(
       fieldName,
@@ -1463,7 +1447,6 @@ class LinksToMany<FieldT extends CardDefConstructor>
       field: this,
       format: renderFormat ?? format,
       cardTypeFor,
-      context,
     });
   }
 }
@@ -1472,7 +1455,6 @@ function fieldComponent(
   field: Field<typeof BaseDef>,
   model: Box<BaseDef>,
   defaultFormat: Format,
-  context?: CardContext,
 ): BoxComponent {
   let fieldName = field.name as keyof BaseDef;
   let card: typeof BaseDef;
@@ -1483,7 +1465,7 @@ function fieldComponent(
       (model.value[fieldName]?.constructor as typeof BaseDef) ?? field.card;
   }
   let innerModel = model.field(fieldName) as unknown as Box<BaseDef>;
-  return getBoxComponent(card, defaultFormat, innerModel, field, context);
+  return getBoxComponent(card, defaultFormat, innerModel, field);
 }
 
 // our decorators are implemented by Babel, not TypeScript, so they have a
@@ -1661,13 +1643,8 @@ export class BaseDef {
     return _createFromSerialized(this, data, doc, relativeTo, identityContext);
   }
 
-  static getComponent(
-    card: BaseDef,
-    format: Format,
-    field?: Field,
-    context?: CardContext,
-  ) {
-    return getComponent(card, format, field, context);
+  static getComponent(card: BaseDef, format: Format, field?: Field) {
+    return getComponent(card, format, field);
   }
 
   static assignInitialFieldValue(
@@ -2739,7 +2716,6 @@ export function getComponent(
   model: BaseDef,
   format: Format,
   field?: Field,
-  context?: CardContext,
 ): BoxComponent {
   let box = Box.create(model);
   let boxComponent = getBoxComponent(
@@ -2747,7 +2723,6 @@ export function getComponent(
     format,
     box,
     field,
-    context,
   );
   return boxComponent;
 }
@@ -3102,3 +3077,9 @@ type ElementType<T> = T extends (infer V)[] ? V : never;
 function makeRelativeURL(maybeURL: string, opts?: SerializeOpts): string {
   return opts?.maybeRelativeURL ? opts.maybeRelativeURL(maybeURL) : maybeURL;
 }
+
+declare module 'ember-provide-consume-context/context-registry' {
+  export default interface ContextRegistry {
+    [CardContextName]: CardContext;
+  }
+}
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 6eca02d93b..b2cfe5e481 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -12,12 +12,14 @@ import {
   isCompoundField,
   formats,
 } from './card-api';
-import { getField } from '@cardstack/runtime-common';
+import { CardContextName, getField } from '@cardstack/runtime-common';
 import type { ComponentLike } from '@glint/template';
 import { CardContainer } from '@cardstack/boxel-ui/components';
 import Modifier from 'ember-modifier';
 import { initSharedState } from './shared-state';
 import { eq } from '@cardstack/boxel-ui/helpers';
+import { consume } from 'ember-provide-consume-context';
+import Component from '@glimmer/component';
 
 interface BoxComponentSignature {
   Args: { Named: { format?: Format; displayContainer?: boolean } };
@@ -26,6 +28,33 @@ interface BoxComponentSignature {
 
 export type BoxComponent = ComponentLike<BoxComponentSignature>;
 
+interface CardContextConsumerSignature {
+  Blocks: { default: [CardContext] };
+}
+
+// cardComponentModifier, when provided, is used for the host environment to get access to card's rendered elements
+const DEFAULT_CARD_CONTEXT = {
+  cardComponentModifier: class NoOpModifier extends Modifier<any> {
+    modify() {}
+  },
+  actions: undefined,
+};
+
+export class CardContextConsumer extends Component<CardContextConsumerSignature> {
+  @consume(CardContextName) declare dynamicCardContext: CardContext;
+
+  get context(): CardContext {
+    return {
+      ...DEFAULT_CARD_CONTEXT,
+      ...this.dynamicCardContext,
+    };
+  }
+
+  <template>
+    {{yield this.context}}
+  </template>
+}
+
 const componentCache = initSharedState(
   'componentCache',
   () => new WeakMap<Box<BaseDef>, BoxComponent>(),
@@ -36,7 +65,6 @@ export function getBoxComponent(
   defaultFormat: Format,
   model: Box<BaseDef>,
   field: Field | undefined,
-  context: CardContext = {},
 ): BoxComponent {
   let stable = componentCache.get(model);
   if (stable) {
@@ -46,13 +74,6 @@ export function getBoxComponent(
     | { fields: FieldsTypeFor<BaseDef>; format: Format }
     | undefined;
 
-  // cardComponentModifier, when provided, is used for the host environment to get access to card's rendered elements
-  let cardComponentModifier =
-    context.cardComponentModifier ??
-    class NoOpModifier extends Modifier<any> {
-      modify() {}
-    };
-
   function lookupFormat(userFormat: Format | undefined): {
     Implementation: BaseDefComponent;
     fields: FieldsTypeFor<BaseDef>;
@@ -78,12 +99,7 @@ export function getBoxComponent(
     if (internalFieldsCache?.format === format) {
       fields = internalFieldsCache.fields;
     } else {
-      fields = fieldsComponentsFor(
-        {},
-        model,
-        defaultFieldFormat(format),
-        context,
-      );
+      fields = fieldsComponentsFor({}, model, defaultFieldFormat(format));
       internalFieldsCache = { fields, format };
     }
 
@@ -97,26 +113,57 @@ export function getBoxComponent(
   let component: TemplateOnlyComponent<{
     Args: { format?: Format; displayContainer?: boolean };
   }> = <template>
-    {{#let
-      (lookupFormat @format) (if (eq @displayContainer false) false true)
-      as |f displayContainer|
-    }}
-      {{#if (isCard model.value)}}
-        <CardContainer
-          @displayBoundaries={{displayContainer}}
-          class='field-component-card
-            {{f.format}}-format display-container-{{displayContainer}}'
-          {{cardComponentModifier
-            card=model.value
-            format=f.format
-            fieldType=field.fieldType
-            fieldName=field.name
-          }}
-          data-test-card-format={{f.format}}
-          data-test-field-component-card
-          {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
-          ...attributes
-        >
+    <CardContextConsumer as |context|>
+      {{#let
+        (lookupFormat @format) (if (eq @displayContainer false) false true)
+        as |f displayContainer|
+      }}
+        {{#if (isCard model.value)}}
+          <CardContainer
+            @displayBoundaries={{displayContainer}}
+            class='field-component-card
+              {{f.format}}-format display-container-{{displayContainer}}'
+            {{context.cardComponentModifier
+              card=model.value
+              format=f.format
+              fieldType=field.fieldType
+              fieldName=field.name
+            }}
+            data-test-card-format={{f.format}}
+            data-test-field-component-card
+            {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
+            ...attributes
+          >
+            <f.Implementation
+              @cardOrField={{card}}
+              @model={{model.value}}
+              @fields={{f.fields}}
+              @format={{f.format}}
+              @displayContainer={{@displayContainer}}
+              @set={{model.set}}
+              @fieldName={{model.name}}
+              @context={{context}}
+            />
+          </CardContainer>
+        {{else if (isCompoundField model.value)}}
+          <div
+            data-test-compound-field-format={{f.format}}
+            data-test-compound-field-component
+            {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
+            ...attributes
+          >
+            <f.Implementation
+              @cardOrField={{card}}
+              @model={{model.value}}
+              @fields={{f.fields}}
+              @format={{f.format}}
+              @displayContainer={{@displayContainer}}
+              @set={{model.set}}
+              @fieldName={{model.name}}
+              @context={{context}}
+            />
+          </div>
+        {{else}}
           <f.Implementation
             @cardOrField={{card}}
             @model={{model.value}}
@@ -127,38 +174,9 @@ export function getBoxComponent(
             @fieldName={{model.name}}
             @context={{context}}
           />
-        </CardContainer>
-      {{else if (isCompoundField model.value)}}
-        <div
-          data-test-compound-field-format={{f.format}}
-          data-test-compound-field-component
-          {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
-          ...attributes
-        >
-          <f.Implementation
-            @cardOrField={{card}}
-            @model={{model.value}}
-            @fields={{f.fields}}
-            @format={{f.format}}
-            @displayContainer={{@displayContainer}}
-            @set={{model.set}}
-            @fieldName={{model.name}}
-            @context={{context}}
-          />
-        </div>
-      {{else}}
-        <f.Implementation
-          @cardOrField={{card}}
-          @model={{model.value}}
-          @fields={{f.fields}}
-          @format={{f.format}}
-          @displayContainer={{@displayContainer}}
-          @set={{model.set}}
-          @fieldName={{model.name}}
-          @context={{context}}
-        />
-      {{/if}}
-    {{/let}}
+        {{/if}}
+      {{/let}}
+    </CardContextConsumer>
     <style>
       .field-component-card.embedded-format {
         padding: var(--boxel-sp);
@@ -187,7 +205,6 @@ export function getBoxComponent(
     component,
     model,
     defaultFieldFormat(defaultFormat),
-    context,
   );
 
   // This cast is safe because we're returning a proxy that wraps component.
@@ -212,7 +229,6 @@ function fieldsComponentsFor<T extends BaseDef>(
   target: object,
   model: Box<T>,
   defaultFormat: Format,
-  context?: CardContext,
 ): FieldsTypeFor<T> {
   // This is a cache of the fields we've already created components for
   // so that they do not get recreated
@@ -248,7 +264,6 @@ function fieldsComponentsFor<T extends BaseDef>(
       let result = field.component(
         model as unknown as Box<BaseDef>,
         defaultFormat,
-        context,
       );
       stableComponents.set(property, result);
       return result;
@@ -302,11 +317,10 @@ export function getPluralViewComponent(
     field: Field<typeof BaseDef>,
     boxedElement: Box<BaseDef>,
   ) => typeof BaseDef,
-  context?: CardContext,
 ): BoxComponent {
   let getComponents = () =>
     model.children.map((child) =>
-      getBoxComponent(cardTypeFor(field, child), format, child, field, context),
+      getBoxComponent(cardTypeFor(field, child), format, child, field),
     ); // Wrap the the components in a function so that the template is reactive to changes in the model (this is essentially a helper)
   let pluralViewComponent: TemplateOnlyComponent<BoxComponentSignature> =
     <template>
diff --git a/packages/base/links-to-editor.gts b/packages/base/links-to-editor.gts
index 943f2359a5..bd17b918db 100644
--- a/packages/base/links-to-editor.gts
+++ b/packages/base/links-to-editor.gts
@@ -16,20 +16,23 @@ import {
   chooseCard,
   baseCardRef,
   identifyCard,
+  CardContextName,
 } from '@cardstack/runtime-common';
 import type { ComponentLike } from '@glint/template';
 import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
 import { IconMinusCircle } from '@cardstack/boxel-ui/icons';
+import { consume } from 'ember-provide-consume-context';
 
 interface Signature {
   Args: {
     model: Box<CardDef | null>;
     field: Field<typeof CardDef>;
-    context?: CardContext;
   };
 }
 
 class LinksToEditor extends GlimmerComponent<Signature> {
+  @consume(CardContextName) declare cardContext: CardContext;
+
   <template>
     <div class='links-to-editor' data-test-links-to-editor={{@field.name}}>
       {{#if this.isEmpty}}
@@ -111,7 +114,6 @@ class LinksToEditor extends GlimmerComponent<Signature> {
       'embedded',
       this.args.model as Box<BaseDef>,
       this.args.field,
-      this.args.context,
     );
   }
 
@@ -121,7 +123,7 @@ class LinksToEditor extends GlimmerComponent<Signature> {
       { filter: { type } },
       {
         offerToCreate: { ref: type, relativeTo: undefined },
-        createNewCard: this.args.context?.actions?.createCard,
+        createNewCard: this.cardContext?.actions?.createCard,
       },
     );
     if (chosenCard) {
@@ -132,7 +134,7 @@ class LinksToEditor extends GlimmerComponent<Signature> {
   private createCard = restartableTask(async () => {
     let type = identifyCard(this.args.field.card) ?? baseCardRef;
     let newCard: CardDef | undefined =
-      await this.args.context?.actions?.createCard(type, undefined, {
+      await this.cardContext?.actions?.createCard(type, undefined, {
         isLinkedCard: true,
       });
     if (newCard) {
@@ -144,11 +146,10 @@ class LinksToEditor extends GlimmerComponent<Signature> {
 export function getLinksToEditor(
   model: Box<CardDef | null>,
   field: Field<typeof CardDef>,
-  context?: CardContext,
 ): ComponentLike<{ Args: {}; Blocks: {} }> {
   return class LinksToEditTemplate extends GlimmerComponent {
     <template>
-      <LinksToEditor @model={{model}} @field={{field}} @context={{context}} />
+      <LinksToEditor @model={{model}} @field={{field}} />
     </template>
   };
 }
diff --git a/packages/base/links-to-many-component.gts b/packages/base/links-to-many-component.gts
index 52de4694be..efd9b2ba6e 100644
--- a/packages/base/links-to-many-component.gts
+++ b/packages/base/links-to-many-component.gts
@@ -21,9 +21,11 @@ import {
   baseCardRef,
   identifyCard,
   getPlural,
+  CardContextName,
 } from '@cardstack/runtime-common';
 import { IconMinusCircle, IconX } from '@cardstack/boxel-ui/icons';
 import { eq } from '@cardstack/boxel-ui/helpers';
+import { consume } from 'ember-provide-consume-context';
 
 interface Signature {
   Args: {
@@ -35,11 +37,12 @@ interface Signature {
       field: Field<typeof BaseDef>,
       boxedElement: Box<BaseDef>,
     ): typeof BaseDef;
-    context?: CardContext;
   };
 }
 
 class LinksToManyEditor extends GlimmerComponent<Signature> {
+  @consume(CardContextName) declare cardContext: CardContext;
+
   <template>
     <div data-test-links-to-many={{@field.name}}>
       {{#if (eq @format 'edit')}}
@@ -53,7 +56,6 @@ class LinksToManyEditor extends GlimmerComponent<Signature> {
                     'embedded'
                     boxedElement
                     @field
-                    @context
                   )
                   as |Item|
                 }}
@@ -94,7 +96,6 @@ class LinksToManyEditor extends GlimmerComponent<Signature> {
                 'atom'
                 boxedElement
                 @field
-                @context
               )
               as |Item|
             }}
@@ -209,7 +210,7 @@ class LinksToManyEditor extends GlimmerComponent<Signature> {
       {
         offerToCreate: { ref: type, relativeTo: undefined },
         multiSelect: true,
-        createNewCard: this.args.context?.actions?.createCard,
+        createNewCard: this.cardContext?.actions?.createCard,
       },
     );
     if (chosenCard) {
@@ -231,7 +232,6 @@ export function getLinksToManyComponent({
   format,
   field,
   cardTypeFor,
-  context,
 }: {
   model: Box<CardDef>;
   arrayField: Box<CardDef[]>;
@@ -241,7 +241,6 @@ export function getLinksToManyComponent({
     field: Field<typeof BaseDef>,
     boxedElement: Box<BaseDef>,
   ): typeof BaseDef;
-  context?: CardContext;
 }): BoxComponent {
   if (format === 'edit' || format === 'atom') {
     return class LinksToManyEditorTemplate extends GlimmerComponent {
@@ -252,17 +251,10 @@ export function getLinksToManyComponent({
           @field={{field}}
           @format={{format}}
           @cardTypeFor={{cardTypeFor}}
-          @context={{context}}
         />
       </template>
     };
   } else {
-    return getPluralViewComponent(
-      arrayField,
-      field,
-      format,
-      cardTypeFor,
-      context,
-    );
+    return getPluralViewComponent(arrayField, field, format, cardTypeFor);
   }
 }
diff --git a/packages/base/package.json b/packages/base/package.json
index 52081fc654..c4da8e84ab 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -21,6 +21,7 @@
     "tracked-built-ins": "^2.0.1"
   },
   "peerDependencies": {
+    "ember-provide-consume-context": "^0.3.1",
     "ember-source": "~5.4.0"
   },
   "scripts": {}
diff --git a/packages/host/app/components/card-catalog/index.gts b/packages/host/app/components/card-catalog/index.gts
index 9292ee3587..520308e385 100644
--- a/packages/host/app/components/card-catalog/index.gts
+++ b/packages/host/app/components/card-catalog/index.gts
@@ -12,7 +12,7 @@ import { cn, eq, gt } from '@cardstack/boxel-ui/helpers';
 
 import { Eye as EyeIcon } from '@cardstack/boxel-ui/icons';
 
-import type { CardDef, CardContext } from 'https://cardstack.com/base/card-api';
+import type { CardDef } from 'https://cardstack.com/base/card-api';
 
 import CardCatalogItem from './item';
 import CardCatalogResultsHeader from './results-header';
@@ -26,7 +26,6 @@ interface Signature {
     results: RealmCards[];
     select: (card?: CardDef, ev?: KeyboardEvent | MouseEvent) => void;
     selectedCard: CardDef | undefined;
-    context?: CardContext;
   };
 }
 
@@ -60,7 +59,6 @@ export default class CardCatalog extends Component<Signature> {
                     @title={{card.title}}
                     @description={{card.description}}
                     @thumbnailURL={{card.thumbnailURL}}
-                    @context={{@context}}
                   />
                   <button
                     class='select'
diff --git a/packages/host/app/components/card-catalog/item.gts b/packages/host/app/components/card-catalog/item.gts
index dd464b6cab..7014d411da 100644
--- a/packages/host/app/components/card-catalog/item.gts
+++ b/packages/host/app/components/card-catalog/item.gts
@@ -7,8 +7,6 @@ import { cn } from '@cardstack/boxel-ui/helpers';
 
 import { RealmPaths } from '@cardstack/runtime-common/paths';
 
-import type { CardContext } from 'https://cardstack.com/base/card-api';
-
 import type CardService from '../../services/card-service';
 import type LoaderService from '../../services/loader-service';
 
@@ -18,7 +16,6 @@ interface Signature {
     title: string | null;
     description: string | null;
     thumbnailURL: string | null;
-    context?: CardContext;
   };
 }
 
diff --git a/packages/host/app/components/card-catalog/modal.gts b/packages/host/app/components/card-catalog/modal.gts
index c62e1ffd61..c994248368 100644
--- a/packages/host/app/components/card-catalog/modal.gts
+++ b/packages/host/app/components/card-catalog/modal.gts
@@ -30,7 +30,7 @@ import type { Query, Filter } from '@cardstack/runtime-common/query';
 
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 
-import type { CardDef, CardContext } from 'https://cardstack.com/base/card-api';
+import type { CardDef } from 'https://cardstack.com/base/card-api';
 
 import { getCard } from '../../resources/card-resource';
 import { getSearchResults, Search } from '../../resources/search';
@@ -51,9 +51,7 @@ import type CardService from '../../services/card-service';
 import type LoaderService from '../../services/loader-service';
 
 interface Signature {
-  Args: {
-    context?: CardContext;
-  };
+  Args: {};
 }
 
 export interface RealmCards {
@@ -136,7 +134,6 @@ export default class CardCatalogModal extends Component<Signature> {
               }}
               @select={{this.selectCard}}
               @selectedCard={{this.state.selectedCard}}
-              @context={{@context}}
             />
           {{/if}}
         </:content>
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index 627dbfa6e5..85ca0b486d 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -18,6 +18,7 @@ import {
   waitForProperty,
 } from 'ember-concurrency';
 import Modifier from 'ember-modifier';
+import { provide } from 'ember-provide-consume-context';
 import { trackedFunction } from 'ember-resources/util/function';
 
 import { TrackedArray } from 'tracked-built-ins';
@@ -45,6 +46,7 @@ import {
 import {
   type Actions,
   cardTypeDisplayName,
+  CardContextName,
   Deferred,
 } from '@cardstack/runtime-common';
 
@@ -173,9 +175,10 @@ export default class OperatorModeStackItem extends Component<Signature> {
     return this.args.index + 1 < this.args.stackItems.length;
   }
 
+  @provide(CardContextName)
+  // @ts-expect-error noUnusedLocals
   private get context() {
     return {
-      renderedIn: this as Component<any>,
       cardComponentModifier: this.cardTracker.trackElement,
       actions: this.args.publicAPI,
     };
@@ -528,11 +531,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
             {{ContentElement onSetup=this.setupContentEl}}
             data-test-stack-item-content
           >
-            <Preview
-              @card={{this.card}}
-              @format={{@item.format}}
-              @context={{this.context}}
-            />
+            <Preview @card={{this.card}} @format={{@item.format}} />
             <OperatorModeOverlays
               @renderedCardsForOverlayActions={{this.renderedCardsForOverlayActions}}
               @publicAPI={{@publicAPI}}
diff --git a/packages/host/app/components/preview.gts b/packages/host/app/components/preview.gts
index 5f68397fcb..96977c18e8 100644
--- a/packages/host/app/components/preview.gts
+++ b/packages/host/app/components/preview.gts
@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 
 import type {
   BaseDef,
-  CardContext,
   Format,
   Field,
 } from 'https://cardstack.com/base/card-api';
@@ -12,7 +11,6 @@ interface Signature {
     card: BaseDef;
     format?: Format;
     field?: Field;
-    context?: CardContext;
   };
 }
 
@@ -26,7 +24,6 @@ export default class Preview extends Component<Signature> {
       this.args.card,
       this.args.format ?? 'isolated',
       this.args.field,
-      this.args.context,
     );
   }
 }
diff --git a/packages/host/app/lib/externals.ts b/packages/host/app/lib/externals.ts
index 3ae3ff696d..a72a382b8f 100644
--- a/packages/host/app/lib/externals.ts
+++ b/packages/host/app/lib/externals.ts
@@ -16,6 +16,7 @@ import * as emberConcurrency from 'ember-concurrency';
 import * as emberConcurrencyAsyncArrowRuntime from 'ember-concurrency/-private/async-arrow-runtime';
 import * as cssUrl from 'ember-css-url';
 import * as emberModifier2 from 'ember-modifier';
+import * as emberProvideConsumeContext from 'ember-provide-consume-context';
 import * as emberResources from 'ember-resources';
 import * as ethers from 'ethers';
 import * as flat from 'flat';
@@ -59,6 +60,10 @@ export function shimExternals(virtualNetwork: VirtualNetwork) {
     emberConcurrencyAsyncArrowRuntime,
   );
   virtualNetwork.shimModule('ember-modifier', emberModifier2);
+  virtualNetwork.shimModule(
+    'ember-provide-consume-context',
+    emberProvideConsumeContext,
+  );
   virtualNetwork.shimModule('flat', flat);
   virtualNetwork.shimModule('lodash', lodash);
   virtualNetwork.shimModule('tracked-built-ins', tracked);
diff --git a/packages/host/package.json b/packages/host/package.json
index f5b5ec82d0..faf0e780c4 100644
--- a/packages/host/package.json
+++ b/packages/host/package.json
@@ -114,6 +114,7 @@
     "ember-modifier": "^4.1.0",
     "ember-moment": "^10.0.0",
     "ember-page-title": "^8.2.3",
+    "ember-provide-consume-context": "^0.3.1",
     "ember-qunit": "^8.0.1",
     "ember-resolver": "^11.0.1",
     "ember-resources": "^6.3.1",
diff --git a/packages/host/tests/helpers/render-component.ts b/packages/host/tests/helpers/render-component.ts
index 266c5b8a78..133036701e 100644
--- a/packages/host/tests/helpers/render-component.ts
+++ b/packages/host/tests/helpers/render-component.ts
@@ -10,7 +10,6 @@ import type {
   BaseDef,
   Format,
   Field,
-  CardContext,
 } from 'https://cardstack.com/base/card-api';
 
 async function cardApi(
@@ -30,10 +29,9 @@ export async function renderCard(
   card: BaseDef,
   format: Format,
   field?: Field,
-  context?: CardContext,
 ) {
   let api = await cardApi(loader);
   await api.recompute(card, { recomputeAllFields: true });
-  await renderComponent(api.getComponent(card, format, field, context));
+  await renderComponent(api.getComponent(card, format, field));
   return (getContext() as { element: Element }).element;
 }
diff --git a/packages/host/tests/integration/search-index-test.gts b/packages/host/tests/integration/search-index-test.gts
index 63e8d13656..b4bcbd5a63 100644
--- a/packages/host/tests/integration/search-index-test.gts
+++ b/packages/host/tests/integration/search-index-test.gts
@@ -2669,6 +2669,7 @@ module('Integration | search-index', function (hooks) {
         'https://packages/ember-concurrency',
         'https://packages/ember-concurrency/-private/async-arrow-runtime',
         'https://packages/ember-modifier',
+        'https://packages/ember-provide-consume-context',
         'https://packages/lodash',
         'https://packages/tracked-built-ins',
       ],
diff --git a/packages/host/types/global.d.ts b/packages/host/types/global.d.ts
index 747b60e3e0..83f553dc05 100644
--- a/packages/host/types/global.d.ts
+++ b/packages/host/types/global.d.ts
@@ -4,6 +4,15 @@ import '@glint/environment-ember-loose/native-integration';
 import { ComponentLike } from '@glint/template';
 import 'ember-freestyle/glint';
 
+import type EmberContextTemplateRegistry from 'ember-provide-consume-context/template-registry';
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry
+    extends EmberContextTemplateRegistry /* other addon registries */ {
+    // local entries
+  }
+}
+
 // Types for compiled templates
 declare module '@cardstack/host/templates/*' {
   const tmpl: TemplateFactory;
diff --git a/packages/realm-server/lib/externals.ts b/packages/realm-server/lib/externals.ts
index 7455d23977..b9dbb17dc6 100644
--- a/packages/realm-server/lib/externals.ts
+++ b/packages/realm-server/lib/externals.ts
@@ -76,6 +76,14 @@ export function shimExternals(virtualNetwork: VirtualNetwork) {
     task() {},
     restartableTask() {},
   });
+  virtualNetwork.shimModule('ember-provide-consume-context', {
+    consume() {
+      return () => {};
+    },
+    provide() {
+      return () => {};
+    },
+  });
   // import * as emberConcurrencyAsyncArrowRuntime from 'ember-concurrency/-private/async-arrow-runtime';
   virtualNetwork.shimModule('ember-concurrency/-private/async-arrow-runtime', {
     default: () => {},
diff --git a/packages/runtime-common/constants.ts b/packages/runtime-common/constants.ts
index 0b780d0cd7..8652127d2d 100644
--- a/packages/runtime-common/constants.ts
+++ b/packages/runtime-common/constants.ts
@@ -20,3 +20,5 @@ export const isField = Symbol('cardstack-field');
 export const primitive = Symbol('cardstack-primitive');
 
 export const aiBotUsername = 'aibot';
+
+export const CardContextName = 'card-context';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 409ad88776..0a77186ab7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -150,6 +150,9 @@ importers:
 
   packages/base:
     dependencies:
+      ember-provide-consume-context:
+        specifier: ^0.3.1
+        version: 0.3.1(@babel/core@7.24.3)(@ember/test-helpers@3.3.0)(ember-source@5.4.1)
       ember-source:
         specifier: ~5.4.0
         version: 5.4.1(@babel/core@7.24.3)(@glimmer/component@1.1.2)(@glint/template@1.3.0)(rsvp@4.8.5)(webpack@5.89.0)
@@ -1243,6 +1246,9 @@ importers:
       ember-page-title:
         specifier: ^8.2.3
         version: 8.2.3(ember-source@5.4.1)
+      ember-provide-consume-context:
+        specifier: ^0.3.1
+        version: 0.3.1(@babel/core@7.24.3)(@ember/test-helpers@3.3.0)(ember-source@5.4.1)
       ember-qunit:
         specifier: ^8.0.1
         version: 8.0.2(@ember/test-helpers@3.3.0)(@glint/template@1.3.0)(ember-source@5.4.1)(qunit@2.20.1)
@@ -12085,6 +12091,20 @@ packages:
       - supports-color
     dev: false
 
+  /ember-provide-consume-context@0.3.1(@babel/core@7.24.3)(@ember/test-helpers@3.3.0)(ember-source@5.4.1):
+    resolution: {integrity: sha512-bit/W23qNto4uO2H+O9NPK1klO1FwLhzwN9Goo/5cdKHKM4u0G6QFfY/vEHMaHIu97Exh1MMFtLBx5y9iZTPmw==}
+    peerDependencies:
+      '@ember/test-helpers': ^2.9.1 || ^3.0.0
+      ember-source: ^4.8.0 || ^5.0.0
+    dependencies:
+      '@ember/test-helpers': 3.3.0(@glint/template@1.3.0)(ember-source@5.4.1)(webpack@5.89.0)
+      '@embroider/addon-shim': 1.8.7
+      '@glimmer/component': 1.1.2(@babel/core@7.24.3)
+      ember-source: 5.4.1(@babel/core@7.24.3)(@glimmer/component@1.1.2)(@glint/template@1.3.0)(rsvp@4.8.5)(webpack@5.89.0)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   /ember-qunit@5.1.2(@ember/test-helpers@2.9.3)(ember-source@3.27.0)(qunit@2.19.4):
     resolution: {integrity: sha512-mrnFaUhAJWkJWeRZKajLuuRmKsifRrhAla1sQAfIiuh7OCVY1eqFvSUFzLR7/WgdNwPrUzEOOx39MdVRZBd/7A==}
     engines: {node: 10.* || 12.* || >= 14.*}