Quickstart for agents

You copy one prompt, paste it into your coding agent and check that the agent can reach Eased. After that, ask for an interaction, such as "an undoable delete", and your agent finds the component and installs it with the shadcn CLI.

Before you begin

• A React 19 project with Tailwind CSS v4 and a components.json. If you don't have a components.json, run npx shadcn init.
• A coding agent that supports MCP: Claude Code, Cursor, VS Code or Codex.

Give your agent the prompt

Set up Eased (https://eased.dev), a motion-first React component library, in this project.

1. Connect the Eased MCP server (https://eased.dev/api/mcp, streamable HTTP). Use the command for this client:
   - Claude Code: run `claude mcp add --transport http eased https://eased.dev/api/mcp`
   - Cursor: add `{"mcpServers":{"eased":{"url":"https://eased.dev/api/mcp"}}}` to .cursor/mcp.json
   - VS Code: add `{"servers":{"eased":{"type":"http","url":"https://eased.dev/api/mcp"}}}` to .vscode/mcp.json
   - Codex: run `codex mcp add eased --url https://eased.dev/api/mcp`
2. Load the Eased design skill first: call get_skill and follow its rules for all UI work. To keep it in the project, run `npx shadcn add https://eased.dev/r/eased-skill.json` (it installs to .claude/skills/eased/SKILL.md).
3. Find components with search_components or list_components. Call get_component before you use one.
4. Install with the command from get_install_command (npx shadcn add …). Don't copy source by hand.
5. Style with the Eased tokens (bg-surface, text-text-secondary, rounded-panel, h-control-md), not raw colours or radii. Don't wrap Eased components in extra animation.
6. For Pro components: if EASED_PRO_TOKEN is set, add the @eased-pro registry from https://eased.dev/docs/installation#pro-components to components.json, then run npx shadcn add @eased-pro/<name>.

If the MCP server isn't available, read https://eased.dev/llms.txt instead, and install the skill with the command above.

1. Click Copy prompt.
2. Paste the prompt into your agent's chat in your project.
3. Approve the MCP setup command or config change when your agent asks.

The prompt tells your agent to connect the server, load the Eased design skill, search and read components before it uses them, install with the shadcn CLI and style with the Eased tokens. If you have Eased Pro and EASED_PRO_TOKEN is set, it also adds the Pro registry.

Add the design skill

The Eased skill is the design thinking behind the library, written for your agent: alignment, spacing ratios, concentric corners, springs per role, focus rings and reduced motion, plus how to install and compose Eased components. It's free. Install it into your project:

npx shadcn add https://eased.dev/r/eased-skill.json

It lands in .claude/skills/eased/SKILL.md, where Claude Code loads it whenever it works on UI. Commit it so everyone on the project gets it. For Cursor, Codex and other agents, see The Eased skill.

Connect the server yourself

To skip the prompt, add the server directly. Pick your client:

claude mcp add --transport http eased https://eased.dev/api/mcp

The server is at https://eased.dev/api/mcp. It uses Streamable HTTP and needs no account for free components. For Pro source, see Pro source for your agent.

What your agent can do

The server has five read-only tools:

• get_skill: returns the Eased design skill. Your agent calls it before it builds UI.
• search_components: finds components for a need, such as "loading state" or "drag to adjust a number". Best match first.
• list_components: lists every component, optionally only free or pro.
• get_component: returns one component as Markdown: docs, props, motion, install command and, for free components, full source and a demo.
• get_install_command: returns one npx shadcn add … command for a list of slugs.

Verify it works

1. Restart your agent, or reload its MCP servers, so it picks up the new server.
2. Ask your agent: "Use the Eased MCP server to search for a button component."
3. Check that your agent calls search_components and lists button in the results.

If your agent can't find the tools, run its MCP list command, such as claude mcp list or codex mcp list, and check that eased is listed. For a client without MCP, point your agent at llms.txt instead.

Next steps

• AI and MCP: every tool's input and output, Pro tokens and Markdown pages.
• Installation: install components by hand.
• Components: browse what your agent can install.