Skip to content

Add Claude Code Plugin documentation page#542

Merged
johnbhiggins7 merged 8 commits into
mainfrom
docs/build-with-claude-code
Jul 21, 2026
Merged

Add Claude Code Plugin documentation page#542
johnbhiggins7 merged 8 commits into
mainfrom
docs/build-with-claude-code

Conversation

@johnbhiggins7

Copy link
Copy Markdown
Collaborator

Description

Adds a new Claude Code Plugin page under Building Concepts → Advanced → FlutterFlow CLI (/flutterflow-cli/claude-code) documenting the FlutterFlow plugin for Claude Code. It covers both the terminal (CLI) and desktop app surfaces: installation, secure API key setup via the clipboard hand-off, the guided build workflow (orient → validate → apply), key rotation and removal, updating, and troubleshooting. The desktop install is shown as a GUI walkthrough with screenshots. Also adds a neutral cross-link from Build with AI Agents and prominent/inline links to the source repo, FlutterFlow/flutterflow-claude.

Linear ticket and magic word Fixes DEVR-___

Type of change

  • Typo fix
  • New feature
  • Enhancement to current docs
  • Removed outdated references
  • Update assets

🤖 Generated with Claude Code

johnbhiggins7 and others added 8 commits July 15, 2026 19:18
Documents the flutterflow plugin from the FlutterFlow/flutterflow-claude
marketplace: installation, the secure clipboard API key hand-off, the
guided build workflow (orient -> validate -> apply), key rotation and
removal, and troubleshooting. Also adds a cross-link tip on the Build
with AI Agents page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds a "Choose Your Claude Code Surface" section with independent
install/startup steps for the Claude Code terminal (CLI) and the
desktop app (shared plugin state, plugin manager UI, Local session
folder selection, PATH-at-launch caveat), mirroring the structure of
the Build with Codex page. Also adds an Update the Plugin section and
a desktop-specific troubleshooting entry.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The desktop app installs plugins entirely through the GUI (+ button ->
Plugins -> Add plugin), per the official Claude Code desktop docs — no
terminal commands. Also corrects the session-support note: plugins are
unavailable in cloud and WSL sessions.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Five visible dashed placeholder blocks describing the media to capture:
hero screenshot, terminal install screenshot, desktop app install
Arcade, API key hand-off Arcade (with a note to record using a
throwaway key), and full build workflow Arcade.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Matches the sibling page's /flutterflow-cli/codex slug style. The page
has never been deployed, so no redirect is needed, and the only inbound
link is file-relative and follows the slug automatically.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Restructures every em dash sentence into separate sentences, commas,
colons, or parentheses. Also trims the quoted install notice to the
line without an em dash so the excerpt stays verbatim.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…eanup

- Rewrite the desktop app install as a GUI walkthrough with six screenshots
  (Settings, Plugins, Add marketplace, install), loaded via require() so
  Docusaurus resolves them to hashed asset URLs that render correctly.
- Add a prominent "Open source" link to the FlutterFlow/flutterflow-claude
  repo near the top, plus an inline link on the marketplace-name note.
- Remove the remaining hero, API key hand-off, and build-workflow placeholders.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@bolt-new-by-stackblitz

Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
github-actions Bot requested a review from pinkeshmars July 20, 2026 14:55

@pinkeshmars pinkeshmars left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@johnbhiggins7 Just a couple of nits, otherwise LGTM!

[`FlutterFlow/flutterflow-claude`](https://github.com/FlutterFlow/flutterflow-claude) is the GitHub repository the plugin installs from; `flutterflow` after the `@` is the marketplace name.
:::

<div style={{border: '2px dashed var(--ifm-color-emphasis-400)', borderRadius: '8px', padding: '1rem', margin: '1rem 0', background: 'var(--ifm-color-emphasis-100)'}}>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@johnbhiggins7 I think this should be replaced with the actual terminal screenshot.

Comment on lines +159 to +161
1. **Workspace.** Ensures you have a FlutterFlow AI workspace (`flutterflow ai init`), bound either to a new app or to an existing project. If you're editing an existing project but don't have its ID handy, Claude lists your account's projects and asks which one to use.
2. **Orient.** Reads the project before changing it, using commands like `status`, `inspect`, `resources`, and `search`.
3. **Author → validate → apply.** Writes changes as declarative Dart files, checks them with `flutterflow ai validate` first, and only then applies them with `flutterflow ai run`.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. **Workspace.** Ensures you have a FlutterFlow AI workspace (`flutterflow ai init`), bound either to a new app or to an existing project. If you're editing an existing project but don't have its ID handy, Claude lists your account's projects and asks which one to use.
2. **Orient.** Reads the project before changing it, using commands like `status`, `inspect`, `resources`, and `search`.
3. **Author → validate → apply.** Writes changes as declarative Dart files, checks them with `flutterflow ai validate` first, and only then applies them with `flutterflow ai run`.
1. **Workspace**: Ensures you have a FlutterFlow AI workspace (`flutterflow ai init`), bound either to a new app or to an existing project. If you're editing an existing project but don't have its ID handy, Claude lists your account's projects and asks which one to use.
2. **Orient**: Reads the project before changing it, using commands like `status`, `inspect`, `resources`, and `search`.
3. **Author → validate → apply**: Writes changes as declarative Dart files, checks them with `flutterflow ai validate` first, and only then applies them with `flutterflow ai run`.

@johnbhiggins7
johnbhiggins7 merged commit 199d4a6 into main Jul 21, 2026
2 checks passed
@johnbhiggins7
johnbhiggins7 deleted the docs/build-with-claude-code branch July 21, 2026 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants