メニュー
Use Chrome to build React apps on Google AI Studio (aistudio.google.com). Navigate to the Build page, input prompts, and generate interactive prototypes.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/stevehuang0115/crewly --skill ai-studio-app-builderコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | AI Studio App Builder |
| description | Use Chrome to build React apps on Google AI Studio (aistudio.google.com). Navigate to the Build page, input prompts, and generate interactive prototypes. |
| version | 1.0.0 |
| category | automation |
| skillType | claude-skill |
| triggers | ["ai studio","google ai studio","build app","react prototype","gemini app"] |
| tags | ["ai-studio","google","gemini","react","prototype","chrome"] |
| execution | {"type":"instructions-only"} |
| runtime | {"runtime":"claude-code"} |
| notices | [{"type":"requirement","message":"This skill depends on the chrome-browser skill. Ensure the Claude Code Chrome extension is installed and Chrome is running."},{"type":"requirement","message":"You must be signed into a Google account in Chrome that has access to Google AI Studio."},{"type":"info","message":"AI Studio app generation can take 30-60 seconds. The skill instructions include appropriate wait strategies."}] |
Build React apps on Google AI Studio using Chrome MCP tools. This skill guides you through navigating to AI Studio, entering a prompt, and generating a fully functional React prototype.
mcp__claude-in-chrome__*)| Tool | Purpose |
|---|---|
mcp__claude-in-chrome__navigate | Navigate to a URL |
mcp__claude-in-chrome__computer | Mouse clicks, keyboard input, scrolling |
mcp__claude-in-chrome__find | Find elements by natural language description |
mcp__claude-in-chrome__read_page | Read the accessibility tree of the current page |
mcp__claude-in-chrome__screenshot | Take a screenshot of the current page |
mcp__claude-in-chrome__get_page_text | Extract all text from the page |
mcp__claude-in-chrome__javascript_tool | Execute JavaScript on the page |
mcp__claude-in-chrome__form_input | Fill form fields |
mcp__claude-in-chrome__tabs_context | List open tabs and reconnect to the extension |
mcp__claude-in-chrome__navigate → url: "https://aistudio.google.com"
After navigation, take a screenshot to confirm the page loaded:
mcp__claude-in-chrome__screenshot
AI Studio sometimes shows a welcome/intro modal on first visit. Check the screenshot — if a modal is visible:
mcp__claude-in-chrome__find → query: "dismiss button" or "close button" or "got it button"
mcp__claude-in-chrome__computer → action: click on the found element
If no modal is present, proceed to the next step.
Click on "Build" in the left sidebar to access the app builder:
mcp__claude-in-chrome__find → query: "Build" in the left sidebar navigation
mcp__claude-in-chrome__computer → action: click on the Build link
Alternatively, navigate directly:
mcp__claude-in-chrome__navigate → url: "https://aistudio.google.com/app/build"
Take a screenshot to confirm you're on the Build page:
mcp__claude-in-chrome__screenshot
Look for the main prompt input area. It may appear as:
mcp__claude-in-chrome__find → query: "app prompt input" or "build an app text area" or "describe your app"
mcp__claude-in-chrome__computer → action: click on the input area
Type the app description into the input area. Use computer with keyboard action for reliable text input:
mcp__claude-in-chrome__computer → action: type, text: "<your app prompt here>"
Tips for effective AI Studio prompts:
After entering the prompt, submit it by pressing Enter or clicking the submit/send button:
mcp__claude-in-chrome__computer → action: press, key: "Return"
Or find and click the submit button:
mcp__claude-in-chrome__find → query: "submit button" or "send button" or "generate button"
mcp__claude-in-chrome__computer → action: click on the submit element
AI Studio takes 30-60 seconds to generate the app. Do not click or navigate away during generation.
Wait strategy:
# Wait and check
sleep 15
mcp__claude-in-chrome__screenshot
# If still loading, wait more
sleep 15
mcp__claude-in-chrome__screenshot
Signs generation is complete:
Once generation is complete, take a screenshot and read the page to confirm:
mcp__claude-in-chrome__screenshot
mcp__claude-in-chrome__get_page_text
Check for:
The generated app URL is typically in the browser address bar. Extract it:
mcp__claude-in-chrome__javascript_tool → script: "window.location.href"
Or read the page for any shared/preview links:
mcp__claude-in-chrome__find → query: "share link" or "preview URL" or "app URL"
Report the URL back to the user or orchestrator.
If the generated app needs changes, use the chat/prompt area at the bottom of the page to request modifications:
mcp__claude-in-chrome__find → query: "follow up prompt" or "chat input" or "message input"
mcp__claude-in-chrome__computer → action: click on the input
mcp__claude-in-chrome__computer → action: type, text: "Change the color scheme to dark mode and add a search bar"
If MCP tool calls fail with connection errors:
tabs_context to check the extension status:
mcp__claude-in-chrome__tabs_context
mcp__claude-in-chrome__navigate → url: "https://aistudio.google.com"
If AI Studio shows a blank page or error:
mcp__claude-in-chrome__javascript_tool → script: "location.reload()"If generation appears stuck for more than 2 minutes:
If find can't locate an element:
read_page to examine the accessibility treejavascript_tool to query the DOM directly:
mcp__claude-in-chrome__javascript_tool → script: "document.querySelector('textarea')?.placeholder"
AI Studio may rate-limit frequent requests:
Here is a complete example building a todo app:
# 1. Navigate
mcp__claude-in-chrome__navigate → url: "https://aistudio.google.com/app/build"
# 2. Wait for page load
sleep 3
mcp__claude-in-chrome__screenshot
# 3. Find and click the prompt input
mcp__claude-in-chrome__find → query: "app prompt input"
mcp__claude-in-chrome__computer → action: click
# 4. Type the prompt
mcp__claude-in-chrome__computer → action: type, text: "Build a beautiful todo app with React. Include: add/delete/complete tasks, filter by status (all/active/completed), dark mode toggle, local storage persistence, and smooth animations."
# 5. Submit
mcp__claude-in-chrome__computer → action: press, key: "Return"
# 6. Wait for generation
sleep 30
mcp__claude-in-chrome__screenshot
# 7. Check if done, wait more if needed
sleep 20
mcp__claude-in-chrome__screenshot
# 8. Get the URL
mcp__claude-in-chrome__javascript_tool → script: "window.location.href"
# 9. Report back with the URL and a final screenshot
mcp__claude-in-chrome__screenshot