Ajax Davis 0658aea425 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

1.5 KiB

Raw Blame History

@tpmjs/hello

Simple example TPMJS tools for AI SDK v6 - demonstrates how to create tools that work with AI agents.

Tools

helloWorldTool

Returns a simple "Hello, World!" greeting with a timestamp.

Parameters: None

Returns:

{
  "message": "Hello, World!",
  "timestamp": "2024-12-04T..."
}

helloNameTool

Returns a personalized greeting with the provided name.

Parameters:

name (string, required): The name of the person to greet

Returns:

{
  "message": "Hello, John!",
  "timestamp": "2024-12-04T..."
}

Usage

With AI SDK v6

import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { helloWorldTool, helloNameTool } from '@tpmjs/hello';

const result = streamText({
  model: openai('gpt-4o-mini'),
  messages: [{ role: 'user', content: 'Say hello to Alice' }],
  tools: {
    helloWorld: helloWorldTool,
    helloName: helloNameTool,
  },
});

Template for Creating TPMJS Tools

This package serves as a template for creating your own TPMJS tools. Key requirements:

Use AI SDK v6 Beta (ai@6.0.0-beta.124)
Use Zod 4 for parameter validation
Export tool objects with description, parameters, and execute

Add TPMJS metadata to package.json:

"tpmjs": {
  "category": "text-analysis",
  "description": "Your tool description"
}

Include the tpmjs-tool keyword in package.json

Development

# Build
pnpm build

# Type check
pnpm type-check

# Watch mode
pnpm dev

1.5 KiB Raw Blame History