AI导哈

Okta演示环境管理工具

一个基于React和TypeScript的Web应用，用于创建和管理Okta演示环境，支持组件附加和品牌定制。

  • by Zantonse
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Zantonse/DemoOktaMCP

使用说明

Okta MCP Web UI演示

这是一个小型的React+TypeScript web应用程序，可以直接与Demo Okta对话 MCP HTTP服务器和编排三个主要流程：

  • 创建一个新的Okta演示环境。
  • 使用检查表将演示组件附加到该环境中。
  • 根据客户姓名和网站，可选择应用故事时间风格的品牌。

先决条件

  • Node.js和npm已在本地安装。

安装并运行

npm install
npm run dev

默认情况下，应用程序希望MCP服务器在以下位置可用：

http://demo-okta-mcp-dev-v6.us-east-1.elasticbeanstalk.com/mcp

您可以通过设置Vite-env变量来覆盖这一点：

VITE_MCP_URL="https://your-mcp-endpoint.example.com/mcp" npm run dev

MCP集成

Demo Okta MCP服务器的HTTP客户端位于 src/mcpClient.ts 并假设 基于HTTP JSON-RPC 2.0协议的MCP：

  • tools/call 用于调用工具，带有 name 和 arguments 有效载荷。
  • 工具结果预计包括 content 阵列与 text 和 json 项目；客户端提取人类可读的 message 和一个 data 有效载荷。

UI操作和工具名称之间的映射在中定义 src/mcpConfig.ts:

  • demo_okta_create_environment
  • demo_okta_list_components
  • demo_okta_attach_components
  • demo_okta_apply_branding

如果您的Demo Okta MCP服务器使用不同的工具名称，请在 src/mcpConfig.ts 而无需触摸UI的其余部分。

高级UI流

  • 步骤1- 创造环境: EnvironmentForm 收集客户姓名/网站 和其他提示，然后调用 createDemoEnvironment 通过MCP。
  • 第2步—— 连接组件: ComponentChecklist 加载可用组件 listAvailableComponents，将其作为清单呈现，并致电 attachComponentsToEnvironment 使用所选ID。
  • 第3步—— 品牌（可选）: BrandingStep 收集品牌信息和电话 applyBrandingToStorytime 因此MCP服务器可以配置Storytime。

测试

Vitest被配置为开发依赖；您可以在下添加测试 src 并运行：

npm test

相关 MCP