1.3.0

.changeset/config.json

@@ -12,5 +12,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["framekit", "docs", "@xmtp/tsconfig"]
+  "ignore": ["baselinks", "agent-client", "docs", "@xmtp/tsconfig"]
 }

README.md

@@ -12,10 +12,14 @@ A set of tools for AI developers to build on top of [XMTP](https://xmtp.org)
 
 ### Plugins
 
-- [`framekit`](/packages/framekit): A suite for backend frames
 - [`xmtp`](/packages/xmtp/): A node js wrapper for AI agents.
 - [`xmtp-client`](/packages/xmtp-client/): A client plugin for interacting with hte backend.
 
+### Other
+
+- [`agent-client`](/packages/agent-client): A suite for backend frames
+- [`baselinks`](/packages/baselinks): A suite for backend frames
+
 ## Contributing
 
 See our [contribution guide](./CONTRIBUTING.md) to learn more about contributing to this project.

community/plugins.json

@@ -14,9 +14,9 @@
     "author": "ephemeraHQ"
   },
   {
-    "href": "/plugins/framekit",
-    "title": "FrameKit",
-    "description": "Use FrameKit to send frames.",
+    "href": "/plugins/baselinks",
+    "title": "Baselinks",
+    "description": "Use Baselinks to send frames.",
     "icon": "🖼️",
     "author": "ephemeraHQ"
   },

package.json

@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "build": "yarn build:message-kit && yarn build:packages && yarn build:templates",
+    "build:agent-client": "turbo run build --filter=./packages/agent-client --force",
     "build:message-kit": "turbo run build --filter=./packages/message-kit --force",
     "build:packages": "turbo run build --filter='./packages/*' --filter='!./packages/message-kit'",
     "build:templates": "turbo run build --filter='./templates/*'",
@@ -21,18 +22,19 @@
     "cli": "node packages/create-message-kit/index.js",
     "copy": "node scripts/copyTemplates.js",
     "dev": "yarn build:xmtp && cd packages/message-kit && yarn build:watch",
+    "dm": "yarn build:agent-client && cd packages/agent-client && yarn dev",
     "docs": "cd packages/docs && yarn dev",
     "domain": "ngrok http --hostname=frames.ngrok.app 3000",
     "format": "turbo run format",
-    "framekit": "yarn build:xmtp-client && cd packages/framekit && yarn dev",
+    "links": "yarn build:xmtp-client && cd packages/links && yarn dev",
     "play": "cd templates/playground && yarn dev",
     "publish": "yarn install && yarn build && yarn copy && node scripts/publish.js",
     "templates": "node scripts/devTemplates.js",
     "test": "FORCE_COLOR=1 turbo run test --force --concurrency=1",
     "test:client": "cd packages/xmtp/tests && yarn test:client",
     "test:flow": "cd packages/message-kit/tests && yarn test:flow",
-    "test:framekit": "cd packages/message-kit/tests && yarn test:framekit",
     "test:intent": "cd packages/message-kit/tests && yarn test:intent",
+    "test:links": "cd packages/message-kit/tests && yarn test:links",
     "test:parsing": "cd packages/message-kit/tests && yarn test:parsing",
     "test:prompt": "cd packages/message-kit/tests && yarn test:prompt",
     "typecheck": "FORCE_COLOR=1 turbo run typecheck"

packages/agent-client/README.md

@@ -0,0 +1,3 @@
+# Baselinks
+
+See [Baselinks](https://message-kit.org/plugins/baselinks) in MessageKit

packages/agent-client/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "agent-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build ",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@farcaster/frame-sdk": "0.0.10",
+    "@types/next": "^9.0.0",
+    "cheerio": "^1.0.0",
+    "ethers": "^6.13.4",
+    "geist": "^1.3.1",
+    "next": "^15.0.3",
+    "qrcode": "^1.5.4",
+    "qrcode.react": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "^2.21.45",
+    "xmtp-client": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  },
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": ">=20"
+  }
+}

