The remote endpoint uses stateless Streamable HTTP. It can inspect your reviewed jobs, read React guidance, list safe client-key metadata, and create an origin-restricted publishable key with your approval. It cannot upload, edit captions, delete, access billing, administer accounts, or use server SDKs.
複製設定提示詞
Paste this prompt into an AI coding agent opened in the repository where you want to add the player.
Set up @genie-player/react in this repository.
1. Detect the framework and package manager from the repository; do not assume them.
2. Connect to the Genie Player remote MCP server at https://api.genie-player.com/mcp and authenticate with Clerk OAuth.
3. Fetch the current React SDK guide from Genie MCP instead of relying on model memory.
4. Use Genie MCP to list my reviewed jobs and ask me which job to use.
5. Ask me for the separately hosted customer video URL before editing code.
6. Confirm the exact development and production origins where the player will run. Ask for my approval immediately before using the MCP tool that creates a domain-restricted client key. Never retry key creation automatically.
7. Store the one-time publishable `gpk_…` key in the framework's public environment variable. Do not commit the value.
8. Install `@genie-player/react`, import `@genie-player/react/styles.css`, configure `GenieProvider`, and render `GeniePlayer`.
9. Keep `jobId` (Genie-hosted approved captions) and `src` (my customer-hosted video) as separate required values.
10. Verify the video CDN permits anonymous CORS requests from the player origin, then run the repository's existing tests and production build.
Safety: Never request, print, store, or expose a Clerk server API key, OAuth token, browser token, WebVTT access token, temporary Genie video URL, or existing raw client key. Do not upload, edit captions, delete media, change billing, or use the unreleased Node.js/Python SDKs through MCP.連接 Genie MCP
Use https://api.genie-player.com/mcp as the remote HTTP server. Your client opens Clerk OAuth consent and connects the authenticated agent to your active workspace and assigned project.
Codex
codex mcp add genie --url https://api.genie-player.com/mcp
codex mcp login genieCursor
Add the server in Cursor MCP settings or .cursor/mcp.json, then select Authenticate.
{
"mcpServers": {
"genie": { "url": "https://api.genie-player.com/mcp" }
}
}Claude Code
claude mcp add --transport http genie https://api.genie-player.com/mcpOpen /mcp in Claude Code and authenticate the Genie connection.
VS Code
Create .vscode/mcp.json, start the server from the MCP view, and follow the OAuth prompt.
{
"servers": {
"genie": {
"type": "http",
"url": "https://api.genie-player.com/mcp"
}
}
}Approval and one-time keys
The agent must ask before calling create_react_client_key. Confirm the exact local and production origins in the visible tool request. The returned gpk_… key is shown once; Genie stores only its hash and safe hint. If it is lost, create a replacement and revoke the old key in the dashboard.
疑難排解
OAuth 未開啟
Confirm the client supports OAuth for remote Streamable HTTP MCP servers. Update the client, remove the Genie connection, and add it again. Legacy SSE and static bearer-token configuration are not supported.
沒有傳回工作
Only owned jobs in READY state with completed caption review are visible. Complete review in Dashboard → Processing, then ask the agent to list jobs again.
播放器未通過 CORS 檢查
Add the exact player origin to the Genie client key and configure the customer video CDN to allow anonymous cross-origin media requests. Genie hosts approved captions, not the video.
金鑰未儲存
Existing raw keys cannot be recovered. Do not ask the agent to retry automatically; approve creation of one replacement key, update the environment, validate it, then revoke the unused key.