Add .cursor/rules/echo_rules.mdc to echo-start templates

[fmhall]

It needs to be tailored to be for nextjs or react or CLI, etc.

Here's an example from convex:

---

description: Guidelines and best practices for building Convex projects, including database schema design, queries, mutations, and real-world examples
globs: /*.ts,/.tsx,**/.js,**/*.jsx

Convex guidelines

Function guidelines

New function syntax

• ALWAYS use the new function syntax for Convex functions. For example:

import { query } from "./_generated/server";
import { v } from "convex/values";
export const f = query({
    args: {},
    returns: v.null(),
    handler: async (ctx, args) => {
    // Function body
    },
});

Http endpoint syntax

• HTTP endpoints are defined in convex/http.ts and require an httpAction decorator. For example:

import { httpRouter } from "convex/server";
import { httpAction } from "./_generated/server";
const http = httpRouter();
http.route({
    path: "/echo",
    method: "POST",
    handler: httpAction(async (ctx, req) => {
    const body = await req.bytes();
    return new Response(body, { status: 200 });
    }),
});

• HTTP endpoints are always registered at the exact path you specify in the path field. For example, if you specify /api/someRoute, the endpoint will be registered at /api/someRoute.

Validators

• Below is an example of an array validator:

import { mutation } from "./_generated/server";
import { v } from "convex/values";

export default mutation({
args: {
    simpleArray: v.array(v.union(v.string(), v.number())),
},
handler: async (ctx, args) => {
    //...
},
});

• Below is an example of a schema with validators that codify a discriminated union type:

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
    results: defineTable(
        v.union(
            v.object({
                kind: v.literal("error"),
                errorMessage: v.string(),
            }),
            v.object({
                kind: v.literal("success"),
                value: v.number(),
            }),
        ),
    )
});

• Always use the v.null() validator when returning a null value. Below is an example query that returns a null value:

import { query } from "./_generated/server";
import { v } from "convex/values";

export const exampleQuery = query({
  args: {},
  returns: v.null(),
  handler: async (ctx, args) => {
      console.log("This query returns a null value");
      return null;
  },
});

• Here are the valid Convex types along with their respective validators:
  Convex Type | TS/JS type | Example Usage | Validator for argument validation and schemas | Notes |
  | ----------- | ------------| -----------------------| -----------------------------------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
  | Id | string | doc._id | v.id(tableName) | |
  | Null | null | null | v.null() | JavaScript's undefined is not a valid Convex value. Functions the return undefined or do not return will return null when called from a client. Use null instead. |
  | Int64 | bigint | 3n | v.int64() | Int64s only support BigInts between -2^63 and 2^63-1. Convex supports bigints in most modern browsers. |
  | Float64 | number | 3.1 | v.number() | Convex supports all IEEE-754 double-precision floating point numbers (such as NaNs). Inf and NaN are JSON serialized as strings. |
  | Boolean | boolean | true | v.boolean() |
  | String | string | "abc" | v.string() | Strings are stored as UTF-8 and must be valid Unicode sequences. Strings must be smaller than the 1MB total size limit when encoded as UTF-8. |
  | Bytes | ArrayBuffer | new ArrayBuffer(8) | v.bytes() | Convex supports first class bytestrings, passed in as ArrayBuffers. Bytestrings must be smaller than the 1MB total size limit for Convex types. |
  | Array | Array | [1, 3.2, "abc"] | v.array(values) | Arrays can have at most 8192 values. |
  | Object | Object | {a: "abc"} | v.object({property: value}) | Convex only supports "plain old JavaScript objects" (objects that do not have a custom prototype). Objects can have at most 1024 entries. Field names must be nonempty and not start with "$" or "". |
  | Record | Record | {"a": "1", "b": "2"} | v.record(keys, values) | Records are objects at runtime, but can have dynamic keys. Keys must be only ASCII characters, nonempty, and not start with "$" or "". |

Function registration

• Use internalQuery, internalMutation, and internalAction to register internal functions. These functions are private and aren't part of an app's API. They can only be called by other Convex functions. These functions are always imported from ./_generated/server.
• Use query, mutation, and action to register public functions. These functions are part of the public API and are exposed to the public Internet. Do NOT use query, mutation, or action to register sensitive internal functions that should be kept private.
• You CANNOT register a function through the api or internal objects.
• ALWAYS include argument and return validators for all Convex functions. This includes all of query, internalQuery, mutation, internalMutation, action, and internalAction. If a function doesn't return anything, include returns: v.null() as its output validator.
• If the JavaScript implementation of a Convex function doesn't have a return value, it implicitly returns null.

Function calling

• Use ctx.runQuery to call a query from a query, mutation, or action.
• Use ctx.runMutation to call a mutation from a mutation or action.
• Use ctx.runAction to call an action from an action.
• ONLY call an action from another action if you need to cross runtimes (e.g. from V8 to Node). Otherwise, pull out the shared code into a helper async function and call that directly instead.
• Try to use as few calls from actions to queries and mutations as possible. Queries and mutations are transactions, so splitting logic up into multiple calls introduces the risk of race conditions.
• All of these calls take in a FunctionReference. Do NOT try to pass the callee function directly into one of these calls.
• When using ctx.runQuery, ctx.runMutation, or ctx.runAction to call a function in the same file, specify a type annotation on the return value to work around TypeScript circularity limitations. For example,

export const f = query({
  args: { name: v.string() },
  returns: v.string(),
  handler: async (ctx, args) => {
    return "Hello " + args.name;
  },
});

export const g = query({
  args: {},
  returns: v.null(),
  handler: async (ctx, args) => {
    const result: string = await ctx.runQuery(api.example.f, { name: "Bob" });
    return null;
  },
});

Function references

• Function references are pointers to registered Convex functions.
• Use the api object defined by the framework in convex/_generated/api.ts to call public functions registered with query, mutation, or action.
• Use the internal object defined by the framework in convex/_generated/api.ts to call internal (or private) functions registered with internalQuery, internalMutation, or internalAction.
• Convex uses file-based routing, so a public function defined in convex/example.ts named f has a function reference of api.example.f.
• A private function defined in convex/example.ts named g has a function reference of internal.example.g.
• Functions can also registered within directories nested within the convex/ folder. For example, a public function h defined in convex/messages/access.ts has a function reference of api.messages.access.h.

Api design

• Convex uses file-based routing, so thoughtfully organize files with public query, mutation, or action functions within the convex/ directory.
• Use query, mutation, and action to define public functions.
• Use internalQuery, internalMutation, and internalAction to define private, internal functions.

Pagination

• Paginated queries are queries that return a list of results in incremental pages.
• You can define pagination using the following syntax:

import { v } from "convex/values";
import { query, mutation } from "./_generated/server";
import { paginationOptsValidator } from "convex/server";
export const listWithExtraArg = query({
    args: { paginationOpts: paginationOptsValidator, author: v.string() },
    handler: async (ctx, args) => {
        return await ctx.db
        .query("messages")
        .filter((q) => q.eq(q.field("author"), args.author))
        .order("desc")
        .paginate(args.paginationOpts);
    },
});

Note: paginationOpts is an object with the following properties:

• numItems: the maximum number of documents to return (the validator is v.number())
• cursor: the cursor to use to fetch the next page of documents (the validator is v.union(v.string(), v.null()))
• A query that ends in .paginate() returns an object that has the following properties:
  - page (contains an array of documents that you fetches)
  - isDone (a boolean that represents whether or not this is the last page of documents)
  - continueCursor (a string that represents the cursor to use to fetch the next page of documents)

Validator guidelines

• v.bigint() is deprecated for representing signed 64-bit integers. Use v.int64() instead.
• Use v.record() for defining a record type. v.map() and v.set() are not supported.

Schema guidelines

• Always define your schema in convex/schema.ts.
• Always import the schema definition functions from convex/server:
• System fields are automatically added to all documents and are prefixed with an underscore. The two system fields that are automatically added to all documents are _creationTime which has the validator v.number() and _id which has the validator v.id(tableName).
• Always include all index fields in the index name. For example, if an index is defined as ["field1", "field2"], the index name should be "by_field1_and_field2".
• Index fields must be queried in the same order they are defined. If you want to be able to query by "field1" then "field2" and by "field2" then "field1", you must create separate indexes.

Typescript guidelines

• You can use the helper typescript type Id imported from './_generated/dataModel' to get the type of the id for a given table. For example if there is a table called 'users' you can use Id<'users'> to get the type of the id for that table.
• If you need to define a Record make sure that you correctly provide the type of the key and value in the type. For example a validator v.record(v.id('users'), v.string()) would have the type Record<Id<'users'>, string>. Below is an example of using Record with an Id type in a query:

import { query } from "./_generated/server";
import { Doc, Id } from "./_generated/dataModel";

export const exampleQuery = query({
    args: { userIds: v.array(v.id("users")) },
    returns: v.record(v.id("users"), v.string()),
    handler: async (ctx, args) => {
        const idToUsername: Record<Id<"users">, string> = {};
        for (const userId of args.userIds) {
            const user = await ctx.db.get(userId);
            if (user) {
                idToUsername[user._id] = user.username;
            }
        }

        return idToUsername;
    },
});

• Be strict with types, particularly around id's of documents. For example, if a function takes in an id for a document in the 'users' table, take in Id<'users'> rather than string.
• Always use as const for string literals in discriminated union types.
• When using the Array type, make sure to always define your arrays as const array: Array<T> = [...];
• When using the Record type, make sure to always define your records as const record: Record<KeyType, ValueType> = {...};
• Always add @types/node to your package.json when using any Node.js built-in modules.

Full text search guidelines

• A query for "10 messages in channel '#general' that best match the query 'hello hi' in their body" would look like:

const messages = await ctx.db
.query("messages")
.withSearchIndex("search_body", (q) =>
q.search("body", "hello hi").eq("channel", "#general"),
)
.take(10);

Query guidelines

• Do NOT use filter in queries. Instead, define an index in the schema and use withIndex instead.
• Convex queries do NOT support .delete(). Instead, .collect() the results, iterate over them, and call ctx.db.delete(row._id) on each result.
• Use .unique() to get a single document from a query. This method will throw an error if there are multiple documents that match the query.
• When using async iteration, don't use .collect() or .take(n) on the result of a query. Instead, use the for await (const row of query) syntax.

Ordering

• By default Convex always returns documents in ascending _creationTime order.
• You can use .order('asc') or .order('desc') to pick whether a query is in ascending or descending order. If the order isn't specified, it defaults to ascending.
• Document queries that use indexes will be ordered based on the columns in the index and can avoid slow table scans.

Mutation guidelines

• Use ctx.db.replace to fully replace an existing document. This method will throw an error if the document does not exist.
• Use ctx.db.patch to shallow merge updates into an existing document. This method will throw an error if the document does not exist.

Action guidelines

• Always add "use node"; to the top of files containing actions that use Node.js built-in modules.
• Never use ctx.db inside of an action. Actions don't have access to the database.
• Below is an example of the syntax for an action:

import { action } from "./_generated/server";

export const exampleAction = action({
    args: {},
    returns: v.null(),
    handler: async (ctx, args) => {
        console.log("This action does not return anything");
        return null;
    },
});

Scheduling guidelines

Cron guidelines

• Only use the crons.interval or crons.cron methods to schedule cron jobs. Do NOT use the crons.hourly, crons.daily, or crons.weekly helpers.
• Both cron methods take in a FunctionReference. Do NOT try to pass the function directly into one of these methods.
• Define crons by declaring the top-level crons object, calling some methods on it, and then exporting it as default. For example,

import { cronJobs } from "convex/server";
import { internal } from "./_generated/api";
import { internalAction } from "./_generated/server";

const empty = internalAction({
  args: {},
  returns: v.null(),
  handler: async (ctx, args) => {
    console.log("empty");
  },
});

const crons = cronJobs();

// Run `internal.crons.empty` every two hours.
crons.interval("delete inactive users", { hours: 2 }, internal.crons.empty, {});

export default crons;

• You can register Convex functions within crons.ts just like any other file.
• If a cron calls an internal function, always import the internal object from '_generated/api', even if the internal function is registered in the same file.

File storage guidelines

• Convex includes file storage for large files like images, videos, and PDFs.

• The ctx.storage.getUrl() method returns a signed URL for a given file. It returns null if the file doesn't exist.

• Do NOT use the deprecated ctx.storage.getMetadata call for loading a file's metadata.

                Instead, query the `_storage` system table. For example, you can use `ctx.db.system.get` to get an `Id<"_storage">`.
  

import { query } from "./_generated/server";
import { Id } from "./_generated/dataModel";

type FileMetadata = {
    _id: Id<"_storage">;
    _creationTime: number;
    contentType?: string;
    sha256: string;
    size: number;
}

export const exampleQuery = query({
    args: { fileId: v.id("_storage") },
    returns: v.null(),
    handler: async (ctx, args) => {
        const metadata: FileMetadata | null = await ctx.db.system.get(args.fileId);
        console.log(metadata);
        return null;
    },
});

• Convex storage stores items as Blob objects. You must convert all items to/from a Blob when using Convex storage.

Examples:

Example: chat-app

Task

Create a real-time chat application backend with AI responses. The app should:
- Allow creating users with names
- Support multiple chat channels
- Enable users to send messages to channels
- Automatically generate AI responses to user messages
- Show recent message history

The backend should provide APIs for:
1. User management (creation)
2. Channel management (creation)
3. Message operations (sending, listing)
4. AI response generation using OpenAI's GPT-4

Messages should be stored with their channel, author, and content. The system should maintain message order
and limit history display to the 10 most recent messages per channel.

Analysis

1. Task Requirements Summary:

• Build a real-time chat backend with AI integration
• Support user creation
• Enable channel-based conversations
• Store and retrieve messages with proper ordering
• Generate AI responses automatically

2. Main Components Needed:

• Database tables: users, channels, messages
• Public APIs for user/channel management
• Message handling functions
• Internal AI response generation system
• Context loading for AI responses

3. Public API and Internal Functions Design:
   Public Mutations:

• createUser:
  • file path: convex/index.ts
  • arguments: {name: v.string()}
  • returns: v.object({userId: v.id("users")})
  • purpose: Create a new user with a given name
• createChannel:
  • file path: convex/index.ts
  • arguments: {name: v.string()}
  • returns: v.object({channelId: v.id("channels")})
  • purpose: Create a new channel with a given name
• sendMessage:
  • file path: convex/index.ts
  • arguments: {channelId: v.id("channels"), authorId: v.id("users"), content: v.string()}
  • returns: v.null()
  • purpose: Send a message to a channel and schedule a response from the AI

Public Queries:

• listMessages:
  • file path: convex/index.ts
  • arguments: {channelId: v.id("channels")}
  • returns: v.array(v.object({
    _id: v.id("messages"),
    _creationTime: v.number(),
    channelId: v.id("channels"),
    authorId: v.optional(v.id("users")),
    content: v.string(),
    }))
  • purpose: List the 10 most recent messages from a channel in descending creation order

Internal Functions:

• generateResponse:
  • file path: convex/index.ts
  • arguments: {channelId: v.id("channels")}
  • returns: v.null()
  • purpose: Generate a response from the AI for a given channel
• loadContext:
  • file path: convex/index.ts
  • arguments: {channelId: v.id("channels")}
  • returns: v.array(v.object({
    _id: v.id("messages"),
    _creationTime: v.number(),
    channelId: v.id("channels"),
    authorId: v.optional(v.id("users")),
    content: v.string(),
    }))
• writeAgentResponse:
  • file path: convex/index.ts
  • arguments: {channelId: v.id("channels"), content: v.string()}
  • returns: v.null()
  • purpose: Write an AI response to a given channel

4. Schema Design:

• users
  • validator: { name: v.string() }
  • indexes:
• channels
  • validator: { name: v.string() }
  • indexes:
• messages
  • validator: { channelId: v.id("channels"), authorId: v.optional(v.id("users")), content: v.string() }
  • indexes
    • by_channel: ["channelId"]

5. Background Processing:

• AI response generation runs asynchronously after each user message
• Uses OpenAI's GPT-4 to generate contextual responses
• Maintains conversation context using recent message history

Implementation

package.json

{
  "name": "chat-app",
  "description": "This example shows how to build a chat app without authentication.",
  "version": "1.0.0",
  "dependencies": {
    "convex": "^1.17.4",
    "openai": "^4.79.0"
  },
  "devDependencies": {
    "typescript": "^5.7.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "exclude": ["convex"],
  "include": ["**/src/**/*.tsx", "**/src/**/*.ts", "vite.config.ts"]
}

