How do you add a Claude-powered chat to a Webflow site without exposing your API key?

The guide walks users through configuring a Webflow Cloud project, creating a Next.js API route that forwards chat requests to Claude’s endpoint, and adding a React component that streams markdown‑formatted replies. By deploying the app through the Webflow Cloud integration with GitHub, the API key lives only in server‑side environment variables, eliminating the common client‑side exposure seen in third‑party embeds or Zapier hacks. The solution requires a paid Webflow plan, an Anthropic API key (prefixed sk‑ant‑), a GitHub repo, and Node 20+, but it delivers a fully integrated chat widget at a path like mysite.webflow.io/chat without extra CORS work.

This approach reflects a broader push by low‑code platforms to offer “edge runtime” capabilities that blur the line between static site builders and full‑stack frameworks. Webflow’s move mirrors similar offerings from Wix and Squarespace, which have begun bundling serverless functions to protect secrets and support AI features. By supporting both Next.js and Astro, Webflow positions itself as a flexible host for modern JavaScript stacks, giving designers the ability to add sophisticated AI experiences without maintaining separate back‑ends. The reliance on Anthropic’s Claude also signals Webflow’s willingness to partner with emerging LLM providers beyond the dominant OpenAI ecosystem, potentially attracting developers looking for alternative pricing or model characteristics.

While the workflow removes the most obvious security risk—exposing the Anthropic key—it introduces new operational considerations. Developers must manage environment variables through the Webflow Cloud UI, monitor Anthropic rate limits (new accounts face throttling), and ensure their Node version stays current to avoid CLI failures. Mistakes such as committing the key to a public repo or neglecting to publish the underlying Webflow site can break the chat, as the article notes. Future updates to Webflow’s edge runtime or changes in Claude’s API could require code revisions, so teams should track version changelogs and maintain a rollback plan.