Build and deploy a website to Vercel with Claude Code and MCP

What you get

With two MCP servers connected to Claude Code, one session can take a website from an empty folder to a checked production deploy. FastMetal supplies other models and image generation; Vercel supplies the deploy. This walkthrough builds a one-page landing site.

You need Claude Code, a FastMetal API key with credit on it, and a Vercel account.

1. Connect both MCP servers

FastMetal takes your key in a header:

claude mcp add --transport http fastmetal https://mcp.fastmetal.ai/mcp \
  --header "Authorization: Bearer ${FASTMETAL_API_KEY}"

Vercel uses OAuth, so you only register the URL:

claude mcp add --transport http vercel https://mcp.vercel.com

Start claude and run /mcp to see both connections. Vercel asks you to sign in the first time; approve it in the browser now so it does not interrupt you later.

2. Build the site

This part is ordinary Claude Code work. Create a project and describe what you want:

Build a static one-page landing site.
Next.js App Router and Tailwind, in English.
Sections: hero, three features, pricing, contact.

3. Generate the hero image

Claude Code cannot make images itself. With the FastMetal server connected it has generate_image, so the image comes from the same session:

Use generate_image to make a hero image.
Prompt: "a quiet desk in morning light, top-down view, lots of empty space".
Download the returned link to public/hero.png and use it in the hero.

generate_image returns a download link that expires (after 15 minutes by default) instead of the image bytes. A remote server cannot write to your disk, so Claude Code fetches the file with curl. If the link has expired, generate again.

4. Have a different model review the copy

A model grading its own writing tends to go easy on it. Sending the copy to a model from another family through ask gets blunter feedback:

Show the hero and feature copy to glm-5.2 with ask.
Have it point out awkward phrasing and anything redundant.

For a call you are unsure about, compare sends the same question to several models (up to eight), and you decide only where they disagree. Each model in a compare is a separately billed call, so check how many you are sending first.

5. Deploy to Vercel

The Vercel MCP tool deploy_to_vercel deploys the files directly, with no Git repository and no Vercel CLI. Start with a preview:

Deploy this project to a preview with deploy_to_vercel.
Project name: my-landing.

Vercel detects the framework, so you normally pass no settings. If the build fails, have Claude Code read get_deployment_build_logs and fix the problem in the same session.

When the preview looks right, promote it:

The preview is good. Redeploy with target set to production.

6. Check the live page

web_fetch_vercel_url lets Claude Code read the deployed URL directly. Use it as a first pass before you look in a browser:

Fetch the production URL with web_fetch_vercel_url and confirm
the hero headline and the pricing section render as intended.

If the deployment is protected, get_access_to_vercel_url issues a temporary share link.

Things that go wrong

• Expired image links. Generated links last minutes. Download within the same session.
• compare costs one call per model. Eight models is eight calls. The quota tool shows your balance.
• Keep tool confirmations on. Leave Claude Code asking before it runs MCP tools, especially ones that write, such as deploy_to_vercel. Content pulled in from outside can carry a prompt injection.
• Use a separate key for MCP. The key sits in a config file. A dedicated key with a low budget caps the damage if it leaks.

Next

The FastMetal tools and setup are in the MCP server guide, and the Claude Code guide covers using FastMetal models in Claude Code itself. Models are in the catalog. Create a key from the dashboard and add credit (the minimum top-up is $5).