Vue + FastAPI
Learn how to deploy a Vue frontend with a FastAPI backend using Ink MCP.
Create an Ink account and connect MCP
Make sure you have an Ink account and have connected Ink MCP to your agent. There are two ways to connect:
- OAuth — authenticate through a browser flow, no keys to manage
- Token — create an API key at ml.ink/account/api-keys
See Quick Start for full setup instructions.
Verify the connection
Once the MCP server is connected, confirm your agent can reach it by asking it to check.
Do you have Ink MCP connected?
Build the app
Ask your agent to create a full-stack bookmarks app. The agent will scaffold both a Vue 3 frontend and a FastAPI backend.
Create a bookmarks app with a Vue 3 frontend and Python FastAPI backend. The frontend communicates with the API over REST.
Deploy with Ink
Tell your agent to deploy. The agent deploys the backend first, retrieves its live URL, then deploys the frontend with that URL as an environment variable — all from a single prompt.
Deploy to Ink
create_service(
"name": "bookmarks-api",
"repo": "ink/bookmarks-api",
"build_pack": "railpack",
"port": "3000"
)get_service(
"name": "bookmarks-api"
){
"url": "https://bookmarks-api-abc123.ml.ink"
}create_service(
"name": "bookmarks-frontend",
"repo": "ink/bookmarks-frontend",
"build_pack": "railpack",
"publish_directory": "dist",
"env_vars": {
"VITE_API_URL": "https://bookmarks-api-abc123.ml.ink"
}
)Visit your app
Ink returns live URLs for both services. The Vue frontend talks to the FastAPI backend over HTTPS using the VITE_API_URL environment variable.
Check logs and metrics (optional)
Ask your agent to pull build logs, runtime logs, or metrics for either service.
Check metrics and logs for both services
That's it — your full-stack app is deployed and live. From here you can add custom domains, set up environment variables, or explore more examples.