convex/index.ts

import {
  query,
  mutation,
  internalQuery,
  internalMutation,
  internalAction,
} from "./_generated/server";
import { v } from "convex/values";
import OpenAI from "openai";
import { internal } from "./_generated/api";

/**
 * Create a user with a given name.
 */
export const createUser = mutation({
  args: {
    name: v.string(),
  },
  returns: v.id("users"),
  handler: async (ctx, args) => {
    return await ctx.db.insert("users", { name: args.name });
  },
});

/**
 * Create a channel with a given name.
 */
export const createChannel = mutation({
  args: {
    name: v.string(),
  },
  returns: v.id("channels"),
  handler: async (ctx, args) => {
    return await ctx.db.insert("channels", { name: args.name });
  },
});

/**
 * List the 10 most recent messages from a channel in descending creation order.
 */
export const listMessages = query({
  args: {
    channelId: v.id("channels"),
  },
  returns: v.array(
    v.object({
      _id: v.id("messages"),
      _creationTime: v.number(),
      channelId: v.id("channels"),
      authorId: v.optional(v.id("users")),
      content: v.string(),
    }),
  ),
  handler: async (ctx, args) => {
    const messages = await ctx.db
      .query("messages")
      .withIndex("by_channel", (q) => q.eq("channelId", args.channelId))
      .order("desc")
      .take(10);
    return messages;
  },
});

