Use AnimatedWebs in Claude Code
Claude Code connects to AnimatedWebs with one claude mcp add command and a browser sign-in, so your agent can search templates and fetch full build prompts. You can also install the AnimatedWebs plugin, which adds skills and slash commands on top of the MCP server.
- Connects with
- Streamable HTTP (--transport http)
- Sign-in
- Browser OAuth from /mcp, or a Bearer header
- Config lives in
- ~/.claude.json (user scope)
Set up AnimatedWebs in Claude Code
Server address: https://mcp.animatedwebs.com
- 1
Open a terminal
Any terminal works. You do not need to be inside a project when you use the user scope.
- 2
Register the server
Run one of these. The plugin route installs the MCP server plus the AnimatedWebs skills; the terminal command adds only the server.
in Claude Code/plugin marketplace add iboss21/animatedwebs-claude /plugin install animatedwebs@animatedwebsor: MCP only (terminal)claude mcp add animatedwebs --scope user --transport http https://mcp.animatedwebs.com - 3
Sign in
Start Claude Code and run /mcp, select animatedwebs and follow the browser login. Claude Code stores the token and refreshes it for you.
- 4
Ask for a design
Describe the site you want. Claude Code calls search_templates and get_template_prompt on its own.
Headless or CI? Use an API key from your dashboard instead of the browser sign-in.
Check that it works
- Run claude mcp list in a terminal. The animatedwebs line should read Connected. Needs authentication means you still have to sign in with /mcp.
- Inside a session, /mcp shows each server with its status and tool count. 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 Claude Code. Each one makes it call real AnimatedWebs tools.
Use the animatedwebs MCP to find a template for a boutique hotel in Savannah and build it as the homepage of this Next.js app./animatedwebs:site a family dental clinic in Austin, calm and bright, with a booking section.Search animatedwebs for a cinematic video background for a hero, then wire the clip into src/app/page.tsx.If something goes wrong in Claude Code
- claude mcp list shows Needs authentication
- Open /mcp in a session, pick animatedwebs and finish the browser login. Run claude mcp login animatedwebs from the shell if you prefer.
- The browser does not open or the redirect fails
- Copy the login URL by hand. If the redirect fails after you sign in, paste the full callback URL from the address bar into the prompt in Claude Code.
- The server shows Failed to connect with a 401
- claude mcp add saves the entry without testing it. Check the URL, or if you passed --header, that the key is current and has no trailing newline.
- Startup is slow
- Set a longer startup timeout, for example MCP_TIMEOUT=10000 claude, as the Claude Code docs describe.
Questions about Claude Code and AnimatedWebs
Which scope should I use for animatedwebs?+
The command above uses user scope, so the server is available in all your projects and is stored in ~/.claude.json. Use --scope project to write a .mcp.json your team shares; teammates then sign in themselves.
Plugin or plain MCP server?+
The plugin installs the MCP server and adds AnimatedWebs skills and /animatedwebs commands. The plain server gives you only the tools. Both read the same catalog.
Can I use an API key instead of the browser sign-in?+
Yes. Add --header "Authorization: Bearer aw_..." to the command, using the key from your dashboard. That is the route for CI and headless machines.
How do I sign out?+
Choose Clear authentication in the /mcp menu, or run claude mcp logout animatedwebs. Removing the server with claude mcp remove also deletes its stored tokens.
Facts checked on
What this page says about Claude Code comes from its official documentation, linked below, and Claude Code can change, so check its docs for the latest. What it says about AnimatedWebs comes from how our own MCP server works.
- claude mcp add --transport http <name> <url> adds a remote HTTP server, and --header adds a custom header such as a Bearer token. Claude Code MCP docs ↗
- OAuth runs from /mcp (or claude mcp login); tokens are stored and refreshed automatically. Claude Code MCP docs ↗
- Scopes are local (default), project (.mcp.json) and user; local and user entries live in ~/.claude.json. Claude Code MCP docs ↗
- claude mcp list reports Connected, Needs authentication or Failed to connect for each server. Claude Code MCP docs ↗
Claude 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 Claude 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.