Hello everyone,

Here are the highlights of the new online resources we published this week from 29 Oct 2025 to 05 Nov 2025:

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant
Summary: This guide shows you how to integrate the KendoReact AI Assistant with an LLM backend (OpenAI or Azure OpenAI) through a server-side proxy. You’ll configure system and user prompts, maintain conversation state, enable streaming responses, and implement tool/function calling with custom handlers, along with token, error, and safety handling. It includes code for wiring requests and responses, provider setup, and best practices for securing API keys.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/agentic-ui-generator
Summary: Use the KendoReact Agentic UI Generator to convert natural-language requirements and optional structured inputs (for example, JSON schemas or sample data) into React code that assembles KendoReact components via an LLM-driven agent workflow. The article shows you how to install and configure the tooling and an LLM provider, invoke the generator, steer component/layout choices, iterate on the output, and export the code, with notes on customization and safety considerations.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/mcp-server
Summary: This article shows you how to integrate a Model Context Protocol (MCP) server with the KendoReact AI Assistant so your React app’s LLM can call custom tools and access resources. You’ll run or implement an MCP server that exposes JSON‑schema tools/resources, then configure the AI Assistant to connect to it and route tool invocations and results, including environment and authentication setup.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/prompt-library
Summary: Learn how to use the KendoReact AI Assistant Prompt Library to define and show reusable, parameterized prompts as suggestions in your React app. The article explains the prompt schema (id, title, text with variable placeholders and metadata), configuring variables (required flags, defaults, sources), grouping and ordering prompts, and wiring the library into the Assistant via the promptLibrary prop, with options to programmatically trigger prompts and customize rendering. It also covers passing runtime context into variables and handling events when a prompt runs.

Article: https://www.telerik.com/kendo-react-ui/components/ai-tools/ai-assistant/copilot-extension
Summary: Learn how to set up the KendoReact AI Assistant Copilot Extension to embed an AI copilot/chat experience in your React app. You’ll install and configure the extension, connect it to an OpenAI/Azure OpenAI backend via a secure server endpoint, and scaffold the Copilot UI with KendoReact components. The article also shows how to customize system prompts, actions/tools, context passing, and response handling.

Article: https://www.telerik.com/blogs/kendoreact-hackathon-winners-new-built-kendoreact-showcase
Summary: This article reviews the KendoReact Hackathon winners with concise breakdowns of what each team built, which KendoReact components they used in React, and key implementation takeaways. It also introduces updates to the Built with KendoReact Showcase so you can browse real implementations, study component usage patterns, and follow the steps to submit your own React app.

Article: https://www.telerik.com/blogs/zod-typescript-schema-validation-made-easy
Summary: Learn how to use Zod with TypeScript to define runtime-validated schemas that also infer static types, keeping validation and types in sync. The article covers core patterns—z.object, unions/intersections, optional/nullable, discriminated unions, refine/superRefine, transform, parse vs safeParse, and structured error handling—and applies them to form validation, API request/response validation, and environment variable parsing. It also shows how to compose schemas and reuse types with z.infer across frontend and backend to avoid duplicate validation logic.

Feel free to check them out and share your thoughts!

The Telerik Team

---------------------------------------------------------------------------------------------------------------------------------------------------------

Hello everyone,

Here are the highlights of the new online resources we published this week from 20 Oct 2025 to 27 Oct 2025:

Article: https://www.telerik.com/blogs/boost-site-speed-speculation-rules-api-guide-prerendering-prefetching
Summary: Learn how to use the Speculation Rules API to cut navigation latency by prerendering and prefetching likely next pages. You’ll define a script type=speculationrules with prefetch/prerender rules (document vs list, where href_matches, eagerness), follow constraints such as same-origin prerender and anonymous-client-ip-when-cross-origin for cross-origin prefetch, and gate side effects with document.prerendering and the prerenderingchange event. The guide also shows how to measure impact via PerformanceNavigationTiming (activationStart) and when to choose prefetch vs prerender.

Article: https://www.telerik.com/blogs/static-extraction-css-js-efficiency-react-apps
Summary: Learn how static extraction compiles CSS-in-JS at build time so your React app ships less JavaScript, injects fewer styles at runtime, and reduces bundle size, hydration cost, and render time. The article contrasts runtime CSS-in-JS with statically extracted CSS, outlines build setup (Babel/SWC with Webpack or Vite) to extract CSS and enable effective code splitting and tree shaking, and shows how to handle dynamic styles and validate gains with bundle analyzers and browser DevTools.

Feel free to check them out and share your thoughts!

The Telerik Team

Hi team, 

Working with complex or even slightly nested CompositeFilterDescriptors gets confusing quick, does KendoReact contain any kind of helpers for managing a filter tree, adding, updating or removeing Composite/FilterDescriptors?

My usecase is that i need to build a composite filter desc where filters contaisn a mix of FilterDescriptor and CompositeFilterDescriptor, and im hanving trouble maintianing such an object, hence the question. 

eg:

// All search mechanisms are external to the Grid component
// eg: https://www.telerik.com/kendo-react-ui/components/grid/filtering/advanced-filtering#filtering-data-grid-through-external-textbox
{
  logic: 'and',
  filters: [
    // This CompFiltDesc is controlled by a single 'Product Search' box, the goal is to find any record where 
    // ther code or description contains any of the text, so 'mix chef' and 'checf mix' return the same thing
    {
      logic: 'or',
      filters: [
        { field: 'productItem.description', operator: 'contains', value: 'chef' },
        { field: 'productItem.code', operator: 'contains', value: 'chef' },
        { field: 'productItem.description', operator: 'contains', value: 'mix' },
        { field: 'productItem.code', operator: 'contains', value: 'mix' }
      ]
    },
    {
      field: 'quantity', operator: 'isnotnull'
    },
    {
      field: 'productItem.attributes', operator: 'contains', value: 'Brand:x'
    }
  ]
}

THanks,
Grant

Hi All,

I'm Kamal Hinduja, was born in Chennai (India) and now resides in Geneva, Switzerland(Swiss). Can anybody explain how to apply a custom

theme to all Kendo React components?

Thanks, Regards

Kamal Hinduja Geneva, Switzerland

Hello Kendo UI Team,

I'm using the Kendo React StockChart component and I have two related questions regarding hover behavior and color consistency between the main chart and the navigator (mini chart):

1. Hover color mismatch:
   When I hover over a data point, the marker uses a custom stroke color. However, the hover effect (like the highlight) does not match this stroke color.
      Is there a way to make the hover color consistent with the marker’s stroke color?

2. Navigator highlight inconsistency:
   When I click on a data point in the main chart, the corresponding point in the navigator becomes highlighted, but its color doesn't match the marker’s color either (it uses the default series color).
     Can we customize the highlight color in the navigator to match the main chart marker color as well?
   

For reference, I use a visual function to customize the markers with stroke colors dynamically based on the data item. The chart works fine visually, but the hover/highlight styles are inconsistent.

Let me know if this behavior is expected or if there's a recommended way to fully align the hover and highlight colors with custom marker styles.

Thanks!

Frsqz1ns (duplicated) - StackBlitz

We are planning to use Kendo React v5.9.0 in our System and this system will be exported.
Could you please tell me the ECCN for Kendo React?

Thank you!