Claude Tool Use Demo: 2-Function Calling in One HTML File
CODE PREVIEW
Prompt
Create a single HTML file that demonstrates Claude's Tool Use (function calling) with two mock tools. The page should have a chat-like interface where the user can type natural language commands that trigger one of two functions: getWeather(city) or searchFlights(from, to, date). The frontend simulates the API call and displays the result in a structured card. Use a modern dark theme with gradient accents. Include a small log panel showing which function was called with its arguments. Keep it self-contained, no external dependencies beyond Swiper/GSAP/AOS if needed (not needed here).
ClaudeのTool Use（関数呼び出し）を体験できるインタラクティブデモ。2つのモック関数「getWeather(都市)」と「searchFlights(出発地, 目的地, 日付)」を用意。自然言語で「東京の天気は？」や「明日の大阪→札幌便を探して」と入力すると、意図を解析して適切な関数を呼び出し、結果をカード形式で表示。左側のログパネルには呼び出された関数名と引数が記録されるので、関数呼び出しの仕組みを学ぶのに最適です。
Prompt Overview
An interactive demo to experience Claude's Tool Use (function calling). It provides two mock functions: getWeather(city) and searchFlights(departure, destination, date). Enter natural language queries like "What's the weather in Tokyo?" or "Find flights from Osaka to Sapporo tomorrow," and the system analyzes the intent, calls the appropriate function, and displays the results in card format. The log panel on the left records the function name and arguments called, making it ideal for learning how function calling works.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選