/**
 * Send a message to a channel and schedule a response from the AI.
 */
export const sendMessage = mutation({
  args: {
    channelId: v.id("channels"),
    authorId: v.id("users"),
    content: v.string(),
  },
  returns: v.null(),
  handler: async (ctx, args) => {
    const channel = await ctx.db.get(args.channelId);
    if (!channel) {
      throw new Error("Channel not found");
    }
    const user = await ctx.db.get(args.authorId);
    if (!user) {
      throw new Error("User not found");
    }
    await ctx.db.insert("messages", {
      channelId: args.channelId,
      authorId: args.authorId,
      content: args.content,
    });
    await ctx.scheduler.runAfter(0, internal.index.generateResponse, {
      channelId: args.channelId,
    });
    return null;
  },
});

const openai = new OpenAI();

export const generateResponse = internalAction({
  args: {
    channelId: v.id("channels"),
  },
  returns: v.null(),
  handler: async (ctx, args) => {
    const context = await ctx.runQuery(internal.index.loadContext, {
      channelId: args.channelId,
    });
    const response = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: context,
    });
    const content = response.choices[0].message.content;
    if (!content) {
      throw new Error("No content in response");
    }
    await ctx.runMutation(internal.index.writeAgentResponse, {
      channelId: args.channelId,
      content,
    });
    return null;
  },
});

