feat: add mcp server #42
Open
+10,110
−258
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… usage in PrefSection
- Refactored CodeSection.vue to utilize generateCodeBlocksForNode for code generation. - Enhanced PrefSection.vue with MCP icon button for server connection. - Updated App.vue to manage MCP connection status and display a badge with connection details. - Implemented MCP connection logic in a new composable (useMcp) to handle WebSocket interactions. - Added protocol definitions for messages exchanged between the hub and extensions. - Created tools for generating code based on selected nodes, including a new get_code tool. - Removed deprecated schema.ts file and updated types accordingly. - Introduced MCP icon component for UI representation. - Improved styling for MCP badge in App.vue.
…prove tooltip copy
…amic copy commands
…ayout; refactor icons and remove unused components
…nds and configurations
…enshot and structure
…ic tree utilities
…ngifyComponent to export
- Added optional `tempadTools` property to the Window interface for MCPHandlers (debug only). - Updated RequestPayload and ResponsePayload interfaces to include `returnDevComponent` and `devComponent`. - Refactored codegen function to accept `returnDevComponent` parameter. - Modified generateCodeBlocksForNode to return ResponsePayload instead of CodeBlock array. - Introduced `rgbaToCss` utility function for color conversion. - Adjusted stringifyVueComponent to handle className correctly. - Implemented token definitions handling in mcp/tools/token-defs.ts for better style and variable management.
…ity across multiple files
… with HTML escaping
…n with raw markup support
…nd updating background repeat regex
…and update handleGetCode to support token resolution
- Introduced AssetUploadedMessageSchema and AssetUploadRequestSchema to handle asset upload messages. - Implemented AssetStore for managing asset records, including upload, retrieval, and persistence. - Created AssetHttpServer to serve uploaded assets over HTTP. - Enhanced tools to support asset management, including asset descriptors and asset upload handling. - Updated protocol and shared constants to accommodate asset-related operations. - Refactored code to ensure assets are uploaded and managed correctly within the MCP environment.
…a support, and cleanup of stale files
…e asset upload key generation
…, asset uploads, and variable resolution
…ed asset handling and code generation
…ions and resource details
…ing functionality
There was a problem hiding this comment.
Pull request overview
This PR adds Model Context Protocol (MCP) server functionality to TemPad Dev, enabling AI coding assistants to interact with Figma design data. The implementation includes tools for extracting code, structure, screenshots, and design tokens from Figma nodes.
Key Changes:
- Added MCP server package with tools for design data extraction
- Implemented WebSocket-based communication infrastructure
- Added comprehensive utility functions for CSS/Tailwind conversion
- Updated dependencies and workspace configuration
Reviewed changes
Copilot reviewed 93 out of 95 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated version to 0.14.0, added MCP dependencies and build scripts |
| pnpm-workspace.yaml | Added workspace configuration for monorepo structure |
| plugins/package.json | Version bump to 0.6.1, added build scripts |
| plugins/src/index.ts | Added RAW_TAG_NAME constant and raw() helper function |
| utils/tempad.ts | Changed parameter type from SelectionNode to SceneNode |
| utils/tailwind.ts | New comprehensive Tailwind CSS utility (1010 lines) |
| utils/css.ts | Major expansion with parsing, normalization, and canonicalization functions |
| utils/component.ts | Added RAW_TAG_NAME support, enhanced stringification with inline rendering |
| utils/color.ts | Added new color utility functions (rgbaToCss, formatHex, compressHex) |
| utils/codegen.ts | Added CodegenConfig type and generateCodeBlocksForNode function |
| utils/object.ts | Code formatting improvements |
| ui/state.ts | Added mcpOn option, removed SelectionNode type alias |
| types/*.ts | Added eslint-disable comments for any types |
| mcp/* | New MCP implementation files (runtime, tools, config, transport) |
| mcp-server/* | New MCP server package structure |
| entrypoints/ui/style.css | Added cursor and user-select styles |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 94 out of 96 changed files in this pull request and generated no new comments.
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.