veryfront 0.0.49 → 0.0.51

package/dist/integrations/figma/connector.json

@@ -0,0 +1,100 @@
+{
+  "name": "figma",
+  "displayName": "Figma",
+  "icon": "figma.svg",
+  "description": "Access Figma designs, files, comments, and collaborate on design projects",
+  "auth": {
+    "type": "oauth2",
+    "provider": "figma",
+    "authorizationUrl": "https://www.figma.com/oauth",
+    "tokenUrl": "https://www.figma.com/api/oauth/token",
+    "scopes": ["file_read"],
+    "callbackPath": "/api/auth/figma/callback",
+    "tokenAuthMethod": "client_secret_post",
+    "requiredApis": [
+      {
+        "name": "Figma OAuth App",
+        "enableUrl": "https://www.figma.com/developers/apps"
+      }
+    ]
+  },
+  "envVars": [
+    {
+      "name": "FIGMA_CLIENT_ID",
+      "description": "Figma OAuth Client ID (from your app settings)",
+      "required": true,
+      "sensitive": false,
+      "docsUrl": "https://www.figma.com/developers/apps"
+    },
+    {
+      "name": "FIGMA_CLIENT_SECRET",
+      "description": "Figma OAuth Client Secret",
+      "required": true,
+      "sensitive": true,
+      "docsUrl": "https://www.figma.com/developers/apps"
+    }
+  ],
+  "tools": [
+    {
+      "id": "list-files",
+      "name": "List Files",
+      "description": "List recent Figma files accessible to the user",
+      "requiresWrite": false
+    },
+    {
+      "id": "get-file",
+      "name": "Get File",
+      "description": "Get detailed information about a Figma file including components and styles",
+      "requiresWrite": false
+    },
+    {
+      "id": "get-comments",
+      "name": "Get Comments",
+      "description": "Get all comments on a Figma file",
+      "requiresWrite": false
+    },
+    {
+      "id": "post-comment",
+      "name": "Post Comment",
+      "description": "Post a comment on a Figma file",
+      "requiresWrite": true
+    },
+    {
+      "id": "list-projects",
+      "name": "List Projects",
+      "description": "List all projects in a team",
+      "requiresWrite": false
+    }
+  ],
+  "prompts": [
+    {
+      "id": "review-design",
+      "title": "Review a design",
+      "prompt": "Review a Figma design file and provide feedback on the components, layout, and design system usage.",
+      "category": "design",
+      "icon": "eye"
+    },
+    {
+      "id": "summarize-comments",
+      "title": "Summarize comments",
+      "prompt": "Read all comments on a Figma file and summarize the feedback, action items, and unresolved discussions.",
+      "category": "design",
+      "icon": "message"
+    },
+    {
+      "id": "extract-components",
+      "title": "Extract components",
+      "prompt": "List all components in a Figma file and describe their structure, variants, and properties.",
+      "category": "design",
+      "icon": "component"
+    },
+    {
+      "id": "design-feedback",
+      "title": "Give design feedback",
+      "prompt": "Review the design file and post constructive feedback as comments on specific elements.",
+      "category": "design",
+      "icon": "plus"
+    }
+  ],
+  "suggestedWith": ["linear", "slack", "notion"]
+}

package/dist/integrations/figma/files/_env.example

@@ -0,0 +1,5 @@
+# Figma OAuth Integration
+# Get these credentials from https://www.figma.com/developers/apps
+
+FIGMA_CLIENT_ID=your_figma_client_id
+FIGMA_CLIENT_SECRET=your_figma_client_secret

package/dist/integrations/figma/files/ai/tools/get-comments.ts

