\n\n\n\n\n\n\n```\n\n\u5b8c\u6574\u793a\u4f8b\u8bf7\u53c2\u8003 umd-example.html\n\n- next.js \u4f7f\u7528\n```\n\"use client\";\nimport dynamic from 'next/dynamic'\nimport react, { createcontext, usecontext, usestate, useeffect, reactnode } from \"react\";\n\n// \u4f7f\u7528\u52a8\u6001\u5bfc\u5165\u5ef6\u8fdf\u52a0\u8f7d\u6574\u4e2a mcp-uiux \u5e93\nconst externalmcpprovider = dynamic(\n () => import('mcp-uiux').then(mod => mod.mcpprovider),\n { ssr: false }\n)\n\n// \u5b9a\u4e49 mcp \u4e0a\u4e0b\u6587\u7c7b\u578b\ninterface mcpcontexttype {\n connect: (address: string) => promise;\n disconnect: () => void;\n isconnected: boolean;\n isconnecting: boolean;\n error: string | null;\n tools: any[];\n prompts: any[];\n}\n\n// \u521b\u5efa\u4e0a\u4e0b\u6587\nconst mcpcontext = createcontext(undefined);\n\n// \u81ea\u5b9a\u4e49 hook \u7528\u4e8e\u8bbf\u95ee mcp \u4e0a\u4e0b\u6587\nexport function usemcpcontext() {\n const context = usecontext(mcpcontext);\n if (context === undefined) {\n throw new error(\"usemcpcontext \u5fc5\u987b\u5728 mcpprovider \u5185\u90e8\u4f7f\u7528\");\n }\n return context;\n}\n\n// \u5185\u90e8 mcp \u8fde\u63a5\u7ec4\u4ef6\nfunction mcpconnection({ children }: { children: reactnode }) {\n const [isconnected, setisconnected] = usestate(false);\n const [error, seterror] = usestate(null);\n const [tools, settools] = usestate([]);\n const [mcpaddress, setmcpaddress] = usestate(\"\");\n const [prompts, setprompts] = usestate([]);\n const [loading, setloading] = usestate(false);\n\n // \u4f7f\u7528\u52a8\u6001\u5bfc\u5165\u83b7\u53d6 mcp-uiux \u5e93\n const [mcpmodule, setmcpmodule] = usestate(null);\n\n useeffect(() => {\n // \u4ec5\u5728\u5ba2\u6237\u7aef\u52a0\u8f7d mcp \u76f8\u5173\u529f\u80fd\n if (typeof window !== 'undefined') {\n import('mcp-uiux').then(mod => {\n setmcpmodule(mod);\n });\n }\n }, []);\n\n // \u4ece\u672c\u5730\u5b58\u50a8\u52a0\u8f7d\u914d\u7f6e\n useeffect(() => {\n const savedconfig = localstorage.getitem(\"systemconfig\");\n if (savedconfig) {\n try {\n const config = json.parse(savedconfig);\n setmcpaddress(config.mcpaddress);\n } catch (error) {\n console.error(\"\u65e0\u6cd5\u89e3\u6790\u4fdd\u5b58\u7684\u914d\u7f6e:\", error);\n }\n }\n }, []);\n\n // mcpconnectioneffect \u7ec4\u4ef6\uff0c\u8fd9\u662f\u4e00\u4e2a\u771f\u6b63\u7684 react \u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5728\u5176\u4e2d\u4f7f\u7528 hooks\n const mcpconnectioneffect = react.usecallback(() => {\n // \u5728\u8fd9\u4e2a\u7ec4\u4ef6\u4e2d\u4f7f\u7528 usemcp hook\n if (!mcpmodule) return null;\n\n const { usemcp } = mcpmodule;\n const mcphook = usemcp();\n\n useeffect(() => {\n // \u4f7f\u7528 mcphook \u7684\u503c\u66f4\u65b0\u5916\u90e8\u7ec4\u4ef6\u7684\u72b6\u6001\n setloading(mcphook.loading || false);\n\n if (mcphook.error) {\n seterror(mcphook.error);\n setisconnected(false);\n }\n\n if (mcphook.tools && mcphook.tools.length > 0) {\n settools(mcphook.tools);\n setisconnected(true);\n }\n\n if (mcphook.prompts && mcphook.prompts.length > 0) {\n setprompts(mcphook.prompts);\n }\n\n // \u5982\u679c\u6709 mcp \u5730\u5740\uff0c\u5c1d\u8bd5\u81ea\u52a8\u8fde\u63a5\n const connecttomcp = async () => {\n if (mcpaddress && !isconnected && mcphook.connect) {\n try {\n seterror(null);\n await mcphook.connect(mcpaddress, '');\n } catch (err) {\n seterror(err instanceof error ? err.message : \"\u8fde\u63a5\u5931\u8d25\");\n setisconnected(false);\n }\n }\n };\n\n connecttomcp();\n }, [mcphook]);\n\n return null;\n }, [mcpmodule, mcpaddress, isconnected]);\n\n // \u8fde\u63a5\u5230 mcp\n const connect = async (address: string) => {\n if (!mcpmodule) return;\n\n try {\n seterror(null);\n setloading(true);\n\n // \u4fdd\u5b58\u5730\u5740\u4ee5\u4fbf\u540e\u7eed\u4f7f\u7528\n setmcpaddress(address);\n\n // \u5b9e\u9645\u8fde\u63a5\u4f1a\u5728 mcpconnectioneffect \u7ec4\u4ef6\u4e2d\u5904\u7406\n // \u8fd9\u91cc\u53ea\u662f\u8bbe\u7f6e\u4e86\u72b6\u6001\n } catch (err) {\n seterror(err instanceof error ? err.message : \"\u8fde\u63a5\u5931\u8d25\");\n setisconnected(false);\n setloading(false);\n }\n };\n\n // \u65ad\u5f00\u8fde\u63a5\n const disconnect = () => {\n setisconnected(false);\n settools([]);\n };\n\n return (\n \n {/* \u6e32\u67d3 mcpconnectioneffect \u7ec4\u4ef6 */}\n {mcpmodule && }\n {children}\n \n );\n}\n\n// mcp \u63d0\u4f9b\u5668\u7ec4\u4ef6\nexport function mcpprovider({ children }: { children: reactnode }) {\n const [mounted, setmounted] = usestate(false);\n\n // \u786e\u4fdd\u7ec4\u4ef6\u53ea\u5728\u5ba2\u6237\u7aef\u6e32\u67d3\n useeffect(() => {\n setmounted(true);\n }, []);\n\n if (!mounted) {\n return null;\n }\n\n return (\n \n {children}\n \n );\n}\n```\n\n## \u914d\u7f6e\u53c2\u6570\n\n- `serverurl`: mcp \u670d\u52a1\u5668\u5730\u5740\uff0c\u9ed8\u8ba4\u4e3a `http://localhost:8080`\n- `resourcepath`: \u8d44\u6e90\u8def\u5f84\u8fc7\u6ee4\u5668\uff0c\u9ed8\u8ba4\u4e3a\u7a7a\u5b57\u7b26\u4e32 `\"\"`\n\n## \u914d\u5957\u670d\u52a1\u5668\n\n\u672c\u7ec4\u4ef6\u5e93\u53ef\u4ee5\u4e0e [memory mcp server](https://github.com/shadowcz007/memory_mcp) \u914d\u5408\u4f7f\u7528\u3002\n\n## \u5b8c\u6574\u793a\u4f8b\n\n\u53c2\u8003\u793a\u4f8b\u4ee3\u7801\uff1aexample\n\n## api \u53c2\u8003\n\n### usemcp hook\n\n\u8fd4\u56de\u503c\uff1a\n- `connect`: \u8fde\u63a5\u670d\u52a1\u5668\u7684\u51fd\u6570\n- `loading`: \u52a0\u8f7d\u72b6\u6001\n- `error`: \u9519\u8bef\u4fe1\u606f\n- `tools`: \u5de5\u5177\u5217\u8868\n- `resources`: \u8d44\u6e90\u5217\u8868\n- `resourcetemplates`: \u8d44\u6e90\u6a21\u677f\n- `prompts`: ai \u63d0\u793a\u5217\u8868\n\n### scifimcpstatus \u7ec4\u4ef6\n\n\u79d1\u5e7b\u98ce\u683c\u7684\u72b6\u6001\u5c55\u793a\u7ec4\u4ef6\uff0c\u5305\u542b\uff1a\n- \u7cfb\u7edf\u72b6\u6001\u76d1\u63a7\n- \u5de5\u5177\u5e93\u5c55\u793a\n- \u8d44\u6e90\u77e9\u9635\n- ai \u63d0\u793a\u5e93\n\n## \u8bb8\u53ef\u8bc1\n\nmit\n\n## \u8d21\u732e\n\n\u6b22\u8fce\u63d0\u4ea4 issue \u548c pull request\uff01", "installation_instructions": null, "categories": [ "Everything" ], "owners": [], "owner": null, "code_snippets": {}, "evaluation_results": [], "found_via_ownership_request": false, "hosting_eligible": false, "knative_enabled": false, "security_scans": [] } }