export const loadContext = internalQuery({
  args: {
    channelId: v.id("channels"),
  },
  returns: v.array(
    v.object({
      role: v.union(v.literal("user"), v.literal("assistant")),
      content: v.string(),
    }),
  ),
  handler: async (ctx, args) => {
    const channel = await ctx.db.get(args.channelId);
    if (!channel) {
      throw new Error("Channel not found");
    }
    const messages = await ctx.db
      .query("messages")
      .withIndex("by_channel", (q) => q.eq("channelId", args.channelId))
      .order("desc")
      .take(10);

    const result = [];
    for (const message of messages) {
      if (message.authorId) {
        const user = await ctx.db.get(message.authorId);
        if (!user) {
          throw new Error("User not found");
        }
        result.push({
          role: "user" as const,
          content: `${user.name}: ${message.content}`,
        });
      } else {
        result.push({ role: "assistant" as const, content: message.content });
      }
    }
    return result;
  },
});

export const writeAgentResponse = internalMutation({
  args: {
    channelId: v.id("channels"),
    content: v.string(),
  },
  returns: v.null(),
  handler: async (ctx, args) => {
    await ctx.db.insert("messages", {
      channelId: args.channelId,
      content: args.content,
    });
    return null;
  },
});

convex/schema.ts

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  channels: defineTable({
    name: v.string(),
  }),

  users: defineTable({
    name: v.string(),
  }),

  messages: defineTable({
    channelId: v.id("channels"),
    authorId: v.optional(v.id("users")),
    content: v.string(),
  }).index("by_channel", ["channelId"]),
});

