Giuseppe
ccf0280a20
## Description
Implement AI copywriter functionality behind feature flag. The final UI is not included in this branch.
The feature consists of:
- a `copywriter` chain to generate the copy with AI
- a /rest/ai/copy endpoint to handle generation requests. The response
is streamed as plain text
- the temporary test UI which is a tab in the right sidebar.
For every selected instance it allows to generate copy for it and its
subtree. A `collectTextInstances` utility creates an array of text nodes
objects with the following shape:
```ts
{
instanceId: string;
index: number;
type: "Heading" | "Paragraph" | "Text";
text: string; // current text or empty
}
```
The AI responds with an array of these where the text property contains
the generated text. The frontend parses incrementally and updates a
Webstudio instance by `instanceId`.
The `index` is used to replace the proper text node in the
`instance.children` array. When all the children are text nodes these
are merged into a single text node, otherwise the AI would generate
`children.length` copy. We identify this case by setting the `index` to
`-1`.
Webstudio AI
The Webstudio AI package offers two main features:
LLM Abstraction
A minimal abstraction for a generic, vendor-agnostic messages format and LLM client, allowing for building features without using model-specific APIs.
See details.
An implementation of the above that uses the OpenAI chat completion endpoint is available here.
Chains
A common interface for chains. Chains are regular async functions that can execute an arbitrary number of steps, including calling a LLM via a model client.
See details.
Usage
Install the package
pnpm i @webstudio-is/ai
For an example usage check out the base example and the copywriter chain that generates copy for Webstudio.
Prompt templates
This package comes with a small CLI that allows to turn prompt templates from markdown files to TypeScript modules, which is what you would use in your chain.
pnpm run build:prompts