krea-build

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Krea Build — Integration Patterns for Developers

Krea Build — 面向开发者的集成模式

This skill is for building apps that integrate Krea. Not for one-off generations — that's the sibling

krea-ai

skill, which routes through the MCP server.

Use this skill when the user is:

Writing a TypeScript/Python/Go client that calls the Krea API directly
Building a frontend that lets users generate content (SvelteKit, Next.js, etc.)
Designing a content pipeline that runs in CI or production
Embedding Krea outputs in a portfolio, document, or tool

本技能适用于构建集成Krea的应用。不适用于一次性生成内容——此类场景请使用姊妹技能

krea-ai

，它通过MCP服务器路由请求。

当用户处于以下场景时使用本技能：

编写直接调用Krea API的TypeScript/Python/Go客户端
构建允许用户生成内容的前端（SvelteKit、Next.js等）
设计在CI或生产环境中运行的内容流水线
在作品集、文档或工具中嵌入Krea输出内容

Self-update check (opt-in)

自动更新检查（可选）

Once per session: run

bash /path/to/skills/scripts/update-check.sh

. Prints

UPGRADE_AVAILABLE <local> <remote>

if a newer version is out. Surface that to the user once, then continue. Snoozes 24h→48h→7d. Disable with

touch ~/.krea-skills/update-check-disabled

每次会话执行一次：运行

bash /path/to/skills/scripts/update-check.sh

。如果有新版本，会输出

UPGRADE_AVAILABLE <local> <remote>

。将此信息告知用户一次后继续操作。提醒间隔会从24小时延长至48小时，再到7天。可通过

touch ~/.krea-skills/update-check-disabled

关闭该功能。

When to use this skill vs.

krea-ai

本技能与

krea-ai

的适用场景对比

Situation	Use
"Generate me an image of X"	`krea-ai` (MCP-based)
"Build me a moodboard app that uses Krea"	`krea-build` (this)
"Write a TypeScript helper to call Krea"	`krea-build`
"Run a one-off pipeline now"	`krea-ai`
"Add Krea generation to my React form"	`krea-build`

场景	使用技能
“帮我生成一张X的图片”	`krea-ai` （基于MCP）
“帮我构建一个使用Krea的情绪板应用”	`krea-build` （本技能）
“帮我编写一个调用Krea的TypeScript工具函数”	`krea-build`
“现在运行一条一次性流水线”	`krea-ai`
“在我的React表单中添加Krea生成功能”	`krea-build`

Critical workflow rule: prototype in chat, productize in the app

关键工作流规则：先在聊天中原型设计，再在应用中产品化

The single most expensive mistake when building Krea apps is writing app code around unproven generation output. Always:

Prototype — run the generation manually with
```
krea-ai
```
(MCP) to see what the actual output looks like.
Confirm — show the user the result. Iterate on prompt, model, parameters until it's right.
Productize — once the output is approved, hardcode the URLs and parameters into the app.

If you skip step 1–2 and go straight to writing SvelteKit pages with placeholder prompts, the app will look broken when generation fails or returns unexpected results. Validating in chat takes seconds; debugging a broken app takes minutes.

See

references/integration-patterns.md

for the full workflow.

构建Krea应用时最昂贵的错误，就是围绕未经验证的生成输出编写应用代码。请务必遵循以下步骤：

原型设计 — 使用
```
krea-ai
```
（MCP）手动运行生成，查看实际输出效果。
确认 — 向用户展示结果。迭代优化提示词、模型、参数，直到输出符合要求。
产品化 — 输出获得认可后，将URL和参数硬编码到应用中。

如果跳过步骤1-2直接编写带有占位提示词的SvelteKit页面，当生成失败或返回意外结果时，应用会出现故障。在聊天中验证只需几秒，而调试故障应用则需要数分钟。

完整工作流请查看

references/integration-patterns.md

。

Architecture recommendation: server-side only

架构建议：仅使用服务器端调用

The Krea API key must never be exposed to the browser. All Krea calls go through your server:

SvelteKit:

+page.server.ts

+server.ts

, or

actions

+page.server.ts

Next.js: API routes (
```
app/api/*/route.ts
```
), server actions, or
```
getServerSideProps
```
Express/Hono/Fastify: standard server routes

The client triggers a generation by hitting your server, which hits Krea, polls until done, and streams the result back.

Krea API密钥绝对不能暴露给浏览器。所有Krea调用都必须通过你的服务器：

SvelteKit：

+page.server.ts

、

+server.ts

或

+page.server.ts

中的

actions

Next.js：API路由（
```
app/api/*/route.ts
```
）、服务器操作或
```
getServerSideProps
```
Express/Hono/Fastify：标准服务器路由

客户端通过请求你的服务器触发生成，服务器调用Krea，轮询直到任务完成，然后将结果流式返回给客户端。

Auth, polling, errors

认证、轮询与错误处理

All three live in

references/api-client.md

with reusable TypeScript and Python snippets. The key shapes:

