Merge pull request #1 from dayhaysoos/example

Example

Author: dayhaysoos

convex/component/_generated/api.ts

@@ -11,11 +11,9 @@
 import type * as chat from "../chat.js";
 import type * as client from "../client.js";
 import type * as conversations from "../conversations.js";
-import type * as hello from "../hello.js";
 import type * as messages from "../messages.js";
 import type * as schemaTools from "../schemaTools.js";
 import type * as stream from "../stream.js";
-import type * as test from "../test.js";
 import type * as tools from "../tools.js";
 
 import type {
@@ -29,11 +27,9 @@ const fullApi: ApiFromModules<{
   chat: typeof chat;
   client: typeof client;
   conversations: typeof conversations;
-  hello: typeof hello;
   messages: typeof messages;
   schemaTools: typeof schemaTools;
   stream: typeof stream;
-  test: typeof test;
   tools: typeof tools;
 }> = anyApi as any;
 

convex/component/hello.ts

@@ -0,0 +1,2 @@
+
+.env.local

convex/component/test.ts

@@ -0,0 +1,89 @@
+# E-commerce Database Chat Demo
+
+A simple demo showing how to use the `@dayhaysoo/convex-database-chat` component to query an e-commerce product database using natural language.
+
+## Features
+
+- 🛒 50 mock e-commerce products across 4 categories
+- 💬 Natural language queries powered by Claude via OpenRouter
+- ⚡ Real-time streaming responses
+- 🔍 Search by name, category, price range
+- 📊 Get inventory statistics and low-stock alerts
+
+## Setup
+
+### 1. Install dependencies
+
+```bash
+npm install
+```
+
+### 2. Set up Convex
+
+```bash
+npx convex dev
+```
+
+This will prompt you to create a new Convex project and set up your environment.
+
+### 3. Add OpenRouter API Key
+
+Get an API key from [OpenRouter](https://openrouter.ai/) and add it to your Convex environment:
+
+```bash
+npx convex env set OPENROUTER_API_KEY your_key_here
+```
+
+### 4. Seed the database
+
+```bash
+npm run seed
+```
+
+This populates the database with 50 mock products.
+
+### 5. Run the app
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+## Example Queries
+
+Try asking:
+
+- "Show me all electronics under $50"
+- "What products are low on stock?"
+- "Give me an inventory overview"
+- "Find running shoes"
+- "How many products do we have in each category?"
+- "What's the most expensive item in sports?"
+
+## Project Structure
+
+```
+example/
+├── src/
+│   ├── main.tsx          # App entry with ConvexProvider
+│   ├── App.tsx           # Main app component
+│   ├── App.css           # Styles
+│   └── components/
+│       └── Chat.tsx      # Chat UI component
+└── convex/
+    ├── convex.config.ts  # Mounts databaseChat component
+    ├── schema.ts         # Products table schema
+    ├── seed.ts           # Mock product data
+    ├── chatTools.ts      # Query functions for LLM
+    └── chat.ts           # Chat integration
+```
+
+## How It Works
+
+1. **User asks a question** → Sent to Convex action
+2. **Action calls OpenRouter** → LLM with tool definitions
+3. **LLM decides to call tools** → e.g., `searchProducts({ category: "electronics" })`
+4. **Tool executes Convex query** → Returns product data
+5. **LLM formats response** → With markdown links to products
+6. **Response streamed to UI** → Real-time updates via Convex subscriptions

example/.gitignore

@@ -0,0 +1,90 @@
+# Welcome to your Convex functions directory!
+
+Write your Convex functions here.
+See https://docs.convex.dev/functions for more.
+
+A query function that takes two arguments looks like:
+
+```ts
+// convex/myFunctions.ts
+import { query } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myQueryFunction = query({
+  // Validators for arguments.
+  args: {
+    first: v.number(),
+    second: v.string(),
+  },
+
+  // Function implementation.
+  handler: async (ctx, args) => {
+    // Read the database as many times as you need here.
+    // See https://docs.convex.dev/database/reading-data.
+    const documents = await ctx.db.query("tablename").collect();
+
+    // Arguments passed from the client are properties of the args object.
+    console.log(args.first, args.second);
+
+    // Write arbitrary JavaScript here: filter, aggregate, build derived data,
+    // remove non-public properties, or create new objects.
+    return documents;
+  },
+});
+```
+
+Using this query function in a React component looks like:
+
+```ts
+const data = useQuery(api.myFunctions.myQueryFunction, {
+  first: 10,
+  second: "hello",
+});
+```
+
+A mutation function looks like:
+
+```ts
+// convex/myFunctions.ts
+import { mutation } from "./_generated/server";
+import { v } from "convex/values";
+
+export const myMutationFunction = mutation({
+  // Validators for arguments.
+  args: {
+    first: v.string(),
+    second: v.string(),
+  },
+
+  // Function implementation.
+  handler: async (ctx, args) => {
+    // Insert or modify documents in the database here.
+    // Mutations can also read from the database like queries.
+    // See https://docs.convex.dev/database/writing-data.
+    const message = { body: args.first, author: args.second };
+    const id = await ctx.db.insert("messages", message);
+
+    // Optionally, return a value from your mutation.
+    return await ctx.db.get("messages", id);
+  },
+});
+```
+
+Using this mutation function in a React component looks like:
+
+```ts
+const mutation = useMutation(api.myFunctions.myMutationFunction);
+function handleButtonPress() {
+  // fire and forget, the most common way to use mutations
+  mutation({ first: "Hello!", second: "me" });
+  // OR
+  // use the result once the mutation has completed
+  mutation({ first: "Hello!", second: "me" }).then((result) =>
+    console.log(result),
+  );
+}
+```
+
+Use the Convex CLI to push your functions to a deployment. See everything
+the Convex CLI can do by running `npx convex -h` in your project root
+directory. To learn more, launch the docs with `npx convex docs`.