tpmjs/apps/playground/src/hooks/useToolUsage.ts
Ajax Davis 635fc96cac feat: implement playground app with AI SDK v6 tool execution
- 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>
2025-12-04 02:51:02 +10:00

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,
};
}