આ લેખ પેનપોટ દ્વારા પ્રાયોજિત છે કલ્પના કરો કે તમારી પેનપોટ ફાઇલમાં ડિઝાઇન ઉપરાંત એક સંપૂર્ણ આઇકન સેટ છે, જે તે બધા આઇકન્સનો ઉપયોગ કરતા નથી પરંતુ કેટલાકનો ઉપયોગ કરે છે. જો તમે ક્લાઉડ અથવા જેમિની જેવા AI ને ફક્ત ઉપયોગમાં લેવાતા ચિહ્નોની નિકાસ કરવા માટે પૂછશો, તો તે તે કરી શકશે નહીં. તે પેનપોટ ફાઇલો સાથે ક્રિયાપ્રતિક્રિયા કરવામાં સક્ષમ નથી. જો કે, પેનપોટ MCP સર્વર કરી શકે છે. તે સેટ નિયમો અને પરવાનગીઓ હેઠળ હેન્ડપિક કરેલ સંખ્યામાં કામગીરી કરી શકે છે, ખાસ કરીને કારણ કે પેનપોટ પાસે એક વ્યાપક API છે અને તેથી પણ વધુ કારણ કે તે ઓપન-સોર્સ છે. AI નું કામ ફક્ત તમારા ઉદ્દેશ્યને સમજવાનું છે, MCP સર્વર કરવા માટે યોગ્ય કામગીરી પસંદ કરો (આ કિસ્સામાં નિકાસ કરો), અને કોઈપણ પરિમાણો (એટલે કે, ઉપયોગમાં લેવાતા ચિહ્નો) સાથે પસાર કરો. MCP સર્વર પછી તેને સ્ટ્રક્ચર્ડ API વિનંતીમાં અનુવાદિત કરે છે અને તેને એક્ઝિક્યુટ કરે છે. તમારો ઓર્ડર લેતી રેસ્ટોરન્ટમાં AI ને સર્વર તરીકે વિચારવામાં મદદ કરી શકે છે, MCP સર્વર મેનૂ અને રસોઇયા બંને તરીકે અને API વિનંતી (આશા છે કે) ગરમ પ્લેટ પર હોટ પિઝા પાઈ તરીકે. શા માટે MCP સર્વર્સ, બરાબર? ઠીક છે, પેનપોટ તમારા ઉદ્દેશ્યને સમજવામાં સક્ષમ નથી કારણ કે તે LLM નથી, કે તે તૃતીય-પક્ષ LLM ને તમારા Penpot ડેટાની સુરક્ષા અને ગોપનીયતા માટે તમારી Penpot ફાઇલો સાથે ક્રિયાપ્રતિક્રિયા કરવાની મંજૂરી આપતું નથી. જો કે પેનપોટ એમસીપી સર્વર્સ સુરક્ષિત પુલ તરીકે કાર્ય કરે છે, તમારી પેનપોટ ફાઇલો અને ડેટાનો સંદર્ભ તરીકે ઉપયોગ કરીને API વિનંતીઓમાં AI ઉદ્દેશ્યનું ભાષાંતર કરે છે. શું વધુ સારું છે તે છે કારણ કે પેનપોટ ડિઝાઇન-એક્સપ્રેસ-એઝ-કોડ અભિગમ અપનાવે છે, ડિઝાઇનને પ્રોગ્રામેટિકલી બનાવી શકાય છે, સંપાદિત કરી શકાય છે અને દાણાદાર સ્તર પર વિશ્લેષણ કરી શકાય છે. તે વધુ સંદર્ભિત, વધુ વિશિષ્ટ અને તેથી અન્ય MCP સર્વર્સ શું ઓફર કરે છે તેની તુલનામાં વધુ શક્તિશાળી છે, અને સબપાર 'વર્ણન કરો → જનરેટ' AI વર્કફ્લો કરતાં વધુ વિચારશીલ છે જે મને નથી લાગતું કે કોઈ ખરેખર ઇચ્છે છે. પેનપોટનું AI વ્હાઇટપેપર આને ખરાબ અભિગમ અને 'કન્વર્ટ ટુ કોડ' અભિગમને નીચ અભિગમ તરીકે વર્ણવે છે, જ્યારે MCP સર્વર્સ વધુ શુદ્ધ અને સ્વીકાર્ય છે. સુવિધાઓ અને તકનીકી વિગતો અમે કેસોનો ઉપયોગ કરવા આગળ વધીએ તે પહેલાં, અહીં કેટલીક સુવિધાઓ અને તકનીકી વિગતો છે જે આગળ સમજાવે છે કે પેનપોટ MCP સર્વર્સ કેવી રીતે કાર્ય કરે છે:
MCP ધોરણોનું પાલન કરે છે; રીઅલ-ટાઇમ ડિઝાઇન ડેટા માટે પેનપોટ API સાથે એકીકૃત કરે છે; Python SDK, REST API, પ્લગઇન સિસ્ટમ અને CLI ટૂલ્સનો સમાવેશ થાય છે; કોઈપણ MCP-સક્ષમ AI સહાયક (VS કોડમાં ક્લાઉડ, કર્સરમાં ક્લાઉડ, ક્લાઉડ ડેસ્કટૉપ, વગેરે) સાથે કામ કરે છે; AI મૉડલ્સ સાથે ડિઝાઇન સંદર્ભ શેર કરવા અને તેમને ઘટકો જોવા અને સમજવા દેવાનું સમર્થન કરે છે; કુદરતી ભાષાનો ઉપયોગ કરીને પેનપોટ સાથે વાતચીતની સુવિધા આપે છે.
તો પછી, MCP સર્વર્સ અમને પેનપોટમાં શું કરવા સક્ષમ કરી શકે છે, અને હાલના પ્રયોગોએ પહેલાથી શું પ્રાપ્ત કર્યું છે? ચાલો એક નજર કરીએ. પેનપોટ MCP સર્વર ઉપયોગ-કેસો જો તમે પેનપોટ MCP સર્વર્સ શું કરી શકે છે તેના પર જવા માંગતા હો, તો પેનપોટ પાસે Google ડ્રાઇવમાં કેટલાક MCP ડેમો છે જે જોવા લાયક છે. પેનપોટના સીઇઓ પાબ્લો રુઇઝ-મુઝક્વિઝે ઉલ્લેખ કર્યો છે કે વિડિયો 03, 04, 06, 08 અને 12 તેમના ફેવરિટ છે. MCP સર્વર્સનો સારાંશ આપવાની એક વધુ ઝડપી રીત પેનપોટ ફેસ્ટ 2025 ના અનાવરણને જોવાની છે. નહિંતર, ચાલો પેનપોટે તેમના જાહેર શોકેસમાં પ્રદર્શિત કરેલા કેટલાક વધુ શુદ્ધ ઉદાહરણો પર એક નજર કરીએ. ડિઝાઇન-ટુ-કોડ અને ફરીથી પાછા (અને વધુ) પેનપોટ ડિઝાઇનને કોડ તરીકે કેવી રીતે વ્યક્ત કરવામાં આવે છે તે વિશે હું અગાઉ જે કહેતો હતો તેના પરથી ચાલી રહ્યું છે, આનો અર્થ એ છે કે MCP સર્વર્સનો ઉપયોગ AI નો ઉપયોગ કરીને ડિઝાઇનને કોડમાં કન્વર્ટ કરવા માટે કરી શકાય છે, પણ કોડ ટુ ડિઝાઇન, ડિઝાઇનમાં દસ્તાવેજીકરણ, સિસ્ટમ તત્વોને ડિઝાઇન કરવા માટે દસ્તાવેજીકરણ, કથિત ડિઝાઇન સિસ્ટમ પર આધારિત ફરીથી કોડ માટે ડિઝાઇન, અને પછી તે ડિઝાઇન સિસ્ટમ પર આધારિત સંપૂર્ણપણે નવા ઘટકો. તે અતિવાસ્તવ લાગે છે, પરંતુ નીચેનો ડેમો આ ટ્રાન્સમ્યુટેબિલિટી દર્શાવે છે, અને તે અસ્પષ્ટ સૂચનાથી નથી, પરંતુ અગાઉની ડિઝાઇન પસંદગીઓથી છે, તેઓ કેવી રીતે વ્યક્ત કરવામાં આવ્યા હતા તે ધ્યાનમાં લીધા વિના (ડિઝાઇન, કોડ અથવા દસ્તાવેજીકરણ). ત્યાં કોઈ આશ્ચર્ય નથી - આ ફક્ત એવા નિર્ણયો છે જે તમે કોઈપણ રીતે અગાઉના નિર્ણયોના આધારે લીધા હશે, ઝડપથી અમલમાં મૂક્યા. ડેમોમાં, જુઆન ડે લા ક્રુઝ ગાર્સિયા, પેનપોટના ડિઝાઇનર, ઘર્ષણ વિના કેટલાક સરળ ઘટકોને દસ્તાવેજીકરણ, ડિઝાઇન સિસ્ટમ ઘટકો, કોડ, નવા ઘટકો, અને પ્લે-ડોહના એક ભાગ જેવા સંપૂર્ણ સ્ટોરીબુક પ્રોજેક્ટમાં ટ્રાન્સમ્યુટ કરે છે: ડિઝાઇન-ટુ-કોડ, ડિઝાઇન/કોડ માન્યતા અને સરળ કામગીરી નીચે આપેલા સમાન ડેમોમાં, Oraios AI ના સહ-સ્થાપક ડોમિનિક જૈન, ફ્રન્ટએન્ડ શૈલીઓ અપડેટ કરતા પહેલા ડિઝાઇન પર આધારિત Node.js વેબ એપ્લિકેશન બનાવે છે, સુસંગતતા માટે તેને તપાસતા પહેલા સરળ ડિઝાઇન-ટુ-કોડ અનુવાદને સુનિશ્ચિત કરવા મેમરીમાં નામો અને ઓળખકર્તાઓને સાચવે છે,પેનપોટમાં પસંદ કરેલ આકારની બાજુમાં ટિપ્પણી કરો, અને પછી પેનપોટમાં અનુકૂલિત ઘટક સાથે સ્ક્રિબલને બદલે છે. અહીં ઘણું બધું થઈ રહ્યું છે, પરંતુ તમે જોઈ શકો છો કે ક્લાઉડ ડેસ્કટૉપ તેમજ ક્લાઉડના પ્રતિસાદોમાં ડોમિનિક શું ટાઈપ કરી રહ્યો છે, અને તે ખૂબ જ મજબૂત છે: માર્ગ દ્વારા, અગાઉના ડેમોએ VS કોડમાં ક્લાઉડનો ઉપયોગ કર્યો હતો, તેથી મારે નોંધ લેવી જોઈએ કે પેનપોટ MCP સર્વર્સ LLM-અજ્ઞેયવાદી છે. તમારું ટેક સ્ટેક સંપૂર્ણપણે તમારા પર નિર્ભર છે. IvanTheGeek JetBrains રાઇડર IDE અને Junie AI સાથે તેમના MCP સર્વરને સેટ કરવામાં વ્યવસ્થાપિત થયા. વધુ ઉપયોગના કેસો પેનપોટ બોર્ડને પ્રોડક્શન-રેડી સિમેન્ટીક HTML અને મોડ્યુલર CSSમાં અનુવાદિત કરો જ્યારે કોઈપણ પેનપોટ ડિઝાઇન ટોકન્સનો ઉપયોગ કરો (યાદ રાખો કે પેનપોટ ડિઝાઇન પહેલેથી જ કોડ તરીકે વ્યક્ત કરવામાં આવી છે, તેથી આ અંધારામાં શોટ નથી): હાલના HTML ને બદલ્યા વિના ઇન્ટરેક્ટિવ વેબ પ્રોટોટાઇપ જનરેટ કરો: અગાઉ બતાવ્યા પ્રમાણે, હાલની ડિઝાઇન અને/અથવા ડિઝાઇન સિસ્ટમ ઘટકોનો લાભ લેતા, સ્ક્રિબલને ઘટકમાં રૂપાંતરિત કરો: પેનપોટ ફાઇલમાંથી ડિઝાઇન સિસ્ટમ દસ્તાવેજીકરણ બનાવો: અને અહીં પેનપોટ અને સમુદાયના કેટલાક વધુ ઉપયોગ-કેસો છે:
અદ્યતન નિકાસ, કુદરતી ભાષાનો ઉપયોગ કરીને ડિઝાઇન તત્વો માટે શોધો, કુદરતી ભાષાનો ઉપયોગ કરીને બાહ્ય API માંથી ડેટા ખેંચો, પેનપોટને અન્ય બાહ્ય સાધનો સાથે સરળતાથી કનેક્ટ કરો, પુનરાવર્તિત કાર્યોને મેમરીમાં સાચવવા અને તેમને ચલાવવા, વિઝ્યુઅલ રીગ્રેશન પરીક્ષણ, ડિઝાઇન સુસંગતતા અને નિરર્થકતા તપાસ, સુલભતા અને ઉપયોગીતા વિશ્લેષણ અને પ્રતિસાદ, ડિઝાઇન સિસ્ટમ અનુપાલન ચકાસણી, માર્ગદર્શિકા અનુપાલન ચકાસણી (બ્રાન્ડ, સામગ્રી, વગેરે), ડિઝાઇન એનાલિટિક્સ સાથે દત્તક લેવા અને ઉપયોગનું નિરીક્ષણ કરો, દસ્તાવેજોને આપમેળે ડિઝાઇન સાથે સુમેળમાં રાખો, ડિઝાઇન ફાઇલ સંસ્થા (દા.ત., ટેગીંગ/વર્ગીકરણ).
અનિવાર્યપણે, તમારા પસંદ કરેલા LLM/LLM ક્લાયંટની કાર્યક્ષમતા અને સરળતાને કારણે પેનપોટ MCP સર્વર્સ અસંખ્ય વર્કફ્લો તરફ દોરી જાય છે, પરંતુ તમારા ડેટાને તેમાં ખુલ્લા પાડ્યા વિના. તમે MCP સર્વર્સનો ઉપયોગ શેના માટે કરશો? પેનપોટ MCP સર્વર્સ બીટા સ્ટેજ પર પણ નથી, પરંતુ તે એક સક્રિય પ્રયોગ છે જેનો તમે ભાગ બની શકો છો. પેનપોટ વપરાશકર્તાઓએ પહેલેથી જ MCP સર્વર્સ માટે ઉપયોગના કેસોની શોધખોળ શરૂ કરી દીધી છે, પરંતુ પેનપોટ વધુ જોવા માંગે છે. ડિઝાઇન ટૂલ્સની આગલી પેઢી સામાન્ય રીતે ડિઝાઇનર્સ, ડેવલપર્સ અને પ્રોડક્ટ ટીમની જરૂરિયાતોને પૂર્ણ કરે છે તેની ખાતરી કરવા માટે, તેઓ સામૂહિક રીતે અને સહયોગી રીતે બનાવવામાં આવે છે, ખાસ કરીને જ્યાં AI સંબંધિત છે. નોંધ: પેનપોટ પેનપોટના MCP સર્વરને અન્વેષણ કરવા, પ્રયોગ કરવા અને તેને સુધારવામાં મદદ કરવા આતુર બીટા પરીક્ષકોની શોધમાં છે. જોડાવા માટે, "MCP બીટા ટેસ્ટ સ્વયંસેવક" વિષયની લાઇન સાથે support@penpot.app પર લખો. શું એવું કંઈ છે જે તમને લાગે છે કે પેનપોટ MCP સર્વર્સ કરી શકે છે જે વર્તમાન સાધનો પૂરતા પ્રમાણમાં સારી રીતે, પર્યાપ્ત ઝડપી અથવા બિલકુલ કરવા માટે સક્ષમ નથી? તમે અહીં પેનપોટ MCP સર્વર કેવી રીતે સેટ કરવું તે શીખી શકો છો અને આજે જ ટિંકરિંગ શરૂ કરી શકો છો, અથવા જો તમારું મગજ પહેલેથી જ વિચારો સાથે ગુંજી રહ્યું છે, તો પેનપોટ ઇચ્છે છે કે તમે ચર્ચામાં જોડાઓ, તમારો પ્રતિસાદ શેર કરો અને તમારા ઉપયોગ-કેસો વિશે વાત કરો. વૈકલ્પિક રીતે, નીચે આપેલ ટિપ્પણી વિભાગ પણ શરૂ કરવા માટે ખરાબ સ્થાન નથી!
