7 | {part.text}
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/apps/obby/env.ts:
--------------------------------------------------------------------------------
1 | import { keys as ai } from '@repo/ai/keys';
2 | import { keys as database } from '@repo/database/keys';
3 | import { keys as core } from '@repo/next-config/keys';
4 | import { keys as storage } from '@repo/storage/keys';
5 | import { createEnv } from '@t3-oss/env-nextjs';
6 |
7 | export const env = createEnv({
8 | extends: [ai(), core(), database(), storage()],
9 | server: {},
10 | client: {},
11 | runtimeEnv: {},
12 | });
13 |
--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "",
3 | "short_name": "",
4 | "icons": [
5 | {
6 | "src": "/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#ffffff",
17 | "background_color": "#ffffff",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/apps/obby/components/chat/tool-header.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@repo/design-system/lib/utils';
2 | import type { ReactNode } from 'react';
3 |
4 | export function ToolHeader(props: { className?: string; children: ReactNode }) {
5 | return (
6 |
12 | {props.children}
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/packages/design-system/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ClassValue } from "clsx";
2 | import { clsx } from "clsx";
3 | import { toast } from "sonner";
4 | import { twMerge } from "tailwind-merge";
5 |
6 | export const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));
7 |
8 | export const capitalize = (str: string) =>
9 | str.charAt(0).toUpperCase() + str.slice(1);
10 |
11 | export const handleError = (error: unknown): void => {
12 | toast.error(error as string);
13 | };
14 |
--------------------------------------------------------------------------------
/public/logos/ai/groq.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/storage/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@repo/storage",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "clean": "git clean -xdf .cache .turbo dist node_modules",
7 | "typecheck": "tsc --noEmit --emitDeclarationOnly false"
8 | },
9 | "dependencies": {
10 | "@t3-oss/env-nextjs": "^0.13.4",
11 | "@vercel/blob": "^1.1.1",
12 | "zod": "^3.25.28"
13 | },
14 | "devDependencies": {
15 | "@repo/typescript-config": "workspace:*"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/apps/obby/components/chat/tool-message.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@repo/design-system/lib/utils';
2 | import type { ReactNode } from 'react';
3 |
4 | export function ToolMessage(props: {
5 | className?: string;
6 | children: ReactNode;
7 | }) {
8 | return (
9 |
15 | {props.children}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/packages/design-system/providers/theme.tsx:
--------------------------------------------------------------------------------
1 | import type { ThemeProviderProps } from 'next-themes';
2 | import { ThemeProvider as NextThemeProvider } from 'next-themes';
3 |
4 | export const ThemeProvider = ({
5 | children,
6 | ...properties
7 | }: ThemeProviderProps) => (
8 |
23 | {children}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/packages/typescript-config/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "incremental": false,
10 | "isolatedModules": true,
11 | "lib": ["es2022", "DOM", "DOM.Iterable"],
12 | "module": "NodeNext",
13 | "moduleDetection": "force",
14 | "moduleResolution": "NodeNext",
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022",
19 | "strictNullChecks": true
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "incremental": false,
10 | "isolatedModules": true,
11 | "lib": [
12 | "es2022",
13 | "DOM",
14 | "DOM.Iterable"
15 | ],
16 | "module": "NodeNext",
17 | "moduleDetection": "force",
18 | "moduleResolution": "NodeNext",
19 | "resolveJsonModule": true,
20 | "skipLibCheck": true,
21 | "strict": true,
22 | "target": "ES2022",
23 | "strictNullChecks": true
24 | }
25 | }
--------------------------------------------------------------------------------
/apps/obby/app/(main)/logs.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { CommandsLogs } from '@/components/commands-logs/commands-logs';
4 | import { useSandboxStore } from './state';
5 |
6 | export function Logs(props: { className?: string }) {
7 | const { commands, addLog, upsertCommand } = useSandboxStore();
8 | return (
9 |
23 | {children}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useTheme } from "next-themes"
4 | import { Toaster as Sonner, ToasterProps } from "sonner"
5 |
6 | const Toaster = ({ ...props }: ToasterProps) => {
7 | const { theme = "system" } = useTheme()
8 |
9 | return (
10 |
13 |
14 |
20 |
21 |
17 | {children}
18 |
19 | );
20 | }
21 |
22 | export function PanelHeader({ className, children }: Props) {
23 | return (
24 |
30 | {children}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@repo/design-system/lib/utils"
7 |
8 | function Separator({
9 | className,
10 | orientation = "horizontal",
11 | decorative = true,
12 | ...props
13 | }: React.ComponentPropsOops, something went wrong
23 | 24 | 25 | 26 | ); 27 | }; 28 | 29 | export default GlobalError; 30 | -------------------------------------------------------------------------------- /apps/obby/components/tabs/tab-item.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { cn } from '@repo/design-system/lib/utils'; 4 | import type { ReactNode } from 'react'; 5 | import { useTabState } from './use-tab-state'; 6 | 7 | type Props = { 8 | children: ReactNode; 9 | tabId: string; 10 | }; 11 | 12 | export function TabItem({ children, tabId }: Props) { 13 | const [activeTabId, setTabId] = useTabState(); 14 | return ( 15 |
2 | 
3 |
Obby – OSS v0
4 | 5 | 6 |7 | Obby is Open Source implementation of v0 agent by Vercel. It helps you design, build, and ship real apps from scratch. 8 | 9 |
10 | Link: obby.dev 11 |
12 | 13 | ## Getting started 14 | 15 | ### Clone the repo 16 | 17 | ```bash 18 | git clone https://github.com/eersnington/obby-dev.git 19 | ``` 20 | 21 | ### Navigate to the project directory 22 | 23 | ```bash 24 | cd obby-dev 25 | ``` 26 | 27 | ### Install dependencies 28 | 29 | ```bash 30 | pnpm install 31 | ``` 32 | 33 | ### Start the development server 34 | 35 | ```bash 36 | pnpm run dev 37 | ``` 38 | 39 | ### Acknowledgment 40 | 41 | This project is based on OSS Vibe Coding Project in [Vercel Examples](https://github.com/vercel/examples). 42 | Big thanks to the Vercel team for providing such great starter template on using Vercel Sanbox -------------------------------------------------------------------------------- /apps/obby/components/model-selector/cmdk/api-key-section.tsx: -------------------------------------------------------------------------------- 1 | import { Label } from '@repo/design-system/components/ui/label'; 2 | import { KeyIcon } from 'lucide-react'; 3 | import { type ModelProvider, PROVIDER_KEY_SCHEMAS } from '@/ai/constants'; 4 | import { AwsKeyForm } from './aws-key-form'; 5 | import { TokenKeyForm } from './token-key-form'; 6 | 7 | type Props = { 8 | provider: ModelProvider; 9 | }; 10 | 11 | export function ApiKeySection({ provider }: Props) { 12 | if (!provider) { 13 | return null; 14 | } 15 | 16 | const schema = PROVIDER_KEY_SCHEMAS[provider]; 17 | 18 | return ( 19 |
20 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@repo/design-system/lib/utils"
4 |
5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6 | return (
7 |
18 | )
19 | }
20 |
21 | export { Input }
22 |
--------------------------------------------------------------------------------
/public/logos/vercel_logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/apps/obby/components/chat/message-part/get-sandbox-url.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@repo/design-system/lib/utils';
2 | import { LinkIcon } from 'lucide-react';
3 | import type { DataPart } from '@/ai/messages/data-parts';
4 | import { MessageSpinner } from '../message-spinner';
5 | import { ToolHeader } from '../tool-header';
6 | import { ToolMessage } from '../tool-message';
7 |
8 | export function GetSandboxURL(props: {
9 | className?: string;
10 | message: DataPart['get-sandbox-url'];
11 | }) {
12 | return (
13 |
21 |
24 |
25 | {schema.type === 'token' ? (
26 |
23 | {!props.message.url &&
30 |
24 | {content.isLoading || !content.data ? (
25 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/packages/database/migrations/meta/0000_snapshot.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "2c6ae3d2-48ec-4c97-8082-cba33274c856",
3 | "prevId": "00000000-0000-0000-0000-000000000000",
4 | "version": "7",
5 | "dialect": "postgresql",
6 | "tables": {
7 | "public.page": {
8 | "name": "page",
9 | "schema": "",
10 | "columns": {
11 | "id": {
12 | "name": "id",
13 | "type": "serial",
14 | "primaryKey": true,
15 | "notNull": true
16 | },
17 | "name": {
18 | "name": "name",
19 | "type": "varchar(255)",
20 | "primaryKey": false,
21 | "notNull": false
22 | }
23 | },
24 | "indexes": {},
25 | "foreignKeys": {},
26 | "compositePrimaryKeys": {},
27 | "uniqueConstraints": {},
28 | "policies": {},
29 | "checkConstraints": {},
30 | "isRLSEnabled": false
31 | }
32 | },
33 | "enums": {},
34 | "schemas": {},
35 | "sequences": {},
36 | "roles": {},
37 | "policies": {},
38 | "views": {},
39 | "_meta": {
40 | "columns": {},
41 | "schemas": {},
42 | "tables": {}
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/apps/obby/ai/tools/generate-files-prompt.md:
--------------------------------------------------------------------------------
1 | Create a set of files based on the current state of the project and conversation. Your output will be uploaded directly into a Vercel Sandbox environment, so it must be immediately usable and correct on first iteration. Do not include explanations or markdown. Your output will be parsed programmatically and uploaded to a live environment.
2 |
3 | ## Instructions
4 |
5 | 1. Generate only the files that are relevant to the user's request.
6 | 2. All file paths must be relative to the sandbox root (e.g., \`src/app.tsx\`, \`package.json\`, \`routes/api.ts\`).
7 | 3. Ensure every file is syntactically valid, consistent with the chosen tech stack, and complete.
8 | 4. Do not include placeholder comments like “TODO” unless explicitly instructed.
9 | 5. Assume any previously generated files already exist in the sandbox — write with compatibility in mind.
10 | 6. Favor minimal, functional implementations that demonstrate correctness and are ready to be run, built, or extended.
11 | 7. Include configuration, setup, or support files (e.g., \`.env\`, \`tsconfig.json\`, \`vite.config.ts\`) if the task depends on them working.
12 |
--------------------------------------------------------------------------------
/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from '@turbo/gen';
2 |
3 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
4 | plop.setGenerator('init', {
5 | description: 'Generate a new package for the Monorepo',
6 | prompts: [
7 | {
8 | type: 'input',
9 | name: 'name',
10 | message:
11 | 'What is the name of the package? (You can skip the `@repo/` prefix)',
12 | },
13 | ],
14 | actions: [
15 | (answers) => {
16 | if (
17 | 'name' in answers &&
18 | typeof answers.name === 'string' &&
19 | answers.name.startsWith('@repo/')
20 | ) {
21 | answers.name = answers.name.replace('@repo/', '');
22 | }
23 | return 'Config sanitized';
24 | },
25 | {
26 | type: 'add',
27 | path: 'packages/{{ name }}/package.json',
28 | templateFile: 'templates/package.json.hbs',
29 | },
30 | {
31 | type: 'add',
32 | path: 'packages/{{ name }}/tsconfig.json',
33 | templateFile: 'templates/tsconfig.json.hbs',
34 | },
35 | ],
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/apps/obby/components/model-selector/use-available-models.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import {
3 | ANTHROPIC_MODELS,
4 | BEDROCK_MODELS,
5 | GATEWAY_MODELS,
6 | GOOGLE_MODELS,
7 | GROQ_MODELS,
8 | type Model,
9 | type ModelProvider,
10 | OPENAI_MODELS,
11 | OPENROUTER_MODELS,
12 | VERCEL_MODELS,
13 | } from '@/ai/constants';
14 |
15 | type DisplayModel = {
16 | id: string;
17 | label: string;
18 | provider?: ModelProvider;
19 | byokOnly?: boolean;
20 | };
21 |
22 | const ALL_MODELS: readonly Model[] = [
23 | ...OPENAI_MODELS,
24 | ...ANTHROPIC_MODELS,
25 | ...GOOGLE_MODELS,
26 | ...GROQ_MODELS,
27 | ...BEDROCK_MODELS,
28 | ...VERCEL_MODELS,
29 | ...GATEWAY_MODELS,
30 | ...OPENROUTER_MODELS,
31 | ] as const;
32 |
33 | export function useAvailableModels() {
34 | const models = useMemo((): DisplayModel[] => {
35 | return ALL_MODELS.map((model) => ({
36 | id: model.id,
37 | label: model.name,
38 | provider: model.provider,
39 | byokOnly: model.byokOnly,
40 | }));
41 | }, []);
42 |
43 | return {
44 | models,
45 | isLoading: false,
46 | error: null,
47 | };
48 | }
49 |
--------------------------------------------------------------------------------
/apps/obby/components/chat/message-part/create-sandbox.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@repo/design-system/lib/utils';
2 | import { BoxIcon } from 'lucide-react';
3 | import { Streamdown } from 'streamdown';
4 | import type { DataPart } from '@/ai/messages/data-parts';
5 | import { MessageSpinner } from '../message-spinner';
6 | import { ToolHeader } from '../tool-header';
7 | import { ToolMessage } from '../tool-message';
8 |
9 | export function CreateSandbox(props: {
10 | className?: string;
11 | message: DataPart['create-sandbox'];
12 | }) {
13 | return (
14 |
26 |
28 | ) : (
29 |
24 | {props.message.status === 'loading' && {`Sandbox created with id \`${props.message.sandboxId}\``}
27 | )}
28 |
29 |
24 |
25 | {`\`${props.message.command} ${props.message.args.join(
26 | ' '
27 | )}\``}
28 | {props.message.status === 'loading' &&
31 |
19 | Vercel Coding Agent demo This demo showcases a full-stack
20 | coding agent built with Vercel's AI Cloud, AI SDK, and Next.js This
21 | example gives you full flexibility of the underlying model via Vercel AI
22 | Gateway and code execution via Vercel Sandbox. For a drop-in, higher-level
23 | solution for adding vibe coding capabilities to your applications, check
24 | out the v0 Platform API.
25 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
5 |
6 | import { cn } from "@repo/design-system/lib/utils"
7 |
8 | function Avatar({
9 | className,
10 | ...props
11 | }: React.ComponentProps
17 |
19 | Loading providers...
18 |
26 |
31 |
32 |
33 |
35 |
36 |
18 | {/* Message Header */}
19 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/.github/copilot-instructions.md.example:
--------------------------------------------------------------------------------
1 | # Copilot Guidelines
2 |
3 | This project
20 | {message.role === 'user' ? (
21 | <>
22 |
32 |
33 | {/* Message Content */}
34 |
35 | {message.parts.map((part, index) => (
36 | // biome-ignore lint/suspicious/noArrayIndexKey: TODO: i need to add a unique id for each part
37 |
40 |
41 | {/* Message Actions: Coming Soon */}
42 |
17 | {children}
18 |
19 |
31 | {generated.map((path) => (
32 |
43 |
33 | ✔︎ {path}
34 |
35 | ))}
36 | {generating && (
37 |
38 | {` ${generating}`}
39 |
40 | )}
41 | {props.message.status !== 'done' &&
17 | {children}
18 |
19 | );
20 |
21 | export type ActionProps = ComponentProps{tooltip}
58 |
34 |
35 |
47 |
48 |
36 | {props.commands.map((command) => (
37 |
45 |
46 | div]:max-w-[80%]',
16 | className
17 | )}
18 | {...props}
19 | />
20 | );
21 |
22 | export type MessageContentProps = HTMLAttributes;
23 |
24 | export const MessageContent = ({
25 | children,
26 | className,
27 | ...props
28 | }: MessageContentProps) => (
29 | & {
44 | src: string;
45 | name?: string;
46 | };
47 |
48 | export const MessageAvatar = ({
49 | src,
50 | name,
51 | className,
52 | ...props
53 | }: MessageAvatarProps) => (
54 |
55 | {name?.slice(0, 2) || 'ME'}
57 |
58 | );
59 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/badge.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@repo/design-system/lib/utils"
6 |
7 | const badgeVariants = cva(
8 | "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14 | secondary:
15 | "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16 | destructive:
17 | "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18 | outline:
19 | "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20 | },
21 | },
22 | defaultVariants: {
23 | variant: "default",
24 | },
25 | }
26 | )
27 |
28 | function Badge({
29 | className,
30 | variant,
31 | asChild = false,
32 | ...props
33 | }: React.ComponentProps<"span"> &
34 | VariantProps & { asChild?: boolean }) {
35 | const Comp = asChild ? Slot : "span"
36 |
37 | return (
38 | >;
11 | };
12 |
13 | export const getSandboxURL = ({ writer }: Params) =>
14 | tool({
15 | description,
16 | inputSchema: z.object({
17 | sandboxId: z
18 | .string()
19 | .describe(
20 | "The unique identifier of the Vercel Sandbox (e.g., 'sbx_abc123xyz'). This ID is returned when creating a Vercel Sandbox and is used to reference the specific sandbox instance."
21 | ),
22 | port: z
23 | .number()
24 | .describe(
25 | 'The port number where a service is running inside the Vercel Sandbox (e.g., 3000 for Next.js dev server, 8000 for Python apps, 5000 for Flask). The port must have been exposed when the sandbox was created or when running commands.'
26 | ),
27 | }),
28 | execute: async ({ sandboxId, port }, { toolCallId }) => {
29 | writer.write({
30 | id: toolCallId,
31 | type: 'data-get-sandbox-url',
32 | data: { status: 'loading' },
33 | });
34 |
35 | const sandbox = await Sandbox.get({
36 | sandboxId,
37 | teamId: env.VERCEL_TEAM_ID ?? '',
38 | projectId: env.VERCEL_PROJECT_ID ?? '',
39 | token: env.VERCEL_TOKEN ?? '',
40 | });
41 | const url = sandbox.domain(port);
42 |
43 | writer.write({
44 | id: toolCallId,
45 | type: 'data-get-sandbox-url',
46 | data: { url, status: 'done' },
47 | });
48 |
49 | return { url };
50 | },
51 | });
52 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
5 |
6 | import { cn } from "@repo/design-system/lib/utils"
7 |
8 | function Popover({
9 | ...props
10 | }: React.ComponentProps) {
11 | return ) {
17 | return ) {
26 | return (
27 |
28 |
39 | )
40 | }
41 |
42 | function PopoverAnchor({
43 | ...props
44 | }: React.ComponentProps) {
45 | return ;
11 |
12 | export const Conversation = ({ className, ...props }: ConversationProps) => (
13 | ;
34 |
35 | export const ConversationScrollButton = ({
36 | className,
37 | ...props
38 | }: ConversationScrollButtonProps) => {
39 | const { isAtBottom, scrollToBottom } = useStickToBottomContext();
40 |
41 | const handleScrollToBottom = useCallback(() => {
42 | scrollToBottom();
43 | }, [scrollToBottom]);
44 |
45 | return (
46 | !isAtBottom && (
47 |
60 | )
61 | );
62 | };
63 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 |
6 | import { cn } from "@repo/design-system/lib/utils"
7 |
8 | function ScrollArea({
9 | className,
10 | children,
11 | ...props
12 | }: React.ComponentProps) {
13 | return (
14 |
19 |
23 | {children}
24 |
25 |
28 | )
29 | }
30 |
31 | function ScrollBar({
32 | className,
33 | orientation = "vertical",
34 | ...props
35 | }: React.ComponentProps) {
36 | return (
37 |
50 |
55 | )
56 | }
57 |
58 | export { ScrollArea, ScrollBar }
59 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@repo/design-system/lib/utils';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import type * as React from 'react';
4 |
5 | const alertVariants = cva(
6 | 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
7 | {
8 | variants: {
9 | variant: {
10 | default: 'bg-card text-card-foreground',
11 | destructive:
12 | 'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
13 | },
14 | },
15 | defaultVariants: {
16 | variant: 'default',
17 | },
18 | }
19 | );
20 |
21 | function Alert({
22 | className,
23 | variant,
24 | ...props
25 | }: React.ComponentProps<'div'> & VariantProps) {
26 | return (
27 |
33 | );
34 | }
35 |
36 | function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
37 | return (
38 |
46 | );
47 | }
48 |
49 | function AlertDescription({
50 | className,
51 | ...props
52 | }: React.ComponentProps<'div'>) {
53 | return (
54 |
62 | );
63 | }
64 |
65 | export { Alert, AlertTitle, AlertDescription };
66 |
--------------------------------------------------------------------------------
/apps/obby/ai/messages/data-parts.ts:
--------------------------------------------------------------------------------
1 | import type { Document, SearchResultWeb } from '@mendable/firecrawl-js';
2 | import z from 'zod/v3';
3 |
4 | export const dataPartSchema = z.object({
5 | 'create-sandbox': z.object({
6 | sandboxId: z.string().optional(),
7 | status: z.enum(['loading', 'done']),
8 | }),
9 | 'generating-files': z.object({
10 | paths: z.array(z.string()),
11 | status: z.enum(['generating', 'uploading', 'uploaded', 'done']),
12 | }),
13 | 'run-command': z.object({
14 | command: z.string(),
15 | args: z.array(z.string()),
16 | status: z.enum(['loading', 'done']),
17 | commandId: z.string().optional(),
18 | sandboxId: z.string(),
19 | }),
20 | 'wait-command': z.object({
21 | sandboxId: z.string(),
22 | commandId: z.string(),
23 | command: z.string(),
24 | args: z.array(z.string()),
25 | exitCode: z.number().optional(),
26 | status: z.enum(['loading', 'done']),
27 | }),
28 | 'get-sandbox-url': z.object({
29 | url: z.string().optional(),
30 | status: z.enum(['loading', 'done']),
31 | }),
32 | 'web-scrape': z.object({
33 | url: z.string().optional(),
34 | status: z.enum(['loading', 'done', 'error']),
35 | result: z.custom().optional(),
36 | error: z.string().optional(),
37 | }),
38 | 'web-search': z.object({
39 | query: z.string().optional(),
40 | status: z.enum(['loading', 'done', 'error']),
41 | results: z.custom().optional(),
42 | resultsCount: z.number().optional(),
43 | error: z.string().optional(),
44 | }),
45 | context7: z.object({
46 | query: z.string().optional(),
47 | status: z.enum(['loading', 'done', 'error']),
48 | libraryId: z.string().optional(),
49 | topic: z.string().optional(),
50 | tokens: z.number().optional(),
51 | result: z.string().optional(),
52 | error: z.string().optional(),
53 | }),
54 | });
55 |
56 | export type DataPart = z.infer;
57 |
--------------------------------------------------------------------------------
/apps/obby/components/chat/message-part/index.tsx:
--------------------------------------------------------------------------------
1 | import type { UIMessage } from 'ai';
2 | import type { DataPart } from '@/ai/messages/data-parts';
3 | import type { Metadata } from '@/ai/messages/metadata';
4 | import type { ToolSet } from '@/ai/tools';
5 | import { Context7 } from './context7';
6 | import { CreateSandbox } from './create-sandbox';
7 | import { GenerateFiles } from './generate-files';
8 | import { GetSandboxURL } from './get-sandbox-url';
9 | import { Reasoning } from './reasoning';
10 | import { RunCommand } from './run-command';
11 | import { Text } from './text';
12 | import { WaitCommand } from './wait-command';
13 | import { WebScrape } from './web-scrape';
14 | import { WebSearch } from './web-search';
15 |
16 | type Props = {
17 | part: UIMessage['parts'][number];
18 | };
19 |
20 | export function MessagePart({ part }: Props) {
21 | if (part.type === 'data-generating-files') {
22 | return >;
18 | };
19 |
20 | export type ToolsBuilderParams = BaseParams & {
21 | options?: {
22 | tools?: ToolOptions;
23 | };
24 | };
25 |
26 | export function tools(params: ToolsBuilderParams) {
27 | const { provider, modelId, writer, options } = params;
28 | const enabled = options?.tools ?? {};
29 |
30 | const base = {
31 | createSandbox: createSandbox({ writer }),
32 | generateFiles: generateFiles({ writer, modelId, provider }),
33 | getSandboxURL: getSandboxURL({ writer }),
34 | runCommand: runCommand({ writer }),
35 | waitCommand: waitCommand({ writer }),
36 | };
37 |
38 | const optional = {
39 | ...(enabled.webScrape ? { webScrape: webScrape({ writer }) } : {}),
40 | ...(enabled.webSearch ? { webSearch: webSearch({ writer }) } : {}),
41 | ...(enabled.context7 ? { context7: context7({ writer }) } : {}),
42 | };
43 |
44 | return {
45 | ...base,
46 | ...optional,
47 | };
48 | }
49 |
50 | export type ToolSet = InferUITools>;
51 |
52 | export const AVAILABLE_OPTIONAL_TOOLS = [
53 | 'webScrape',
54 | 'webSearch',
55 | 'context7',
56 | ] as const;
57 |
58 | export type OptionalToolName = (typeof AVAILABLE_OPTIONAL_TOOLS)[number];
59 |
--------------------------------------------------------------------------------
/apps/obby/app/(main)/page.tsx:
--------------------------------------------------------------------------------
1 | import { Loader } from "lucide-react";
2 | import { Suspense } from "react";
3 | import { TabContent, TabGroup, TabItem } from "@/components/tabs";
4 | import { Chat } from "./chat";
5 | import { FileExplorer } from "./file-explorer";
6 | import { Header } from "./header";
7 | import { Logs } from "./logs";
8 | import { Preview } from "./preview";
9 |
10 | export default function Page() {
11 | return (
12 | ) {
12 | return (
13 | ) {
24 | return (
25 |
26 |
28 | )
29 | }
30 |
31 | function TooltipTrigger({
32 | ...props
33 | }: React.ComponentProps) {
34 | return ) {
43 | return (
44 |
45 |
54 | {children}
55 |
57 |
58 | )
59 | }
60 |
61 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
62 |
--------------------------------------------------------------------------------
/packages/next-config/index.ts:
--------------------------------------------------------------------------------
1 | import withBundleAnalyzer from '@next/bundle-analyzer';
2 |
3 | // @ts-expect-error No declaration file
4 | import { PrismaPlugin } from '@prisma/nextjs-monorepo-workaround-plugin';
5 | import type { NextConfig } from 'next';
6 |
7 | const otelRegex = /@opentelemetry\/instrumentation/;
8 | const mdRegex = /\.md/;
9 |
10 | export const config: NextConfig = {
11 | transpilePackages: ['shiki'],
12 |
13 | turbopack: {
14 | rules: {
15 | '*.md': {
16 | loaders: ['raw-loader'],
17 | as: '*.js',
18 | },
19 | },
20 | },
21 |
22 | images: {
23 | formats: ['image/avif', 'image/webp'],
24 | remotePatterns: [
25 | {
26 | protocol: 'https',
27 | hostname: 'img.clerk.com',
28 | },
29 | ],
30 | dangerouslyAllowSVG: true,
31 | contentDispositionType: 'attachment',
32 | contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
33 | },
34 |
35 | // biome-ignore lint/suspicious/useAwait: rewrites is async
36 | async rewrites() {
37 | return [
38 | {
39 | source: '/ingest/static/:path*',
40 | destination: 'https://us-assets.i.posthog.com/static/:path*',
41 | },
42 | {
43 | source: '/ingest/:path*',
44 | destination: 'https://us.i.posthog.com/:path*',
45 | },
46 | {
47 | source: '/ingest/decide',
48 | destination: 'https://us.i.posthog.com/decide',
49 | },
50 | ];
51 | },
52 |
53 | // biome-ignore lint/nursery/noShadow: config is a valid parameter name
54 | webpack(config, { isServer }) {
55 | if (isServer) {
56 | config.plugins = config.plugins || [];
57 | config.plugins.push(new PrismaPlugin());
58 | }
59 |
60 | config.module.rules.push({
61 | test: mdRegex,
62 | type: 'asset/source',
63 | });
64 |
65 | config.ignoreWarnings = [{ module: otelRegex }];
66 |
67 | return config;
68 | },
69 |
70 | // This is required to support PostHog trailing slash API requests
71 | skipTrailingSlashRedirect: true,
72 | };
73 |
74 | export const withAnalyzer = (sourceConfig: NextConfig): NextConfig =>
75 | withBundleAnalyzer()(sourceConfig);
76 |
--------------------------------------------------------------------------------
/packages/design-system/components/ai-elements/sources.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { cn } from '@repo/design-system/lib/utils';
4 | import { BookIcon, ChevronDownIcon } from 'lucide-react';
5 | import type { ComponentProps } from 'react';
6 | import {
7 | Collapsible,
8 | CollapsibleContent,
9 | CollapsibleTrigger,
10 | } from '../ui/collapsible';
11 |
12 | export type SourcesProps = ComponentProps<'div'>;
13 |
14 | export const Sources = ({ className, ...props }: SourcesProps) => (
15 | & {
22 | count: number;
23 | };
24 |
25 | export const SourcesTrigger = ({
26 | className,
27 | count,
28 | children,
29 | ...props
30 | }: SourcesTriggerProps) => (
31 |
35 | {children ?? (
36 | <>
37 |
42 | );
43 |
44 | export type SourcesContentProps = ComponentProps;
45 |
46 | export const SourcesContent = ({
47 | className,
48 | ...props
49 | }: SourcesContentProps) => (
50 | ) {
12 | return (
13 | ) {
25 | return (
26 | ) {
41 | return (
42 | ) {
57 | return (
58 | ) {
13 | return (
14 | ) {
28 | return & {
36 | withHandle?: boolean
37 | }) {
38 | return (
39 | div]:rotate-90",
43 | className
44 | )}
45 | {...props}
46 | >
47 | {withHandle && (
48 |
53 | )
54 | }
55 |
56 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
57 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/slider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SliderPrimitive from "@radix-ui/react-slider"
5 |
6 | import { cn } from "@repo/design-system/lib/utils"
7 |
8 | function Slider({
9 | className,
10 | defaultValue,
11 | value,
12 | min = 0,
13 | max = 100,
14 | ...props
15 | }: React.ComponentProps) {
16 | const _values = React.useMemo(
17 | () =>
18 | Array.isArray(value)
19 | ? value
20 | : Array.isArray(defaultValue)
21 | ? defaultValue
22 | : [min, max],
23 | [value, defaultValue, min, max]
24 | )
25 |
26 | return (
27 |
39 |
45 |
52 | {Array.from({ length: _values.length }, (_, index) => (
53 |
60 | )
61 | }
62 |
63 | export { Slider }
64 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
5 | import { type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@repo/design-system/lib/utils"
8 | import { toggleVariants } from "@repo/design-system/components/ui/toggle"
9 |
10 | const ToggleGroupContext = React.createContext<
11 | VariantProps
12 | >({
13 | size: "default",
14 | variant: "default",
15 | })
16 |
17 | function ToggleGroup({
18 | className,
19 | variant,
20 | size,
21 | children,
22 | ...props
23 | }: React.ComponentProps &
24 | VariantProps) {
25 | return (
26 |
36 |
37 | {children}
38 |
39 |
40 | )
41 | }
42 |
43 | function ToggleGroupItem({
44 | className,
45 | children,
46 | variant,
47 | size,
48 | ...props
49 | }: React.ComponentProps &
50 | VariantProps) {
51 | const context = React.useContext(ToggleGroupContext)
52 |
53 | return (
54 |
68 | {children}
69 |
70 | )
71 | }
72 |
73 | export { ToggleGroup, ToggleGroupItem }
74 |
--------------------------------------------------------------------------------
/public/logos/ai/mistral.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as AccordionPrimitive from '@radix-ui/react-accordion';
4 | import { cn } from '@repo/design-system/lib/utils';
5 | import { ChevronDownIcon } from 'lucide-react';
6 | import type * as React from 'react';
7 |
8 | function Accordion({
9 | ...props
10 | }: React.ComponentProps) {
11 | return ) {
18 | return (
19 | ) {
32 | return (
33 |
34 | svg]:rotate-180',
37 | className
38 | )}
39 | data-slot="accordion-trigger"
40 | {...props}
41 | >
42 | {children}
43 |
45 |
46 | );
47 | }
48 |
49 | function AccordionContent({
50 | className,
51 | children,
52 | ...props
53 | }: React.ComponentProps) {
54 | return (
55 |
60 |
62 | );
63 | }
64 |
65 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
66 |
--------------------------------------------------------------------------------
/apps/obby/components/model-selector/cmdk/provider-sidebar.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@repo/design-system/components/ui/button';
2 | import { cn } from '@repo/design-system/lib/utils';
3 | import { LayersIcon } from 'lucide-react';
4 | import { type ModelProvider, PROVIDER_LOGOS, PROVIDERS } from '@/ai/constants';
5 |
6 | type Props = {
7 | selected?: ModelProvider;
8 | onHover: (provider: ModelProvider) => void;
9 | onCommit: (provider: ModelProvider) => void;
10 | };
11 |
12 | export function ProviderSidebar({ selected, onHover, onCommit }: Props) {
13 | const iconFor = (provider: ModelProvider) =>
14 | PROVIDER_LOGOS[provider] ?? '/providers/openai.svg';
15 |
16 | const handleCommit = (p: ModelProvider) => {
17 | onCommit(p);
18 | };
19 |
20 | const handleHover = (p: ModelProvider) => {
21 | onHover(p);
22 | };
23 |
24 | return (
25 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/apps/obby/ai/tools/wait-command.ts:
--------------------------------------------------------------------------------
1 | import { Sandbox } from '@vercel/sandbox';
2 | import type { UIMessage, UIMessageStreamWriter } from 'ai';
3 | import { tool } from 'ai';
4 | import z from 'zod/v3';
5 | import { env } from '@/env';
6 | import type { DataPart } from '../messages/data-parts';
7 | import description from './wait-command.md';
8 |
9 | type Params = {
10 | writer: UIMessageStreamWriter>;
11 | };
12 |
13 | export const waitCommand = ({ writer }: Params) =>
14 | tool({
15 | description,
16 | inputSchema: z.object({
17 | sandboxId: z
18 | .string()
19 | .describe('The ID of the Sandbox where the command was run'),
20 | commandId: z.string().describe('The ID of the command to wait for.'),
21 | command: z
22 | .string()
23 | .describe('The command field of the command to wait for'),
24 | args: z
25 | .array(z.string())
26 | .describe('The arguments field of the command to wait for'),
27 | }),
28 | execute: async (
29 | { sandboxId, commandId, command, args },
30 | { toolCallId }
31 | ) => {
32 | writer.write({
33 | id: toolCallId,
34 | type: 'data-wait-command',
35 | data: { command, args, commandId, sandboxId, status: 'loading' },
36 | });
37 |
38 | const sandbox = await Sandbox.get({
39 | sandboxId,
40 | teamId: env.VERCEL_TEAM_ID ?? '',
41 | projectId: env.VERCEL_PROJECT_ID ?? '',
42 | token: env.VERCEL_TOKEN ?? '',
43 | });
44 | const cmd = await sandbox.getCommand(commandId);
45 | const done = await cmd.wait();
46 | const [stdout, stderr] = await Promise.all([
47 | done.stdout(),
48 | done.stderr(),
49 | ]);
50 |
51 | writer.write({
52 | id: toolCallId,
53 | type: 'data-wait-command',
54 | data: {
55 | command,
56 | args,
57 | commandId,
58 | sandboxId,
59 | exitCode: done.exitCode,
60 | status: 'done',
61 | },
62 | });
63 |
64 | return (
65 | `The command with ID ${commandId} has finished with exit code ${done.exitCode}.\n` +
66 | 'Stdout of the command was: \n' +
67 | `\`\`\`\n${stdout}\n\`\`\`\n` +
68 | 'Stderr of the command was: \n' +
69 | `\`\`\`\n${stderr}\n\`\`\``
70 | );
71 | },
72 | });
73 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "@repo/design-system/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
9 | {
10 | variants: {
11 | variant: {
12 | default:
13 | "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 | destructive:
15 | "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 | outline:
17 | "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 | secondary:
19 | "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 | ghost:
21 | "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 | link: "text-primary underline-offset-4 hover:underline",
23 | },
24 | size: {
25 | default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 | sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 | lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 | icon: "size-9",
29 | },
30 | },
31 | defaultVariants: {
32 | variant: "default",
33 | size: "default",
34 | },
35 | }
36 | )
37 |
38 | function Button({
39 | className,
40 | variant,
41 | size,
42 | asChild = false,
43 | ...props
44 | }: React.ComponentProps<"button"> &
45 | VariantProps & {
46 | asChild?: boolean
47 | }) {
48 | const Comp = asChild ? Slot : "button"
49 |
50 | return (
51 | ;
21 | const root: NodeMap = {};
22 |
23 | const createNode = (
24 | part: string,
25 | isFile: boolean,
26 | currentPath: string
27 | ): FileNodeBuilder => ({
28 | name: part,
29 | type: isFile ? 'file' : 'folder',
30 | path: currentPath,
31 | content: isFile
32 | ? `// Content for ${currentPath}\n// This will be loaded when the file is selected`
33 | : undefined,
34 | children: isFile ? undefined : {},
35 | expanded: false,
36 | });
37 |
38 | const insertPath = (nodeMap: NodeMap, path: string): void => {
39 | const parts = path.split('/').filter(Boolean);
40 | let current: NodeMap = nodeMap;
41 | let currentPath = '';
42 |
43 | for (const [index, part] of parts.entries()) {
44 | currentPath = `${currentPath}/${part}`;
45 | const isFile = index === parts.length - 1;
46 |
47 | if (!current[part]) {
48 | current[part] = createNode(part, isFile, currentPath);
49 | }
50 |
51 | if (!isFile) {
52 | if (!current[part].children) {
53 | current[part].children = {};
54 | }
55 | current = current[part].children as NodeMap;
56 | }
57 | }
58 | };
59 |
60 | for (const path of paths) {
61 | insertPath(root, path);
62 | }
63 |
64 | const convertToArray = (obj: {
65 | [key: string]: FileNodeBuilder;
66 | }): FileNode[] => {
67 | return Object.values(obj)
68 | .map(
69 | (node): FileNode => ({
70 | ...node,
71 | children: node.children ? convertToArray(node.children) : undefined,
72 | })
73 | )
74 | .sort((a, b) => {
75 | if (a.type !== b.type) {
76 | return a.type === 'folder' ? -1 : 1;
77 | }
78 | return a.name.localeCompare(b.name);
79 | });
80 | };
81 |
82 | return convertToArray(root);
83 | }
84 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@repo/design-system/lib/utils"
4 |
5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
6 | return (
7 |
15 | )
16 | }
17 |
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 | return (
20 |
28 | )
29 | }
30 |
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 | return (
33 |
38 | )
39 | }
40 |
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 | return (
43 |
48 | )
49 | }
50 |
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 | return (
53 |
61 | )
62 | }
63 |
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 | return (
66 |
71 | )
72 | }
73 |
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 | return (
76 |
81 | )
82 | }
83 |
84 | export {
85 | Card,
86 | CardHeader,
87 | CardFooter,
88 | CardTitle,
89 | CardAction,
90 | CardDescription,
91 | CardContent,
92 | }
93 |
--------------------------------------------------------------------------------
/apps/obby/ai/tools/wait-command.md:
--------------------------------------------------------------------------------
1 | Use this tool to wait for a previously started command (triggered via `Run Command`) in a Vercel Sandbox to finish. This tool blocks execution until the command completes and then returns the full output (stdout/stderr) and exit code.
2 |
3 | It is essential for managing sequential workflows where one command depends on the successful completion of another.
4 |
5 | ## When to Use This Tool
6 |
7 | Use Wait Command when:
8 |
9 | 1. You’ve started a command using `Run Command` and need to know when it completes
10 | 2. You must run a **second command that depends on the results of the first**
11 | 3. You want to retrieve the result (logs, errors, exit status) of a previously started command
12 | 4. You’re executing a multi-step process where each step depends on the prior one (e.g., install → build → run)
13 |
14 | ## Usage Guidelines
15 |
16 | - Always use the `commandId` returned by `Run Command` to identify which command to wait for
17 | - Only wait for one command at a time
18 | - You MUST NOT run a dependent command until you’ve waited for and confirmed the prior command completed successfully
19 | - Check the exit code:
20 | - Exit code `0` means success
21 | - Non-zero codes indicate failure; handle accordingly
22 |
23 | ## Sequencing Best Practices
24 |
25 | - Wait immediately after starting any important command unless it is meant to run in the background
26 | - ✅ Run `npm install` → Wait → Run `npm run dev`
27 | - ❌ Run both without waiting
28 | - After the wait completes:
29 | - If successful, proceed
30 | - If failed, report the failure or take corrective action
31 |
32 | ## When NOT to Use This Tool
33 |
34 | Avoid using this tool when:
35 |
36 | 1. No `Run Command` has been issued yet
37 | 2. The command you started is meant to run in the background (e.g., a dev server or watcher)
38 | 3. You don’t need the result or output of the command
39 |
40 | ## Example
41 |
42 |
43 | User: Install dependencies and then start the dev server
44 | Assistant:
45 | 1. Run Command: `npm install` → receives `commandId`
46 | 2. Wait Command: wait for `commandId` to finish
47 | 3. Run Command: `npm run dev` (no wait needed, this runs in background)
48 |
49 |
50 | ## Summary
51 |
52 | Use Wait Command to block and monitor a previously run command until it finishes. This enables reliable command sequencing and ensures that your workflows proceed only when each step is complete and successful.
53 |
--------------------------------------------------------------------------------
39 | {children}
40 |
41 | );
42 |
43 | export type MessageAvatarProps = ComponentProps
13 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/public/logos/ai/deepseek.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/design-system/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@repo/design-system/lib/utils"
7 |
8 | function TooltipProvider({
9 | delayDuration = 0,
10 | ...props
11 | }: React.ComponentProps-
16 |
22 |
26 |
28 |
29 | {/* Preview - now contains both web preview and code view */}
30 |
31 |
33 |
34 | {/* File Explorer - ONLY visible on mobile */}
35 |
36 |
38 |
39 |
40 |
42 |
43 |
44 |
45 | Used {count} sources
38 |
49 |
51 | )}
52 | {children}
61 |