使用 Toolhouse SDK 管理用于函数调用的 AI 工具

npm install -g create-react-app

npx create-react-app ai-scraper

cd ai-scraper

npm install @toolhouseai/sdk openai

REACT_APP_TOOLHOUSE_API_KEY=your_toolhouse_api_key
REACT_APP_OPENAI_API_KEY=your_openai_api_key

import React, { useState } from "react";
import { Toolhouse } from "@toolhouseai/sdk";
import OpenAI from "openai";
import "./App.css";

const model = "gpt-4o-mini";

function App() {
  const [url, setUrl] = useState("");
  const [prompt, setPrompt] = useState("");
  const [result, setResult] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError("");
    setResult("");

    try {
      const toolhouse = new Toolhouse({
        apiKey: process.env.REACT_APP_TOOLHOUSE_API_KEY,
        metadata: {
          id: "user_id",
          timezone: "0",
        },
      });

      const client = new OpenAI({
        apiKey: process.env.REACT_APP_OPENAI_API_KEY,
        dangerouslyAllowBrowser: true,
      });

      const messages = [
        {
          role: "user",
          content: `get the contents of ${url} and ${prompt}`,
        },
      ];

      const tools = await toolhouse.getTools();

      const chatCompletion = await client.chat.completions.create({
        messages,
        model: model,
        tools,
      });

      const openaiMessage = await toolhouse.runTools(chatCompletion);

      const newMessages = [...messages, ...openaiMessage];

      const chatCompleted = await client.chat.completions.create({
        messages: newMessages,
        model: model,
        tools,
      });

      setResult(chatCompleted?.choices[0]?.message?.content);
    } catch (err) {
      console.error("Error occurred:", err);
      setError(
        `An error occurred while processing your request. ${
          err.message || JSON.stringify(err)
        }`
      );
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container">
      <h1>AI Scraper with Toolhouse</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="url">URL</label>
          <input
            type="text"
            id="url"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            placeholder="https://example.com"
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="prompt">Prompt</label>
          <textarea
            id="prompt"
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            placeholder="Summarize the content..."
            required
          />
        </div>
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Processing..." : "Scrape and Process"}
        </button>
      </form>

      {error && <div className="error">{error}</div>}

      {result && (
        <div className="result">
          <h2>Result:</h2>
          {result}
        </div>
      )}
    </div>
  );
}

export default App;

/*  (CSS styles remain the same as in the original input) */