Use with AI agents

Connect your agent in one command

1. Add the shadcn MCP server

   Run this in your project and pick your client. It writes the MCP config file for you.

   npx shadcn@latest mcp init --client claude

   Supported clients: claude, cursor, vscode, codex, opencode.

2. Register tweenly

   Add the namespace to components.json so the agent can search and install @tweenly/... items.

   {
     "registries": {
       "@tweenly": "https://trytweenly.vercel.app/r/{name}.json"
     }
   }

3. Ask in plain words

   Restart your agent, then ask it to list tweenly components or add one. It installs the source into components/, along with any npm packages and registry dependencies.

Prompts that work well

Name the component, say where it goes, and give the real data or links. The agent fills in the props.

• Add the tweenly sticky-reveal footer to my landing page with my site's links.
• Use tweenly's chart-bar to show monthly revenue from data/revenue.json, stacked by plan.
• Replace my hero background with tweenly's hero-background, dots variant, accent #2b2bd9.
• Build a sign-up page with the tweenly auth component, split variant, wired to my /api/signup route.
• Add a tweenly page transition to app/layout.tsx and swap my nav links for TransitionLink.

For agents without MCP

Point any model at these files. They are plain text, always up to date, and list every component with its install command, props and a usage example.

• /llms.txt: index of every page and component
• /llms-full.txt: full reference with props and examples

Open in v0

Every component page has an Open in v0 button in the install bar. It loads the component into v0 so you can keep iterating on it with AI.

Contributing with an agent

The repository ships an AGENTS.md with the project rules (file layout, design language, lint rules and checks), so Claude Code, Codex and Cursor follow the same conventions as human contributors. See CONTRIBUTING.md to get started.