Skip to main content

Interface: ComponentContext

core/node.ComponentContext

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

Hierarchy

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
NameTypeDescription
contextContext<T>The context holder, as returned from createContext.
valueTThe value to set.
Returns

RenderContext

The new RenderContext.

Inherited from

RenderContext.[pushContextSymbol]

Defined in

packages/ai-jsx/src/core/render.ts:198


isAppendOnlyRender

isAppendOnlyRender: boolean

Defined in

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


logger

logger: Logger

Defined in

packages/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

NameTypeDescription
contextContext<T>The context holder, as returned from createContext.

Returns

T

Inherited from

RenderContext.getContext

Defined in

packages/ai-jsx/src/core/render.ts:144


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

NameType
elementElement<T>

Returns

Element<T>

Inherited from

RenderContext.memo

Defined in

packages/ai-jsx/src/core/render.ts:189

memo(renderable): Node

Parameters

NameType
renderableRenderable

Returns

Node

Inherited from

RenderContext.memo

Defined in

packages/ai-jsx/src/core/render.ts:190


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

NameType
TIntermediatestring

Parameters

NameTypeDescription
renderableRenderableThe value to render.
opts?RenderOpts<TIntermediate, string>Additional options.

Returns

RenderResult<TIntermediate, string>

Inherited from

RenderContext.render

Defined in

packages/ai-jsx/src/core/render.ts:131

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

Type parameters

NameType
TIntermediatestring

Parameters

NameType
renderableRenderable
optsRenderOpts<TIntermediate, PartiallyRendered[]>

Returns

RenderResult<TIntermediate, PartiallyRendered[]>

Inherited from

RenderContext.render

Defined in

packages/ai-jsx/src/core/render.ts:135


wrapRender

wrapRender(getRenderer): RenderContext

Creates a new RenderContext by wrapping the existing render function.

Parameters

NameTypeDescription
getRenderer(r: StreamRenderer) => StreamRendererA function that returns the new renderer function.

Returns

RenderContext

Inherited from

RenderContext.wrapRender

Defined in

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