packages/agent-client/src/app/page.module.css

@@ -0,0 +1,168 @@
+.page {
+  --gray-rgb: 255, 255, 255;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #0052ff;
+  --button-secondary-hover: #e6f0ff;
+
+  display: grid;
+  grid-template-rows: 20px 1fr 20px;
+  align-items: center;
+  justify-items: center;
+  min-height: 100svh;
+  padding: 80px;
+  gap: 64px;
+  font-family: var(--font-geist-sans);
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 0, 0, 0;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #003bb3;
+    --button-secondary-hover: #1a1a1a;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-row-start: 2;
+}
+
+.main ol {
+  font-family: var(--font-geist-mono);
+  padding-left: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  list-style-position: inside;
+}
+
+.main li:not(:last-of-type) {
+  margin-bottom: 8px;
+}
+
+.main code {
+  font-family: inherit;
+  background: var(--gray-alpha-100);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.ctas {
+  display: flex;
+  gap: 16px;
+}
+
+.ctas a {
+  appearance: none;
+  border-radius: 128px;
+  height: 48px;
+  padding: 0 20px;
+  border: none;
+  border: 1px solid transparent;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+a.primary {
+  background: #0052ff;
+  color: #ffffff;
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: #e6f0ff;
+  min-width: 180px;
+}
+
+.footer {
+  grid-row-start: 3;
+  display: flex;
+  gap: 24px;
+}
+
+.footer a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer img {
+  flex-shrink: 0;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+
+  .footer a:hover {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    padding-bottom: 80px;
+  }
+
+  .main {
+    align-items: center;
+  }
+
+  .main ol {
+    text-align: center;
+  }
+
+  .ctas {
+    flex-direction: column;
+  }
+
+  .ctas a {
+    font-size: 14px;
+    height: 40px;
+    padding: 0 16px;
+  }
+
+  a.secondary {
+    min-width: auto;
+  }
+
+  .footer {
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+}

packages/agent-client/src/app/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+import React, { Suspense, useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import sdk, { type FrameContext } from "@farcaster/frame-sdk";
+import { getUserInfo, type UserInfo } from "@/app/utils/resolver";
+import Chat from "../components/Chat";
+
+export default function Home(): JSX.Element {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <HomeContent />
+    </Suspense>
+  );
+}
+
+function HomeContent(): JSX.Element {
+  const searchParams = useSearchParams();
+  const address = searchParams.get("address");
+  console.log("address", address);
+  const [user, setUser] = useState<UserInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchUserInfo = async () => {
+      try {
+        console.log("Fetching user info for address:", address);
+        const userInfo = await getUserInfo(address as string);
+        console.log("Fetched user info:", userInfo);
+
+        setUser(userInfo ?? null);
+      } catch (error) {
+        console.error("Error fetching user info:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUserInfo();
+  }, [address]);
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!user) {
+    return <div>User not found</div>;
+  }
+
+  return (
+    <FrameHTML user={user}>
+      <Suspense fallback={<div>Loading...</div>}>
+        <ChatContent user={user} />
+      </Suspense>
+    </FrameHTML>
+  );
+}
+
+// Create a wrapper component that will render the full HTML
+function FrameHTML({
+  children,
+  user,
+}: {
+  children: React.ReactNode;
+  user: UserInfo;
+}) {
+  return <>{children}</>;
+}
+
+function ChatContent({ user }: { user: UserInfo }): JSX.Element {
+  const [isSDKLoaded, setIsSDKLoaded] = useState(false);
+  const [context, setContext] = useState<FrameContext>();
+
+  useEffect(() => {
+    const initFrame = async () => {
+      setContext(await sdk.context);
+      sdk.actions.ready();
+    };
+
+    if (sdk && !isSDKLoaded) {
+      setIsSDKLoaded(true);
+      initFrame();
+    }
+  }, [isSDKLoaded]);
+
+  return (
+    <div style={{ height: "100vh", width: "100%" }}>
+      <Chat user={user} />
+    </div>
+  );
+}