Use AnimatedWebs in VS Code
VS Code adds the AnimatedWebs MCP server with one click, the code --add-mcp command or an entry in mcp.json. Copilot agent mode can then search the template library and fetch full build prompts for your project.
- Connects with
- type http (HTTP Stream first, SSE fallback)
- Sign-in
- Browser prompt on first connection, or headers
- Config file
- .vscode/mcp.json or your user mcp.json
Set up AnimatedWebs in VS Code
Server address: https://mcp.animatedwebs.com
- 1
Add the server
Use the button, the terminal command, or run MCP: Add Server from the Command Palette, choose HTTP and paste the URL. The button and the command write the entry for you.
Add to VS Codeor terminalcode --add-mcp '{"name":"animatedwebs","type":"http","url":"https://mcp.animatedwebs.com"}' - 2
Check the trust prompt
VS Code asks you to trust the server before it starts. Confirm the URL matches the AnimatedWebs MCP address.
- 3
Sign in
Follow the sign-in prompt when the server first connects, and approve access with your AnimatedWebs account.
- 4
Use it in agent mode
Open the chat in agent mode, ask for a template, and approve the tool calls as they appear.
Headless or CI? Use an API key from your dashboard instead of the browser sign-in.
Check that it works
- Send a prompt that names the server and a low-impact action, then expand the tool call in chat and check that it belongs to animatedwebs. A plausible answer alone is not proof that the tool ran.
- 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 VS Code. Each one makes it call real AnimatedWebs tools.
In agent mode: use animatedwebs to find a template for a wedding photographer and apply it to this Vite project.Search animatedwebs for a testimonial carousel component and add it to src/components.Get the animatedwebs style reference for an Apple-like site and write its color tokens into a CSS file.If something goes wrong in VS Code
- The server does not appear
- Check which configuration scope you wrote to (workspace or user profile), then read the server output the VS Code troubleshooting page points to.
- Sign-in or connection fails
- Check the sign-in prompt and any organization policy that restricts MCP servers, as the VS Code docs advise.
- The server runs but no tool is called
- Name the server in your prompt and check the tool list in the chat debug view. The tools may be switched off in the tool picker.
- Your mcp.json uses the wrong top-level key
- VS Code's own file uses servers. The portable .mcp.json in a workspace root uses mcpServers. Do not mix them.
Questions about VS Code and AnimatedWebs
Does this work in the free Copilot plan?+
MCP tools run through Copilot agent mode in VS Code. What your plan or organization allows is set by GitHub and VS Code, not by AnimatedWebs.
Workspace or user config?+
.vscode/mcp.json shares the server with a project and its collaborators. The user-profile mcp.json keeps it personal. code --add-mcp adds it to your user profile.
How do I keep my API key out of the file?+
Use an inputs entry of type promptString with password true and reference it as ${input:id} in the Authorization header. VS Code prompts once and stores it securely.
Is VS Code on SSE or HTTP Stream?+
With type http, VS Code tries HTTP Stream first. AnimatedWebs serves Streamable HTTP, so it connects on the first try.
Facts checked on
What this page says about VS Code comes from its official documentation, linked below, and VS Code can change, so check its docs for the latest. What it says about AnimatedWebs comes from how our own MCP server works.
- In mcp.json, an HTTP server uses type http with a url under a top-level servers object; headers can carry an Authorization value. VS Code MCP configuration ↗
- With type http, VS Code tries HTTP Stream first; sse is a separate type. VS Code MCP configuration ↗
- MCP: Add Server in the Command Palette lets you choose HTTP (HTTP or Server-Sent Events) and enter a URL. VS Code MCP servers guide ↗
- Servers can be installed from the command line with --add-mcp and from a link in the form vscode:mcp/install?{json}. VS Code MCP developer guide ↗
VS Code 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 VS Code build it
Free accounts open every free prompt, and Pro unlocks the whole vault. Building an agent of your own? Read the agent guide.