@@ -0,0 +1,72 @@
+import { tool } from "veryfront/ai";
+import { z } from "zod";
+import { getComments } from "../../lib/figma-client.ts";
+
+export default tool({
+  id: "get-comments",
+  description:
+    "Get all comments on a Figma file. Returns comment threads with messages, authors, timestamps, and resolution status.",
+  inputSchema: z.object({
+    fileKey: z.string().describe("The file key (from the Figma URL)"),
+    includeResolved: z.boolean().default(false).describe("Include resolved comments"),
+    limit: z.number().min(1).max(100).default(50).describe("Maximum number of comments to return"),
+  }),
+  async execute({ fileKey, includeResolved, limit }) {
+    const response = await getComments(fileKey);
+    let comments = response.comments;
+
+    // Filter out resolved comments if requested
+    if (!includeResolved) {
+      comments = comments.filter((comment) => !comment.resolved_at);
+    }
+
+    // Limit the number of comments
+    comments = comments.slice(0, limit);
+
+    // Transform comments into a more readable format
+    const formattedComments = comments.map((comment) => ({
+      id: comment.id,
+      message: comment.message,
+      author: {
+        handle: comment.user.handle,
+        avatar: comment.user.img_url,
+      },
+      createdAt: comment.created_at,
+      resolvedAt: comment.resolved_at,
+      isResolved: !!comment.resolved_at,
+      parentId: comment.parent_id,
+      isReply: !!comment.parent_id,
+      location: comment.client_meta.node_id
+        ? {
+          nodeIds: comment.client_meta.node_id,
+          x: comment.client_meta.x,
+          y: comment.client_meta.y,
+        }
+        : null,
+    }));
+
+    // Group comments into threads
+    const threads: Array<{
+      rootComment: typeof formattedComments[0];
+      replies: typeof formattedComments;
+    }> = [];
+
+    const rootComments = formattedComments.filter((c) => !c.isReply);
+
+    for (const root of rootComments) {
+      const replies = formattedComments.filter((c) => c.parentId === root.id);
+      threads.push({
+        rootComment: root,
+        replies,
+      });
+    }
+
+    return {
+      totalComments: comments.length,
+      unresolvedCount: comments.filter((c) => !c.resolved_at).length,
+      resolvedCount: comments.filter((c) => c.resolved_at).length,
+      threads,
+      fileUrl: `https://www.figma.com/file/${fileKey}`,
+    };
+  },
+});

package/dist/integrations/figma/files/ai/tools/get-file.ts

@@ -0,0 +1,54 @@
+import { tool } from "veryfront/ai";
+import { z } from "zod";
+import {
+  extractComponents,
+  extractStyles,
+  getFile,
+  getFileSummary,
+} from "../../lib/figma-client.ts";
+
+export default tool({
+  id: "get-file",
+  description:
+    "Get detailed information about a Figma file including components, styles, and structure. Returns file metadata, component list, and style information.",
+  inputSchema: z.object({
+    fileKey: z.string().describe("The file key (from the Figma URL)"),
+    includeComponents: z.boolean().default(true).describe("Include component information"),
+    includeStyles: z.boolean().default(true).describe("Include style information"),
+    depth: z.number().min(1).max(10).optional().describe(
+      "Depth of nodes to traverse (default: all)",
+    ),
+  }),
+  async execute({ fileKey, includeComponents, includeStyles, depth }) {
+    const file = await getFile(fileKey, { depth });
+    const summary = getFileSummary(file);
+
+    const result: {
+      summary: typeof summary;
+      url: string;
+      thumbnailUrl: string;
+      components?: ReturnType<typeof extractComponents>;
+      styles?: ReturnType<typeof extractStyles>;
+      pages: Array<{ id: string; name: string; type: string }>;
+    } = {
+      summary,
+      url: `https://www.figma.com/file/${fileKey}`,
+      thumbnailUrl: file.thumbnailUrl,
+      pages: (file.document.children || []).map((page) => ({
+        id: page.id,
+        name: page.name,
+        type: page.type,
+      })),
+    };
+
+    if (includeComponents) {
+      result.components = extractComponents(file);
+    }
+
+    if (includeStyles) {
+      result.styles = extractStyles(file);
+    }
+
+    return result;
+  },
+});

package/dist/integrations/figma/files/ai/tools/list-files.ts

@@ -0,0 +1,39 @@
+import { tool } from "veryfront/ai";
+import { z } from "zod";
+import { getProjectFiles, getTeamProjects } from "../../lib/figma-client.ts";
+
+export default tool({
+  id: "list-files",
+  description:
+    "List Figma files in a team project. Returns file names, keys, thumbnails, and last modified dates.",
+  inputSchema: z.object({
+    teamId: z.string().describe("The team ID to list projects from"),
+    projectId: z.string().optional().describe(
+      "Optional project ID to filter files. If not provided, lists all projects",
+    ),
+    limit: z.number().min(1).max(50).default(20).describe("Maximum number of files to return"),
+  }),
+  async execute({ teamId, projectId, limit }) {
+    if (projectId) {
+      // List files from a specific project
+      const response = await getProjectFiles(projectId);
+      return response.files.slice(0, limit).map((file) => ({
+        key: file.key,
+        name: file.name,
+        thumbnailUrl: file.thumbnail_url,
+        lastModified: file.last_modified,
+        url: `https://www.figma.com/file/${file.key}`,
+      }));
+    } else {
+      // List all projects in the team
+      const response = await getTeamProjects(teamId);
+      return {
+        projects: response.projects.slice(0, limit).map((project) => ({
+          id: project.id,
+          name: project.name,
+        })),
+        message: "Use project IDs to get files with the projectId parameter",
+      };
+    }
+  },
+});

package/dist/integrations/figma/files/ai/tools/list-projects.ts