src/App.tsx

export default function App() {
  return <div>Hello World</div>;
}

[dhvll]

/attempt #636

[dhvll]

hey @fmhall is this format for templates/next/.cursor/rules/echo_rules.mdc right? or do I need to make any changes

Description: Guidelines and best practices for building Echo Next.js applications, including server/client boundaries, environment variables, API routes, and real-world examples globs: //*.ts,//.tsx,**/.js,**/*.jsx

Echo Next.js Guidelines

SDK Initialization

Server-Side Initialization

ALWAYS initialize the Echo SDK in src/echo/index.ts for server-side usage:

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 in your providers file:

'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:

# Server-side only
ECHO_APP_ID=your_echo_app_id

# Client-side (public)
NEXT_PUBLIC_ECHO_APP_ID=your_echo_app_id

NEVER hardcode API keys or app IDs directly in your code. ALWAYS read from environment variables:

// ✅ CORRECT
const appId = process.env.ECHO_APP_ID!;

// ❌ INCORRECT
const appId = 'echo_app_123abc';

Server/Client Boundaries

Server Components

ALWAYS use server components for Echo AI calls that require authentication:

// app/page.tsx
import { openai } from '@/echo';
import { generateText } from 'ai';

export default async function Page() {
  const { text } = await generateText({
    model: openai('gpt-4o'),
    prompt: 'Hello, world!',
  });
  
  return <div>{text}</div>;
}

