@mcp-fe/react-tools 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  Simplify dynamic MCP tool integration in React applications with automatic lifecycle management, reference counting, and full access to React features.
6
6
 
7
+ > 🔗 **Requires**: [@mcp-fe/mcp-worker](https://www.npmjs.com/package/@mcp-fe/mcp-worker) - The browser-based MCP server that powers these React hooks.
8
+
7
9
  ## ✨ Key Features
8
10
 
9
11
  - 🔄 **Automatic Lifecycle** - Register on mount, unregister on unmount
@@ -13,22 +15,49 @@ Simplify dynamic MCP tool integration in React applications with automatic lifec
13
15
  - 🔌 **Optional Context** - Works standalone or with Provider
14
16
  - 📘 **TypeScript First** - Complete type safety out of the box
15
17
 
16
- ## 📦 Installation
18
+ ## ⚠️ Prerequisites
19
+
20
+ This library requires **[@mcp-fe/mcp-worker](https://www.npmjs.com/package/@mcp-fe/mcp-worker)** to function. The worker library runs an MCP server in your browser that enables AI agents to interact with your application.
21
+
22
+ **You must install and initialize the worker library first:**
17
23
 
18
24
  ```bash
19
- npm install @mcp-fe/react-tools
25
+ npm install @mcp-fe/mcp-worker @mcp-fe/react-tools
20
26
  ```
21
27
 
22
28
  ```bash
23
- pnpm add @mcp-fe/react-tools
29
+ pnpm add @mcp-fe/mcp-worker @mcp-fe/react-tools
24
30
  ```
25
31
 
26
32
  ```bash
27
- yarn add @mcp-fe/react-tools
33
+ yarn add @mcp-fe/mcp-worker @mcp-fe/react-tools
28
34
  ```
29
35
 
36
+ > 💡 **New to MCP Worker?** Check out the [@mcp-fe/mcp-worker documentation](https://www.npmjs.com/package/@mcp-fe/mcp-worker) to set up the browser-based MCP server first.
37
+
38
+
30
39
  ## 🚀 Quick Example
31
40
 
41
+ **Step 1:** Wrap your app with `MCPToolsProvider`:
42
+
43
+ ```tsx
44
+ import { MCPToolsProvider } from '@mcp-fe/react-tools';
45
+
46
+ function App() {
47
+ return (
48
+ <MCPToolsProvider
49
+ backendWsUrl="ws://localhost:3001"
50
+ authToken="your-auth-token"
51
+ onInitialized={() => console.log('MCP ready!')}
52
+ >
53
+ <MyApp />
54
+ </MCPToolsProvider>
55
+ );
56
+ }
57
+ ```
58
+
59
+ **Step 2:** Register tools with React hooks in your components:
60
+
32
61
  ```tsx
33
62
  import { useMCPTool } from '@mcp-fe/react-tools';
34
63
 
@@ -58,6 +87,10 @@ function MyComponent() {
58
87
  }
59
88
  ```
60
89
 
90
+ > 💡 **Alternative:** You can also initialize the worker client manually outside React. See the [Getting Started Guide](./docs/getting-started.md) for details.
91
+
92
+ > 📖 **Need more details?** See the [Complete Setup Guide](./docs/getting-started.md) for step-by-step instructions.
93
+
61
94
  ## 📚 Documentation
62
95
 
63
96
  **[📖 View Complete Documentation →](./docs/index.md)**
@@ -32,6 +32,10 @@ export interface MCPToolsProviderProps {
32
32
  * Backend WebSocket URL
33
33
  */
34
34
  backendWsUrl?: string;
35
+ /**
36
+ * Authentication token for MCP server
37
+ */
38
+ authToken?: string | null;
35
39
  /**
36
40
  * Other worker client init options
37
41
  */
@@ -59,14 +63,15 @@ export interface MCPToolsProviderProps {
59
63
  * }
60
64
  * ```
61
65
  *
62
- * @example With callbacks:
66
+ * @example With authentication token:
63
67
  * ```tsx
64
68
  * function App() {
69
+ * const token = getAuthToken(); // get token from your auth provider
70
+ *
65
71
  * return (
66
72
  * <MCPToolsProvider
67
73
  * backendWsUrl="ws://localhost:3001"
68
- * onInitialized={() => console.log('MCP Tools ready!')}
69
- * onInitError={(err) => console.error('MCP init failed:', err)}
74
+ * authToken={token}
70
75
  * >
71
76
  * <YourApp />
72
77
  * </MCPToolsProvider>
@@ -74,6 +79,7 @@ export interface MCPToolsProviderProps {
74
79
  * }
75
80
  * ```
76
81
  *
82
+ *
77
83
  * @example Manual initialization:
78
84
  * ```tsx
79
85
  * function App() {
@@ -95,7 +101,7 @@ export interface MCPToolsProviderProps {
95
101
  * }
96
102
  * ```
97
103
  */
98
- export declare function MCPToolsProvider({ children, autoInit, backendWsUrl, initOptions, onInitialized, onInitError, }: MCPToolsProviderProps): import("react/jsx-runtime").JSX.Element;
104
+ export declare function MCPToolsProvider({ children, autoInit, backendWsUrl, authToken, initOptions, onInitialized, onInitError, }: MCPToolsProviderProps): import("react/jsx-runtime").JSX.Element;
99
105
  /**
100
106
  * Hook to access MCP Tools context
101
107
  *
@@ -1 +1 @@
1
- {"version":3,"file":"MCPToolsContext.d.ts","sourceRoot":"","sources":["../../../../libs/react-tools/src/context/MCPToolsContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAgB,KAAK,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,UAAU,oBAAoB;IAC5B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,eAAe,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE,uBAAuB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjE;;OAEG;IACH,mBAAmB,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAC7C;AAID,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAe,EACf,YAAoC,EACpC,WAAW,EACX,aAAa,EACb,WAAW,GACZ,EAAE,qBAAqB,2CAkFvB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,UAAQ,GAAG,oBAAoB,CAsBvE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAG3C"}
1
+ {"version":3,"file":"MCPToolsContext.d.ts","sourceRoot":"","sources":["../../../../libs/react-tools/src/context/MCPToolsContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAAgB,KAAK,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,UAAU,oBAAoB;IAC5B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,eAAe,EAAE,MAAM,EAAE,CAAC;IAE1B;;OAEG;IACH,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE,uBAAuB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAEjE;;OAEG;IACH,mBAAmB,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC;CAC7C;AAID,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAEtC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAe,EACf,YAAoC,EACpC,SAAS,EACT,WAAW,EACX,aAAa,EACb,WAAW,GACZ,EAAE,qBAAqB,2CAsGvB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,UAAQ,GAAG,oBAAoB,CAsBvE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAG3C"}
@@ -135,19 +135,4 @@ export interface UseMCPToolResult {
135
135
  * ```
136
136
  */
137
137
  export declare function useMCPTool(options: UseMCPToolOptions): UseMCPToolResult;
138
- /**
139
- * Utility function to check if a tool is registered
140
- */
141
- export declare function isToolRegistered(name: string): boolean;
142
- /**
143
- * Utility function to get all registered tools
144
- */
145
- export declare function getRegisteredTools(): string[];
146
- /**
147
- * Utility function to get tool info
148
- */
149
- export declare function getToolInfo(name: string): {
150
- refCount: number;
151
- isRegistered: boolean;
152
- } | null;
153
138
  //# sourceMappingURL=useMCPTool.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useMCPTool.d.ts","sourceRoot":"","sources":["../../../../libs/react-tools/src/hooks/useMCPTool.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAErC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvC;;OAEG;IACH,OAAO,EAAE,WAAW,CAAC;IAErB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9B;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAuKvE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEtD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,GACX;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAEpD"}
1
+ {"version":3,"file":"useMCPTool.d.ts","sourceRoot":"","sources":["../../../../libs/react-tools/src/hooks/useMCPTool.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAErC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvC;;OAEG;IACH,OAAO,EAAE,WAAW,CAAC;IAErB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,YAAY,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE9B;;OAEG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAuKvE"}
package/index.d.ts CHANGED
@@ -13,8 +13,9 @@
13
13
  * See the License for the specific language governing permissions and
14
14
  * limitations under the License.
15
15
  */
16
- export { useMCPTool, isToolRegistered, getRegisteredTools, getToolInfo, } from './hooks/useMCPTool';
16
+ export { useMCPTool } from './hooks/useMCPTool';
17
17
  export type { UseMCPToolOptions, UseMCPToolResult } from './hooks/useMCPTool';
18
+ export { isToolRegistered, getRegisteredTools, getToolInfo, getToolDetails, } from './utils';
18
19
  export { useMCPGetter, useMCPAction } from './hooks/useMCPToolHelpers';
19
20
  export { MCPToolsProvider, useMCPToolsContext, useHasMCPProvider, } from './context/MCPToolsContext';
20
21
  export type { MCPToolsProviderProps } from './context/MCPToolsContext';
package/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/react-tools/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EACL,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,GACZ,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/react-tools/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE9E,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,WAAW,EACX,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEvE,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}
package/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),f=require("@mcp-fe/mcp-worker"),D=require("react/jsx-runtime");function m(r){const{name:t,description:s,inputSchema:c,outputSchema:n,handler:l,annotations:u,execution:C,_meta:g,icons:d,title:P,autoRegister:T=!0,autoUnregister:S=!0}=r,[h,a]=e.useState(null),i=e.useRef(l),R=e.useRef(t),w=e.useRef(s),k=e.useRef(c),p=e.useRef(n),v=e.useRef(u),b=e.useRef(C),I=e.useRef(g),E=e.useRef(d),z=e.useRef(P),N=e.useRef(!0),y=e.useRef(!1);e.useEffect(()=>{i.current=l,R.current=t,w.current=s,k.current=c,p.current=n,v.current=u,b.current=C,I.current=g,E.current=d,z.current=P},[l,t,s,c,n,u,C,g,d,P]);const A=e.useCallback(async o=>i.current(o),[]),q=e.useCallback(async()=>{const o=R.current,M=w.current,H=k.current,O=p.current,U=v.current,F=b.current,G=I.current,J=E.current,_=z.current;try{await f.workerClient.registerTool(o,M,H,A,{outputSchema:O,annotations:U,execution:F,_meta:G,icons:J,title:_}),y.current=!0,console.log(`[useMCPTool] Registered tool '${o}'`)}catch(j){throw console.error(`[useMCPTool] Failed to register tool '${o}':`,j),j}},[A]),$=e.useCallback(async()=>{const o=R.current;try{await f.workerClient.unregisterTool(o),y.current=!1,console.log(`[useMCPTool] Unregistered tool '${o}'`)}catch(M){console.error(`[useMCPTool] Failed to unregister tool '${o}':`,M)}},[]);return e.useEffect(()=>f.workerClient.onToolChange(t,M=>{a(M)}),[t]),e.useEffect(()=>(T&&q().catch(o=>{console.error(`[useMCPTool] Auto-register failed for '${t}':`,o)}),()=>{N.current=!1,S&&y.current&&$().catch(o=>{console.error(`[useMCPTool] Auto-unregister failed for '${t}':`,o)})}),[t]),{isRegistered:h?.isRegistered??!1,refCount:h?.refCount??0,register:q,unregister:$}}function W(r){return f.workerClient.isToolRegistered(r)}function B(){return f.workerClient.getRegisteredTools()}function K(r){return f.workerClient.getToolInfo(r)}function L(r,t,s,c){const n=e.useCallback(async()=>{const l=await s();return{content:[{type:"text",text:JSON.stringify(l,null,2)}]}},[s]);return m({name:r,description:t,inputSchema:{type:"object",properties:{}},handler:n,...c})}function Q(r,t,s,c,n){const l=e.useCallback(async u=>{const C=await c(u);return{content:[{type:"text",text:JSON.stringify(C,null,2)}]}},[c]);return m({name:r,description:t,inputSchema:{type:"object",properties:s,...n?.required&&{required:n.required}},handler:l,autoRegister:n?.autoRegister,autoUnregister:n?.autoUnregister})}const x=e.createContext(null);function V({children:r,autoInit:t=!0,backendWsUrl:s="ws://localhost:3001",initOptions:c,onInitialized:n,onInitError:l}){const[u,C]=e.useState(!1),[g,d]=e.useState(!1),[P]=e.useState([]),T=e.useCallback(async a=>{if(u){console.log("[MCPToolsProvider] Already initialized");return}try{const i=a||c||{backendWsUrl:s};console.log("[MCPToolsProvider] Initializing worker client...",i),await f.workerClient.init(i),C(!0);const R=await f.workerClient.getConnectionStatus();d(R),f.workerClient.onConnectionStatus(w=>{d(w)}),console.log("[MCPToolsProvider] Worker client initialized"),n?.()}catch(i){throw console.error("[MCPToolsProvider] Initialization failed:",i),l?.(i instanceof Error?i:new Error(String(i))),i}},[u,c,s,n,l]),S=e.useCallback(async()=>{const a=await f.workerClient.getConnectionStatus();return d(a),a},[]);e.useEffect(()=>{t&&T().catch(a=>{console.error("[MCPToolsProvider] Auto-init failed:",a)})},[t,T]),e.useEffect(()=>{if(!u)return;const a=setInterval(()=>{},5e3);return()=>clearInterval(a)},[u]);const h={isInitialized:u,isConnected:g,registeredTools:P,initialize:T,getConnectionStatus:S};return D.jsx(x.Provider,{value:h,children:r})}function X(r=!1){const t=e.useContext(x);if(!t&&r)throw new Error("useMCPToolsContext must be used within MCPToolsProvider. Either wrap your component tree with <MCPToolsProvider> or set strict=false.");return t||{isInitialized:!1,isConnected:!1,registeredTools:[],initialize:async()=>{throw new Error("MCPToolsProvider not found")},getConnectionStatus:async()=>!1}}function Y(){return e.useContext(x)!==null}exports.MCPToolsProvider=V;exports.getRegisteredTools=B;exports.getToolInfo=K;exports.isToolRegistered=W;exports.useHasMCPProvider=Y;exports.useMCPAction=Q;exports.useMCPGetter=L;exports.useMCPTool=m;exports.useMCPToolsContext=X;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),i=require("@mcp-fe/mcp-worker"),_=require("react/jsx-runtime");function m(o){const{name:t,description:l,inputSchema:r,outputSchema:s,handler:f,annotations:C,execution:c,_meta:g,icons:P,title:d,autoRegister:S=!0,autoUnregister:T=!0}=o,[M,y]=e.useState(null),a=e.useRef(f),u=e.useRef(t),w=e.useRef(l),h=e.useRef(r),v=e.useRef(s),x=e.useRef(C),b=e.useRef(c),I=e.useRef(g),E=e.useRef(P),A=e.useRef(d),D=e.useRef(!0),k=e.useRef(!1);e.useEffect(()=>{a.current=f,u.current=t,w.current=l,h.current=r,v.current=s,x.current=C,b.current=c,I.current=g,E.current=P,A.current=d},[f,t,l,r,s,C,c,g,P,d]);const z=e.useCallback(async n=>a.current(n),[]),q=e.useCallback(async()=>{const n=u.current,R=w.current,N=h.current,H=v.current,O=x.current,U=b.current,F=I.current,G=E.current,J=A.current;try{await i.workerClient.registerTool(n,R,N,z,{outputSchema:H,annotations:O,execution:U,_meta:F,icons:G,title:J}),k.current=!0,console.log(`[useMCPTool] Registered tool '${n}'`)}catch(j){throw console.error(`[useMCPTool] Failed to register tool '${n}':`,j),j}},[z]),$=e.useCallback(async()=>{const n=u.current;try{await i.workerClient.unregisterTool(n),k.current=!1,console.log(`[useMCPTool] Unregistered tool '${n}'`)}catch(R){console.error(`[useMCPTool] Failed to unregister tool '${n}':`,R)}},[]);return e.useEffect(()=>i.workerClient.onToolChange(t,R=>{y(R)}),[t]),e.useEffect(()=>(S&&q().catch(n=>{console.error(`[useMCPTool] Auto-register failed for '${t}':`,n)}),()=>{D.current=!1,T&&k.current&&$().catch(n=>{console.error(`[useMCPTool] Auto-unregister failed for '${t}':`,n)})}),[t]),{isRegistered:M?.isRegistered??!1,refCount:M?.refCount??0,register:q,unregister:$}}function W(o){return i.workerClient.isToolRegistered(o)}function B(){return i.workerClient.getRegisteredTools()}function K(o){return i.workerClient.getToolInfo(o)}function L(o){return i.workerClient.getToolDetails(o)}function Q(o,t,l,r){const s=e.useCallback(async()=>{const f=await l();return{content:[{type:"text",text:JSON.stringify(f,null,2)}]}},[l]);return m({name:o,description:t,inputSchema:{type:"object",properties:{}},handler:s,...r})}function V(o,t,l,r,s){const f=e.useCallback(async C=>{const c=await r(C);return{content:[{type:"text",text:JSON.stringify(c,null,2)}]}},[r]);return m({name:o,description:t,inputSchema:{type:"object",properties:l,...s?.required&&{required:s.required}},handler:f,autoRegister:s?.autoRegister,autoUnregister:s?.autoUnregister})}const p=e.createContext(null);function X({children:o,autoInit:t=!0,backendWsUrl:l="ws://localhost:3001",authToken:r,initOptions:s,onInitialized:f,onInitError:C}){const[c,g]=e.useState(!1),[P,d]=e.useState(!1),[S]=e.useState([]),T=e.useCallback(async a=>{if(c){console.log("[MCPToolsProvider] Already initialized");return}try{const u=a||s||{backendWsUrl:l};console.log("[MCPToolsProvider] Initializing worker client...",u),await i.workerClient.init(u),r&&(console.log("[MCPToolsProvider] Setting auth token..."),i.workerClient.setAuthToken(r)),g(!0);const w=await i.workerClient.getConnectionStatus();d(w),i.workerClient.onConnectionStatus(h=>{d(h)}),console.log("[MCPToolsProvider] Worker client initialized"),f?.()}catch(u){throw console.error("[MCPToolsProvider] Initialization failed:",u),C?.(u instanceof Error?u:new Error(String(u))),u}},[c,s,l,r,f,C]),M=e.useCallback(async()=>{const a=await i.workerClient.getConnectionStatus();return d(a),a},[]);e.useEffect(()=>{t&&T().catch(a=>{console.error("[MCPToolsProvider] Auto-init failed:",a)})},[t,T]),e.useEffect(()=>{c&&r&&(console.log("[MCPToolsProvider] Auth token changed, updating..."),i.workerClient.setAuthToken(r))},[r,c]),e.useEffect(()=>{if(!c)return;const a=setInterval(()=>{},5e3);return()=>clearInterval(a)},[c]);const y={isInitialized:c,isConnected:P,registeredTools:S,initialize:T,getConnectionStatus:M};return _.jsx(p.Provider,{value:y,children:o})}function Y(o=!1){const t=e.useContext(p);if(!t&&o)throw new Error("useMCPToolsContext must be used within MCPToolsProvider. Either wrap your component tree with <MCPToolsProvider> or set strict=false.");return t||{isInitialized:!1,isConnected:!1,registeredTools:[],initialize:async()=>{throw new Error("MCPToolsProvider not found")},getConnectionStatus:async()=>!1}}function Z(){return e.useContext(p)!==null}exports.MCPToolsProvider=X;exports.getRegisteredTools=B;exports.getToolDetails=L;exports.getToolInfo=K;exports.isToolRegistered=W;exports.useHasMCPProvider=Z;exports.useMCPAction=V;exports.useMCPGetter=Q;exports.useMCPTool=m;exports.useMCPToolsContext=Y;
package/index.mjs CHANGED
@@ -1,204 +1,217 @@
1
- import { useState as y, useRef as n, useEffect as R, useCallback as C, createContext as Q, useContext as F } from "react";
2
- import { workerClient as f } from "@mcp-fe/mcp-worker";
1
+ import { useState as y, useRef as u, useEffect as P, useCallback as C, createContext as Q, useContext as k } from "react";
2
+ import { workerClient as c } from "@mcp-fe/mcp-worker";
3
3
  import { jsx as V } from "react/jsx-runtime";
4
- function H(t) {
4
+ function F(t) {
5
5
  const {
6
6
  name: e,
7
- description: s,
8
- inputSchema: c,
9
- outputSchema: o,
10
- handler: a,
11
- annotations: i,
12
- execution: d,
13
- _meta: P,
14
- icons: g,
15
- title: T,
16
- autoRegister: h = !0,
17
- autoUnregister: x = !0
18
- } = t, [p, l] = y(null), u = n(a), m = n(e), w = n(s), I = n(c), b = n(o), z = n(i), A = n(d), E = n(P), $ = n(g), N = n(T), J = n(!0), S = n(!1);
19
- R(() => {
20
- u.current = a, m.current = e, w.current = s, I.current = c, b.current = o, z.current = i, A.current = d, E.current = P, $.current = g, N.current = T;
7
+ description: l,
8
+ inputSchema: o,
9
+ outputSchema: n,
10
+ handler: f,
11
+ annotations: d,
12
+ execution: s,
13
+ _meta: T,
14
+ icons: h,
15
+ title: g,
16
+ autoRegister: S = !0,
17
+ autoUnregister: M = !0
18
+ } = t, [R, x] = y(null), a = u(f), i = u(e), p = u(l), w = u(o), A = u(n), b = u(d), z = u(s), E = u(T), $ = u(h), N = u(g), H = u(!0), v = u(!1);
19
+ P(() => {
20
+ a.current = f, i.current = e, p.current = l, w.current = o, A.current = n, b.current = d, z.current = s, E.current = T, $.current = h, N.current = g;
21
21
  }, [
22
- a,
22
+ f,
23
23
  e,
24
- s,
25
- c,
24
+ l,
26
25
  o,
27
- i,
26
+ n,
28
27
  d,
29
- P,
30
- g,
31
- T
28
+ s,
29
+ T,
30
+ h,
31
+ g
32
32
  ]);
33
- const j = C(async (r) => u.current(r), []), k = C(async () => {
34
- const r = m.current, M = w.current, O = I.current, _ = b.current, D = z.current, G = A.current, B = E.current, K = $.current, L = N.current;
33
+ const j = C(async (r) => a.current(r), []), q = C(async () => {
34
+ const r = i.current, m = p.current, J = w.current, O = A.current, _ = b.current, G = z.current, B = E.current, K = $.current, L = N.current;
35
35
  try {
36
- await f.registerTool(
36
+ await c.registerTool(
37
37
  r,
38
- M,
39
- O,
38
+ m,
39
+ J,
40
40
  j,
41
41
  {
42
- outputSchema: _,
43
- annotations: D,
42
+ outputSchema: O,
43
+ annotations: _,
44
44
  execution: G,
45
45
  _meta: B,
46
46
  icons: K,
47
47
  title: L
48
48
  }
49
- ), S.current = !0, console.log(`[useMCPTool] Registered tool '${r}'`);
49
+ ), v.current = !0, console.log(`[useMCPTool] Registered tool '${r}'`);
50
50
  } catch (U) {
51
51
  throw console.error(
52
52
  `[useMCPTool] Failed to register tool '${r}':`,
53
53
  U
54
54
  ), U;
55
55
  }
56
- }, [j]), q = C(async () => {
57
- const r = m.current;
56
+ }, [j]), D = C(async () => {
57
+ const r = i.current;
58
58
  try {
59
- await f.unregisterTool(r), S.current = !1, console.log(`[useMCPTool] Unregistered tool '${r}'`);
60
- } catch (M) {
59
+ await c.unregisterTool(r), v.current = !1, console.log(`[useMCPTool] Unregistered tool '${r}'`);
60
+ } catch (m) {
61
61
  console.error(
62
62
  `[useMCPTool] Failed to unregister tool '${r}':`,
63
- M
63
+ m
64
64
  );
65
65
  }
66
66
  }, []);
67
- return R(() => f.onToolChange(e, (M) => {
68
- l(M);
69
- }), [e]), R(() => (h && k().catch((r) => {
67
+ return P(() => c.onToolChange(e, (m) => {
68
+ x(m);
69
+ }), [e]), P(() => (S && q().catch((r) => {
70
70
  console.error(
71
71
  `[useMCPTool] Auto-register failed for '${e}':`,
72
72
  r
73
73
  );
74
74
  }), () => {
75
- J.current = !1, x && S.current && q().catch((r) => {
75
+ H.current = !1, M && v.current && D().catch((r) => {
76
76
  console.error(
77
77
  `[useMCPTool] Auto-unregister failed for '${e}':`,
78
78
  r
79
79
  );
80
80
  });
81
81
  }), [e]), {
82
- isRegistered: p?.isRegistered ?? !1,
83
- refCount: p?.refCount ?? 0,
84
- register: k,
85
- unregister: q
82
+ isRegistered: R?.isRegistered ?? !1,
83
+ refCount: R?.refCount ?? 0,
84
+ register: q,
85
+ unregister: D
86
86
  };
87
87
  }
88
88
  function Z(t) {
89
- return f.isToolRegistered(t);
89
+ return c.isToolRegistered(t);
90
90
  }
91
91
  function ee() {
92
- return f.getRegisteredTools();
92
+ return c.getRegisteredTools();
93
93
  }
94
94
  function te(t) {
95
- return f.getToolInfo(t);
95
+ return c.getToolInfo(t);
96
+ }
97
+ function oe(t) {
98
+ return c.getToolDetails(t);
96
99
  }
97
- function re(t, e, s, c) {
98
- const o = C(async () => {
99
- const a = await s();
100
+ function re(t, e, l, o) {
101
+ const n = C(async () => {
102
+ const f = await l();
100
103
  return {
101
104
  content: [
102
105
  {
103
106
  type: "text",
104
- text: JSON.stringify(a, null, 2)
107
+ text: JSON.stringify(f, null, 2)
105
108
  }
106
109
  ]
107
110
  };
108
- }, [s]);
109
- return H({
111
+ }, [l]);
112
+ return F({
110
113
  name: t,
111
114
  description: e,
112
115
  inputSchema: {
113
116
  type: "object",
114
117
  properties: {}
115
118
  },
116
- handler: o,
117
- ...c
119
+ handler: n,
120
+ ...o
118
121
  });
119
122
  }
120
- function oe(t, e, s, c, o) {
121
- const a = C(
122
- async (i) => {
123
- const d = await c(i);
123
+ function ne(t, e, l, o, n) {
124
+ const f = C(
125
+ async (d) => {
126
+ const s = await o(d);
124
127
  return {
125
128
  content: [
126
129
  {
127
130
  type: "text",
128
- text: JSON.stringify(d, null, 2)
131
+ text: JSON.stringify(s, null, 2)
129
132
  }
130
133
  ]
131
134
  };
132
135
  },
133
- [c]
136
+ [o]
134
137
  );
135
- return H({
138
+ return F({
136
139
  name: t,
137
140
  description: e,
138
141
  inputSchema: {
139
142
  type: "object",
140
- properties: s,
141
- ...o?.required && { required: o.required }
143
+ properties: l,
144
+ ...n?.required && { required: n.required }
142
145
  },
143
- handler: a,
144
- autoRegister: o?.autoRegister,
145
- autoUnregister: o?.autoUnregister
146
+ handler: f,
147
+ autoRegister: n?.autoRegister,
148
+ autoUnregister: n?.autoUnregister
146
149
  });
147
150
  }
148
- const v = Q(null);
149
- function ne({
151
+ const I = Q(null);
152
+ function se({
150
153
  children: t,
151
154
  autoInit: e = !0,
152
- backendWsUrl: s = "ws://localhost:3001",
153
- initOptions: c,
154
- onInitialized: o,
155
- onInitError: a
155
+ backendWsUrl: l = "ws://localhost:3001",
156
+ authToken: o,
157
+ initOptions: n,
158
+ onInitialized: f,
159
+ onInitError: d
156
160
  }) {
157
- const [i, d] = y(!1), [P, g] = y(!1), [T] = y([]), h = C(
158
- async (l) => {
159
- if (i) {
161
+ const [s, T] = y(!1), [h, g] = y(!1), [S] = y([]), M = C(
162
+ async (a) => {
163
+ if (s) {
160
164
  console.log("[MCPToolsProvider] Already initialized");
161
165
  return;
162
166
  }
163
167
  try {
164
- const u = l || c || { backendWsUrl: s };
165
- console.log("[MCPToolsProvider] Initializing worker client...", u), await f.init(u), d(!0);
166
- const m = await f.getConnectionStatus();
167
- g(m), f.onConnectionStatus((w) => {
168
+ const i = a || n || { backendWsUrl: l };
169
+ console.log("[MCPToolsProvider] Initializing worker client...", i), await c.init(i), o && (console.log("[MCPToolsProvider] Setting auth token..."), c.setAuthToken(o)), T(!0);
170
+ const p = await c.getConnectionStatus();
171
+ g(p), c.onConnectionStatus((w) => {
168
172
  g(w);
169
- }), console.log("[MCPToolsProvider] Worker client initialized"), o?.();
170
- } catch (u) {
171
- throw console.error("[MCPToolsProvider] Initialization failed:", u), a?.(
172
- u instanceof Error ? u : new Error(String(u))
173
- ), u;
173
+ }), console.log("[MCPToolsProvider] Worker client initialized"), f?.();
174
+ } catch (i) {
175
+ throw console.error("[MCPToolsProvider] Initialization failed:", i), d?.(
176
+ i instanceof Error ? i : new Error(String(i))
177
+ ), i;
174
178
  }
175
179
  },
176
- [i, c, s, o, a]
177
- ), x = C(async () => {
178
- const l = await f.getConnectionStatus();
179
- return g(l), l;
180
+ [
181
+ s,
182
+ n,
183
+ l,
184
+ o,
185
+ f,
186
+ d
187
+ ]
188
+ ), R = C(async () => {
189
+ const a = await c.getConnectionStatus();
190
+ return g(a), a;
180
191
  }, []);
181
- R(() => {
182
- e && h().catch((l) => {
183
- console.error("[MCPToolsProvider] Auto-init failed:", l);
192
+ P(() => {
193
+ e && M().catch((a) => {
194
+ console.error("[MCPToolsProvider] Auto-init failed:", a);
184
195
  });
185
- }, [e, h]), R(() => {
186
- if (!i) return;
187
- const l = setInterval(() => {
196
+ }, [e, M]), P(() => {
197
+ s && o && (console.log("[MCPToolsProvider] Auth token changed, updating..."), c.setAuthToken(o));
198
+ }, [o, s]), P(() => {
199
+ if (!s) return;
200
+ const a = setInterval(() => {
188
201
  }, 5e3);
189
- return () => clearInterval(l);
190
- }, [i]);
191
- const p = {
192
- isInitialized: i,
193
- isConnected: P,
194
- registeredTools: T,
195
- initialize: h,
196
- getConnectionStatus: x
202
+ return () => clearInterval(a);
203
+ }, [s]);
204
+ const x = {
205
+ isInitialized: s,
206
+ isConnected: h,
207
+ registeredTools: S,
208
+ initialize: M,
209
+ getConnectionStatus: R
197
210
  };
198
- return /* @__PURE__ */ V(v.Provider, { value: p, children: t });
211
+ return /* @__PURE__ */ V(I.Provider, { value: x, children: t });
199
212
  }
200
- function se(t = !1) {
201
- const e = F(v);
213
+ function ce(t = !1) {
214
+ const e = k(I);
202
215
  if (!e && t)
203
216
  throw new Error(
204
217
  "useMCPToolsContext must be used within MCPToolsProvider. Either wrap your component tree with <MCPToolsProvider> or set strict=false."
@@ -213,17 +226,18 @@ function se(t = !1) {
213
226
  getConnectionStatus: async () => !1
214
227
  };
215
228
  }
216
- function ce() {
217
- return F(v) !== null;
229
+ function ie() {
230
+ return k(I) !== null;
218
231
  }
219
232
  export {
220
- ne as MCPToolsProvider,
233
+ se as MCPToolsProvider,
221
234
  ee as getRegisteredTools,
235
+ oe as getToolDetails,
222
236
  te as getToolInfo,
223
237
  Z as isToolRegistered,
224
- ce as useHasMCPProvider,
225
- oe as useMCPAction,
238
+ ie as useHasMCPProvider,
239
+ ne as useMCPAction,
226
240
  re as useMCPGetter,
227
- H as useMCPTool,
228
- se as useMCPToolsContext
241
+ F as useMCPTool,
242
+ ce as useMCPToolsContext
229
243
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-fe/react-tools",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "license": "Apache-2.0",
5
5
  "homepage": "https://mcp-fe.ai",
6
6
  "repository": {
@@ -19,7 +19,7 @@
19
19
  }
20
20
  },
21
21
  "peerDependencies": {
22
- "@mcp-fe/mcp-worker": "^0.1.7",
22
+ "@mcp-fe/mcp-worker": "^0.1.9",
23
23
  "react": "^19.0.0",
24
24
  "react-dom": "^19.0.0"
25
25
  },
package/utils.d.ts ADDED
@@ -0,0 +1,35 @@
1
+ import { ToolDefinition } from '@mcp-fe/mcp-worker';
2
+ /**
3
+ * Check if a tool is currently registered
4
+ *
5
+ * @param name - Tool name to check
6
+ * @returns true if tool is registered, false otherwise
7
+ */
8
+ export declare function isToolRegistered(name: string): boolean;
9
+ /**
10
+ * Get list of all currently registered tool names
11
+ *
12
+ * @returns Array of registered tool names
13
+ */
14
+ export declare function getRegisteredTools(): string[];
15
+ /**
16
+ * Get basic registration information for a specific tool
17
+ *
18
+ * @param name - Tool name to query
19
+ * @returns Object with refCount and isRegistered, or null if tool not found
20
+ */
21
+ export declare function getToolInfo(name: string): {
22
+ refCount: number;
23
+ isRegistered: boolean;
24
+ } | null;
25
+ /**
26
+ * Get complete tool definition including description, schema, annotations, and metadata
27
+ *
28
+ * @param name - Tool name to query
29
+ * @returns Full ToolDefinition with refCount and isRegistered, or null if tool not found
30
+ */
31
+ export declare function getToolDetails(name: string): (ToolDefinition & {
32
+ refCount: number;
33
+ isRegistered: boolean;
34
+ }) | null;
35
+ //# sourceMappingURL=utils.d.ts.map
package/utils.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../libs/react-tools/src/utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEvE;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEtD;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,EAAE,CAE7C;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,GACX;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAEpD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GACvC,CAAC,cAAc,GAAG;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC,GACF,IAAI,CAEP"}