@@ -0,0 +1,69 @@
+import { tool } from "veryfront/ai";
+import { z } from "zod";
+import { getProjectFiles, getTeamProjects } from "../../lib/figma-client.ts";
+
+export default tool({
+  id: "list-projects",
+  description:
+    "List all projects in a Figma team. Optionally include file counts and recent files for each project.",
+  inputSchema: z.object({
+    teamId: z.string().describe("The team ID to list projects from"),
+    includeFiles: z.boolean().default(false).describe("Include recent files for each project"),
+    filesPerProject: z.number().min(1).max(10).default(5).describe(
+      "Number of recent files to include per project (if includeFiles is true)",
+    ),
+    limit: z.number().min(1).max(50).default(20).describe("Maximum number of projects to return"),
+  }),
+  async execute({ teamId, includeFiles, filesPerProject, limit }) {
+    const response = await getTeamProjects(teamId);
+    const projects = response.projects.slice(0, limit);
+
+    if (!includeFiles) {
+      return {
+        projects: projects.map((project) => ({
+          id: project.id,
+          name: project.name,
+        })),
+      };
+    }
+
+    // Fetch files for each project
+    const projectsWithFiles = await Promise.all(
+      projects.map(async (project) => {
+        try {
+          const filesResponse = await getProjectFiles(project.id);
+          const recentFiles = filesResponse.files
+            .slice(0, filesPerProject)
+            .map((file) => ({
+              key: file.key,
+              name: file.name,
+              thumbnailUrl: file.thumbnail_url,
+              lastModified: file.last_modified,
+              url: `https://www.figma.com/file/${file.key}`,
+            }));
+
+          return {
+            id: project.id,
+            name: project.name,
+            fileCount: filesResponse.files.length,
+            recentFiles,
+          };
+        } catch (error) {
+          // If we can't fetch files for a project, return basic info
+          return {
+            id: project.id,
+            name: project.name,
+            fileCount: 0,
+            recentFiles: [],
+            error: error instanceof Error ? error.message : "Unknown error",
+          };
+        }
+      }),
+    );
+
+    return {
+      projects: projectsWithFiles,
+      totalProjects: projects.length,
+    };
+  },
+});

package/dist/integrations/figma/files/ai/tools/post-comment.ts

@@ -0,0 +1,54 @@
+import { tool } from "veryfront/ai";
+import { z } from "zod";
+import { postComment } from "../../lib/figma-client.ts";
+
+export default tool({
+  id: "post-comment",
+  description:
+    "Post a comment on a Figma file. Can be a new comment or a reply to an existing comment thread.",
+  inputSchema: z.object({
+    fileKey: z.string().describe("The file key (from the Figma URL)"),
+    message: z.string().min(1).describe("The comment message to post"),
+    parentId: z.string().optional().describe(
+      "ID of parent comment to reply to (for threaded replies)",
+    ),
+    nodeId: z.string().optional().describe("ID of the Figma node to attach the comment to"),
+    x: z.number().optional().describe(
+      "X coordinate for comment placement (0-1, relative to canvas)",
+    ),
+    y: z.number().optional().describe(
+      "Y coordinate for comment placement (0-1, relative to canvas)",
+    ),
+  }),
+  async execute({ fileKey, message, parentId, nodeId, x, y }) {
+    const clientMeta: {
+      x?: number;
+      y?: number;
+      node_id?: string[];
+    } = {};
+
+    if (x !== undefined) clientMeta.x = x;
+    if (y !== undefined) clientMeta.y = y;
+    if (nodeId) clientMeta.node_id = [nodeId];
+
+    const comment = await postComment(fileKey, message, {
+      client_meta: Object.keys(clientMeta).length > 0 ? clientMeta : undefined,
+      parent_id: parentId,
+    });
+
+    return {
+      success: true,
+      comment: {
+        id: comment.id,
+        message: comment.message,
+        author: {
+          handle: comment.user.handle,
+          avatar: comment.user.img_url,
+        },
+        createdAt: comment.created_at,
+        isReply: !!comment.parent_id,
+        fileUrl: `https://www.figma.com/file/${fileKey}`,
+      },
+    };
+  },
+});

package/dist/integrations/figma/files/app/api/auth/figma/callback/route.ts

@@ -0,0 +1,11 @@
+/**
+ * Figma OAuth Callback
+ */
+
+import { createOAuthCallbackHandler, figmaConfig, memoryTokenStore } from "veryfront/oauth";
+
+export const GET = createOAuthCallbackHandler(figmaConfig, {
+  tokenStore: memoryTokenStore,
+  onSuccess: () => "/",
+  onError: () => "/",
+});

package/dist/integrations/figma/files/app/api/auth/figma/route.ts

@@ -0,0 +1,9 @@
+/**
+ * Figma OAuth Initiation
+ */
+
+import { createOAuthInitHandler, figmaConfig, memoryTokenStore } from "veryfront/oauth";
+
+export const GET = createOAuthInitHandler(figmaConfig, {
+  tokenStore: memoryTokenStore,
+});