Setup Hugging Face InferenceClient using REACT_APP_HF_TOKEN

modified: README.md
modified: package-lock.json
modified: package.json
modified: src/components/ChatInterface.jsx
new file: src/utils/hfClient.js

README.md

@@ -17,11 +17,25 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Features
 
+- Get Hugging Face Access Token from environment variable.
+- Test dummy user input and show response in console log.
 - Support UI to send user input and get dummy response.
 - Keep user input and response in chat history.
 
 ## Usage
 
+### Prerequisite
+
+- Create a test token on Hugging Face with read access only.
+- Export it in your shell:\
+  `export REACT_APP_HF_TOKEN=your_test_token`
+
+### Security note
+
+- The token is bundled into client-side JS and visible in browser DevTools.
+- For testing, create a temporary token with read-only permission.
+- After testing, revoke or delete the token to prevent exposure.
+
 ### Development mode
 
 - `npm start`

package-lock.json

@@ -8,6 +8,7 @@
       "name": "react-template",
       "version": "0.1.0",
       "dependencies": {
+        "@huggingface/inference": "^4.8.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
@@ -2443,6 +2444,34 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@huggingface/inference": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.8.0.tgz",
+      "integrity": "sha512-Eq98EAXqYn4rKMfrbEXuhc3IjKfaeIO6eXNOZk9xk6v5akrIWRtd6d1h0fjAWyX4zRbdUpXRh6MvsqXnzGvXCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/jinja": "^0.5.1",
+        "@huggingface/tasks": "^0.19.45"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/jinja": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/jinja/-/jinja-0.5.1.tgz",
+      "integrity": "sha512-yUZLld4lrM9iFxHCwFQ7D1HW2MWMwSbeB7WzWqFYDWK+rEb+WldkLdAJxUPOmgICMHZLzZGVcVjFh3w/YGubng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@huggingface/tasks": {
+      "version": "0.19.46",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.46.tgz",
+      "integrity": "sha512-c6F/r7zRQjmyo6Ji8c2TUbdeeu6WAdZxYLRd+G7Xxvfbadi6iDwk2szt/oinC5v5Ljyc2sjzesaqGB6hLWy/DA==",
+      "license": "MIT"
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@huggingface/inference": "^4.8.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

src/components/ChatInterface.jsx

@@ -1,10 +1,23 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { hf } from "../utils/hfClient";
 import MessageInput from "./MessageInput";
 import MessagePair from "./MessagePair";
 
 export default function ChatInterface() {
   const [chatHistory, setChatHistory] = useState([]);
 
+  useEffect(() => {
+    const testHF = async () => {
+      const result = await hf.chatCompletion({
+        model: "openai/gpt-oss-20b",
+        messages: [{ role: "user", content: "Hello!" }],
+      });
+      console.log("HF：", result.choices[0].message.content);
+    };
+
+    testHF();
+  }, []);
+
   const handleMessageSend = (message) => {
     const fakeResponse =
       "This is a simulated response.\nIt can span multiple lines.";

src/utils/hfClient.js

@@ -0,0 +1,5 @@
+import { InferenceClient } from "@huggingface/inference";
+
+const HF_TOKEN = process.env.REACT_APP_HF_TOKEN;
+
+export const hf = new InferenceClient(HF_TOKEN);