Client Components

Use client components ONLY for UI interactions. NEVER make direct AI calls from client components with server secrets:

// ✅ CORRECT - Client component calls API route
'use client';

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

export function EchoButton() {
  return <EchoTokens />;
}

// ❌ INCORRECT - Never use server secrets in client components
'use client';

import Echo from '@merit-systems/echo-next-sdk'; // Don't do this!

export function BadComponent() {
  const { openai } = Echo({ appId: process.env.ECHO_APP_ID! });
  // This exposes server secrets to the client!
}

API Routes

Echo Authentication Handler

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

import { handlers } from '@/echo';

export const { GET, POST } = handlers;

Custom API Routes

Place custom Echo-related API routes under app/api/ and ALWAYS validate inputs:

import { openai } from '@/echo';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  try {
    const { messages, model } = await req.json();

    // ✅ ALWAYS validate required parameters
    if (!model) {
      return new Response(
        JSON.stringify({
          error: 'Bad Request',
          message: 'Model parameter is required',
        }),
        { status: 400, headers: { 'Content-Type': 'application/json' } }
      );
    }

    if (!messages || !Array.isArray(messages)) {
      return new Response(
        JSON.stringify({
          error: 'Bad Request',
          message: 'Messages parameter is required and must be an array',
        }),
        { status: 400, headers: { 'Content-Type': 'application/json' } }
      );
    }

    const result = streamText({
      model: openai(model),
      messages,
    });

    return result.toDataStreamResponse();
  } catch (error) {
    console.error('API error:', error);
    return new Response(
      JSON.stringify({
        error: 'Internal server error',
        message: 'Failed to process request',
      }),
      { status: 500, headers: { 'Content-Type': 'application/json' } }
    );
  }
}

