Narzędzia programistyczne innych firm umożliwiają agentom do kodowania wgląd w elementy inne niż DOM, żądania sieciowe i logi konsoli. Udostępniając narzędzia niestandardowe bezpośrednio ze swojej witryny lub platformy, umożliwiasz agentowi interakcję z niedostępnymi w inny sposób stanem aplikacji i danymi.
Te narzędzia są tworzone za pomocą JavaScriptu i automatycznie wykrywane przez Narzędzia deweloperskie w Chrome dla agentów po wczytaniu strony.
Omówienie narzędzi deweloperów innych firm
W kontekście agentów do kodowania narzędzia to gotowe funkcje, które umożliwiają agentom wykonywanie określonych działań. W przypadku narzędzi deweloperskich dla agentów mogą one udostępniać wewnętrzny stan środowiska wykonawczego bezpośrednio agentom kodującym, co wypełnia lukę między wyrenderowanymi danymi wyjściowymi a logiką wewnętrzną.
Korzystając z narzędzi innych firm, pamiętaj o tych kwestiach:
- Odkrywanie w czasie działania Narzędzia są wykrywane automatycznie, gdy aplikacja odpowiada na zdarzenie
devtoolstooldiscoverywysyłane przez Narzędzia deweloperskie w Chrome dla agentów w globalnym obiekciewindow. - Zakres kontekstu Narzędzia działają tylko w kontekście strony, która je definiuje. Nie są one zachowywane w przypadku różnych źródeł ani ponownego załadowania strony.
- Specyfika narzędzia Narzędzia są tylko dodatkowym sposobem wykonywania zadań przez agenta. Może preferować wbudowane narzędzia lub podstawowe możliwości modelu, aby spełnić prośbę. Dlatego nazwy i opisy narzędzi powinny być jak najbardziej opisowe.
Wymagania wstępne
Zanim wdrożysz narzędzia innych firm, upewnij się, że spełniasz te wymagania:
- Narzędzia deweloperskie w Chrome dla agentów Używaj wersji 0.25.0 lub nowszej.
- Włączony JavaScript. musi mieć włączoną i wykonywać obsługę JavaScriptu.
Wdrażanie narzędzia
Aby wdrożyć narzędzie, musisz nasłuchiwać określonego zdarzenia wykrywania i odpowiadać definicjami narzędzia. Poniższy kod przedstawia odpowiedź zawierającą definicje narzędzi:
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;
},
},
],
});
},
);
Aby zarejestrować narzędzia w aplikacji:
Zdefiniuj grupę narzędzi. Utwórz
ToolGroup, który zawiera nazwę, opis i tablicę poszczególnych definicji narzędzi.export interface ToolDefinition { name: string; description: string; inputSchema: JSONSchema7; execute: (args: Record<string, unknown>) => unknown; } export interface ToolGroup { name: string; description: string; tools: ToolDefinition[]; }Nasłuchuj zdarzenia wykrywania. Narzędzia deweloperskie w Chrome dla agentów wysyłają niestandardowe zdarzenie
devtoolstooldiscoverydo globalnego obiektuwindowpo każdej nawigacji i za każdym razem, gdy potrzebują zaktualizowanej listy dostępnych narzędzi.Zarejestruj narzędzia. Wywołaj metodę
respondWith()wydarzenia, aby przekazać agentowi grupę narzędzi.
Niezbędne komponenty poszczególnych narzędzi
Każda zaimplementowana definicja narzędzia musi zawierać te 3 elementy:
- Nazwa i opis Zawierają one instrukcje, których agent używa do podejmowania decyzji o tym, kiedy i jak wywołać Twoje narzędzie.
- Schemat danych wejściowych Schemat JSON, który określa strukturę i typy argumentów oczekiwanych przez narzędzie.
- Funkcja wykonywania Rzeczywisty kod JavaScript, który jest uruchamiany na stronie, gdy agent wywołuje narzędzie.
Poniższy przykład pokazuje te 3 komponenty w definicji jednego narzędzia:
{
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;
},
}
Przypadki użycia narzędzi dla programistów innych firm
Poproś agenta o sprawdzenie złożonej logiki aplikacji, a nie tylko elementów interfejsu na poziomie powierzchni. Używaj tych niestandardowych narzędzi, aby usprawnić debugowanie aplikacji stanowych lub opartych na frameworkach.
Wskazówki dotyczące odkrywania narzędzi
Twórz treściwe nazwy i opisy narzędzi. Agenci używają tych opisów jako kontekstu do decydowania, którego narzędzia użyć. Jasny język pomaga agentowi autonomicznie określać, kiedy narzędzie jest odpowiednie do danego zadania.
Debugowanie danych środowiska wykonawczego dotyczących konkretnej aplikacji
Problemy takie jak ciche nietrafienia w pamięci podręcznej czy zbędne wywołania interfejsu API są często niewidoczne podczas standardowej kontroli. Udostępniając wewnętrzne statystyki, agent może wyjaśnić, dlaczego wystąpiło określone zachowanie.
Załóżmy, że masz funkcję, która udostępnia statystyki wewnętrzne. Najpierw musisz utworzyć narzędzie podobne do tego:
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();
}
}
]
});
});
Jeśli opis narzędzia jest jasny, agent może używać go autonomicznie, gdy uzna to za stosowne. Możesz poprosić agenta o wykonanie zadania za pomocą narzędzia, np. w ten sposób:
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.
Przykład wykonania agenta: Twój agent wykrywa narzędzie getCacheStatistics udostępnione przez Twoją aplikację. Wywołuje to narzędzie, analizuje zwrócony stosunek trafień do nietrafień i wykrywa, że interfejs niepotrzebnie pobiera ponownie cały potok zamiast aktualizować lokalną pamięć podręczną.
Sprawdzanie flag funkcji
Zdefiniuj niestandardowe punkty danych, aby udostępniać bieżące zmienne środowiskowe lub flagi funkcji aktywne w przypadku konkretnej sesji użytkownika. Pomaga to w debugowaniu, dlaczego niektóre funkcje są lub nie są widoczne dla określonych użytkowników. Jeśli użytkownik zgłosi błąd, agent może sprawdzić, czy należy on do grupy eksperymentalnej, która może powodować problem.
Na przykład utwórz narzędzie takie jak to, aby zwracać stan wewnętrznej flagi funkcji:
// 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'
};
}
}
]
});
});
Jeśli opis narzędzia jest jasny, agent może używać go autonomicznie, gdy uzna to za stosowne. Możesz poprosić agenta o wykonanie zadania za pomocą narzędzia, np. w ten sposób:
Check the active feature flags and tell me if the new-ui-enabled flag is set to
true for this session.
Przykład działania agenta: Twój agent wywołuje narzędzie getFeatureFlags, potwierdza, że flaga new-ui-enabled jest aktywna, i przystępuje do debugowania komponentów powiązanych z nowym interfejsem.
Sprawdzanie globalnego stanu aplikacji
Udostępnij drzewo stanu środowiska wykonawczego aplikacji, aby pomóc agentowi zrozumieć logikę wewnętrzną bez pobierania całego DOM.
Możesz utworzyć narzędzie takie jak to, aby wysyłać zapytania dotyczące konkretnych ścieżek w drzewie stanu, np.:
// 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);
}
}
]
});
});
Jeśli opis narzędzia jest jasny, agent może używać go autonomicznie, gdy uzna to za stosowne. Możesz poprosić agenta o wykonanie zadania za pomocą narzędzia, np. w ten sposób:
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.
Przykład wykonania agenta: Twój agent wywołuje getGlobalState z parametrem path. Pobiera listę produktów z koszyka i wykrywa rozbieżność między stanem wewnętrznym a produktami wyświetlanymi na stronie.
Ważne uwagi dotyczące tego przykładu narzędzia:
- Oddzielona logika: agent AI prosi o „stan”. Ty jako deweloper decydujesz, jak zmapować to żądanie na rzeczywistą strukturę danych w funkcji
execute. - Ukierunkowane debugowanie: uwzględniając parametr
path, agent może uniknąć pobierania całego drzewa stanu (które może być bardzo duże) i skupić się tylko na odpowiedniej części, co pozwala zaoszczędzić tokeny i zwiększyć wydajność. - Ustandaryzowany interfejs: nawet jeśli zmienisz biblioteki zarządzania stanem, wystarczy, że zaktualizujesz tę jedną
executefunkcję, a agent debugowania AI nie będzie potrzebować nowych instrukcji ani narzędzi.
Sprawdzanie zawartości bazy danych
Sprawdź, czy dane backendu są zgodne ze stanem interfejsu, wysyłając zapytania do rekordów bazy danych bezpośrednio przez punkt końcowy debugowania tylko do odczytu.
Udostępnij bezpieczny punkt końcowy debugowania i utwórz narzędzie takie jak to, aby weryfikować rekordy backendu:
// 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}` };
}
}
}
]
});
});
Jeśli opis narzędzia jest jasny, agent może używać go autonomicznie, gdy uzna to za stosowne. Możesz poprosić agenta o wykonanie zadania za pomocą narzędzia, np. w ten sposób:
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.
Przykładowe wykonanie przez agenta: Twój agent wywołuje funkcję queryDatabaseTable dla tabeli zamówień. Pobiera rekord JSON, identyfikuje błąd w obliczeniach podatku na backendzie i sugeruje poprawkę logiki serwera.
Ważne uwagi dotyczące tego przykładu narzędzia:
- Bezpieczeństwo i uwierzytelnianie: nie musisz przekazywać agentowi AI danych logowania do bazy danych. Wywołanie
fetchwykorzystuje bieżącą sesję logowania w przeglądarce do autoryzacji żądania na Twoim backendzie. - Działania debugowania: jeśli agent AI wykryje błąd interfejsu, może od razu wywołać funkcję
queryDatabaseTable, aby sprawdzić, czy błąd występuje w danych źródłowych czy w obliczeniach po stronie klienta. - Minimalna konfiguracja: wystarczy udostępnić na serwerze jeden „bezpieczny” (tylko do odczytu) punkt końcowy debugowania, który akceptuje nazwę tabeli i zwraca JSON. Nie ma znaczenia, jakiego frameworka używasz do tworzenia tego punktu końcowego.