- Create new Next.js app at apps/playground for testing TPMJS tools - Implement AI SDK v6 patterns with DefaultChatTransport and UIMessage format - Create template tool package at packages/tools/hello with hello-world and hello-name tools - Use tool() and jsonSchema() helpers to avoid Zod 4 conversion issues with OpenAI - Add static tool loading system with switch statement (Next.js/webpack compatible) - Implement chat interface with tool call visualization showing inputs/outputs - Support multi-step tool execution with stepCountIs(5) - Stream responses with toUIMessageStreamResponse() for full tool support - Add sidebar showing available tools (static list) - Use parts-based message rendering for text and tool calls - Integrate firecrawl-aisdk tools (scrape, crawl, search) - Add theme toggle in header (defaults to light mode) - Fix responsive layout with max-width for message bubbles - Use biome-ignore comments for legitimate any types in tool loading 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useState } from 'react';
|
|
import type { ToolUsageStats } from '~/lib/types';
|
|
|
|
export function useToolUsage() {
|
|
const [toolUsage, setToolUsage] = useState<Map<string, ToolUsageStats>>(new Map());
|
|
|
|
const trackTool = useCallback((packageName: string) => {
|
|
setToolUsage((prev) => {
|
|
const newMap = new Map(prev);
|
|
const existing = newMap.get(packageName);
|
|
|
|
if (existing) {
|
|
newMap.set(packageName, {
|
|
...existing,
|
|
callCount: existing.callCount + 1,
|
|
lastCalledAt: new Date(),
|
|
});
|
|
} else {
|
|
newMap.set(packageName, {
|
|
packageName,
|
|
callCount: 1,
|
|
lastCalledAt: new Date(),
|
|
});
|
|
}
|
|
|
|
return newMap;
|
|
});
|
|
}, []);
|
|
|
|
const clearUsage = useCallback(() => {
|
|
setToolUsage(new Map());
|
|
}, []);
|
|
|
|
// Convert Map to array sorted by most recent first
|
|
const toolUsageArray = Array.from(toolUsage.values()).sort(
|
|
(a, b) => b.lastCalledAt.getTime() - a.lastCalledAt.getTime()
|
|
);
|
|
|
|
return {
|
|
toolUsage: toolUsageArray,
|
|
trackTool,
|
|
clearUsage,
|
|
};
|
|
}
|