Runtime Configuration

Use export const runtime to specify the execution environment when needed:

// For Node.js-specific features
export const runtime = 'nodejs';

// For edge runtime (default)
export const runtime = 'edge';

Feature Flags and Custom Properties

Feature Flag Storage

ALWAYS centralize feature flags in a constants file using TypeScript enums:

// src/lib/flags.ts
export enum FeatureFlags {
  ENABLE_ADVANCED_CHAT = 'enable_advanced_chat',
  ENABLE_IMAGE_GENERATION = 'enable_image_generation',
  ENABLE_BETA_FEATURES = 'enable_beta_features',
}

// Validate flag values before use
export function validateFeatureFlag(flag: string): boolean {
  return Object.values(FeatureFlags).includes(flag as FeatureFlags);
}

Custom Properties

If a custom property is used in multiple places, ALWAYS define it in a constants file:

// src/lib/properties.ts
export const CustomProperties = {
  USER_TIER: 'user_tier',
  TOTAL_REQUESTS: 'total_requests',
  LAST_ACTIVE: 'last_active',
} as const;

export type CustomProperty = typeof CustomProperties[keyof typeof CustomProperties];

TypeScript Guidelines

Type Safety

ALWAYS export explicit types for shared data structures:

// src/lib/types.ts
export interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  createdAt: Date;
}

export interface ChatResponse {
  message: ChatMessage;
  usage: {
    promptTokens: number;
    completionTokens: number;
    totalTokens: number;
  };
}

Strict Typing

ALWAYS use strict typing and avoid any:

// ✅ CORRECT
function processMessages(messages: ChatMessage[]): string {
  return messages.map(m => m.content).join('\n');
}

// ❌ INCORRECT
function processMessages(messages: any): any {
  return messages.map((m: any) => m.content).join('\n');
}

Error Handling

ALWAYS handle errors explicitly and provide meaningful messages:

// ✅ CORRECT
try {
  const result = await someOperation();
  return result;
} catch (error) {
  console.error('Operation failed:', error);
  throw new Error('Failed to complete operation');
}

// ❌ INCORRECT
try {
  const result = await someOperation();
  return result;
} catch (error) {
  // Silent failure
}

Project Structure

Follow this recommended structure for Echo Next.js projects:

src/
├── app/
│   ├── api/
│   │   ├── echo/
│   │   │   └── [...echo]/
│   │   │       └── route.ts       # Echo auth handlers
│   │   └── chat/
│   │       └── route.ts           # Custom API routes
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── EchoWrapper.tsx            # Client-side Echo components
├── echo/
│   └── index.ts                   # Server-side Echo initialization
├── lib/
│   ├── flags.ts                   # Feature flags
│   ├── properties.ts              # Custom properties
│   └── types.ts                   # Shared TypeScript types
└── providers.tsx                  # Client providers including EchoProvider

Testing

NEVER call external services directly in unit tests. ALWAYS use mocks:

// ✅ CORRECT
import { vi } from 'vitest';

vi.mock('@/echo', () => ({
  openai: vi.fn(() => mockModel),
}));

test('chat endpoint returns response', async () => {
  // Test implementation
});

Best Practices

1. Separation of Concerns: Keep server logic in API routes and src/echo/, client logic in components
2. Environment Variables: Use server variables for secrets, public variables 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, export shared types
6. Feature Flags: Centralize in one file, validate before use
7. Security: Never expose server secrets to the client