From 2d0a111455df9fe679a0262f9e7830f078ea34ee Mon Sep 17 00:00:00 2001
From: Joshua Hyde <jrh3k5@gmail.com>
Date: Sat, 1 Feb 2025 14:58:39 -0600
Subject: [PATCH 1/2] Update 'getting started' guide

---
 docs/developers/frames/v2/getting-started.md | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/developers/frames/v2/getting-started.md b/docs/developers/frames/v2/getting-started.md
index e68e1fb3..68e96cc2 100644
--- a/docs/developers/frames/v2/getting-started.md
+++ b/docs/developers/frames/v2/getting-started.md
@@ -20,7 +20,7 @@ The following tutorial is based on the [Frames v2 Demo](https://github.com/farca
 
 ### Setup and dependencies
 
-We'll start with a fresh NextJS app:
+We'll start with a fresh NextJS app. Execute the following command and provide `frames-v2-demo` for the project name and accept the defaults for all prompts _except_ for the prompt to customize the import alias - select `Yes` for that option and set the alias to `~/*`:
 
 ```bash
 $ yarn create next-app
@@ -42,6 +42,12 @@ Next, install frame related dependencies. We'll need the official frame SDK:
 $ yarn add @farcaster/frame-sdk
 ```
 
+You'll also need [next](https://nextjs.org/) to execute your project:
+
+```bash
+$ yarn add next@latest react@latest react-dom@latest
+```
+
 We'll also need [Wagmi](https://wagmi.sh/) to handle wallet interactions. Let's install it and its dependencies.
 
 ```bash
@@ -355,6 +361,7 @@ import sdk, { type FrameContext } from '@farcaster/frame-sdk';
 export default function Demo() {
   const [isSDKLoaded, setIsSDKLoaded] = useState(false);
   const [context, setContext] = useState<FrameContext>();
+  const [isContextOpen, setIsContextOpen] = useState(false);
 
   useEffect(() => {
     const load = async () => {
@@ -367,6 +374,10 @@ export default function Demo() {
     }
   }, [isSDKLoaded]);
 
+  const toggleContext = useCallback(() => {
+    setIsContextOpen((prev) => !prev);
+  }, []);
+
   if (!isSDKLoaded) {
     return <div>Loading...</div>;
   }

From 2b447ccbf0ef68b34f593c9e0603b67db49ce2be Mon Sep 17 00:00:00 2001
From: Joshua Hyde <jrh3k5@gmail.com>
Date: Sat, 1 Feb 2025 15:04:12 -0600
Subject: [PATCH 2/2] Add globals.css

---
 docs/developers/frames/v2/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/developers/frames/v2/getting-started.md b/docs/developers/frames/v2/getting-started.md
index 68e96cc2..0d30b4a4 100644
--- a/docs/developers/frames/v2/getting-started.md
+++ b/docs/developers/frames/v2/getting-started.md
@@ -211,7 +211,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 Note two new things here: since the SDK relies on the browser `window`, we need to define this as a client component with `"use client";` and use a dynamic import to import `WagmiProvider`.
 
-Finally, let's add this providers component to our app layout. Edit `app/layout.tsx`:
+Finally, let's add this providers component to our app layout. If it does not exist already, create a file `app/globals.css` in your project. Then edit `app/layout.tsx`:
 
 ```tsx
 import type { Metadata } from 'next';