AgentPort guide
Deploy a React app with an API
Deploy a React frontend and API with your coding agent and AgentPort MCP. Connect the services, check browser requests, and get a live URL to share.
Start with a connected AgentPort MCP server and working Docker in the same environment as your coding agent. If either check is missing, complete Connect your coding agent first.
Choose your agent
Paste into Claude Code with the repository open.
- 01
Inspect the app
Find the React app, API, build commands, ports, and environment needs before changing files or creating resources.
You
Using Claude Code: Inspect this repository for a client-side React frontend and its API. Identify build outputs, start commands, ports, health checks, and required environment variables. Do not change files, package, build, push, or deploy yet.
See agent reply
Illustrative example
Claude Code response: Example structure found: a Vite React frontend in web/ and a Node API in api/. The frontend builds to dist on port 3000; the API listens on port 8080 and exposes /health.
- 02
Review routing and cost
Ask for the smallest plan and current charge. Keep secrets server-side and proxy /api to the private API where appropriate.
You
Using Claude Code: Propose the smallest AgentPort plan. Keep the frontend public, route /api to the private API where appropriate, and keep secrets out of browser code. Check my balance and estimate the charge. Wait for explicit approval before changes or resources.
See agent reply
Illustrative example
- billing:helpFlat beta deployment rate checked
- billing:statusAvailable deployment budget checked
Claude Code response: Illustrative estimate: the frontend and API cost $2 total at $1 per submitted service during beta. Each uses 0.5 CPU and 512 MiB RAM. The agent checks billing:help for the rate and billing:status for your available budget before asking for approval.
- 03
Approve packaging and deployment
Only after review, approve Docker packaging, registry targets, local builds and pushes, and project submission.
You
Using Claude Code: I approve the plan. Prepare only required Docker packaging, keeping secrets out of the frontend bundle, images, logs, and Git. Obtain image targets, build and push both images here, then deploy the approved public frontend and private API routing. Stop for any material plan change.
See agent reply
Illustrative example
- image:targetRegistry targets issued for the approved services
- project:deployDeployment submitted after local image pushes
Claude Code response: Example outcome: the reviewed Dockerfiles were prepared, both images built and pushed to their issued targets, and the two-service project was submitted. Health verification is still pending.
- 04
Verify before sharing
Check status and logs, then test the frontend, API route, and a direct React deep link before returning the real URL.
You
Using Claude Code: Check project status and logs for unhealthy services. When healthy, verify the public frontend, an /api request, and a direct client-side React route. Fix issues within the approved plan, then give me the real verified URL. Remind me persistent data needs external storage.
See agent reply
Illustrative example
- project:statusService health and public hostname checked
- project:logsRuntime logs inspected when verification needs them
Claude Code response: Example verification: project status is healthy; the homepage, /api/health, and /settings deep link respond through https://react-api.example.agentport.cloud. Persistent data still belongs in external storage.
The agent performs packaging, builds, and image pushes in its own environment. AgentPort MCP provides registry targets and handles deployment, status, and logs. Keep secrets out of frontend bundles, images, logs, and Git. Use an external database or storage service for persistent data because container storage is temporary.