framer-dalton 0.0.32 → 0.0.33

package/README.md

@@ -1,8 +1,20 @@
-# Framer Agent CLI
+<p>
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="https://misc.framerstatic.com/framer-local-agents/external-agent-dark.svg">
+        <source media="(prefers-color-scheme: light)" srcset="https://misc.framerstatic.com/framer-local-agents/external-agent-light.svg">
+        <img alt="Framer Server API" src="https://misc.framerstatic.com/framer-local-agents/external-agent-light.svg" width="264">
+    </picture>
+</p>
 
-CLI and agent skills for interacting with Framer projects via the Framer Server API.
+<img alt="outstretched palm with glassy framer logo floating above it" src="https://misc.framerstatic.com/framer-local-agents/agents.png" />
 
-## Installation
+This package contains skills and a CLI tool to enable your favourite local agent to interact directly with Framer projects. It works with Claude Code, Cursor, Codex, and other AI agents.
+
+See [framer.com/agents/external](https://www.framer.com/agents/external/) to learn more.
+
+## Getting Started
+
+### 1. Installation
 
 Install or refresh the globally available skills:
 
@@ -10,21 +22,102 @@ Install or refresh the globally available skills:
 npx @framer/agent@latest setup
 ```
 
-That installs skills into `~/.agents/skills` and `~/.claude/skills`.
+This will install skills into `~/.agents/skills` and `~/.claude/skills`.
+
+If you're new to node/npm or are struggling with setup, try pasting the following prompt into your agent:
+
+<details>
+<summary>Prompt</summary>
+
+```txt
+Goal:
+Ensure Node.js v24 or newer is installed, then run the @framer/agent setup.
+
+Check first:
+Run `node --version`.
+
+If Node.js is already installed and the major version is 24 or higher:
+Do not install or modify Node.js. Continue to the @framer/agent setup.
+
+If Node.js is missing or older than v24:
+Install an official Node.js release with major version 24 or higher.
+
+Install policy:
+Use an existing package manager only if it is already installed.
+Do not install Homebrew, winget, Chocolatey, Scoop, nvm, fnm, or another package manager just for this task.
+
+Install options:
+macOS:
+- If Homebrew is already installed, use it to install Node.js.
+- Otherwise use the official Node.js `.pkg` installer.
+
+Windows:
+- If winget is already installed, use it to install Node.js.
+- Otherwise use the official Node.js `.msi` installer.
+
+Linux:
+- If the system package manager can install Node.js v24 or newer, use it.
+- For Debian/Ubuntu or RHEL/Fedora-compatible systems, use the official NodeSource instructions for Node.js 24 or newer.
+- Otherwise use the official Node.js standalone Linux binary for the detected architecture.
+
+Official downloads:
+Use the static latest Node.js release directory when downloading installers or binaries:
+https://nodejs.org/download/release/latest/
+
+Verify:
+After installing, run `node --version` again.
+Only continue if the major version is 24 or higher.
+
+Final step:
+Run `npx @framer/agent@latest setup`.
+
+Success message:
+If the setup completes successfully, tell the user they are now set up and what the user should do next:
+
+Create a new thread, then copy your Framer project link:
+- Browser: copy the address bar when the project is open.
+- App: right-click the project tab, then choose "Copy Project Link".
+```
+</details>
+
+### 2. Connect to your projects
+
+In your AI agent, simply ask to work on your project, pasting the relevant project URL. You can also manually invoke the `framer` skill. This will connect to your Framer project and ask you to grant access to the project from your browser.
+
+### 3. Write your first prompt
+
+Tell your agent what to build, change, or fix. It works directly in your Framer project without the need to have it open.
+
+## Frequently asked questions
+
+### Do I need to set up a Framer MCP server?
+
+No. Framer doesn’t require a separate MCP server. If you’re searching for a Framer MCP, the native Framer Agent connection gives Claude Code, Cursor, Codex, Gemini CLI, and other AI tools direct access to your canvas, components, CMS, and project context, without manual MCP setup.
+
+### Which AI agents are supported?
+
+Framer Agent works with any local agent harness that can work with Skills and can call local tools, including Claude Code, Codex, Cursor, Gemini CLI, and Windsurf.
+
+### Can the agent edit my live site?
+
+No. The agent works on your canvas in the Framer editor, not on your published site. Changes only go live when you choose to publish them yourself or tell the agent.
+
+### Does the agent have access to my CMS?
+
+Yes. Once connected, the agent can read and write CMS collections, including creating, updating, and deleting items. You stay in control of what gets published.
+
+### Is it safe to give an agent access to my project?
+
+The agent only has access to the projects you explicitly connect it to. It cannot access other projects, your account settings, or billing. You can revoke access at any time.
 
-## How It Works
+### What happens if the agent makes a mistake?
 
-The CLI and the installed skills are meant to work together. There are three skills:
+Framer has branching, so every change made by an external agent automatically happens on a branch. You can undo changes, review the branch, and decide when to merge it back into your main branch.
 
-- `framer` - the base meta skill that explains setup, project selection, and session creation.
-- `framer-code-components` - explains specific prompts for how to write code components and provides examples.
-- `framer-project-<project id>` - a dynamically-created skill for interacting with a specific project.
+### Will this consume my tokens or Framer tokens?
 
-1. Running `npx @framer/agent@latest setup` will install the base `framer` and `framer-code-components` skills.
-2. The frontmatter of `framer-code-components` tells agents to always load `framer` and the generated project skill first.
-3. The frontmatter of `framer` tells agents to run `npx @framer/agent@latest setup` BEFORE loading the skill. This command will auto-update the cli and update the skill files.
-4. Creating a new session for a project will create a `framer-project-<project id>` file. This file contains the latest agent system prompt from `framer.agent.getSystemPrompt` and the latest project context from `framer.agent.getContext`. Agents must load this project-specific skill immediately after creating a session before doing any connected-project work.
+Usage will only consume your own agent's tokens.
 
-## Local Development
+### Why does this use so many tokens?
 
-See the CONTRIBUTING.md file in this repository for local development instructions.
+Token consumption for Framer Agent can be relatively high. For other work like web development tasks, your agent already has a lot of knowledge baked into its model and so is able to get to work straight away. For Framer Agent, we need to first teach your AI how to interact with Framer projects and provide a lot of context. This requires a certain amount of token usage before being able to undertake the task at hand.

package/dist/cli.js

@@ -12,7 +12,7 @@ import net from 'net';
 import { fileURLToPath } from 'url';
 import { createTRPCClient, httpLink } from '@trpc/client';
 
-/* @framer/ai CLI v0.0.32 */
+/* @framer/ai CLI v0.0.33 */
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
@@ -375,7 +375,7 @@ __name(markTelemetryNoticeShown, "markTelemetryNoticeShown");
 // src/version.ts
 var VERSION = (
   // typeof is used to ensure this can be used just via tsx or node etc. without build
-  "0.0.32" 
+  "0.0.33" 
 );
 var trackingEndpoint = "https://events.framer.com/track";
 var inProgressTrackings = /* @__PURE__ */ new Set();

package/dist/start-relay-server.js

@@ -14,7 +14,7 @@ import { z } from 'zod';
 import { createRequire } from 'module';
 import * as vm from 'vm';
 
-/* @framer/ai relay server v0.0.32 */
+/* @framer/ai relay server v0.0.33 */
 var __defProp = Object.defineProperty;
 var __knownSymbol = (name2, symbol) => (symbol = Symbol[name2]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name2);
 var __typeError = (msg) => {
@@ -199,7 +199,7 @@ __name(debug, "debug");
 // src/version.ts
 var VERSION = (
   // typeof is used to ensure this can be used just via tsx or node etc. without build
-  "0.0.32" 
+  "0.0.33" 
 );
 
 // src/relay-client.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer-dalton",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "type": "module",
   "bin": "./dist/cli.js",
   "main": "./dist/cli.js",