Demo Okta MCP

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