KiranMantha

The Roadmap to Mastering Tool Calling in AI Agents

In this article, you will learn how to design, scale, and secure tool calling in AI agents so that the layer connecting model reasoning to real-world action holds up in production.

Topics we will cover include:

• How the tool calling protocol separates model reasoning from deterministic execution, and why that boundary matters.
• How to write tool definitions, error handling, and parallelization strategies that stay reliable as your agent scales.
• How to manage tool catalog size, secure agentic systems, and evaluate tool calls beyond end-to-end task success.

KiranMantha

{} vs Map

For simple use cases, plain objects work fine. However, Maps were specifically designed to be "true" hash tables, fixing several edge cases where objects fail or get messy. Here is what you gain by using a Map over a plain Object:

1. Key Flexibility

• Object: Keys must be Strings or Symbols. If you try to use a number or an object as a key, it gets forced into a string (e.g., {: 'val'} becomes {"1": 'val'}).
• Map: Any value can be a key, including functions, objects, or any primitive. This is huge for associating data with DOM elements or complex state.

KiranMantha

Original Issue Link: vercel/next.js#47516

Fixing Next.js + Cloudflare caching issue for _next/data with x-middleware-prefetch

When using Next.js Pages Router with getServerSideProps behind Cloudflare CDN, I ran into an issue where client-side navigations were repeatedly hitting the origin and, in some cases, rendering blank pages.

This was especially visible for routes backed by AEM Sling Models using a catch-all slug page.

---

KiranMantha

Claude Code TeammateTool - Source Code Analysis

This is not a proposal. This documents existing but hidden functionality found in Claude Code v2.1.19 binary, plus speculation on how it could be used.

---

Executive Summary

TeammateTool already exists in Claude Code. We extracted this from the compiled binary at ~/.local/share/claude/versions/2.1.19 using strings analysis. The feature is fully implemented but gated behind feature flags (I9() && qFB()).

KiranMantha

JavaScript doesn’t just run code in order — it maintains multiple queues with different priorities:

• Call Stack: Currently executing code (highest priority)
• Microtask Queue: Promises, queueMicrotask, MutationObserver
• Macrotask Queue: setTimeout, setInterval, I/O, UI events
• Render Queue: requestAnimationFrame, style/layout/paint

console.log('1: Sync');
setTimeout(() => console.log('2: Macro'), 0);

KiranMantha

The 3 a.m. Call That Changed The Way I Design APIs - The New Stack

At 3:17 a.m. on a Tuesday, my phone buzzed with the alert that would reshape the way I think about API design.

Our customer-facing API had stopped responding. Not slowly degrading; it was completely dead. Three downstream services went with it. By the time I got to my laptop, customer support tickets were flooding in.

The root cause? A single database replica had gone down, and our API had no fallback. One failure cascaded into total unavailability. I spent the next four hours manually rerouting traffic while our customers waited.

That night cost us $14,000 in service-level agreement (SLA) credits and a lot of trust. But it taught me something I now apply to every API I build: Every design decision should pass what I call “The 3 a.m. Test.”

The 3 a.m. Test

KiranMantha

The sling model will give a component that extends Container which dictates the allowed components via policy. In react component, the EditableComponent will be mapped to parent and the add components related aem container is mapped to cqPath/*. This is very important else the child container will take the focus of authoring dialog instead of whole component.

In below example, we have a aem carousel component that provide :items representing the cards or images to be displayed inside the carousel and also have title, layout, cta etc attributes that define the content placement around carousel.

On FE, the design dictates that the title should appear on left side and carousel on right. in editor mode, we should display a Add Components aem container to add the components to the carousel and we're manually iterating through cqItems[which are :items in aem java component] as children to a 3rdparty carousel component (here we're using react-slick slider as carousel that accepts slides as children)

KiranMantha

// Calander.tsx
import i18n from '@/i18n';
import { FontAwesome } from '@expo/vector-icons';
import { ReactNode, useEffect, useState } from 'react';
import { FlatList, Modal, Pressable, Text, TouchableOpacity, View } from 'react-native';
import { getStyles } from './Calander.styles';

type CalendarModalProps = {
  initialDate?: string;

KiranMantha

Youtube Resource:

• create content fragment: https://www.youtube.com/watch?v=7SFYjGjSveQ&t=9s&ab_channel=TechTalkwithRitesh
• create content fragment: https://www.youtube.com/watch?v=l9AIjvL_n8A&t=867s
• expose fragment via rest api: https://www.youtube.com/watch?v=92s3GwRISZQ&ab_channel=SankhamMarTechChannel

AEM Graphql package:

• https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/how-to/install-graphiql-aem-6-5

Note - If you are looking for content fragment creation in 6.5 classic, pls check: https://www.youtube.com/watch?v=sftCl5y4GN4&ab_channel=AdobeExperienceManagerUserGroups

KiranMantha

Original article: https://www.tothenew.com/blog/aem-with-nextjs-remotespa-a-comprehensive-integration-guide/

AEM with NextJs RemoteSPA: A Comprehensive Integration Guide | TO THE NEW Blog

Welcome to our comprehensive guide, where we illuminate the process of updating a Remote Single Page Application (SPA) – operating independently of AEM – to seamlessly consume and deliver content authored within Adobe Experience Manager (AEM). Throughout this blog, our focus centers on the local setup of an AEM instance and a Next.js application, as well as the binding necessary to make them work together harmoniously. We will also create a demo component and drop it on the home page, exposing you to working on Remote SPA with AEM.

Steps to Setup Local AEM Instance with Nextjs App

Step 1: Setup Local AEM Instance