NEWCKEditor AI is here! Register for our AI in Enterprise webinar.
Sign up (with export icon)

AIContextProvider

Api-typedef icontypedef

The configuration of a custom option in the AI Chat menu for adding external resources to the prompt context.

A AIContextProvider represents a single menu option that, when clicked, displays a list of available resources that can be attached to the AI prompt. The label is displayed as the menu option text, and the optional icon can be used to provide a visual representation.

The getResources callback is called when the user clicks on the menu option and should return an array of available resources. Resources returned by this callback are displayed as a list and each resource comes with an optional data property that:

  • When present, it will be used as is.
  • When undefined, for instance, because the resource content is large and obtaining it along with the list is expensive, the data will be retrieved using the optional getData callback on demand the moment the user selects this particular resource.

The optional useDefaultFiltering property controls whether the built-in search filtering should be applied to the resources returned by getResources().

  • When set to true, the resources will be filtered based on the user's search query.
  • When set to false, all resources will be displayed regardless of the search query, allowing the provider to handle filtering internally within the getResources() callback.
{
	// The unique identifier of the provider.
	id: 'knowledge-base',

	// The human-readable name of the provider.
	label: 'Knowledge Base',

	// (Optional) The SVG string of the provider's icon. If not provided, a generic icon will be used instead.
	icon: '<svg xmlns="http://www.w3.org/2000/svg">...</svg>',

	// Whether to use the built-in search filtering.
	useDefaultFiltering: false,

	// The async callback to retrieve the list of available resources. Usually involves fetching data from a database or an external API
	// but here we use a simple array of resources for demonstration purposes.
	getResources: async ( query ) => [
		// Texts in various formats
		{
			id: 'text1',
			type: 'text',
			label: 'Internal note in plain text format',
			data: {
				content: 'Lorem ipsum dolor sit amet...',
				type: 'text'
			}
		},
		{
			id: 'text2',
			type: 'text',
			label: 'Internal note in Markdown format',
			data: {
				content: '## Markdown note\n\n**Lorem ipsum** dolor sit amet...',
				type: 'markdown'
			}
		},
		{
			id: 'text3',
			type: 'text',
			label: 'Internal note in HTML format',
			data: {
				content: '<h2>HTML note</h2><p>Lorem ipsum dolor sit amet...</p>',
				type: 'html'
			}
		},
		{
			id: 'text4',
			type: 'text',
			label: 'Internal note (fetched on demand)',

			// Note: Since `data` property is not provided, the content will be retrieved using the `getData()` callback (see below).
			// This, for instance, prevents fetching large resources along with the list of resources.
		},

		// URLs to resources in different formats
		{
			id: 'url1',
			type: 'web-resource',
			label: 'Blog post in Markdown',
			data: 'https://example.com/blog-post.md'
		},
		{
			id: 'url2',
			type: 'web-resource',
			label: 'Company brochure in PDF',
			data: 'https://example.com/brochure.pdf'
		},
		{
			id: 'url3',
			type: 'web-resource',
			label: 'Company website in HTML',
			data: 'https://example.com/index.html'
		},
		{
			id: 'url4',
			type: 'web-resource',
			label: 'Terms of service in plain text',
			data: 'https://example.com/terms-of-service.txt'
		},

		// ...
	],

	// (Optional) Callback to retrieve the content of resources without `data` property provided by `getResources()` callback.
	// When the user picks a specific resource,  the content will be fetched on demand (from database or external API) by this callback.
	// This prevents fetching large resources along with the list of resources.
	getData: async ( id ) => fetchDocumentContent( id )
}
Copy code

Properties

  • Chevron-right icon

    getData : ( id: string ) => Promise<string> | undefined

    The optional callback to retrieve the content of resources without data property provided by getResources callback.

    It helps to prevent fetching large resources along with the list of resources.

    Usually involves fetching data from a database or an external API.

  • Chevron-right icon

    getResources : ( query: string ) => Promise<Array<AIContextResource>>

    The callback to retrieve the list of available resources. Usually involves fetching data from a database or an external API.

  • Chevron-right icon

    icon : string | undefined

    (Optional) The SVG string of the provider's icon. If not provided, a generic icon will be used instead.

  • Chevron-right icon

    id : string

    The unique identifier of the provider.

  • Chevron-right icon

    label : string

    The human-readable name of the provider.

  • Chevron-right icon

    useDefaultFiltering : boolean | undefined

    Whether to use the built-in search filtering for resources returned by getResources.

Value

object