+
+
+
+
+
+
+ AI-powered music research for DJs, producers, and crate diggers.
+ 20+ sources. One agent. Zero tabs.
+
+ Live App · + Help · + CLI · + Pricing +
+ +
+ 
+
Creating new session...
+{label}
+ {items.map((s: any) => ( +No crates yet
+ )} + {crates.map((crate) => ( +Empty
+ ) : ( + (sessions as any[]).map((s) => ( +No results
+ ) : ( + grouped.map(([sessionId, msgs]) => ( + + )) + )} +{props.whyItMatters}
+ {props.pronunciationGuide && ( +🗣 {props.pronunciationGuide}
+ )} +Origin Story
+{props.originStory}
+Production Notes
+{props.productionNotes}
+Connections
+{props.connections}
+Influence Chain
+{props.influenceChain}
+Lesser-Known Fact
+{props.lesserKnownFact}
+Milwaukee Connection
+{props.localTieIn}
+{content}
+ + {props.keyPhrases && ( +⏱ {props.timingCue}
+ )} + {props.pronunciationGuide && ( +🗣 {props.pronunciationGuide}
+ )} +{content}
+ +{props.dj}
+{props.date}
+++``` + +#### 4. Sonic DNA Chips + +Visual tags showing what was transmitted between artists: + +```tsx ++ "Clinton taught me funk could be psychedelic and spiritual at the same time." +
+ + — Flying Lotus, Pitchfork, 2012 + +
Sources
+ {sources.map(src => ( + +{src.name}
+{src.snippet}
+ {src.date &&{src.date}
} + + ))} ++ {summary} +
+{conn.name}
+{conn.context}
+ {sources.length > 0 && ( ++ Your API keys are already configured by your team admin. You're + ready to go. Here's what Crate can do for your shows: +
+ + {/* Command cards */} +
+ {cmd.command}
+
+ + {cmd.description} +
++ Tip: You can also + just ask questions naturally — "What Ethiopian jazz + records influenced UK broken beat?" Crate searches across + 20+ databases and cites everything. +
++ Your AI music research workspace. Ask any question — + Crate queries 20+ databases and gives you cited, verified + answers. +
++ {card.desc} +
++ Crate needs an AI key to power the research agent. All 20+ + music data sources are already built in — you just need + one of these: +
+ + {/* Provider cards */} + {(["anthropic", "openrouter"] as Provider[]).map((id) => { + const p = PROVIDERS[id]; + const isSelected = selectedProvider === id; + return ( + + ); + })} + + {/* Expandable extras */} + + + {extrasOpen && ( ++ These services are free or have free tiers. Add keys + anytime in Settings to unlock them. +
++ Paste the API key you just created. Your key is encrypted and + never shared. +
+ + {/* Key input */} + {!hasExistingKey && ( +
+ Type something like{" "}
+
+ "Who influenced Flying Lotus?"
+ {" "}
+ or use{" "}
+
+ /influence Madlib
+ {" "}
+ for a deep dive.
+
+ Pick your role and we'll tailor the guide to your workflow. +
+Coming soon.
++ Set up Crate and run your first research query in under 3 minutes. +
+ ++ {step.description} +
+ {step.prompt && ( ++ Type these in the chat input. Start with / to see the autocomplete menu. +
+ +
+ {cmd.name}
+
+ {cmd.aliases.length > 0 && (
+
+ aliases: {cmd.aliases.join(", ")}
+
+ )}
+ + {cmd.description} +
++ The agent queries these 19 sources during research. Most work without any setup. +
+ ++ {s.data} +
++ Add keys to unlock more data sources and models. Only Anthropic is required. +
+ +`, add:
+
+```tsx
+{"isCustom" in cmd && cmd.isCustom && (
+ custom
+)}
+```
+
+- [ ] **Step 6: Also add `/create-skill` and `/skills` to `SLASH_COMMANDS`**
+
+In the `SLASH_COMMANDS` array, add:
+
+```typescript
+ { command: "/skills", description: "List your custom skills", usage: "/skills", example: "/skills" },
+ { command: "/create-skill", description: "Create a new custom command", usage: "/create-skill [description]", example: "/create-skill pull events from The Rave" },
+```
+
+- [ ] **Step 7: Verify TypeScript compiles**
+
+Run: `npx tsc --noEmit --pretty 2>&1 | head -20`
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add src/components/workspace/chat-panel.tsx
+git commit -m "feat: show custom skills in slash command autocomplete menu"
+```
+
+---
+
+## Chunk 5: Settings UI
+
+### Task 10: Create Skills Section Component
+
+**Files:**
+- Create: `src/components/settings/skills-section.tsx`
+
+- [ ] **Step 1: Create the component**
+
+```tsx
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface Skill {
+ _id: string;
+ command: string;
+ name: string;
+ description: string;
+ promptTemplate: string;
+ toolHints: string[];
+ sourceUrl?: string;
+ isEnabled: boolean;
+}
+
+export function SkillsSection() {
+ const [skills, setSkills] = useState
+ No custom skills yet. Type /create-skill in chat to create one.
+
+ Source: {skill.sourceUrl}
+
+ Tools: {skill.toolHints.join(", ") || "none"}
+
+
+
+ {skills.length === 0 ? (
+
+ Custom Skills
+
+
+ Type /create-skill in chat
+
+
+ {skills.map((skill) => (
+
+
+
+
+ {expandedId === skill._id && (
+
+
+ /{skill.command}
+
+ {skill.description}
+
+
+
+
+
+
+ {skill.sourceUrl && (
+
+