diff --git a/templates/assistant-ui/.cursor/rules/echo_rules.mdc b/templates/assistant-ui/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/assistant-ui/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/authjs/.cursor/rules/echo_rules.mdc b/templates/authjs/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/authjs/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/echo-cli/.cursor/rules/echo_rules.mdc b/templates/echo-cli/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..94819ee06 --- /dev/null +++ b/templates/echo-cli/.cursor/rules/echo_rules.mdc @@ -0,0 +1,71 @@ +--- +description: Guidelines and best practices for building Echo-powered CLI applications +globs: **/*.ts,**/*.js +--- + +# Echo CLI Guidelines + +## Authentication +- Use `loginWithEcho` for OAuth-based authentication +- Use `loginWithWallet` for wallet-based authentication +- Check authentication status with `isAuthenticated()` utility +- Handle logout with the `logout` command + +## Echo TypeScript SDK +- Initialize client with: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- For OAuth tokens, use `OAuthTokenProvider` +- For API keys, use `ApiKeyTokenProvider` + +## CLI Framework +- Use `commander` for command structure +- Use `@clack/prompts` for interactive prompts +- Always check `isCancel()` after prompts to handle cancellation +- Example command structure: +```typescript +import { Command } from 'commander'; +import { select, isCancel } from '@clack/prompts'; + +const program = new Command(); +program + .command('login') + .description('Authenticate with Echo') + .action(async () => { + const method = await select({ + message: 'Choose auth method:', + options: [ + { value: 'echo', label: 'Echo OAuth' }, + { value: 'wallet', label: 'Wallet' }, + ], + }); + if (isCancel(method)) process.exit(0); + // Handle login... + }); +``` + +## Model Selection +- Use `selectModel` function for model selection +- Support multiple AI providers through Echo +- Display available models to user before selection + +## Chat Sessions +- Use `startChatSession` for new conversations +- Use `resumeChatSession` to continue existing conversations +- Store conversation history locally with `showConversationHistory` +- Support export with `exportConversationHistory` + +## Wallet Operations +- Show balance with `showLocalWalletBalance` +- Display address with `showLocalWalletAddress` +- Support funding with `fundWallet` +- Allow private key export with `exportPrivateKey` + +## Error Handling +- Always wrap async operations in try/catch +- Display user-friendly error messages +- Handle network errors gracefully +- Provide retry options for failed operations + +## Output Formatting +- Use the `info`, `warning`, and `header` utilities from `@/print` +- Display ASCII art header with `ECHODEX_ASCII_ART` +- Keep output clean and readable diff --git a/templates/next-chat/.cursor/rules/echo_rules.mdc b/templates/next-chat/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/next-chat/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/next-image/.cursor/rules/echo_rules.mdc b/templates/next-image/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/next-image/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/next-video-template/.cursor/rules/echo_rules.mdc b/templates/next-video-template/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/next-video-template/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/next/.cursor/rules/echo_rules.mdc b/templates/next/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/next/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/nextjs-api-key-template/.cursor/rules/echo_rules.mdc b/templates/nextjs-api-key-template/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..ed8e6a26f --- /dev/null +++ b/templates/nextjs-api-key-template/.cursor/rules/echo_rules.mdc @@ -0,0 +1,70 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## Echo Provider Setup +- Always wrap your application with `EchoProvider` from `@merit-systems/echo-next-sdk/client` in a client component +- The provider must receive an `appId` from environment variable `NEXT_PUBLIC_ECHO_APP_ID` +- Example provider setup: +```tsx +'use client'; + +import { EchoProvider } from '@merit-systems/echo-next-sdk/client'; + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +## AI Provider Integration +- Use `useEchoModelProviders()` from `@merit-systems/echo-react-sdk` to get AI model providers +- Supported providers: OpenAI, Anthropic, Google, OpenRouter, Groq, xAI +- Example usage: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai, anthropic } = useEchoModelProviders(); +const response = await generateText({ + model: openai('gpt-4o'), + prompt: '...', +}); +``` + +## Authentication +- Echo handles OAuth authentication automatically through the provider +- Use `useEcho()` hook to access user state and authentication methods +- Use `EchoSignIn` and `EchoSignOut` components for auth UI +- Do NOT implement custom OAuth flows - use Echo's built-in components + +## Token Balance +- Use `EchoTokens` component to display user's token balance +- Use `useEcho()` hook to programmatically access balance information +- Check balance before making expensive AI calls + +## Environment Variables +- Required: `NEXT_PUBLIC_ECHO_APP_ID` - Your Echo application ID +- Optional: `ECHO_API_KEY` - For server-side API access +- Never expose API keys in client-side code + +## API Routes +- For server-side AI calls, use the Echo TypeScript SDK: `@merit-systems/echo-typescript-sdk` +- Initialize with API key: `EchoClient({ apiKey: process.env.ECHO_API_KEY })` +- Server routes should proxy through Echo's infrastructure + +## Component Patterns +- Use `'use client'` directive for components that use Echo hooks +- Echo components handle loading and error states internally +- Prefer `EchoSignIn` over custom login forms + +## Error Handling +- Check for insufficient funds using `InsufficientFundsModal` component +- Handle authentication errors gracefully +- Always provide fallback UI for unauthenticated state diff --git a/templates/react-chat/.cursor/rules/echo_rules.mdc b/templates/react-chat/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..826ea80f1 --- /dev/null +++ b/templates/react-chat/.cursor/rules/echo_rules.mdc @@ -0,0 +1,64 @@ +--- +description: Guidelines and best practices for building Echo-powered React applications with Vite +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo React Guidelines + +## Echo Provider Setup +- Wrap your application with `EchoProvider` from `@merit-systems/echo-react-sdk` +- Configure with your Echo `appId` from environment variables +- Example provider setup: +```tsx +import { EchoProvider } from '@merit-systems/echo-react-sdk'; + +function App() { + return ( + + + + ); +} +``` + +## Environment Variables +- Use Vite's `import.meta.env` to access environment variables +- Required: `VITE_ECHO_APP_ID` - Your Echo application ID +- Prefix all client-side variables with `VITE_` + +## AI Provider Integration +- Use `useEchoModelProviders()` hook to get authenticated AI providers +- Providers automatically handle user authentication and billing +- Example: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +function ChatComponent() { + const { openai } = useEchoModelProviders(); + + const handleSend = async (prompt: string) => { + const response = await generateText({ + model: openai('gpt-4o'), + prompt, + }); + return response.text; + }; +} +``` + +## Authentication +- Use `useEcho()` hook for authentication state +- Use `EchoSignIn` component for login UI +- Use `EchoSignOut` component for logout +- Do NOT implement custom OAuth - Echo handles this + +## Token Management +- Use `EchoTokens` component to display user balance +- Use `useEchoClient()` for programmatic balance checks +- Warn users before making expensive operations + +## Component Patterns +- Echo hooks must be used within `EchoProvider` context +- Components using Echo hooks should handle loading states +- Use `InsufficientFundsModal` for balance warnings diff --git a/templates/react-image/.cursor/rules/echo_rules.mdc b/templates/react-image/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..826ea80f1 --- /dev/null +++ b/templates/react-image/.cursor/rules/echo_rules.mdc @@ -0,0 +1,64 @@ +--- +description: Guidelines and best practices for building Echo-powered React applications with Vite +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo React Guidelines + +## Echo Provider Setup +- Wrap your application with `EchoProvider` from `@merit-systems/echo-react-sdk` +- Configure with your Echo `appId` from environment variables +- Example provider setup: +```tsx +import { EchoProvider } from '@merit-systems/echo-react-sdk'; + +function App() { + return ( + + + + ); +} +``` + +## Environment Variables +- Use Vite's `import.meta.env` to access environment variables +- Required: `VITE_ECHO_APP_ID` - Your Echo application ID +- Prefix all client-side variables with `VITE_` + +## AI Provider Integration +- Use `useEchoModelProviders()` hook to get authenticated AI providers +- Providers automatically handle user authentication and billing +- Example: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +function ChatComponent() { + const { openai } = useEchoModelProviders(); + + const handleSend = async (prompt: string) => { + const response = await generateText({ + model: openai('gpt-4o'), + prompt, + }); + return response.text; + }; +} +``` + +## Authentication +- Use `useEcho()` hook for authentication state +- Use `EchoSignIn` component for login UI +- Use `EchoSignOut` component for logout +- Do NOT implement custom OAuth - Echo handles this + +## Token Management +- Use `EchoTokens` component to display user balance +- Use `useEchoClient()` for programmatic balance checks +- Warn users before making expensive operations + +## Component Patterns +- Echo hooks must be used within `EchoProvider` context +- Components using Echo hooks should handle loading states +- Use `InsufficientFundsModal` for balance warnings diff --git a/templates/react/.cursor/rules/echo_rules.mdc b/templates/react/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..826ea80f1 --- /dev/null +++ b/templates/react/.cursor/rules/echo_rules.mdc @@ -0,0 +1,64 @@ +--- +description: Guidelines and best practices for building Echo-powered React applications with Vite +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo React Guidelines + +## Echo Provider Setup +- Wrap your application with `EchoProvider` from `@merit-systems/echo-react-sdk` +- Configure with your Echo `appId` from environment variables +- Example provider setup: +```tsx +import { EchoProvider } from '@merit-systems/echo-react-sdk'; + +function App() { + return ( + + + + ); +} +``` + +## Environment Variables +- Use Vite's `import.meta.env` to access environment variables +- Required: `VITE_ECHO_APP_ID` - Your Echo application ID +- Prefix all client-side variables with `VITE_` + +## AI Provider Integration +- Use `useEchoModelProviders()` hook to get authenticated AI providers +- Providers automatically handle user authentication and billing +- Example: +```tsx +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +function ChatComponent() { + const { openai } = useEchoModelProviders(); + + const handleSend = async (prompt: string) => { + const response = await generateText({ + model: openai('gpt-4o'), + prompt, + }); + return response.text; + }; +} +``` + +## Authentication +- Use `useEcho()` hook for authentication state +- Use `EchoSignIn` component for login UI +- Use `EchoSignOut` component for logout +- Do NOT implement custom OAuth - Echo handles this + +## Token Management +- Use `EchoTokens` component to display user balance +- Use `useEchoClient()` for programmatic balance checks +- Warn users before making expensive operations + +## Component Patterns +- Echo hooks must be used within `EchoProvider` context +- Components using Echo hooks should handle loading states +- Use `InsufficientFundsModal` for balance warnings