Skip to Content
GuidesProject Structure

Project Structure

Understand the Vibekit project layout.

Overview

A Myco Vibekit app is a full-stack project with a React SPA frontend and a Cloudflare Worker backend, all in one directory.

Directory layout

your-app/
│
├── src/                          # React frontend
│   ├── components/
│   │   ├── ui/                   # 40+ shadcn/ui components
│   │   ├── chat/                 # AI chat components
│   │   └── layout/               # Sidebar, ThemeProvider
│   ├── pages/                    # Page components (routes)
│   ├── hooks/                    # Custom React hooks
│   ├── lib/
│   │   ├── myco.ts               # Myco SDK initialization
│   │   └── utils.ts              # cn() Tailwind utility
│   └── types/
│       └── myco.generated.ts     # Generated entity types (DO NOT EDIT)
│
├── worker/                       # Cloudflare Worker backend
│   ├── index.ts                  # Hono API routes + middleware
│   └── assets.ts                 # Static asset serving
│
├── skills/                       # AI agent skills
│   └── <skill-name>/
│       └── SKILL.md              # Skill definition
│
├── CLAUDE.md                     # Instructions for Claude Code
├── wrangler.jsonc                # Cloudflare Workers config
├── vite.config.ts                # Vite build config
├── tailwind.config.js            # Tailwind CSS config
├── tsconfig.json                 # TypeScript config
├── package.json
└── .dev.vars                     # Local environment variables

Key files

src/lib/myco.ts — SDK initialization

This is where the Myco SDK is created and configured:

import { MycoSDK } from "@myco-dev/sdk";
import type { EntityTypes } from "@/types/myco.generated";
 
export const myco = new MycoSDK<EntityTypes>("your-app-key", {
  redirectOnUnauth: false,
});

src/main.tsx — App entry point

Sets up routing and wraps the app in MycoProvider:

import { MycoProvider } from "@myco-dev/sdk";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { myco } from "./lib/myco";
 
<MycoProvider myco={myco}>
  <BrowserRouter>
    <Routes>
      <Route path="/" Component={Index} />
      <Route path="/login" Component={LoginPage} />
      {/* Your routes */}
    </Routes>
  </BrowserRouter>
</MycoProvider>

worker/index.ts — API routes

A Hono app running on Cloudflare Workers:

import { Hono } from "hono";
import { createServerSDK } from "@myco-dev/sdk/server";
 
const app = new Hono();
 
// Auth middleware
app.use("/api/*", async (c, next) => {
  const sdk = createServerSDK({ MYCO_APP_KEY: c.env.MYCO_APP_KEY }, c.req.raw);
  const { user } = await sdk.auth.getVerifiedUser();
  c.set("user", user);
  return next();
});
 
// Your routes here
app.get("/api/me", (c) => {
  const user = c.get("user");
  if (!user) return c.json({ error: "Unauthorized" }, 401);
  return c.json({ user });
});

wrangler.jsonc — Cloudflare config

Contains your app slug (as name), bindings, and the MYCO_APP_KEY variable.

.dev.vars — Local secrets

MYCO_APP_KEY=your-app-key
OPENAI_API_KEY=sk-...

.dev.vars is gitignored. Never commit secrets to source control.

CLAUDE.md — AI instructions

This file is automatically read by Claude Code when you open the project. It contains documentation about the SDK, CLI, and project conventions so Claude can assist you effectively.

AI Chat and SkillsDeployment