Use AnimatedWebs in Windsurf

Windsurf, now called Devin Desktop, connects to AnimatedWebs through a serverUrl entry in its MCP config file. After you sign in, Cascade can search the template library and fetch full build prompts.

Connects with
Streamable HTTP, serverUrl
Sign-in
OAuth, or a headers entry
Config file
Open it from the Cascade panel

Set up AnimatedWebs in Windsurf

Server address: https://mcp.animatedwebs.com

  1. 1

    Open the MCP config file

    In the Cascade panel, click the ... (Actions) menu, then the Open MCP config file icon in the MCPs section. Opening it from the app avoids guessing the path, which changed with the Devin Desktop rename.

  2. 2

    Add the server

    Merge this entry into the mcpServers object. Windsurf calls the remote address serverUrl.

    mcp_config.json
    {
      "mcpServers": {
        "animatedwebs": {
          "serverUrl": "https://mcp.animatedwebs.com"
        }
      }
    }
  3. 3

    Sign in

    Devin Desktop supports OAuth for remote servers. If a browser window asks you to sign in, approve access with your AnimatedWebs account.

  4. 4

    Check the tool count

    The MCPs section lists animatedwebs and how many of its tools are on. Then ask Cascade for a template.

Headless or CI? Use an API key from your dashboard instead of the browser sign-in.

Check that it works

  • In the MCPs section of the Cascade panel, animatedwebs should appear with a count of enabled tools and a toggle.
  • Ask it to run the get_account tool from the animatedwebs server. A reply with your plan and today's usage means the connection and your sign-in both work.

Three requests to try

Paste one into Windsurf. Each one makes it call real AnimatedWebs tools.

example prompt 1
Use animatedwebs to find a template for a roofing contractor in Phoenix and build it in this workspace.
example prompt 2
Search animatedwebs for a hero background video loop and add it behind the landing page headline.
example prompt 3
Show me the animatedwebs prompt for the best template for a yoga studio, then implement it section by section.

If something goes wrong in Windsurf

You cannot find mcp_config.json
Use the Open MCP config file icon. Windsurf's docs list ~/.config/devin/mcp_config.json (macOS and Linux) and %APPDATA%\devin\mcp_config.json (Windows) for the Cascade agent, and its FAQ lists ~/.codeium/mcp_config.json, so the app's own button is the reliable route.
Too many tools
Cascade can access 100 tools in total across all servers. Switch off tools you do not use, or add their names to disabledTools for the server.
Your team blocks the server
On Teams and Enterprise, once an admin allowlists one server, all others are blocked. Ask the admin to add animatedwebs with the same Server ID as your config key.
The agent you use is not Cascade
The documented MCP page applies to the legacy Cascade agent only. Devin Local, the other agent, reads Devin CLI configuration; check Devin's docs for that agent.

Questions about Windsurf and AnimatedWebs

Is Windsurf the same as Devin Desktop?+

Yes. Devin Desktop's FAQ says it is the new name for Windsurf and that it works out of the box for existing Windsurf users.

Why serverUrl and not url?+

Windsurf's docs use serverUrl in the example for remote HTTP servers, and say url is accepted too. The snippet uses serverUrl.

Can I use environment variables for the key?+

Yes. Windsurf expands ${env:VAR_NAME} in url, serverUrl and headers, so Authorization can be Bearer ${env:ANIMATEDWEBS_KEY}.

Which transports does it support?+

The docs list stdio, Streamable HTTP and SSE, each with OAuth support. AnimatedWebs uses Streamable HTTP.

Facts checked on

What this page says about Windsurf comes from its official documentation, linked below, and Windsurf can change, so check its docs for the latest. What it says about AnimatedWebs comes from how our own MCP server works.

  • Devin Desktop is the new name for Windsurf, and it works out of the box for existing Windsurf users. Devin Desktop FAQ ↗
  • Cascade MCP supports stdio, Streamable HTTP and SSE, with OAuth for each, and remote servers use serverUrl or url plus optional headers. Cascade MCP docs ↗
  • The config file opens from the Cascade panel's Actions menu, and Cascade can use at most 100 tools at a time. Cascade MCP docs ↗
  • Variables such as ${env:VAR_NAME} are expanded in url, serverUrl and headers. Cascade MCP docs ↗

Windsurf and the other tool names on this page are trademarks of their owners. AnimatedWebs is independent and not affiliated with them.

Pick a look, then let Windsurf build it

Free accounts open every free prompt, and Pro unlocks the whole vault. Building an agent of your own? Read the agent guide.

We use essential cookies to keep you signed in, a referral cookie only if you arrive through a partner link, and cookie-free analytics. No ads, no tracking. Cookie Policy