feat: Introduce Import from Figma using MCP Functionality

[iNerdStack]

Description

This PR introduces import from Figma using MCP, it connects with Figma desktop SSE service.
Adds new context option for import from figma in AI chat

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation update
• Release
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

---

Important

Introduces Figma import functionality using MCP, adding UI components, API routes, and context management for Figma designs.

• Behavior:
  • Adds FigmaInput component to action-buttons.tsx for importing Figma designs.
  • Connects to Figma desktop SSE service for design data retrieval.
  • Supports importing from Figma URL and current selection.
• API:
  • Introduces figmaRouter in figma.ts for handling Figma-related API requests.
  • Implements getDesignFromUrl and getCurrentSelection procedures.
• Context Management:
  • Updates ChatContext in context.ts to include Figma context handling.
  • Adds addFigmaContext and removeFigmaContext methods.
• Models:
  • Adds FigmaMessageContext to context.ts for managing Figma data.
• UI:
  • Adds FigmaLogo icon to icons/index.tsx.

^{This description was created by for 871408c. You can customize this summary. It will automatically update as commits are pushed.}

[vercel]

@iNerdStack is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to 871408c in 3 minutes and 12 seconds. Click for details.

• Reviewed 1023 lines of code in 10 files
• Skipped 0 files when reviewing.
• Skipped posting 2 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-input/figma-input.tsx:139

• Draft comment:
  The clipboard URL validation uses a simple 'includes("figma.com")' check; consider using a more robust URL validation or proper URL parsing to ensure the pasted value is a valid Figma URL.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% The simple check is just for the clipboard paste feature. The actual URL validation will happen server-side when the URL is used. The clipboard check is just a UX feature to give immediate feedback. A more complex validation here would be unnecessary since the real validation happens later. The current approach is reasonable for this use case. The comment has a point that the validation could be more robust. Malicious URLs containing "figma.com" somewhere could potentially pass this check. The risk is very low since this is just initial feedback - the actual URL will be validated server-side before any real processing happens. The simple check is appropriate for this UX-focused clipboard feature. The comment should be deleted. The simple URL check is appropriate for this UX feature since proper validation happens server-side. Making it more complex would be overengineering.

2. apps/web/client/src/server/api/routers/figma.ts:177

• Draft comment:
  Similarly, in waitForMCPResponse, using an AbortController for the SSE fetch could improve cancellation and timeout handling.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 30% vs. threshold = 50% The current implementation already has a working timeout mechanism with cleanup. While AbortController could provide a more modern way to handle cancellation, the existing solution with reader.cancel() is functionally complete and clear. The suggestion is more of a style preference than a critical improvement. The current code handles both timeout and cleanup effectively. AbortController is indeed a more modern API that could simplify the code slightly. The current implementation could potentially leak resources if cleanup isn't called in all edge cases. The current implementation already has thorough cleanup handling in all code paths - normal completion, timeout, and error cases. The benefit of switching to AbortController would be minimal. While using AbortController is a valid suggestion, the current implementation is already robust and clear. The suggested change would be more of a style refactor than a meaningful improvement.

Workflow ID: wflow_EQdWNpPe84awAH5g

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}