MCP દ્વારા AI સહાયકો સાથે વર્ડપ્રેસ પ્લેગ્રાઉન્ડનો ઉપયોગ કરો

વર્ડપ્રેસ પ્લેગ્રાઉન્ડ MCP સર્વર AI સહાયકને તમારા બ્રાઉઝરમાં ચાલી રહેલી વાસ્તવિક પ્લેગ્રાઉન્ડ સાઇટ સાથે કનેક્ટ થવા દે છે. કનેક્શન સ્થપાયા પછી, તમે સહાયકને વર્ડપ્રેસ નેવિગેટ કરવા, પેજિસનું નિરીક્ષણ કરવા, સમસ્યાઓનું પુનરાવર્તન (reproduce) કરવા અને જે મળે તે સમજાવવા કહી શકો છો.

MCP સર્વરને ગોઠવવા અને કુદરતી ભાષા (natural language) દ્વારા પ્લેગ્રાઉન્ડ સાથે કામ કરવા માટે આ માર્ગદર્શિકાનો ઉપયોગ કરો. આર્કિટેક્ચરની વિગતો માટે, Connect AI coding agents to WordPress Playground with MCP જુઓ.

જ્યારે સાઇટ પોતે મહત્વપૂર્ણ હોય ત્યારે MCP સૌથી વધુ ઉપયોગી છે: સેવ કરેલું પ્લેગ્રાઉન્ડ, પર્સિસ્ટન્ટ બ્રાઉઝર-બેક્ડ સાઇટ, My WordPress-શૈલીની સાઇટ, અથવા એવો ડેમો જ્યાં તમે ઇચ્છો કે સહાયક બ્રાઉઝર માટે રિમોટ કંટ્રોલની જેમ કાર્ય કરે. જો તમે ટર્મિનલ-આધારિત કોડિંગ એજન્ટમાંથી કામ કરી રહ્યા હોવ અને તમને મુખ્યત્વે લોકલ ઓટોમેશનની જરૂર હોય, તો પ્લેગ્રાઉન્ડ CLI સામાન્ય રીતે વધુ સરળ અને સ્પષ્ટ છે.

MCP પ્લેગ્રાઉન્ડમાં શું ઉમેરે છે (What MCP adds to Playground)

MCP, અથવા મોડેલ કોન્ટેક્સ્ટ પ્રોટોકોલ (Model Context Protocol), તમારા AI સહાયકને તમારા બ્રાઉઝરમાં ખુલ્લી પ્લેગ્રાઉન્ડ સાઇટ પર નિયંત્રણ આપે છે. ફક્ત કાર્યનું વર્ણન કરવાને બદલે, સહાયક સાઇટ પર સીધા પગલાં લઈ શકે છે:

• MCP સર્વર સાથે કનેક્ટ થવા માટે જરૂરી ચોક્કસ પ્લેગ્રાઉન્ડ URL ખોલવું
• તમારી ઉપલબ્ધ પ્લેગ્રાઉન્ડ સાઇટ્સની સૂચિ દર્શાવવી
• પ્લેગ્રાઉન્ડ સાઇટ ખોલવી, તેનું નામ બદલવું અથવા તેને સેવ કરવી
• બ્રાઉઝર-સંચાલિત પ્લેગ્રાઉન્ડ સાઇટ્સ વચ્ચે સ્વિચ કરવું
• વર્ડપ્રેસ એડમિન અને ફ્રન્ટ-એન્ડ URLs પર નેવિગેટ કરવું
• રીડાયરેક્ટ્સને ફોલો કરવા અને અંતિમ URL ની જાણ કરવી
• પ્રમાણિત (authenticated) વર્ડપ્રેસ REST API વિનંતીઓ કરવી
• પ્લેગ્રાઉન્ડ ફાઇલસિસ્ટમની અંદર ફાઇલો વાંચવી અને લખવી
• પ્લેગ્રાઉન્ડ સાઇટની અંદર PHP ચલાવવું
• પેજિસ માટે વિનંતી કરવી અને મળેલા પ્રતિસાદ (response) નું નિરીક્ષણ કરવું

જ્યારે કાર્ય બ્રાઉઝરની સ્થિતિ પર આધારિત હોય ત્યારે આ ખાસ કરીને ઉપયોગી છે: લૉગ-ઇન થયેલ એડમિન સ્ક્રીન્સ, સેટિંગ્સ પેજિસ, REST API વિનંતીઓ અને રીડાયરેક્ટ્સ.

MCP માટે સારા ઉપયોગના કિસ્સાઓ (Good use cases for MCP)

જ્યારે તમે ઇચ્છતા હોવ કે સહાયક દૃશ્યમાન, બ્રાઉઝર-સંચાલિત વર્ડપ્રેસ સાઇટ સાથે કામ કરે ત્યારે MCP નો ઉપયોગ કરો:

• સેટિંગ્સ સ્ક્રીન દ્વારા તમારું માર્ગદર્શન કરવું: "મને બતાવો કે આ WooCommerce વિકલ્પ કેવી રીતે ગોઠવવો."
• બ્રાઉઝર-આધારિત ડેમો બનાવવો: "એક સરળ રેસિપી પેજ બનાવો અને મને તેનું પરિણામ બતાવો."
• બ્લોક થીમ બનાવવી: "કસ્ટમ હેડર અને ફ્રન્ટ-પેજ ટેમ્પલેટ સાથે બ્લોક થીમ બનાવો, તેને સક્રિય કરો અને મને પરિણામ બતાવો."
• પર્સિસ્ટન્ટ સાઇટ સાથે કામ કરવું: "મારી સેવ કરેલી પ્લેગ્રાઉન્ડ સાઇટનો ઉપયોગ કરો" અથવા "મારા સબ્સ્ક્રિપ્શન સાથે જોડાયેલ My WordPress સાઇટનો ઉપયોગ કરો."
• ભૂલનું પુનરાવર્તન કરવું (Reproduce a bug): "આ પગલાં અનુસરો અને ભૂલનો સારાંશ આપો."
• રીડાયરેક્ટ અથવા URL નું પરીક્ષણ કરવું: "આ પેજ ખોલો અને મને કહો કે બ્રાઉઝર ક્યાં પહોંચે છે."
• ચાલતી સાઇટનું નિરીક્ષણ કરવું: "આ પ્લગઇન સુવિધા સાથે મેળ ખાતી એડમિન સ્ક્રીન શોધો."

જ્યારે કાર્ય મોટાભાગે લોકલ ઓટોમેશન હોય, જેમ કે એક જ બ્લુપ્રિન્ટને વારંવાર ચલાવવી, તમારી ફાઇલસિસ્ટમમાંથી પ્લગઇન માઉન્ટ કરવું, અથવા વર્ઝન મેટ્રિક્સનું પરીક્ષણ કરવું, ત્યારે MCP ઓછું ઉપયોગી છે. તે વર્કફ્લો માટે પ્લેગ્રાઉન્ડ CLI નો ઉપયોગ કરો અથવા runCli નો ઉપયોગ કરીને ટેસ્ટ લખો.

શરૂ કરતાં પહેલાં (Before you start)

તમને જરૂર પડશે:

• તમારા બ્રાઉઝરની જેમ જ કમ્પ્યુટર પર Node.js અને npm ઇન્સ્ટોલ કરેલા હોવા જોઈએ, જેમાં તમારા AI સહાયક માટે npx ઉપલબ્ધ હોય
• એક AI સહાયક અથવા કોડિંગ એજન્ટ કે જે લોકલ stdio MCP સર્વર્સને સપોર્ટ કરે છે, જેને નીચે આપેલ સેટઅપ સૂચનાઓ નો ઉપયોગ કરીને ગોઠવેલ હોય

તમારે પહેલાથી પ્લેગ્રાઉન્ડ ખોલવાની કે સાઇટ બનાવવાની જરૂર નથી. કનેક્શન દરમિયાન, તમારો સહાયક તમારા બ્રાઉઝરમાં ખોલવા માટે પ્લેગ્રાઉન્ડ URL પ્રદાન કરે છે. ડિફૉલ્ટ URL એક અસ્થાયી (temporary) સાઇટ શરૂ કરે છે જેનો ઉપયોગ તમે પરીક્ષણ માટે કરી શકો છો.

મહત્વપૂર્ણ ડેમો પહેલા સેવ કરો

જો તમે ડેમો તૈયાર કરી રહ્યા હોવ, તો ઘણા ફેરફારો કરતાં પહેલાં તમારા સહાયકને વર્તમાન પ્લેગ્રાઉન્ડ સાઇટને બ્રાઉઝર સ્ટોરેજમાં સેવ કરવા કહો. સેવ કરેલા પ્લેગ્રાઉન્ડ્સ પ્લેગ્રાઉન્ડ લૉન્ચ પેનલમાંથી ફરીથી ખોલી શકાય છે.

ખાતરી કરો કે સહાયક કઈ સાઇટનો ઉપયોગ કરી રહ્યો છે

તમારી પાસે બહુવિધ પ્લેગ્રાઉન્ડ સાઇટ્સ અને બહુવિધ કનેક્ટેડ બ્રાઉઝર ટેબ્સ હોઈ શકે છે. તમે એક જ સહાયક સાથે એક કરતાં વધુ સર્વર અથવા બ્રાઉઝર ઓટોમેશન ટૂલ્સ પણ કનેક્ટ કરી શકો છો. આ સુગમતા ઉપયોગી છે, પરંતુ તે ગૂંચવણભરી બની શકે છે. ફેરફારો કરતાં પહેલાં, સહાયકને કનેક્ટેડ સાઇટ્સની સૂચિ આપવા અને સક્રિય સાઇટના નામની પુષ્ટિ કરવા કહો.

MCP સર્વર સેટ કરો

તમારા AI સહાયક માટે યોગ્ય રૂપરેખાંકન (configuration) પસંદ કરો. સહાયક @wp-playground/mcp ને લોકલ પ્રોસેસ તરીકે શરૂ કરે છે અને stdio દ્વારા તેની સાથે સંચાર કરે છે.

