Support user-provided HF token instead of env variable

modified: README.md
modified: src/components/ChatInterface.jsx
new file: src/components/TokenInput.jsx
deleted: src/utils/hfClient.js

README.md

@@ -17,24 +17,12 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Features
 
-- Get Hugging Face Access Token from environment variable.
+- Support user input of Hugging Face Access Token.
 - Support UI to send user input and get response of the chatbot.
 - 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`

src/components/ChatInterface.jsx

@@ -1,13 +1,19 @@
 import { useState } from "react";
-import { hf } from "../utils/hfClient";
 import MessageInput from "./MessageInput";
 import MessagePair from "./MessagePair";
+import TokenInput from "./TokenInput";
 
 export default function ChatInterface() {
+  const [hfClient, setHFClient] = useState(null);
   const [chatHistory, setChatHistory] = useState([]);
 
   const handleMessageSend = async (message) => {
-    const result = await hf.chatCompletion({
+    if (!hfClient) {
+      alert("Please enter a valid Hugging Face token first.");
+      return;
+    }
+
+    const result = await hfClient.chatCompletion({
       model: "openai/gpt-oss-20b",
       messages: [{ role: "user", content: message }],
     });
@@ -17,6 +23,10 @@ export default function ChatInterface() {
     setChatHistory([newPair, ...chatHistory]);
   };
 
+  const handleHFClientReady = (client) => {
+    setHFClient(client);
+  };
+
   return (
     <div
       style={{
@@ -28,6 +38,11 @@ export default function ChatInterface() {
         gap: "24px",
       }}
     >
+      {/* Token input */}
+      <div>
+        <TokenInput onHFClientReady={handleHFClientReady} />
+      </div>
+
       {/* Input area */}
       <div>
         <MessageInput onSend={handleMessageSend} />

src/components/TokenInput.jsx

@@ -0,0 +1,27 @@
+import { InferenceClient } from "@huggingface/inference";
+import { useState } from "react";
+
+export default function TokenInput({ onHFClientReady }) {
+  const [token, setToken] = useState("");
+
+  const handleConfirm = async () => {
+    if (!token.trim()) return;
+    const client = new InferenceClient(token);
+    onHFClientReady(client);
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "10px" }}>
+      <input
+        type="password"
+        value={token}
+        onChange={(e) => setToken(e.target.value)}
+        placeholder="Enter Hugging Face token"
+        style={{ flex: 1, padding: "10px", fontSize: "16px" }}
+      />
+      <button onClick={handleConfirm} style={{ padding: "10px 20px" }}>
+        Confirm
+      </button>
+    </div>
+  );
+}

src/utils/hfClient.js

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