Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions templates/assistant-ui/.cursor/rules/echo_rules.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
description: Guidelines and best practices for building Echo applications with Assistant UI, including @assistant-ui/react integration, server/client boundaries, and AI SDK usage
globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx
---

# Echo Assistant UI Guidelines

## SDK Initialization

### Server-Side Initialization

ALWAYS initialize the Echo SDK in `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!,
});
```

### Client-Side Provider

ALWAYS wrap your application with `EchoProvider`:

```typescript
'use client';

import { EchoProvider } from '@merit-systems/echo-next-sdk/client';

export function Providers({ children }: { children: React.ReactNode }) {
return (
<EchoProvider config={{ appId: process.env.NEXT_PUBLIC_ECHO_APP_ID! }}>
{children}
</EchoProvider>
);
}
```

## Environment Variables

ALWAYS store your Echo App ID in `.env.local`:

```bash
ECHO_APP_ID=your_echo_app_id
NEXT_PUBLIC_ECHO_APP_ID=your_echo_app_id
```

NEVER hardcode API keys or app IDs directly in your code.

## Assistant UI Integration

This template uses `@assistant-ui/react` for the chat interface. Key patterns:

- Use `@assistant-ui/react-ai-sdk` to bridge Assistant UI with the Vercel AI SDK
- Customize thread and message components through `@assistant-ui/react`
- Style with Tailwind CSS and Radix UI primitives

## Server/Client Boundaries

Use server components for Echo AI calls. Use client components ONLY for UI interactions.

```typescript
// ✅ CORRECT
'use client';
import { EchoTokens } from '@merit-systems/echo-next-sdk/client';

// ❌ INCORRECT - Never import server SDK in client components
'use client';
import Echo from '@merit-systems/echo-next-sdk';
```

## Echo Authentication Handler

ALWAYS register Echo auth handlers at `app/api/echo/[...echo]/route.ts`:

```typescript
import { handlers } from '@/echo';
export const { GET, POST } = handlers;
```

## Best Practices

1. **Separation**: Keep server logic in API routes and `src/echo/`, client logic in components
2. **Environment Variables**: Use server variables for secrets, `NEXT_PUBLIC_` for client-side config
3. **Validation**: Always validate inputs in API routes before processing
4. **Error Handling**: Provide clear error messages and appropriate HTTP status codes
5. **Type Safety**: Use TypeScript strictly, avoid `any`
6. **Security**: Never expose server secrets to the client
92 changes: 92 additions & 0 deletions templates/authjs/.cursor/rules/echo_rules.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
---
description: Guidelines and best practices for building Echo Next.js applications with Auth.js (NextAuth) authentication, including session management and protected routes
globs: **/*.ts,**/*.tsx,**/*.js,**/*.jsx
---

# Echo Auth.js (NextAuth) Guidelines

## SDK Initialization

### Server-Side Initialization

ALWAYS initialize the Echo SDK in `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!,
});
```

### Client-Side Provider

ALWAYS wrap your application with `EchoProvider`:

```typescript
'use client';

import { EchoProvider } from '@merit-systems/echo-next-sdk/client';

export function Providers({ children }: { children: React.ReactNode }) {
return (
<EchoProvider config={{ appId: process.env.NEXT_PUBLIC_ECHO_APP_ID! }}>
{children}
</EchoProvider>
);
}
```

## Auth.js Integration

This template uses `@merit-systems/echo-authjs-provider` to integrate Echo as a NextAuth provider.

- Configure Auth.js with the Echo provider in your auth configuration
- Use `next-auth` session management for protected routes
- Access the Echo session through the NextAuth session object

## Environment Variables

ALWAYS store secrets in `.env.local`:

```bash
ECHO_APP_ID=your_echo_app_id
NEXT_PUBLIC_ECHO_APP_ID=your_echo_app_id
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
```

NEVER hardcode secrets directly in your code.

## Server/Client Boundaries

Use server components for Echo AI calls and auth checks. Use client components ONLY for UI interactions.

```typescript
// ✅ CORRECT
'use client';
import { EchoTokens } from '@merit-systems/echo-next-sdk/client';

// ❌ INCORRECT - Never import server SDK in client components
'use client';
import Echo from '@merit-systems/echo-next-sdk';
```

## Echo Authentication Handler

ALWAYS register Echo auth handlers at `app/api/echo/[...echo]/route.ts`:

```typescript
import { handlers } from '@/echo';
export const { GET, POST } = handlers;
```

## Best Practices