Claude Code

તમારા ટર્મિનલમાં આ આદેશ (command) ચલાવો:

claude mcp add --transport stdio --scope user wordpress-playground -- npx -y @wp-playground/mcp

સર્વરને તમારા બધા પ્રોજેક્ટ્સમાં ઉપલબ્ધ કરાવવા માટે --scope user નો ઉપયોગ કરો, અથવા ફક્ત વર્તમાન પ્રોજેક્ટ માટે --scope local નો ઉપયોગ કરો.

Codex

તમારા ટર્મિનલમાં આ આદેશ ચલાવો:

codex mcp add wordpress-playground -- npx -y @wp-playground/mcp

JSON કન્ફિગરેશન (JSON configuration)

Claude Code માટે, તમારા પ્રોજેક્ટમાં .mcp.json માં નીચે આપેલ વિગત ઉમેરો. Claude Desktop માટે, તેને claude_desktop_config.json માં ઉમેરો. જો ફાઇલમાં પહેલેથી જ mcpServers ઑબ્જેક્ટ હોય, તો તેમાં wordpress-playground એન્ટ્રી ઉમેરો.

{
	"mcpServers": {
		"wordpress-playground": {
			"command": "npx",
			"args": ["-y", "@wp-playground/mcp"]
		}
	}
}

કન્ફિગરેશન સેવ કર્યા પછી, સર્વર લોડ કરવા માટે જો જરૂર હોય તો તમારા સહાયકને પુનઃપ્રારંભ (restart) કરો, પછી નીચેના કનેક્શન પગલાં અનુસરો. તમારે MCP સર્વરને અલગથી શરૂ કરવાની જરૂર નથી.

AI સહાયકને પ્લેગ્રાઉન્ડ MCP સાથે કનેક્ટ કરો

1. તમારો AI સહાયક ખોલો.

2. તેને વર્ડપ્રેસ પ્લેગ્રાઉન્ડ સાથે કનેક્ટ થવા માટે કહો:

   Open WordPress Playground and connect it to the MCP server.

3. સહાયકે પ્લેગ્રાઉન્ડ URL પ્રદાન કરવું જોઈએ અથવા ખોલવું જોઈએ જેમાં mcp-port પેરામીટર શામેલ હોય.

4. જો સહાયક તેને આપમેળે ન ખોલે તો તમારા બ્રાઉઝરમાં તે URL ખોલો.

5. સહાયકને ઉપલબ્ધ પ્લેગ્રાઉન્ડ સાઇટ્સની સૂચિ આપવા માટે કહો:

   List my available Playground sites and tell me which one is active.

6. તમે જે પ્લેગ્રાઉન્ડ સાઇટનો ઉપયોગ કરવા માંગો છો તે પસંદ કરો:

   Use my saved WooCommerce demo site and open the WordPress admin dashboard.

જો સહાયક કહે કે કોઈ બ્રાઉઝર ટેબ કનેક્ટેડ નથી, તો તેણે આપેલ MCP પ્લેગ્રાઉન્ડ URL ખોલો અને ફરી પ્રયાસ કરો.

MCP વિરુદ્ધ CLI (MCP vs CLI)

વર્ડપ્રેસ પ્લેગ્રાઉન્ડ પાસે બે પૂરક પ્રોડક્ટ્સ છે: પ્લેગ્રાઉન્ડ વેબસાઇટ અને પ્લેગ્રાઉન્ડ CLI. વેબસાઇટ એ playground.wordpress.net પરનો બ્રાઉઝર અનુભવ છે. CLI એ ડેવલપમેન્ટ, સ્ક્રિપ્ટીંગ અને CI વર્કફ્લો માટેનું લોકલ એન્વાયરનમેન્ટ છે.

પસંદગી એ બાબત પર આધાર રાખે છે કે તમે AI સહાયક પાસે શું નિયંત્રિત કરાવવા માંગો છો.

MCP સાથે, સહાયક પ્રમાણીકરણ (authentication) ને મેન્યુઅલી ગોઠવ્યા વિના કનેક્ટેડ સાઇટ પર પ્રમાણિત વર્ડપ્રેસ REST API વિનંતીઓ કરી શકે છે. તે બ્રાઉઝરમાં પ્રદર્શિત પેજને બદલવા અને રીડાયરેક્ટ્સ પછી અંતિમ URL ની જાણ કરવા માટે playground_navigate ટૂલનો ઉપયોગ પણ કરી શકે છે.

CLI માંથી, સમાન HTTP વિનંતીઓ માટે સામાન્ય રીતે curl જેવા સાધનની જરૂર પડે છે અને જ્યાં સુધી તમે જાતે પ્રમાણીકરણ ગોઠવો નહીં ત્યાં સુધી તે અનઅધિકૃત (unauthenticated) હોય છે. ઉપરાંત, CLI વપરાશકર્તાના બ્રાઉઝરમાં પ્રદર્શિત પેજને નિયંત્રિત કરતું નથી.