Skip to content

Commit 59a701b

Browse files
authored
Blog skills (#99)
* Add Skills blog post * Video for AI Chat blog post
1 parent 3ff1c25 commit 59a701b

File tree

5 files changed

+81
-0
lines changed

5 files changed

+81
-0
lines changed
36.5 KB
Loading
1.11 MB
Binary file not shown.
2.84 MB
Binary file not shown.

src/content/blog/ai-chat-plugin-visual-editor-integration.mdx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,21 @@ The plugin supports:
2121
- A frontend chat UI (`aiChatPanel`) you can place in your editor layout
2222
- A backend layer powered by the Chat Platform API, or a fully custom one
2323

24+
Here an example of the AI Chat plugin extended with image generation.
25+
26+
<video
27+
autoPlay
28+
muted
29+
loop
30+
playsInline
31+
preload="none"
32+
loading="lazy"
33+
style={{ width: '100%', height: 'auto', borderRadius: '16px', margin: '1.5rem 0' }}
34+
>
35+
<source src="/assets/blog/ai-chat-plugin/ai-chat-plugin.mp4" type="video/mp4" />
36+
Your browser does not support the video tag.
37+
</video>
38+
2439
---
2540

2641
## Why This Matters for Visual Editors
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: "How Skills Help AI Coding Agents Integrate Studio SDK Faster"
3+
excerpt: "Agent Skills package Studio SDK's docs and patterns into a format AI coding agents actually understand, so they stop guessing at APIs and start writing working integrations."
4+
coverImage: "/assets/blog/agent-skills/agent-skills-studio-sdk.webp"
5+
date: "2026-03-24T14:00:00Z"
6+
author:
7+
name: Grapes Studio Team
8+
ogImage:
9+
url: "/assets/blog/agent-skills/agent-skills-studio-sdk.webp"
10+
---
11+
12+
## Faster Studio SDK Integrations with Agent Skills
13+
14+
If you're using an AI coding agent to integrate Studio SDK, the bottleneck isn't writing code. It's getting the agent to understand the editor well enough to write the *right* code. The APIs, the plugin system, project types, rendering... there's a lot of surface area, and agents tend to waste tokens guessing at it.
15+
16+
We built Agent Skills to fix this. Instead of pointing an agent at our full docs site and hoping for the best, Skills package the key concepts, code patterns, and API details into a compact format that LLMs can actually consume efficiently.
17+
18+
---
19+
20+
## A Simple Example
21+
22+
Here's what that looks like in practice. A coding agent takes a generic CRM app and, from a single prompt, replaces a basic textarea used to store email HTML with a full Studio SDK integration.
23+
24+
<video
25+
autoPlay
26+
muted
27+
loop
28+
playsInline
29+
preload="none"
30+
loading="lazy"
31+
poster="/assets/blog/agent-skills/agent-skills-studio-sdk.webp"
32+
style={{ width: '100%', height: 'auto', borderRadius: '16px', margin: '1.5rem 0' }}
33+
>
34+
<source src="/assets/blog/agent-skills/studio-sdk-skills.mp4" type="video/mp4" />
35+
Your browser does not support the video tag.
36+
</video>
37+
38+
---
39+
40+
## What's Inside the Skills
41+
42+
Studio SDK is flexible. You can embed it into web apps, email builders, CMS workflows, internal tools, and all kinds of custom visual editing experiences. That flexibility means integrations touch a lot of concepts at once: editor setup, plugins, project types, asset handling, rendering, UI customization.
43+
44+
Before we had Skills, we'd watch agents hallucinate plugin APIs that don't exist, or wire up editor configs that looked plausible but missed how project types actually work. The Skills repo solves this by giving the agent structured context about each of these areas, with working code snippets and the correct API signatures, so it doesn't have to guess.
45+
46+
---
47+
48+
## Not Just for First-Time Setup
49+
50+
Skills also help when you're updating an existing integration. Adding a new plugin, changing editor behavior, expanding a custom workflow: these are the kinds of follow-up tasks where agents tend to drift if they don't have the right context loaded.
51+
52+
With Skills installed, your agent already knows how the SDK is structured, so follow-up prompts land closer to correct on the first try. Your developers stay focused on product decisions instead of babysitting the agent through docs.
53+
54+
---
55+
56+
## Get the Studio SDK Skills
57+
58+
You can install Skills by running:
59+
60+
```sh
61+
npx skills add GrapesJS/skills-studio-sdk
62+
```
63+
64+
Once installed, you can ask your coding agent to use the Studio SDK Skills when working on editor-related tasks.
65+
66+
The skills are also available on GitHub [here](https://github.com/GrapesJS/skills-studio-sdk). If you run into issues or want to suggest additions, open an issue on the repo.

0 commit comments

Comments
 (0)