1. **Separation**: Keep server logic in API routes and `src/echo/`, client logic in components
2. **Environment Variables**: Use server variables for secrets, `NEXT_PUBLIC_` for client-side config
3. **Auth**: Use middleware or server-side checks for route protection
4. **Validation**: Always validate inputs in API routes before processing
5. **Error Handling**: Provide clear error messages and appropriate HTTP status codes
6. **Type Safety**: Use TypeScript strictly, avoid `any`
7. **Security**: Never expose server secrets, auth tokens, or API keys to the client
152 changes: 152 additions & 0 deletions templates/echo-cli/.cursor/rules/echo_rules.mdc
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
---
description: Guidelines and best practices for building Echo CLI applications, including authentication, wallet management, chat sessions, and AI SDK integration
globs: **/*.ts,**/*.js
---

# Echo CLI Guidelines

## SDK Initialization

The CLI uses `@merit-systems/echo-typescript-sdk` for server-side Echo integration and `@merit-systems/ai-x402` for AI model access.

## Project Structure

```
src/
├── index.ts # CLI entry point (Commander.js)
├── print.ts # Output formatting utilities
├── auth/
│ ├── index.ts # Auth barrel exports
│ ├── client.ts # Echo auth client
│ ├── login.ts # Login flow
│ ├── logout.ts # Logout flow
│ ├── providers.ts # Auth provider options
│ ├── wallet.ts # Wallet-based auth
│ └── local-wallet.ts # Local wallet auth
├── config/
│ ├── index.ts # Config barrel exports
│ ├── store.ts # Persistent config storage
│ ├── models.ts # Available AI models
│ ├── wallet.ts # Wallet configuration
│ ├── ascii.ts # ASCII art/branding
│ └── messages.ts # User-facing messages
├── core/
│ ├── index.ts # Core barrel exports
│ ├── chat.ts # Chat session logic
│ ├── model.ts # Model selection
│ ├── history.ts # Conversation history
│ ├── profile.ts # User profile
│ └── local-wallet.ts # Local wallet operations
└── utils/
├── index.ts # Utils barrel exports
├── auth.ts # Auth helpers
├── stream.ts # Streaming response handling
├── wallet.ts # Wallet utilities
├── local-wallet.ts # Local wallet helpers
├── errors.ts # Error handling
├── spinner.ts # CLI spinner
├── chains.ts # Blockchain chain configs
└── signer.ts # Transaction signing
```

## Authentication

The CLI supports multiple auth methods:

- **Echo OAuth**: Browser-based login through Echo
- **Wallet Connect**: Connect an existing crypto wallet
- **Local Wallet**: Generate and manage a local wallet

ALWAYS check authentication state before making API calls:

```typescript
import { isAuthenticated } from '@/utils';

if (!isAuthenticated()) {
warning('Please login first: echodex login');
return;
}
```

## CLI Commands

Define commands using Commander.js:

```typescript
import { Command } from 'commander';

const program = new Command();

program
.name('echodex')
.description('CLI Coding Agent Powered by Echo')
.version('1.0.0');

program
.command('login')
.description('Authenticate with Echo or Wallet')
.action(async () => { /* ... */ });
```

## Interactive Prompts

Use `@clack/prompts` for interactive CLI prompts:

```typescript
import { select, isCancel } from '@clack/prompts';

const choice = await select({
message: 'Choose an option:',
options: [
{ label: 'Option A', value: 'a' },
{ label: 'Option B', value: 'b' },
],
});

if (isCancel(choice)) {
process.exit(0);
}
```

## Streaming Responses

ALWAYS use streaming for AI chat responses to provide real-time output.

## TypeScript Guidelines

ALWAYS use strict typing and avoid `any`:

```typescript
// ✅ CORRECT
interface ChatMessage {
role: 'user' | 'assistant' | 'system';
content: string;
}

// ❌ INCORRECT
function handleMessage(msg: any): any { ... }
```

## Error Handling

ALWAYS handle errors explicitly with user-friendly messages:

```typescript
import { handleError } from '@/utils/errors';

try {
await someOperation();
} catch (error) {
handleError(error, 'Failed to complete operation');
}
```

## Best Practices

1. **Authentication**: Always verify auth state before API calls
2. **Streaming**: Use streaming for AI responses to give real-time feedback
3. **Error Handling**: Provide clear, actionable error messages
4. **Type Safety**: Use TypeScript strictly, define interfaces for all data structures
5. **Config Storage**: Use the config store for persistent user settings
6. **Modularity**: Keep auth, config, core logic, and utils separated
7. **User Experience**: Use spinners and formatted output for long-running operations
Loading