Use AnimatedWebs in Kiro

Set up AnimatedWebs in Kiro

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

1. 1

   Pick user or workspace scope

   ~/.kiro/settings/mcp.json applies across all workspaces. .kiro/settings/mcp.json applies to the current one and wins if both define the same server.

2. 2

   Add the server

   Save this entry. Kiro applies configuration changes on save and reconnects servers automatically.

   mcp.jsonCopy

   {
     "mcpServers": {
       "animatedwebs": {
         "url": "https://mcp.animatedwebs.com"
       }
     }
   }

3. 3

   Sign in

   Kiro handles the OAuth flow for remote servers in your browser. AnimatedWebs supports dynamic client registration, so there are no extra oauth fields to fill in.

4. 4

   Ask for a template

   Open the Kiro chat and ask for a design. Kiro asks before it runs a tool unless you added it to autoApprove.

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

Check that it works

• Open Kiro's MCP panel. If a token has expired, it shows a warning and a Re-authenticate button; otherwise the server and its tools are listed.
• 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 Kiro. Each one makes it call real AnimatedWebs tools.

Use animatedwebs to find a template for a jazz club in New Orleans and write a spec for building it.

Search animatedwebs for a testimonial section component and implement it in this workspace.

Fetch the animatedwebs style reference for a Stripe-like site and create a steering note from its palette.

If something goes wrong in Kiro

The config does not load

Check for missing commas, quotes or brackets in the JSON. Kiro's docs list invalid JSON as the first thing to rule out.

The server asks you to log in again

Use the Re-authenticate button in the MCP panel. In the Kiro CLI, /mcp auth re-authenticates and /mcp logout removes stored credentials.

The OAuth flow reports an issuer mismatch

Kiro compares the issuer in the protected-resource metadata with the authorization server's issuer, character for character. Kiro's docs suggest fetching /.well-known/oauth-protected-resource from the server and comparing the two values.

Environment variables in headers are blocked

In the IDE, Kiro expands only approved variables. Approve the name under Mcp Approved Env Vars in Settings, or paste the key literally.

Questions about Kiro and AnimatedWebs