Auth:
```
Authorization: Key ${KREA_API_KEY}
```
header.

Submit:

POST /generate/image/<provider>/<model>

with

{ prompt, ... }

→ returns

{ job_id }

Poll:
```
GET /jobs/<job_id>
```
every 3–10s until
```
status
```
is
```
completed
```
or
```
failed
```
.
Errors: see
```
references/validation.md
```
for the full table.

这三部分的详细内容及可复用的TypeScript和Python代码片段都在

references/api-client.md

中。核心流程如下：

认证：使用
```
Authorization: Key ${KREA_API_KEY}
```
请求头。

提交请求：向

POST /generate/image/<provider>/<model>

发送包含

{ prompt, ... }

的请求 → 返回

{ job_id }

。

轮询状态：每3-10秒调用一次
```
GET /jobs/<job_id>
```
，直到
```
status
```
变为
```
completed
```
或
```
failed
```
。
错误处理：完整的错误列表请查看
```
references/validation.md
```
。

Frontend integration

前端集成

See

references/frontend-snippets.md

for ready-to-paste TypeScript that handles common patterns:

Generation form with progress UI
Image preview with click-to-expand
Multi-image gallery with state
Video player with loading states
Hardcoded asset arrays (the "productize" step)

常见模式的可直接粘贴的TypeScript代码请查看

references/frontend-snippets.md

，包括：

带进度UI的生成表单
可点击放大的图片预览
带状态管理的多图画廊
带加载状态的视频播放器
硬编码资源数组（即“产品化”步骤）

Validation discipline

验证规范

User-provided prompts, image URLs, and parameter values must be validated server-side before forwarding to Krea. See

references/validation.md

for the validation checklist and content moderation handling.

用户提供的提示词、图片URL和参数值必须在转发给Krea之前进行服务器端验证。验证清单和内容审核处理请查看

references/validation.md

。

Reference docs

参考文档

```
references/integration-patterns.md
```
— prototype→productize workflow, app structure, when to chat-first
```
references/api-client.md
```
— auth, polling, retries, error handling (TS + Python)
```
references/validation.md
```
— input checks, content moderation, common API errors
```
references/frontend-snippets.md
```
— ready-to-paste TS for SvelteKit/React/Vue

```
references/integration-patterns.md
```
— 原型→产品化工作流、应用结构、何时优先使用聊天原型
```
references/api-client.md
```
— 认证、轮询、重试、错误处理（TS + Python）
```
references/validation.md
```
— 输入检查、内容审核、常见API错误
```
references/frontend-snippets.md
```
— 适用于SvelteKit/React/Vue的可直接粘贴TS代码

Quick-start

快速入门

If the user is starting a brand new app and asks "how do I integrate Krea":

Read
```
references/api-client.md
```
to understand the auth+poll shape.
Drop the TypeScript helper from
```
references/frontend-snippets.md
```
into
```
src/lib/krea/index.ts
```
(or wherever fits the project).
Build a server route that calls the helper.
Build a client component that hits the server route.
For each user-facing generation, prototype the prompt in chat with
krea-ai
first, then hardcode the approved version.

如果用户从零开始构建应用并询问“如何集成Krea”：

阅读
```
references/api-client.md
```
，了解认证和轮询的核心流程。
将
```
references/frontend-snippets.md
```
中的TypeScript工具函数复制到
```
src/lib/krea/index.ts
```
（或项目中合适的位置）。
构建调用该工具函数的服务器路由。
构建请求该服务器路由的客户端组件。
对于每个面向用户的生成功能，先使用
krea-ai
在聊天中原型设计提示词，然后将经过认可的版本硬编码到应用中。

krea-build

Original

Translation

Krea Build — Integration Patterns for Developers

Krea Build — 面向开发者的集成模式

Self-update check (opt-in)

自动更新检查（可选）

When to use this skill vs.
`krea-ai`

本技能与
`krea-ai`
的适用场景对比

Critical workflow rule: prototype in chat, productize in the app

关键工作流规则：先在聊天中原型设计，再在应用中产品化

Architecture recommendation: server-side only

架构建议：仅使用服务器端调用

Auth, polling, errors

认证、轮询与错误处理

Frontend integration

前端集成

Validation discipline

验证规范

Reference docs

参考文档

Quick-start

快速入门

krea-build

Original

Translation

Krea Build — Integration Patterns for Developers

Krea Build — 面向开发者的集成模式

Self-update check (opt-in)

自动更新检查（可选）

When to use this skill vs. krea-ai

本技能与krea-ai的适用场景对比

Critical workflow rule: prototype in chat, productize in the app

关键工作流规则：先在聊天中原型设计，再在应用中产品化

Architecture recommendation: server-side only

架构建议：仅使用服务器端调用

Auth, polling, errors

认证、轮询与错误处理

Frontend integration

前端集成

Validation discipline

验证规范

Reference docs

参考文档

Quick-start

快速入门

When to use this skill vs.
`krea-ai`

本技能与
`krea-ai`
的适用场景对比