Add Vercel Toolbar and Flags integration to Hypertune example (vercel…

…#871)

Add Vercel Toolbar and Flags integration to Hypertune example

edge-middleware/feature-flag-hypertune/README.md

@@ -5,47 +5,47 @@ description: Learn to use Hypertune, a powerful feature flag, A/B testing and ap
 framework: Next.js
 useCase: Edge Middleware
 css: Tailwind
-deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel%20Edge%20Config&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl
+deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl
 demoUrl: https://feature-flag-hypertune.vercel.app
 relatedTemplates:
   - maintenance-page
   - feature-flag-apple-store
 ---
 
-# Feature flags, A/B testing and app configuration with Hypertune and Vercel Edge Config
+# Feature flags, A/B testing and app configuration with Hypertune and Vercel
 
-[Hypertune](https://www.hypertune.com/) is a powerful feature flag, A/B testing and app configuration platform. Optimized for Next.js, Vercel Edge Config and TypeScript. Built with full type-safety and Git version control.
+[Hypertune](https://www.hypertune.com/) is a powerful feature flag, A/B testing and app configuration platform. Optimized for TypeScript, React and Next.js. Built with full end-to-end type-safety and Git version control.
 
-No need to juggle different SDKs for the client and the server. Install one JavaScript SDK that works on both the client and the server and is ready for the new App Router paradigm with React Server Components.
+No need to juggle different SDKs for the server and the client. Install one SDK that works across the server and the client and is compatible with App Router and Server Components.
 
-Avoid cumulative layout shift, flickers, out-of-sync client hydration and page load delay. Instantly initialize the SDK on the server from Vercel Edge Config. And instantly initialize the SDK on the client from server props on the first render.
+Avoid cumulative layout shift, UI flickers, hydration errors and page load delay. Instantly initialize the SDK on the server from Vercel Edge Config. And instantly initialize the SDK on the client from server props on the first render.
 
-Get auto-generated type-safe code for all your flags. No `Uncaught ReferenceError: flag is not defined`, no raw strings, no typos and no struggling to find flag references or clean up stale flags.
+Static typing and code generation gives you full end-to-end type-safety across your flag inputs, outputs and logic so you can be confident in your code and upgrade your developer experience.
 
-This example uses Vercel Edge Config to initialize the Hypertune SDK with near-zero latency on the server, so you can access your feature flags and run A/B tests with no performance impact to your app.
+This example shows how to use the [Hypertune integration](https://vercel.com/integrations/hypertune) with Vercel Edge Config to initialize the Hypertune SDK with near-zero latency on the server so you can access your feature flags and run A/B tests with no performance impact to your app.
+
+It also shows how to integrate with the Vercel Toolbar to let you easily set local flag overrides while developing.
 
 ## Deploy with Vercel
 
 Deploy this example with Vercel in one click:
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel%20Edge%20Config&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl)
 
 You'll be guided through installing the [Hypertune Vercel integration](https://vercel.com/integrations/hypertune) and setting up the required environment variables.
 
 ### Update your feature flag logic
 
-Once you've deployed your project, open the [Hypertune console](https://app.hypertune.com/) to update your feature flag logic.
+Once you've deployed your project, open the [Hypertune UI](https://app.hypertune.com/) to update your feature flag logic.
 
 ### Develop your project locally
 
 1. Clone your project's repository and `cd` into it
 2. Run `vercel link` to link to the Vercel project
 3. Run `vercel env pull .env.development.local` to pull your environment variables
-4. Run `npm i`
-5. Run `npm run dev`
-
-This example assumes your Hypertune project has an `exampleFlag` feature flag.
+4. Run `pnpm i`
+5. Run `pnpm run dev`
 
 ### Add new feature flags
 
-To add a new feature flag, create it in the [Hypertune console](https://app.hypertune.com/), then regenerate the client with `npx hypertune` so you can access it with end-to-end type-safety.
+To add a new feature flag, create it in the [Hypertune UI](https://app.hypertune.com/), then regenerate the client with `npx hypertune` so you can access it with full end-to-end type-safety.

edge-middleware/feature-flag-hypertune/app/.well-known/vercel/flags/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server'
+import { encryptApiData } from '@vercel/flags'
+import { vercelFlagDefinitions } from '../../../../generated/generated'
+
+export async function GET() {
+  const apiData = { definitions: vercelFlagDefinitions }
+  const encryptedApiData = await encryptApiData(apiData)
+  return NextResponse.json(encryptedApiData)
+}

edge-middleware/feature-flag-hypertune/app/api/flags/route.ts

@@ -1,17 +1,12 @@
 import { NextResponse } from 'next/server'
-import hypertune from '../../../lib/hypertune'
+import getHypertune from '../../../lib/getHypertune'
 
 export const runtime = 'edge'
 export const dynamic = 'force-dynamic'
 
 export async function GET() {
-  await hypertune.initFromServerIfNeeded()
+  const rootNode = await getHypertune()
 
-  const rootNode = hypertune.root({
-    context: {
-      user: { id: 'test', name: 'Test', email: '[email protected]' },
-    },
-  })
   const exampleFlag = rootNode.exampleFlag().get(/* fallback */ false)
   console.log('Edge Function flag:', exampleFlag)
 

edge-middleware/feature-flag-hypertune/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { Layout, getMetadata } from '@vercel/examples-ui'
+import { VercelToolbar } from '@vercel/toolbar/next'
 import '@vercel/examples-ui/globals.css'
 
 export const metadata = getMetadata({
@@ -9,18 +10,21 @@ export const metadata = getMetadata({
 
 export const runtime = 'edge'
 
-export default function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout({
+  children,
+}: Readonly<{ children: ReactNode }>) {
   return (
     <html lang="en">
       <body>
         <Layout
           path="edge-middleware/feature-flag-hypertune"
           deployButton={{
             customDeployUrl:
-              'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel%20Edge%20Config&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl',
+              'https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhypertunehq%2Fvercel-examples-fork%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-hypertune&env=NEXT_PUBLIC_HYPERTUNE_TOKEN,EDGE_CONFIG,EDGE_CONFIG_HYPERTUNE_ITEM_KEY,FLAGS_SECRET&envDescription=Environment%20variables%20needed%20to%20use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&envLink=https%3A%2F%2Fdocs.hypertune.com%2Fgetting-started%2Fvercel-quickstart&project-name=feature-flag-hypertune&repository-name=feature-flag-hypertune&demo-title=Hypertune%20with%20Vercel&demo-description=Use%20Hypertune%20with%20Vercel%20Edge%20Config%20and%20the%20Vercel%20Toolbar&demo-url=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2F&demo-image=https%3A%2F%2Ffeature-flag-hypertune.vercel.app%2Fdemo.png&integration-ids=oac_naLXREDG2o9KihTGYBVz9fVl',
           }}
         >
           {children}
+          <VercelToolbar />
         </Layout>
       </body>
     </html>

edge-middleware/feature-flag-hypertune/app/page.tsx

@@ -14,7 +14,7 @@ export default async function Home() {
   return (
     <Page className="flex flex-col gap-12">
       <section className="flex flex-col gap-6">
-        <Text variant="h1">Hypertune with Vercel Edge Config</Text>
+        <Text variant="h1">Hypertune with Vercel</Text>
         <Text>
           This example shows how to use the{' '}
           <Link
@@ -23,20 +23,24 @@ export default async function Home() {
           >
             Hypertune integration
           </Link>{' '}
-          with Edge Config.
+          with Vercel Edge Config to initialize the Hypertune SDK with near-zero
+          latency on the server so you can access your feature flags and run A/B
+          tests with no performance impact to your app. It also shows how to
+          integrate with the Vercel Toolbar to let you easily set local flag
+          overrides while developing.
         </Text>
       </section>
+
       <section className="flex flex-col gap-4">
         <ServerExample />
         <Text>
           Once you&apos;ve deployed this project, open the{' '}
           <Link href="https://app.hypertune.com/" target="_blank">
-            Hypertune console
+            Hypertune UI
           </Link>{' '}
           and try updating your feature flag logic.
         </Text>
         <Text>To develop your project locally:</Text>
-
         <List>
           <li>
             Clone your project&apos;s repository and <strong>cd</strong> into it
@@ -55,17 +59,13 @@ export default async function Home() {
             Run <strong>npm run dev</strong>
           </li>
         </List>
-        <Text>
-          This example assumes your Hypertune project has an{' '}
-          <strong>exampleFlag</strong> feature flag.
-        </Text>
         <Text>
           To add a new feature flag, create it in the{' '}
           <Link href="https://app.hypertune.com/" target="_blank">
-            Hypertune console
+            Hypertune UI
           </Link>
           , then regenerate the client with <strong>npx hypertune</strong> so
-          you can access it with end-to-end type-safety.
+          you can access it with full end-to-end type-safety.
         </Text>
       </section>
     </Page>