Val Town Code SearchReturn to Val Town

28  }
29
30  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
31
32  // do we want to allow user-provided tokens still
33  const apiKey = anthropicApiKey || Deno.env.get("ANTHROPIC_API_KEY");
34  const our_api_token = apiKey === Deno.env.get("ANTHROPIC_API_KEY");
35
36  if (our_api_token) {
37    if (await overLimit(bearerToken)) {
38      const user = await getUser(bearerToken);
54
55  const rowid = await startTrackingUsage({
56    our_api_token,
57    bearerToken, // will look up the userId from this
58    branch_id: branchId,
63
64  // Initialize PostHog client
65  const projectApiKey = Deno.env.get("POSTHOG_PROJECT_API_KEY");
66  
67  let tracedModel;
68  
69  if (projectApiKey) {
70    const phClient = new PostHog(projectApiKey, { 
71      host: "https://us.i.posthog.com" 
72    });
79    const traceId = `townie_${rowid}_${Date.now()}`;
80
81    const anthropic = createAnthropic({ apiKey });
82    
83    // Wrap the Anthropic model with PostHog tracing
89        townie_branch_id: branchId,
90        townie_usage_id: rowid,
91        townie_our_api_token: our_api_token,
92        townie_num_images: images?.length || 0,
93        townie_selected_files_count: selectedFiles?.length || 0,
102  } else {
103    // Fallback to regular Anthropic call if PostHog is not configured
104    const anthropic = createAnthropic({ apiKey });
105    tracedModel = anthropic(model);
106  }

69app.get("/shared/*", c => serveFile(c.req.path, import.meta.url));
70
71// API Routes
72app.get("/api/quote", (c) => {
73  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
74  return c.json(randomQuote);
75});
76
77app.get("/api/weather", async (c) => {
78  const lat = c.req.query("lat");
79  const lon = c.req.query("lon");
84
85  try {
86    // Use Open-Meteo API (no API key required)
87    const response = await fetch(
88      `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current_weather=true&timezone=auto`
89    );
90    
91    if (!response.ok) {
92      throw new Error("Weather API request failed");
93    }
94    
136});
137
138app.post("/api/gratitude", async (c) => {
139  try {
140    const { text } = await c.req.json();
167});
168
169app.get("/api/gratitude", async (c) => {
170  try {
171    const entries = await blob.getJSON("gratitude_entries") || [];

11};
12
13// API helper functions
14const api = {
15  async createProject(name: string) {
16    const response = await fetch('/api/projects', {
17      method: 'POST',
18      headers: { 'Content-Type': 'application/json' },
23  
24  async getProject(id: string) {
25    const response = await fetch(`/api/projects/${id}`);
26    return response.json();
27  },
28  
29  async updateProject(id: string, data: any) {
30    const response = await fetch(`/api/projects/${id}`, {
31      method: 'PUT',
32      headers: { 'Content-Type': 'application/json' },
37  
38  async addClip(projectId: string, clipData: any) {
39    const response = await fetch(`/api/projects/${projectId}/clips`, {
40      method: 'POST',
41      headers: { 'Content-Type': 'application/json' },
46  
47  async updateClip(clipId: string, data: any) {
48    const response = await fetch(`/api/clips/${clipId}`, {
49      method: 'PUT',
50      headers: { 'Content-Type': 'application/json' },
55  
56  async deleteClip(clipId: string) {
57    const response = await fetch(`/api/clips/${clipId}`, {
58      method: 'DELETE'
59    });
90    setIsLoading(true);
91    try {
92      const result = await api.createProject('New Project');
93      const newProject: Project = {
94        id: result.id,
121  };
122
123  // Handle file upload with API integration
124  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
125    const files = event.target.files;
145          };
146
147          const result = await api.addClip(project.id, clipData);
148          
149          const newClip: VideoClip = {
229    if (selectedClipData) {
230      try {
231        await api.updateClip(selectedClip, {
232          effects: selectedClipData.effects,
233          trimStart: selectedClipData.trimStart,
243  };
244
245  // Remove clip with API integration
246  const removeClip = async (clipId: string) => {
247    if (!project) return;
248
249    try {
250      await api.deleteClip(clipId);
251    } catch (error) {
252      console.error('Failed to delete clip:', error);
297    try {
298      for (const clip of updatedClips) {
299        await api.updateClip(clip.id, {
300          position: clip.position,
301          effects: clip.effects,
338      const clipData = updatedClips.find(c => c.id === clipId);
339      if (clipData) {
340        await api.updateClip(clipId, {
341          trimStart,
342          trimEnd,

48## Technical Details
49
50- Uses YouTube's transcript API via corsproxy.io
51- Built with Hono backend and React frontend
52- TypeScript for type safety

94
95    try {
96      const response = await fetch('/api/transcript', {
97        method: 'POST',
98        headers: {

50}
51
52// API endpoint to extract transcript
53app.post("/api/transcript", async c => {
54  try {
55    const { url } = await c.req.json();

124});
125
126// API Routes for video processing
127
128// Get all projects
129app.get("/api/projects", async c => {
130  try {
131    const result = await sqlite.execute(
139
140// Create new project
141app.post("/api/projects", async c => {
142  try {
143    const body = await c.req.json();
164
165// Get project with clips
166app.get("/api/projects/:id", async c => {
167  try {
168    const projectId = c.req.param("id");
198
199// Update project
200app.put("/api/projects/:id", async c => {
201  try {
202    const projectId = c.req.param("id");
218
219// Delete project
220app.delete("/api/projects/:id", async c => {
221  try {
222    const projectId = c.req.param("id");
235
236// Add clip to project
237app.post("/api/projects/:id/clips", async c => {
238  try {
239    const projectId = c.req.param("id");
274
275// Update clip
276app.put("/api/clips/:id", async c => {
277  try {
278    const clipId = c.req.param("id");
292
293// Delete clip
294app.delete("/api/clips/:id", async c => {
295  try {
296    const clipId = c.req.param("id");
304});
305
306app.post("/api/export", async c => {
307  // In a real app, this would handle video processing with FFmpeg
308  const { projectId, settings } = await c.req.json();
313  return c.json({ 
314    success: true, 
315    downloadUrl: "/api/download/sample-video.mp4",
316    message: "Video exported successfully" 
317  });
318});
319
320app.get("/api/effects", c => {
321  // Return trending effects data
322  const effects: TrendingEffect[] = [

17```
18├── backend/
19│   └── index.ts           # API server with Hono
20├── frontend/
21│   ├── index.html         # Main app interface
30
31- **Frontend**: React 18, TypeScript, TailwindCSS
32- **Backend**: Hono API framework
33- **Video Processing**: Web APIs (MediaRecorder, Canvas, WebGL)
34- **Storage**: Browser localStorage for projects
35- **PWA**: Service worker for offline capability

3## Description
4
5This is an AI-powered Grocery Shopping assistant that turns an imprecise list of items like "milk, bread, eggs" into a Kroger cart full of groceries. It relies on the Kroger API to search each item, then uses an LLM to decide which specific UPC to add to the cart (again, using the Kroger API). Once an item is selected, we store the UPC in the database so we can avoid consulting the LLM for that item again.
6
7Households have preferences for which items to buy, and what priorities they have for each item. For example, we prefer to buy free range eggs and poultry, but don't particularly care whether they are organic or not. These details are stored in a database, which should also be consulted to add context to the LLM's decisions.
15Set these in your Val Town environment:
16
17- `KROGER_CLIENT_ID` - Your Kroger API client ID
18- `KROGER_CLIENT_SECRET` - Your Kroger API client secret  
19- `KROGER_REDIRECT_URI` - Your registered redirect URI (e.g., `https://your-val.web.val.run/auth/callback`)
20
64- Unique constraint on (userId, itemName)
65
66## API Endpoints
67
68### Authentication
70- `GET /auth/callback` - OAuth callback handler
71- `POST /auth/logout` - Logout user
72- `GET /api/user` - Get current user info
73- `PUT /api/user/location` - Update preferred store location
74
75### Guidance Management
76- `GET /api/guidance` - Get all guidance for current user
77- `GET /api/guidance/search?q=item` - Search guidance by item name
78- `POST /api/guidance` - Create new guidance
79- `PUT /api/guidance/:id` - Update guidance
80- `DELETE /api/guidance/:id` - Delete guidance
81
82### Selection Management
83- `GET /api/selections` - Get all selections for current user
84- `GET /api/selections/item/:itemName` - Get selection for specific item
85- `POST /api/selections` - Create/update selection
86- `PUT /api/selections/:id` - Update selection
87- `DELETE /api/selections/:id` - Delete selection
88
89## Shopping Process
90
911. The user supplies a list of items they want to buy.
922. We search the Kroger API, getting a list of products that match the free text name.
933. For each item, we:
94   1. Try to find it in selections. If we can't find it there,
95   2. Use full-text search to find the most relevant guidance. Then ask the LLM to decide which specific UPC to add to the cart. Store this in the selections table for next time.
964. We use the Kroger API to add the item to the cart.
975. Repeat for each item.
98
110- TypeScript
111- Val.Town with SQLite integration
112- Hono for the API
113- TailwindCSS for styling
114- Kroger API for product data and cart management
115
116## File Structure
128├── shared/
129│   └── types.ts             # Shared TypeScript interfaces
130└── docs/                    # Kroger API documentation
131```
132

53When a user clicks "Connect with Kroger", they're redirected to:
54```
55https://api.kroger.com/v1/connect/oauth2/authorize?
56  client_id=YOUR_CLIENT_ID&
57  redirect_uri=YOUR_REDIRECT_URI&
68### 3. Token Exchange
69Your app exchanges the authorization code for:
70- `access_token`: Used to make API calls on behalf of the user
71- `refresh_token`: Used to get new access tokens when they expire
72- `expires_in`: How long the access token is valid (in seconds)
75Your app uses the access token to get the user's Kroger profile ID from:
76```
77GET https://api.kroger.com/v1/identity/profile
78Authorization: Bearer ACCESS_TOKEN
79```
115- If refresh fails, users will need to re-authenticate
116
117## API Endpoints
118
119Once OAuth is configured, these endpoints become available:
125
126### User Management
127- `GET /api/user` - Get current user info
128- `PUT /api/user/location` - Update preferred store location
129
130### Data Management
131- `GET /api/guidance` - Get user's shopping preferences
132- `POST /api/guidance` - Add new preference
133- `GET /api/selections` - Get user's saved product selections
134- `POST /api/selections` - Save new product selection
135
136## Next Steps
139
1401. **Test the full flow** with a real Kroger account
1412. **Implement product search** using the Kroger Products API
1423. **Add cart management** using the Kroger Cart API
1434. **Integrate AI/LLM** for intelligent product selection
1445. **Build the shopping list interface**
146## Support
147
148For Kroger API issues:
149- [Kroger Developer Documentation](https://developer.kroger.com/documentation)
150- [Kroger Developer Support](https://developer.kroger.com/support)