Swap Farcaster tool with Preview Tool across docs (#331)

hughescoin · soheimam · web-flow · commit 5654dec6b92c · 2025-09-11T15:06:31.000-05:00
* Update Test & Deploy page to reference Preview tool * fix link to Launch Checklist * Swap Farcaster tool with Base Build Preview tool * swap Farcaster tool with Preview tool for cookbook section * updated links to v0 template (#328) * add links for getting help section * add preview tool image * add Preview Tool callouts to Common Issues & Debugging page * add Preview tool callout to manifest * fix working for callout * Add preview tool account association feature to Create Manifest page * add preview tool callout in create manifest --------- Co-authored-by: Sohey <soheima.canton@coinbase.com>
diff --git a/docs/cookbook/minikit/test-and-deploy.mdx b/docs/cookbook/minikit/test-and-deploy.mdx
@@ -12,10 +12,32 @@ Before sharing your Mini App, validate everything works.
 - `/.well-known/farcaster.json` returns valid JSON
 - `fc:frame` metadata renders a launch button when shared
 
-## Validation tools
+## Validation Tools
+
+[Base Build](https://base.dev) is the place to test and validate your Mini App. In addition to tracking your app’s usage and redeeming builder rewards, it includes a **Preview tool**, which helps you:  
+
+- Validate your app's manifest and metadata  
+- Test how your app will appear in the Base app  
+- Verify ownership and account association  
+
+The Preview tool provides clear visual cues:  
+- ✅ Green check marks when things are set up correctly  
+- ❌ Red indicators when something needs your attention  
+
+### Components of the Preview Tool  
+
+The Preview tool has three main components:  
+
+- **Console**: Preview your app and review logs to make informed decisions about performance.  
+- **Account Association**: Confirm your app is linked to the correct account, signatures are valid, and the domain matches what’s specified in the manifest.  
+- **Metadata**: Ensure your Mini App renders exactly as expected by verifying required fields like name, icon, tags, and splash image.  
+
+### Getting Started  
+
+1. [Import your app](https://docs.base.org/mini-apps/growth/data-driven-growth) into Base Build
+2. Visit the [Preview tool](https://base.dev/preview) to begin validating your app
+
 
-- Manifest Tool: `https://farcaster.xyz/~/developers/mini-apps/manifest`
-- Embed Tool: `https://farcaster.xyz/~/developers/mini-apps/embed`
 
 ## Share and test
 
@@ -24,7 +46,7 @@ Before sharing your Mini App, validate everything works.
 3. Test launch and frame readiness
 
 <CardGroup cols={2}>
-  <Card title="Launch Checklist" icon="rocket" href="/mini-apps/quickstart/launch-guide">
+  <Card title="Launch Checklist" icon="rocket" href="/mini-apps/quickstart/launch-checklist">
     Follow the launch checklist to get the most out of your mini app.
   </Card>
   <Card title="Troubleshooting" icon="bug" href="/mini-apps/troubleshooting/common-issues">
diff --git a/docs/images/base-build/account-association.png b/docs/images/base-build/account-association.png
diff --git a/docs/images/base-build/preview-tool-overview.png b/docs/images/base-build/preview-tool-overview.png
diff --git a/docs/mini-apps/features/embeds-and-previews.mdx b/docs/mini-apps/features/embeds-and-previews.mdx
@@ -232,8 +232,8 @@ export async function generateMetadata(): Promise<Metadata> {
 
 ### Tools
 
-<Card title="Farcaster Embed Debugger" icon="bug" href="https://farcaster.xyz/~/developers/mini-apps/debug">
-  Test your metadata and preview embeds
+<Card title="Base Build Preview Tool" icon="bug" href="https://base.dev/preview">
+  Test how your app will appear in the Base app by validating your manifest, embeds, and account association
 </Card>
 
 ### Common issues
diff --git a/docs/mini-apps/features/manifest.mdx b/docs/mini-apps/features/manifest.mdx
@@ -12,6 +12,7 @@ description: Define and configure your Mini App’s manifest to power search, di
 > - Control indexing for staging and production with `noindex`. 
 
 ## Overview
+<Tip>The best way to validate your manifest is by using Base Build's built-in [Preview tool](https://base.dev/preview)</Tip>
 
 Your `/.well-known/farcaster.json` file is the manifest for your Mini App. It contains all the metadata Base App uses to:
 
diff --git a/docs/mini-apps/quickstart/existing-apps/create-manifest.mdx b/docs/mini-apps/quickstart/existing-apps/create-manifest.mdx
@@ -52,6 +52,13 @@ export async function GET() {
 }
 ```
 
+## Testing using Preview Tool
+
+Use [Base Build's Preview tool](https://base.dev) to validate your manifest and test how your app appears in the Base app. 
+
+The tool provides instant feedback with ✅ green checks when everything is set up correctly and ❌ red indicators when something needs attention.
+
+
 Review the full [Manifest guide](/mini-apps/features/manifest) and update all fields. Be sure to update your deployment environment with these values.
 
 
diff --git a/docs/mini-apps/quickstart/existing-apps/test-and-deploy.mdx b/docs/mini-apps/quickstart/existing-apps/test-and-deploy.mdx
@@ -12,10 +12,32 @@ Before sharing your Mini App, validate everything works.
 - `/.well-known/farcaster.json` returns valid JSON
 - `fc:frame` metadata renders a launch button when shared
 
-## Validation tools
+## Validation Tools
+
+[Base Build](https://base.dev) is the place to test and validate your Mini App. In addition to tracking your app’s usage and redeeming builder rewards, it includes a **Preview tool**, which helps you:  
+
+- Validate your app's manifest and metadata  
+- Test how your app will appear in the Base app  
+- Verify ownership and account association  
+
+The Preview tool provides clear visual cues:  
+- ✅ Green check marks when things are set up correctly  
+- ❌ Red indicators when something needs your attention  
+
+### Components of the Preview Tool  
+
+The Preview tool has three main components:  
+
+- **Console**: Preview your app and review logs to make informed decisions about performance.  
+- **Account Association**: Confirm your app is linked to the correct account, signatures are valid, and the domain matches what’s specified in the manifest.  
+- **Metadata**: Ensure your Mini App renders exactly as expected by verifying required fields like name, icon, tags, and splash image.  
+
+### Getting Started  
+
+1. [Import your app](https://docs.base.org/mini-apps/growth/data-driven-growth) into Base Build
+2. Visit the [Preview tool](https://base.dev/preview) to begin validating your app
+
 
-- Manifest Tool: `https://farcaster.xyz/~/developers/mini-apps/manifest`
-- Embed Tool: `https://farcaster.xyz/~/developers/mini-apps/embed`
 
 ## Share and test
 
@@ -24,7 +46,7 @@ Before sharing your Mini App, validate everything works.
 3. Test launch and frame readiness
 
 <CardGroup cols={2}>
-  <Card title="Launch Checklist" icon="rocket" href="/mini-apps/quickstart/launch-guide">
+  <Card title="Launch Checklist" icon="rocket" href="/mini-apps/quickstart/launch-checklist">
     Follow the launch checklist to get the most out of your mini app.
   </Card>
   <Card title="Troubleshooting" icon="bug" href="/mini-apps/troubleshooting/common-issues">
diff --git a/docs/mini-apps/quickstart/new-apps/create-manifest.mdx b/docs/mini-apps/quickstart/new-apps/create-manifest.mdx
@@ -27,6 +27,13 @@ Review the full [Manifest guide](/mini-apps/features/manifest) and update all fi
 While testing, set `noindex: true` in your manifest to avoid indexing.
 </Warning>
 
+## Account association
+The account association verifies ownership of a domain to a Farcaster account.
+
+![Metadata Guidelines](/images/base-build/account-association.png)
+
+<Tip>Account association can be validated using the Base Build's [Preview tool](https://base.dev/preview).</Tip>
+
 ## `/.well-known/farcaster.json`
 
 The manifest exists in `app/.well-known/farcaster.json/route.ts` which returns your accountAssociation and mini app properties. Ensure all asset URLs are HTTPS and publicly accessible.
diff --git a/docs/mini-apps/troubleshooting/common-issues.mdx b/docs/mini-apps/troubleshooting/common-issues.mdx
@@ -24,6 +24,32 @@ your-domain.com/
 - Manifest file exists at `/.well-known/farcaster.json`  
 - All image URLs are publicly accessible
 
+# Debugging
+Use Base Build's built-in Preview Tool for foundational debugging.
+
+<Card title="Preview Tool" img="/images/base-build/preview-tool-overview.png">
+Start debugging your app using the [Preivew tool](https://base.dev/preview)
+</Card>
+
+The **Preview tool** will help you:  
+
+- Validate your app's manifest and metadata  
+- Test how your app will appear in the Base app  
+- Verify ownership and account association  
+
+The Preview tool provides clear visual cues:  
+- ✅ Green check marks when things are set up correctly  
+- ❌ Red indicators when something needs your attention  
+
+### Components of the Preview Tool  
+
+The Preview tool has three main components:  
+
+- **Console**: Preview your app and review logs to make informed decisions about performance.  
+- **Account Association**: Confirm your app is linked to the correct account, signatures are valid, and the domain matches what’s specified in the manifest.  
+- **Metadata**: Ensure your Mini App renders exactly as expected by verifying required fields like name, icon, tags, and splash image.  
+
+
 ### Basic Validation Steps
 
 1. Test manifest accessibility: visit `https://yourdomain.com/.well-known/farcaster.json`  
@@ -32,6 +58,8 @@ your-domain.com/
 
 ## Quick Diagnostic Workflow
 
+<Tip>The best way to validate your app works is by using Base Build's built-in [Preview tool](https://base.dev/preview)</Tip>
+
 - Not appearing in search? → App Discovery & Indexing Issues
 - Not rendering as an embed? → Embed Rendering Issues
 - Wallet connection problems? → Wallet Connection Problems
@@ -197,10 +225,9 @@ Basic functionality and discovery/sharing checklists: confirm load, images, wall
 
 ## Getting Additional Help
 
-- Mini App Debug Tool  
-- Mini App Embed Tool  
+- [Base Build Preview Tool](https://base.dev/preview)  
 - JSONLint  
-- Eruda  
+- [Eruda](https://github.com/liriliri/eruda)  
 - Base Discord — #minikit channel
 
 
