@ cargo-ai/ app- sdk

用于构建 Cargo 主机应用程序的 SDK — a Vite + React + 细化 捆绑,可以让你工作 货物OAuth 登录,一个打字 @cargo-ai/api 客户端(通过) useCargoApi()),一个有"阴影"(Shadcn/ui)风格的主题,而标准精细的取景脚手架——因此克洛德代码(或您)可以在实际上很重要的屏幕上花出符号.

安装

npm install @cargo-ai/app-sdk @cargo-ai/api @auth0/auth0-react react react-dom react-router-dom

用这个

// src/App.tsx
import { CargoRefineApp, CargoSiderLayout } from "@cargo-ai/app-sdk";
import { Routes, Route } from "react-router-dom";
import { Inbox } from "lucide-react";

import { LeadInbox } from "./pages/LeadInbox";

const resources = [
  {
    name: "leads",
    list: "/",
    meta: { label: "Leads", icon: <Inbox className="h-4 w-4" /> },
  },
];

export const App = () => (
  <CargoRefineApp resources={resources}>
    <CargoSiderLayout title="Lead Console">
      <Routes>
        <Route path="/" element={<LeadInbox />} />
      </Routes>
    </CargoSiderLayout>
  </CargoRefineApp>
);

什么样的船

• <CargoRefineApp> ——货物OAuth + 精炼+路由器+货物API上下文,全部有线.
• CargoAuthProvider ——细化 AuthProvider 打开应用程序 app_metadata.workspaceUuids 匹配构建时间 VITE_CARGO_WORKSPACE_UUID。 。 。 .
• 钩子: useCargoApi() 对于输入的 API 客户端, useCargoAnalytics() 用于页面视图+自定义事件.
• 布局 : <CargoSiderLayout>, (中文(简体) ), <CargoEmpty>, (中文(简体) ), <CargoErrorBoundary>, (中文(简体) ), <CargoUserMenu>, (中文(简体) ), <CargoWorkspaceBadge>。 。 。 .
• 查看包装符 : <List>, (中文(简体) ), <Show>, (中文(简体) ), <Edit>, (中文(简体) ), <Create>, (中文(简体) ), <DataTable>。 。 。 .
• 货物域复合材料 src/components/domain/<domain>/: 只读图标 / 徽章 / 牌在打入的上方 @cargo-ai/api 域名类型——代理,工作流程+运行状态,数据集/模型,片段,集成/连接器,成员(外加自取自取) <MemberSelect>) (中文(简体) ).
• 从登记册上复制到 src/components/ui/: 表单(<Button>, (中文(简体) ), <Input>, (中文(简体) ), <Textarea>, (中文(简体) ), <Label>, (中文(简体) ), <Checkbox>, (中文(简体) ), <RadioGroup>, (中文(简体) ), <Switch>, (中文(简体) ), <Slider>, (中文(简体) ), <Select>, (中文(简体) ), <Toggle>, (中文(简体) ), <ToggleGroup>, (中文(简体) ), <Calendar>),表面(<Card>, (中文(简体) ), <Sheet>, (中文(简体) ), <Dialog>, (中文(简体) ), <AlertDialog>, (中文(简体) ), <Popover>, (中文(简体) ), <HoverCard>, (中文(简体) ), <Tooltip>, (中文(简体) ), <Separator>, (中文(简体) ), <ScrollArea>, (中文(简体) ), <Collapsible>, (中文(简体) ), <Accordion>),导航(<Tabs>, (中文(简体) ), <Breadcrumb>, (中文(简体) ), <Pagination>, (中文(简体) ), <NavigationMenu>, (中文(简体) ), <DropdownMenu>, (中文(简体) ), <ContextMenu>, (中文(简体) ), <Menubar>, (中文(简体) ), <Command>),显示(<Table>, (中文(简体) ), <Badge>, (中文(简体) ), <Avatar>, (中文(简体) ), <Skeleton>, (中文(简体) ), <Progress>, (中文(简体) ), <Spinner>, (中文(简体) ), <Alert>, (中文(简体) ), <Toaster>)和图表<ChartContainer> + 帮助者, 包装 recharts) (中文(简体) ).
• 尾风预设( T)@cargo-ai/app-sdk/tailwind-preset+ 基础CSS(@cargo-ai/app-sdk/styles.css) (中文(简体) ).

环境 vars

货运主机自动将这些烤入捆绑. 用于本地 dev 运行 cargo-ai hosting app env <appUuid> > .env.local数字 :

VITE_CARGO_OAUTH_DOMAIN=...
VITE_CARGO_OAUTH_CLIENT_ID=...
VITE_CARGO_OAUTH_AUDIENCE=...
VITE_CARGO_API_URL=https://api.getcargo.io
VITE_CARGO_WORKSPACE_UUID=...
VITE_CARGO_APP_UUID=...
VITE_APP_BASE_PATH=/

接下来,Js应用读取相同的 vars 与 a NEXT_PUBLIC_ 前缀( e)NEXT_PUBLIC_CARGO_API_URL; 货物托管同时注入.

添加阴影原始物

装有Shadcn/ui部件的包船复制成型 src/components/ui/通过有线CLI拉出一个新的:

npm run -w @cargo-ai/app-sdk shadcn:add -- <component>
# e.g.
npm run -w @cargo-ai/app-sdk shadcn:add -- tooltip

运行 shadcn@latest add 对这个包 components.json后处理器(scripts/shadcn-postprocess.mjs重写CLI的 @/ 进口到相对 ./…/foo.js 路径和条 "use client" 因此文件符合SDK的节点Next / Vite 形状。 完成后:

1. 添加新导出到 src/index.ts 手(CLI不碰桶).
2. 如果组件拉入 CSS 变量,我们还没有定义(例如:. --chart-1 页:1 chart),添加到 styles.css。 。 。 .

比较当地原始物与上游阴影源:

npm run -w @cargo-ai/app-sdk shadcn:diff -- <component>

不运行 npx shadcn init 本包中. components.json, (中文(简体) ), styles.css,以及 tailwind.config.ts 手取之; init 会覆盖他们。 仅 add 编号 : diff 这是安全的.

参考文献

• SKILLL.MD (英语) ——即时克洛德代码在脚手架应用时会读取.
• @cargo-ai/ api ——打出货物API客户端.
• 文件.getcargo.ai/参考/介绍 ——REST参考.