তৃতীয় পক্ষের ডেভেলপার টুলগুলো কোডিং এজেন্টদেরকে DOM, নেটওয়ার্ক রিকোয়েস্ট এবং কনসোল লগের বাইরেও দেখতে সক্ষম করে। আপনার ওয়েবসাইট বা ফ্রেমওয়ার্ক থেকে সরাসরি কাস্টম টুলগুলো উন্মুক্ত করার মাধ্যমে, আপনি আপনার এজেন্টকে এমন সব অ্যাপ্লিকেশন স্টেট এবং ডেটার সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেন, যা অন্যথায় নাগালের বাইরে থাকে।
এই টুলগুলি জাভাস্ক্রিপ্টের মাধ্যমে তৈরি করা হয় এবং আপনার পৃষ্ঠা লোড হওয়ার সময় Chrome DevTools for agents দ্বারা স্বয়ংক্রিয়ভাবে শনাক্ত হয়।
তৃতীয় পক্ষের ডেভেলপার টুলগুলি বুঝুন
কোডিং এজেন্টের প্রেক্ষাপটে, টুল হলো এজেন্টদের নির্দিষ্ট কাজ সম্পাদনের জন্য তৈরি ফাংশন। বিশেষ করে এজেন্টদের জন্য ডেভটুলস-এর ক্ষেত্রে, এই ধরনের টুলগুলো তাদের অভ্যন্তরীণ রানটাইম স্টেট সরাসরি কোডিং এজেন্টদের কাছে প্রকাশ করতে পারে, যা রেন্ডার করা আউটপুট এবং অভ্যন্তরীণ লজিকের মধ্যেকার ব্যবধান দূর করে।
থার্ড-পার্টি টুল ব্যবহার করার সময় নিম্নলিখিত বিষয়গুলো মনে রাখবেন:
- রানটাইম ডিসকভারি। যখন আপনার অ্যাপ্লিকেশনটি গ্লোবাল
windowঅবজেক্টে এজেন্টদের জন্য Chrome DevTools দ্বারা নির্গতdevtoolstooldiscoveryইভেন্টে সাড়া দেয়, তখন টুলগুলি স্বয়ংক্রিয়ভাবে শনাক্ত করা হয়। - কনটেক্সট স্কোপ। টুলগুলো শুধুমাত্র সেই পেজের কনটেক্সটের মধ্যেই কার্যকর হয়, যে পেজ সেগুলোকে সংজ্ঞায়িত করে। অরিজিন পরিবর্তন বা পেজ রিলোডের পর এগুলো টিকে থাকে না।
- টুলের সুনির্দিষ্টতা । টুলগুলো আপনার এজেন্টের কোনো কাজ সম্পাদনের জন্য কেবল একটি অতিরিক্ত উপায়। কোনো নির্দেশ পালনের জন্য এটি বিল্ট-ইন টুল বা মডেলের সাধারণ সক্ষমতাকেই বেশি পছন্দ করতে পারে। তাই টুলের নাম এবং বিবরণ যতটা সম্ভব বর্ণনামূলক করুন।
পূর্বশর্ত
তৃতীয় পক্ষের টুল প্রয়োগ করার আগে, নিশ্চিত করুন যে আপনি নিম্নলিখিত শর্তগুলো পূরণ করছেন:
- এজেন্টদের জন্য ক্রোম ডেভটুলস। সংস্করণ ০.২৫.০ বা তার পরবর্তী সংস্করণ ব্যবহার করুন।
- জাভাস্ক্রিপ্ট সক্রিয় করা হয়েছে। জাভাস্ক্রিপ্ট সক্রিয় এবং চালু আছে।
একটি টুল বাস্তবায়ন করুন
একটি টুল প্রয়োগ করতে, আপনাকে একটি নির্দিষ্ট ডিসকভারি ইভেন্টের জন্য অপেক্ষা করতে হয় এবং আপনার টুল ডেফিনিশনগুলো দিয়ে সাড়া দিতে হয়। নিম্নলিখিত কোডটি এমন একটি সাড়ার প্রতিনিধিত্ব করে যাতে টুল ডেফিনিশনগুলো অন্তর্ভুক্ত রয়েছে:
window.addEventListener(
'devtoolstooldiscovery',
(event: DevtoolsToolDiscoveryEvent) => {
event.respondWith({
name: 'Page-specific DevTools',
description: 'Provide runtime info directly from the JavaScript in the page.',
tools: [
{
name: 'add',
description: 'Calculates the sum of two numbers.',
inputSchema: {
type: 'object',
properties: {
a: {type: 'number'},
b: {type: 'number'},
},
required: ['a', 'b'],
},
execute: async (input: {a: number; b: number}) => {
return input.a + input.b;
},
},
],
});
},
);
আপনার অ্যাপ্লিকেশনে টুলগুলি নিবন্ধন করতে:
আপনার টুল গ্রুপ নির্ধারণ করুন। একটি
ToolGroupতৈরি করুন যাতে একটি নাম, একটি বিবরণ এবং স্বতন্ত্র টুল সংজ্ঞাগুলির একটি অ্যারে থাকবে।export interface ToolDefinition { name: string; description: string; inputSchema: JSONSchema7; execute: (args: Record<string, unknown>) => unknown; } export interface ToolGroup { name: string; description: string; tools: ToolDefinition[]; }ডিসকভারি ইভেন্টের জন্য অপেক্ষা করুন। এজেন্টদের জন্য ক্রোম ডেভটুলস প্রতিটি নেভিগেশনের পরে এবং যখনই উপলব্ধ টুলগুলির একটি আপডেট করা তালিকার প্রয়োজন হয়, তখন গ্লোবাল
windowঅবজেক্টে একটি কাস্টমdevtoolstooldiscoveryইভেন্ট প্রেরণ করে।আপনার টুলগুলো নিবন্ধন করুন। এজেন্টের কাছে আপনার টুল গ্রুপটি সরবরাহ করতে ইভেন্টের
respondWith()মেথডটি কল করুন।
স্বতন্ত্র সরঞ্জামগুলির জন্য অপরিহার্য উপাদান
আপনার প্রয়োগ করা প্রতিটি টুল সংজ্ঞায় নিম্নলিখিত তিনটি অংশ অবশ্যই অন্তর্ভুক্ত থাকতে হবে:
- নাম এবং বিবরণ। আপনার টুলটিকে কখন এবং কীভাবে কল করতে হবে, সেই সিদ্ধান্ত নেওয়ার জন্য এজেন্ট এই নির্দেশাবলী ব্যবহার করে।
- ইনপুট স্কিমা। একটি JSON স্কিমা যা টুলটির প্রত্যাশিত আর্গুমেন্টগুলোর গঠন ও প্রকারভেদ নির্ধারণ করে।
- এক্সিকিউশন ফাংশন। এটিই সেই প্রকৃত জাভাস্ক্রিপ্ট কোড যা এজেন্ট টুলটিকে আহ্বান করলে পেজে রান হয়।
নিম্নলিখিত উদাহরণটি একটি একক টুল সংজ্ঞায় এই তিনটি উপাদান দেখায়:
{
name: 'add',
description: 'Calculates the sum of two numbers.',
inputSchema: {
type: 'object',
properties: {
a: {type: 'number'},
b: {type: 'number'},
},
required: ['a', 'b'],
},
execute: async (input) => {
return input.a + input.b;
},
}
তৃতীয় পক্ষের ডেভেলপার টুলের ব্যবহারের ক্ষেত্রসমূহ
আপনার এজেন্টকে শুধু উপরিভাগের UI এলিমেন্টগুলোর পরিবর্তে অ্যাপ্লিকেশনের গভীর লজিক পরীক্ষা করতে নির্দেশ দিন। স্টেটফুল বা ফ্রেমওয়ার্ক-নির্ভর অ্যাপ্লিকেশনগুলোর ডিবাগিং সহজ করতে এই কাস্টম টুলগুলো ব্যবহার করুন।
টুল আবিষ্কারের জন্য টিপস
সরঞ্জামের বর্ণনামূলক নাম ও বিবরণ লিখুন। এজেন্টরা কোন সরঞ্জামটি ব্যবহার করবে তা ঠিক করার জন্য এই বিবরণগুলোকে প্রসঙ্গ হিসেবে ব্যবহার করে; স্পষ্ট ভাষা এজেন্টকে স্বতঃস্ফূর্তভাবে নির্ধারণ করতে সাহায্য করে যে কখন একটি সরঞ্জাম কোনো কাজের জন্য উপযুক্ত।
অ্যাপ্লিকেশন-নির্দিষ্ট রানটাইম মেট্রিক্স ডিবাগ করুন
সাইলেন্ট ক্যাশ মিস বা অপ্রয়োজনীয় এপিআই কলের মতো সমস্যাগুলো প্রায়শই সাধারণ পর্যবেক্ষণে অদৃশ্য থাকে। অভ্যন্তরীণ পরিসংখ্যান প্রকাশ করার মাধ্যমে, আপনার এজেন্ট ব্যাখ্যা করতে পারে কেন একটি নির্দিষ্ট আচরণ ঘটেছে।
ধরুন আপনার এমন একটি ফাংশন আছে যা অভ্যন্তরীণ পরিসংখ্যান প্রকাশ করে; প্রথমে, আপনাকে এই ধরনের একটি টুল তৈরি করতে হবে:
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'My app',
description: 'Tools to debug my app',
tools: [
{
name: 'getCacheStatistics',
description: 'Exposes runtime cache hits and misses for the frontend API service.',
inputSchema: {},
execute: async () => {
// Assuming window.__apiCacheService exists in your app
return window.__apiCacheService.getStats();
}
}
]
});
});
যদি আপনার টুলের বিবরণ স্পষ্ট হয়, তবে আপনার এজেন্ট প্রয়োজন মনে করলে স্বয়ংক্রিয়ভাবে টুলটি ব্যবহার করতে পারে। আপনি নিম্নলিখিত উপায়ে টুলটি ব্যবহার করে আপনার এজেন্টকে কোনো কাজ সম্পাদন করার জন্য নির্দেশ দিতে পারেন:
When I reassign a lead to a new sales rep, the dashboard takes a second to
update. Please verify if the frontend is correctly updating the local cache,
or if it is doing a full cache miss and refetching the entire pipeline from the
database.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট আপনার অ্যাপ্লিকেশন দ্বারা উন্মুক্ত করা getCacheStatistics টুলটি শনাক্ত করে। এটি টুলটিকে চালু করে, প্রাপ্ত হিট-টু-মিস অনুপাত বিশ্লেষণ করে এবং শনাক্ত করে যে ফ্রন্টএন্ড স্থানীয় ক্যাশে আপডেট করার পরিবর্তে অপ্রয়োজনীয়ভাবে সম্পূর্ণ পাইপলাইনটি পুনরায় ফেচ করছে।
ফিচার ফ্ল্যাগ পরীক্ষা করা হচ্ছে
একটি নির্দিষ্ট ব্যবহারকারী সেশনের জন্য সক্রিয় বর্তমান এনভায়রনমেন্ট ভেরিয়েবল বা ফিচার ফ্ল্যাগগুলো প্রকাশ করতে কাস্টম ডেটা পয়েন্ট সংজ্ঞায়িত করুন। এটি আপনাকে ডিবাগ করতে সাহায্য করে যে কেন নির্দিষ্ট কিছু ফিচার নির্দিষ্ট ব্যবহারকারীদের কাছে দৃশ্যমান হচ্ছে বা হচ্ছে না। যদি কোনো ব্যবহারকারী একটি বাগ রিপোর্ট করেন, এজেন্ট যাচাই করতে পারে যে তিনি এমন কোনো এক্সপেরিমেন্ট গ্রুপে আছেন কিনা যা সমস্যাটির কারণ হতে পারে।
উদাহরণস্বরূপ, অভ্যন্তরীণ ফিচার ফ্ল্যাগের অবস্থা ফেরত দেওয়ার জন্য এই ধরনের একটি টুল তৈরি করুন:
// Implementation for a website creator to expose feature flags
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'Application Configuration Tools',
description: 'Tools for inspecting runtime environment and feature toggles',
tools: [
{
name: 'getFeatureFlags',
description: 'Returns a list of all active feature flags and their current values for the session.',
inputSchema: {
type: 'object',
properties: {} // No input parameters required for this tool
},
execute: async () => {
// This should return your internal feature flag state
// Example: return window.AppConfig.getFlags();
return {
"new-ui-enabled": true,
"beta-search-v2": false,
"experiment-group": 'control',
"log-level": 'debug'
};
}
}
]
});
});
যদি আপনার টুলের বিবরণ স্পষ্ট হয়, তবে আপনার এজেন্ট প্রয়োজন মনে করলে স্বয়ংক্রিয়ভাবে টুলটি ব্যবহার করতে পারে। আপনি নিম্নলিখিত উপায়ে টুলটি ব্যবহার করে আপনার এজেন্টকে কোনো কাজ সম্পাদন করার জন্য নির্দেশ দিতে পারেন:
Check the active feature flags and tell me if the new-ui-enabled flag is set to
true for this session.
এজেন্টের কার্য সম্পাদনের উদাহরণ : আপনার এজেন্ট getFeatureFlags টুলটি চালু করে, new-ui-enabled ফ্ল্যাগটি সক্রিয় আছে কিনা তা নিশ্চিত করে এবং নতুন ইন্টারফেসের সাথে যুক্ত কম্পোনেন্টগুলো ডিবাগ করতে অগ্রসর হয়।
গ্লোবাল অ্যাপ্লিকেশন অবস্থা পরিদর্শন করুন
সম্পূর্ণ DOM ফেচ না করেই আপনার এজেন্টকে অভ্যন্তরীণ লজিক বুঝতে সাহায্য করার জন্য আপনার অ্যাপ্লিকেশনের রানটাইম স্টেট ট্রি প্রকাশ করুন।
আপনি আপনার স্টেট ট্রি-তে নির্দিষ্ট পাথগুলো কোয়েরি করার জন্য নিচের মতো একটি টুল তৈরি করতে পারেন:
// Library-agnostic implementation for inspecting global application state
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "Global State Inspector",
description: 'Tools to inspect the runtime state tree of the application',
tools: [
{
name: 'getGlobalState',
description: "Returns the current application state. Use the 'path' parameter to drill down into specific sections (for example, 'auth.user' or 'cart.items'). ",
inputSchema: {
type: 'object',
properties: {
path: {
type: 'string',
description: 'Optional dot-notation path to a specific property in the state tree.'
}
}
},
execute: async (input) => {
// Library-agnostic access:
// Website creators can point this to whatever global store they use.
const state = window.__APP_STATE__ ||
(window.store && typeof window.store.getState === 'function' ? window.store.getState() : null);
if (!state) {
return { error: 'Application state is not accessible via window.__APP_STATE__ or window.store.' };
}
if (!input.path) {
return state;
}
// Helper to resolve a dot-notated path against the state object
return input.path.split('.').reduce((acc, part) => {
return acc && acc[part] !== undefined ? acc[part] : undefined;
}, state);
}
}
]
});
});
যদি আপনার টুলের বিবরণ স্পষ্ট হয়, তবে আপনার এজেন্ট প্রয়োজন মনে করলে স্বয়ংক্রিয়ভাবে টুলটি ব্যবহার করতে পারে। আপনি নিম্নলিখিত উপায়ে টুলটি ব্যবহার করে আপনার এজেন্টকে কোনো কাজ সম্পাদন করার জন্য নির্দেশ দিতে পারেন:
The number of items in my cart is not updating. Inspect the global state at the
path cart.items and list the current items and their quantities, see if they are
the same.
এজেন্টের কার্য সম্পাদনের উদাহরণ : আপনার এজেন্ট path প্যারামিটার সহ getGlobalState কল করে। এটি কার্ট থেকে আইটেমগুলির তালিকা সংগ্রহ করে এবং অভ্যন্তরীণ অবস্থা ও পৃষ্ঠায় রেন্ডার করা আইটেমগুলির মধ্যে একটি অমিল শনাক্ত করে।
এই টুল উদাহরণটি সম্পর্কে কিছু গুরুত্বপূর্ণ বিষয়:
- বিচ্ছিন্ন লজিক : এআই এজেন্ট 'স্টেট' জানতে চায়। ডেভেলপার হিসেবে আপনিই ঠিক করেন যে
executeফাংশনের মধ্যে সেই অনুরোধটিকে আপনার প্রকৃত ডেটা স্ট্রাকচারে কীভাবে রূপ দেবেন। - নির্দিষ্ট ডিবাগিং :
pathপ্যারামিটার অন্তর্ভুক্ত করার মাধ্যমে, এজেন্ট সম্পূর্ণ স্টেট ট্রি (যা বিশাল হতে পারে) পুল করা এড়িয়ে শুধুমাত্র প্রাসঙ্গিক অংশের উপর মনোযোগ দিতে পারে, যার ফলে টোকেন সাশ্রয় হয় এবং পারফরম্যান্স উন্নত হয়। - প্রমিত ইন্টারফেস : আপনি স্টেট ম্যানেজমেন্ট লাইব্রেরি পরিবর্তন করলেও, যতক্ষণ এই একটি
executeফাংশন আপডেট করবেন, আপনার এআই ডিবাগিং এজেন্টের কোনো নতুন নির্দেশনা বা টুলের প্রয়োজন হবে না।
ডাটাবেসের বিষয়বস্তু পরিদর্শন করুন
একটি রিড-অনলি ডিবাগ এন্ডপয়েন্টের মাধ্যমে সরাসরি ডাটাবেস রেকর্ড কোয়েরি করে যাচাই করুন যে আপনার ব্যাকএন্ড ডেটা UI অবস্থার সাথে মেলে কিনা।
একটি নিরাপদ ডিবাগ এন্ডপয়েন্ট উন্মুক্ত করুন এবং ব্যাকএন্ড রেকর্ড যাচাই করার জন্য এর মতো একটি টুল তৈরি করুন:
// Framework-agnostic implementation for inspecting database content
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: 'Database Inspection Tools',
description: 'Tools to query backend database records using existing browser session',
tools: [
{
name: 'queryDatabaseTable',
description: 'Retrieves a limited set of records from a specific table. Useful for verifying that backend data matches the UI state.',
inputSchema: {
type: 'object',
properties: {
tableName: {
type: 'string',
description: 'The name of the database table to inspect.'
},
limit: {
type: 'number',
default: 5,
description: 'Maximum number of rows to return.'
}
},
required: ['tableName']
},
execute: async (input) => {
// This calls a generic debug endpoint you've set up on your server.
// It's framework-agnostic because it just expects a JSON response.
try {
const response = await fetch(`/api/debug/db-inspect?table=${input.tableName}&limit=${input.limit}`);
if (!response.ok) {
return { error: `Backend returned ${response.status}: ${response.statusText}` };
}
return await response.json();
} catch (error) {
return { error: `Failed to connect to debug endpoint: ${error.message}` };
}
}
}
]
});
});
যদি আপনার টুলের বিবরণ স্পষ্ট হয়, তবে আপনার এজেন্ট প্রয়োজন মনে করলে স্বয়ংক্রিয়ভাবে টুলটি ব্যবহার করতে পারে। আপনি নিম্নলিখিত উপায়ে টুলটি ব্যবহার করে আপনার এজেন্টকে কোনো কাজ সম্পাদন করার জন্য নির্দেশ দিতে পারেন:
The total price on the checkout page seems wrong. Query the orders table for my
last order to verify the subtotal and tax values and see what may be causing the
problem, if any.
এজেন্টের কার্য সম্পাদনের উদাহরণ : আপনার এজেন্ট orders টেবিলের জন্য queryDatabaseTable কল করে। এটি JSON রেকর্ডটি পুনরুদ্ধার করে, ব্যাকএন্ডের ট্যাক্স গণনায় একটি ত্রুটি শনাক্ত করে এবং সার্ভার লজিকের জন্য একটি সমাধানের পরামর্শ দেয়।
এই টুল উদাহরণটি সম্পর্কে কিছু গুরুত্বপূর্ণ বিষয়:
- নিরাপত্তা ও প্রমাণীকরণ : আপনাকে এআই এজেন্টের কাছে ডাটাবেস ক্রেডেনশিয়াল পাঠাতে হবে না।
fetchকলটি আপনার ব্যাকএন্ডে অনুরোধটি অনুমোদন করার জন্য ব্রাউজারের বর্তমান লগইন সেশন ব্যবহার করে। - কার্যকরী ডিবাগিং : যদি কোনো এআই এজেন্ট একটি UI বাগ শনাক্ত করে, তবে ত্রুটিটি সোর্স ডেটাতে নাকি ফ্রন্টএন্ড ক্যালকুলেশনে রয়েছে তা দেখার জন্য এটি অবিলম্বে
queryDatabaseTableকল করতে পারে। - ন্যূনতম সেটআপ : আপনাকে আপনার সার্ভারে শুধুমাত্র একটি "নিরাপদ" (রিড-অনলি) ডিবাগ এন্ডপয়েন্ট উন্মুক্ত করতে হবে, যা একটি টেবিলের নাম গ্রহণ করে এবং JSON রিটার্ন করে। সেই এন্ডপয়েন্টটি তৈরি করতে আপনি কোন ফ্রেমওয়ার্ক ব্যবহার করছেন, তা বিবেচ্য নয়।