Interface: ComponentContext

core/node.ComponentContext

A context that is used to render an AI.JSX component.

Hierarchy

• RenderContext

  ↳ ComponentContext

Properties

[pushContextSymbol]

• [pushContextSymbol]: <T>(context: Context<T>, value: T) => RenderContext

Type declaration

▸ <T>(context, value): RenderContext

An internal function used to set the value associated with a given context.

Type parameters

Name
T

Parameters

Name	Type	Description
context	Context<T>	The context holder, as returned from createContext.
value	T	The value to set.

Returns

RenderContext

The new RenderContext.

Inherited from

RenderContext.[pushContextSymbol]

Defined in

ai-jsx/src/core/render.ts:204

---

isAppendOnlyRender

• isAppendOnlyRender: boolean

Defined in

ai-jsx/src/core/node.ts:15

---

logger

• logger: Logger

Defined in

ai-jsx/src/core/node.ts:14

Methods

getContext

▸ getContext<T>(context): T

Gets the current value associated with a context.

Type parameters

Name
T

Parameters

Name	Type	Description
context	Context<T>	The context holder, as returned from createContext.

Returns

T

Inherited from

RenderContext.getContext

Defined in

ai-jsx/src/core/render.ts:150

---

memo

▸ memo<T>(element): Element<T>

Memoize a Renderable so it always returns the same thing.

For example, imagine you have the following:

   const catName = (
     <ChatCompletion>
       <UserMessage>Give me a cat name</UserMessage>
     </ChatCompletion>
   );

   <ChatCompletion>
     <UserMessage>
       I have a cat named {catName}. Tell me a story about {catName}.
     </UserMessage>
    </ChatCompletion>

In this case, catName will result in two separate model calls, so you'll get two different cat names.

If this is not desired, you can wrap the component in memo:

   const catName = memo(<ChatCompletion>
     <UserMessage>Give me a cat name</UserMessage>
   </ChatCompletion>);

   <ChatCompletion>
     <UserMessage>
       I have a cat named {catName}. Tell me a story about {catName}.
     </UserMessage>
    </ChatCompletion>

Now, catName will result in a single model call, and its value will be reused everywhere that component appears in the tree.

The memoization is fully recursive.

Type parameters

Name
T

Parameters

Name	Type
element	Element<T>

Returns

Element<T>

Inherited from

RenderContext.memo

Defined in

ai-jsx/src/core/render.ts:195

▸ memo(renderable): Node

Parameters

Name	Type
renderable	Renderable

Returns

Node

Inherited from

RenderContext.memo

Defined in

ai-jsx/src/core/render.ts:196

---

render

▸ render<TIntermediate>(renderable, opts?): RenderResult<TIntermediate, string>

Renders a value to a string, or if a stop function is provided, to an array of strings or Elements. The result can be awaited for the final result, or yielded from for intermediate results.

Type parameters

Name	Type
TIntermediate	string

Parameters

Name	Type	Description
renderable	Renderable	The value to render.
opts?	RenderOpts<TIntermediate, string>	Additional options.

Returns

RenderResult<TIntermediate, string>

Inherited from

RenderContext.render

Defined in

ai-jsx/src/core/render.ts:137

▸ render<TIntermediate>(renderable, opts): RenderResult<TIntermediate, PartiallyRendered[]>

Type parameters

Name	Type
TIntermediate	string

Parameters

Name	Type
renderable	Renderable
opts	RenderOpts<TIntermediate, PartiallyRendered[]>

Returns

RenderResult<TIntermediate, PartiallyRendered[]>

Inherited from

RenderContext.render

Defined in

ai-jsx/src/core/render.ts:141

---

wrapRender

▸ wrapRender(getRenderer): RenderContext

Creates a new RenderContext by wrapping the existing render function.

Parameters

Name	Type	Description
getRenderer	(r: StreamRenderer) => StreamRenderer	A function that returns the new renderer function.

Returns

RenderContext

Inherited from

RenderContext.wrapRender

Defined in

ai-jsx/src/core/render.ts:156