diff --git a/packages/app/src/pages/streaming_control/index.jsx b/packages/app/src/pages/streaming_control/index.jsx
new file mode 100644
index 00000000..c6d1c4ea
--- /dev/null
+++ b/packages/app/src/pages/streaming_control/index.jsx
@@ -0,0 +1,115 @@
+import React from "react"
+import * as antd from "antd"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+const StreamingKeyView = (props) => {
+ const [streamingKeyVisibility, setStreamingKeyVisibility] = React.useState(false)
+
+ const toogleVisibility = (to) => {
+ setStreamingKeyVisibility(to ?? !streamingKeyVisibility)
+ }
+
+ return
+ {streamingKeyVisibility ?
+ <>
+ toogleVisibility()} />
+
+ {props.streamingKey ?? "No streaming key available"}
+
+ :
+ <>
+ toogleVisibility()} />
+ Show key
+
+ }
+
+}
+
+export default (props) => {
+ const [isConnected, setIsConnected] = React.useState(false)
+ const [targetServer, setTargetServer] = React.useState("No available server")
+
+ const [streamingKey, setStreamingKey] = React.useState(null)
+ const [serverTier, setServerTier] = React.useState(null)
+
+ const checkStreamingKey = async () => {
+ const result = await app.request.get.streamingKey().catch((error) => {
+ console.error(error)
+ antd.message.error(error.message)
+
+ return null
+ })
+
+ if (result) {
+ setStreamingKey(result.key)
+ }
+ }
+
+ const checkTagetServer = async () => {
+ const result = await app.request.get.targetStreamingServer()
+
+ if (result) {
+ const targetServer = `${result.protocol}://${result.address}:${result.port}/${result.space}`
+ setTargetServer(targetServer)
+ }
+ }
+
+ React.useEffect(() => {
+ checkStreamingKey()
+ checkTagetServer()
+ // TODO: Use UserTier controller to check streaming service tier
+ // by now, we just use a fixed value
+ setServerTier("basic")
+ }, [])
+
+ return
+
+
Connection Status
+
+
:
}
+ >
+ {isConnected ? "Connected" : "Disconnected"}
+
+
+
+
+
+
Server info
+
+
+
+ Server Address
+
+
+
+ {targetServer}
+
+
+
+
+
+
+ Streaming Key
+
+
+
+
+
+
+
+