From b4d73dda09ca6065190bd9fff53faee4dfc52728 Mon Sep 17 00:00:00 2001 From: Xidik Date: Sun, 22 Mar 2026 19:58:26 +0700 Subject: [PATCH] feat(templates): add .cursor/rules/echo_rules.mdc to all echo-start templates Adds tailored cursor rules to each echo-start template: - Next.js templates (next, next-chat, next-image, next-video-template, nextjs-api-key-template, authjs, assistant-ui): Rules for server-side Echo initialization, auth handlers, model providers, and AI SDK patterns - React templates (react, react-chat, react-image): Rules for client-side Echo hooks (useEchoModelProviders), EchoTokens component, and Vite setup - CLI template (echo-cli): Rules for server-side Echo with Node.js CLI patterns including interactive prompts and streaming output Each rule file covers Echo SDK initialization, authentication, model provider usage, environment variables, and common code patterns specific to the template framework. Closes #636 --- .../assistant-ui/.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ templates/authjs/.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ .../echo-cli/.cursor/rules/echo_rules.mdc | 72 +++++++++++++++ .../next-chat/.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ .../next-image/.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ .../.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ templates/next/.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ .../.cursor/rules/echo_rules.mdc | 89 +++++++++++++++++++ .../react-chat/.cursor/rules/echo_rules.mdc | 80 +++++++++++++++++ .../react-image/.cursor/rules/echo_rules.mdc | 80 +++++++++++++++++ templates/react/.cursor/rules/echo_rules.mdc | 80 +++++++++++++++++ 11 files changed, 935 insertions(+) create mode 100644 templates/assistant-ui/.cursor/rules/echo_rules.mdc create mode 100644 templates/authjs/.cursor/rules/echo_rules.mdc create mode 100644 templates/echo-cli/.cursor/rules/echo_rules.mdc create mode 100644 templates/next-chat/.cursor/rules/echo_rules.mdc create mode 100644 templates/next-image/.cursor/rules/echo_rules.mdc create mode 100644 templates/next-video-template/.cursor/rules/echo_rules.mdc create mode 100644 templates/next/.cursor/rules/echo_rules.mdc create mode 100644 templates/nextjs-api-key-template/.cursor/rules/echo_rules.mdc create mode 100644 templates/react-chat/.cursor/rules/echo_rules.mdc create mode 100644 templates/react-image/.cursor/rules/echo_rules.mdc create mode 100644 templates/react/.cursor/rules/echo_rules.mdc 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..b34b6ba9d --- /dev/null +++ b/templates/assistant-ui/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` diff --git a/templates/authjs/.cursor/rules/echo_rules.mdc b/templates/authjs/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..b34b6ba9d --- /dev/null +++ b/templates/authjs/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` 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..e44b37ac3 --- /dev/null +++ b/templates/echo-cli/.cursor/rules/echo_rules.mdc @@ -0,0 +1,72 @@ +--- +description: Guidelines and best practices for building Echo-powered CLI applications with user-pays AI infrastructure +globs: **/*.ts,**/*.js +--- + +# Echo CLI Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- This is a Node.js CLI application using Echo +- The `ECHO_APP_ID` environment variable must be set +- Echo provides server-side model providers for CLI usage + +## Echo SDK Usage +- Initialize Echo and export model providers: +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +const { openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` + +## Model Usage +- ALWAYS use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +const { openai } = Echo({ appId: process.env.ECHO_APP_ID! }); +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## CLI Patterns +### Interactive Prompt +```typescript +import { generateText } from 'ai'; +import readline from 'readline'; + +const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); + +rl.question('Ask anything: ', async (prompt) => { + const { text } = await generateText({ + model: openai('gpt-4o'), + prompt, + }); + console.log(text); + rl.close(); +}); +``` + +### Streaming Output +```typescript +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); + +for await (const chunk of result.textStream) { + process.stdout.write(chunk); +} +``` 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..b34b6ba9d --- /dev/null +++ b/templates/next-chat/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` 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..b34b6ba9d --- /dev/null +++ b/templates/next-image/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` 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..b34b6ba9d --- /dev/null +++ b/templates/next-video-template/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` diff --git a/templates/next/.cursor/rules/echo_rules.mdc b/templates/next/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..b34b6ba9d --- /dev/null +++ b/templates/next/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` 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..b34b6ba9d --- /dev/null +++ b/templates/nextjs-api-key-template/.cursor/rules/echo_rules.mdc @@ -0,0 +1,89 @@ +--- +description: Guidelines and best practices for building Echo-powered Next.js applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo Next.js Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- Echo is configured in `src/echo/index.ts` via the `Echo()` initializer +- The `ECHO_APP_ID` environment variable must be set in `.env.local` +- Echo provides `handlers`, `isSignedIn`, and model providers (e.g., `openai`, `anthropic`) + +## Echo SDK Initialization +- ALWAYS initialize Echo in a dedicated file (e.g., `src/echo/index.ts`): +```typescript +import Echo from '@merit-systems/echo-next-sdk'; + +export const { handlers, isSignedIn, openai, anthropic } = Echo({ + appId: process.env.ECHO_APP_ID!, +}); +``` +- NEVER hardcode the app ID — always use environment variables +- Export model providers from this file and import them where needed + +## Authentication +- Use `isSignedIn()` to check if a user is authenticated before making AI calls +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +'use client'; +import { EchoTokens } from '@merit-systems/echo-next-sdk/client'; + +export function EchoButton() { + return ; +} +``` +- Client components using Echo UI must have the `'use client'` directive + +## API Routes +- Use Echo's `handlers` for setting up auth API routes in `src/app/api/echo/[...echo]/route.ts` +- For AI endpoints, use the exported model providers (e.g., `openai`, `anthropic`) from `src/echo/index.ts` +- ALWAYS check `isSignedIn()` before processing AI requests + +## Model Usage +- Use Echo model providers instead of direct AI SDK providers: +```typescript +// CORRECT — uses Echo (users pay) +import { openai } from '@/echo'; +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `generateObject`, etc. + +## Component Patterns +- Wrap Echo client components (like `EchoTokens`) in a separate client component file +- Server components should import from `@/echo` for server-side AI calls +- Client components should use hooks from `@merit-systems/echo-react-sdk` for client-side AI + +## Environment Variables +- `ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Text Generation +```typescript +import { openai } from '@/echo'; +import { generateText } from 'ai'; + +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` + +### Streaming +```typescript +import { openai } from '@/echo'; +import { streamText } from 'ai'; + +const result = streamText({ + model: openai('gpt-4o'), + prompt: 'Tell me a story', +}); +return result.toDataStreamResponse(); +``` 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..bdc1fcf07 --- /dev/null +++ b/templates/react-chat/.cursor/rules/echo_rules.mdc @@ -0,0 +1,80 @@ +--- +description: Guidelines and best practices for building Echo-powered React (Vite) applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo React Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- This is a Vite-based React application using Echo +- The `VITE_ECHO_APP_ID` environment variable must be set in `.env` +- Echo React SDK provides hooks and components for client-side AI usage + +## Echo SDK Usage +- Import hooks from `@merit-systems/echo-react-sdk`: +```typescript +import { useEchoModelProviders, EchoTokens } from '@merit-systems/echo-react-sdk'; +``` +- Use `useEchoModelProviders()` to get model provider instances: +```typescript +const { openai, anthropic } = useEchoModelProviders(); +``` + +## Authentication +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +import { EchoTokens } from '@merit-systems/echo-react-sdk'; + +function App() { + return ; +} +``` + +## Model Usage +- ALWAYS use Echo model providers from `useEchoModelProviders()`: +```typescript +// CORRECT — uses Echo (users pay) +const { openai } = useEchoModelProviders(); +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `useChat`, etc. + +## React Hooks +- Use `useChat` from `@ai-sdk/react` for chat interfaces with Echo models +- Use `useCompletion` for text completion UIs +- Pass Echo model providers to these hooks + +## Environment Variables +- `VITE_ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Chat Interface +```typescript +import { useChat } from '@ai-sdk/react'; + +function Chat() { + const { messages, input, handleInputChange, handleSubmit } = useChat({ + api: '/api/chat', + }); + // render messages and input form +} +``` + +### Text Generation +```typescript +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai } = useEchoModelProviders(); +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` 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..bdc1fcf07 --- /dev/null +++ b/templates/react-image/.cursor/rules/echo_rules.mdc @@ -0,0 +1,80 @@ +--- +description: Guidelines and best practices for building Echo-powered React (Vite) applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo React Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- This is a Vite-based React application using Echo +- The `VITE_ECHO_APP_ID` environment variable must be set in `.env` +- Echo React SDK provides hooks and components for client-side AI usage + +## Echo SDK Usage +- Import hooks from `@merit-systems/echo-react-sdk`: +```typescript +import { useEchoModelProviders, EchoTokens } from '@merit-systems/echo-react-sdk'; +``` +- Use `useEchoModelProviders()` to get model provider instances: +```typescript +const { openai, anthropic } = useEchoModelProviders(); +``` + +## Authentication +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +import { EchoTokens } from '@merit-systems/echo-react-sdk'; + +function App() { + return ; +} +``` + +## Model Usage +- ALWAYS use Echo model providers from `useEchoModelProviders()`: +```typescript +// CORRECT — uses Echo (users pay) +const { openai } = useEchoModelProviders(); +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `useChat`, etc. + +## React Hooks +- Use `useChat` from `@ai-sdk/react` for chat interfaces with Echo models +- Use `useCompletion` for text completion UIs +- Pass Echo model providers to these hooks + +## Environment Variables +- `VITE_ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Chat Interface +```typescript +import { useChat } from '@ai-sdk/react'; + +function Chat() { + const { messages, input, handleInputChange, handleSubmit } = useChat({ + api: '/api/chat', + }); + // render messages and input form +} +``` + +### Text Generation +```typescript +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai } = useEchoModelProviders(); +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +``` diff --git a/templates/react/.cursor/rules/echo_rules.mdc b/templates/react/.cursor/rules/echo_rules.mdc new file mode 100644 index 000000000..bdc1fcf07 --- /dev/null +++ b/templates/react/.cursor/rules/echo_rules.mdc @@ -0,0 +1,80 @@ +--- +description: Guidelines and best practices for building Echo-powered React (Vite) applications with user-pays AI infrastructure +globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx +--- + +# Echo React Guidelines + +## What is Echo? +Echo is a user-pays AI infrastructure SDK by Merit Systems. Instead of fronting AI API costs yourself, users authenticate via Echo and pay for their own usage. You set a markup and earn revenue automatically. + +## Project Setup +- This is a Vite-based React application using Echo +- The `VITE_ECHO_APP_ID` environment variable must be set in `.env` +- Echo React SDK provides hooks and components for client-side AI usage + +## Echo SDK Usage +- Import hooks from `@merit-systems/echo-react-sdk`: +```typescript +import { useEchoModelProviders, EchoTokens } from '@merit-systems/echo-react-sdk'; +``` +- Use `useEchoModelProviders()` to get model provider instances: +```typescript +const { openai, anthropic } = useEchoModelProviders(); +``` + +## Authentication +- Echo handles OAuth login — use the `EchoTokens` component for the auth UI: +```typescript +import { EchoTokens } from '@merit-systems/echo-react-sdk'; + +function App() { + return ; +} +``` + +## Model Usage +- ALWAYS use Echo model providers from `useEchoModelProviders()`: +```typescript +// CORRECT — uses Echo (users pay) +const { openai } = useEchoModelProviders(); +const response = await generateText({ model: openai('gpt-4o'), prompt: '...' }); + +// WRONG — uses direct SDK (you pay) +import { openai } from '@ai-sdk/openai'; +``` +- Echo is compatible with the Vercel AI SDK (`ai` package) — use `generateText`, `streamText`, `useChat`, etc. + +## React Hooks +- Use `useChat` from `@ai-sdk/react` for chat interfaces with Echo models +- Use `useCompletion` for text completion UIs +- Pass Echo model providers to these hooks + +## Environment Variables +- `VITE_ECHO_APP_ID` — Your Echo application ID (required) +- Get your app ID from https://echo.merit.systems + +## Common Patterns +### Chat Interface +```typescript +import { useChat } from '@ai-sdk/react'; + +function Chat() { + const { messages, input, handleInputChange, handleSubmit } = useChat({ + api: '/api/chat', + }); + // render messages and input form +} +``` + +### Text Generation +```typescript +import { useEchoModelProviders } from '@merit-systems/echo-react-sdk'; +import { generateText } from 'ai'; + +const { openai } = useEchoModelProviders(); +const { text } = await generateText({ + model: openai('gpt-4o'), + prompt: 'Hello!', +}); +```