Skip to content

Commit 66d03e8

Browse files
RoyLinRoyLin
authored andcommitted
chore: update README, SDK bindings, and chart-generator examples
1 parent fde8b8d commit 66d03e8

8 files changed

Lines changed: 1111 additions & 1117 deletions

File tree

Cargo.lock

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

README.md

Lines changed: 113 additions & 1081 deletions
Large diffs are not rendered by default.
Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# Chart Generator Skill - 快速入门
2+
3+
## 5 分钟上手指南
4+
5+
### 步骤 1: 确认文件已创建
6+
7+
确保以下文件存在:
8+
9+
```bash
10+
# Skill 定义
11+
crates/code/examples/skills/chart-generator.md
12+
13+
# Agent 配置示例
14+
crates/code/examples/agent-chart-generator.hcl
15+
16+
# 测试脚本
17+
crates/code/examples/test_chart_generator.py
18+
```
19+
20+
### 步骤 2: 使用 Python SDK
21+
22+
```python
23+
from a3s_code import Agent
24+
25+
# 创建 agent(使用示例配置)
26+
agent = Agent.create("examples/agent-chart-generator.hcl")
27+
28+
# 创建 session
29+
session = agent.session(".")
30+
31+
# 生成图表
32+
result = session.send("""
33+
Create a line chart showing monthly sales:
34+
Jan: 45000, Feb: 52000, Mar: 48000, Apr: 61000
35+
Use vis-chart format.
36+
""")
37+
38+
print(result.text)
39+
```
40+
41+
### 步骤 3: 查看输出
42+
43+
AI 会生成如下格式的输出:
44+
45+
````markdown
46+
I'll create a line chart to visualize the monthly sales trend:
47+
48+
```vis-chart
49+
{
50+
"type": "line",
51+
"data": [
52+
{ "time": "Jan", "value": 45000 },
53+
{ "time": "Feb", "value": 52000 },
54+
{ "time": "Mar", "value": 48000 },
55+
{ "time": "Apr", "value": 61000 }
56+
]
57+
}
58+
```
59+
60+
The chart shows sales fluctuating between $45K-$61K, with a peak in February.
61+
````
62+
63+
### 步骤 4: 在 SafeClaw 中查看
64+
65+
将上述输出复制到 SafeClaw 的聊天界面,图表会自动渲染为交互式可视化。
66+
67+
---
68+
69+
## 常见用例
70+
71+
### 用例 1: 从文件生成图表
72+
73+
```python
74+
result = session.send("Read sales.json and create a bar chart of top products")
75+
```
76+
77+
### 用例 2: 从命令输出生成图表
78+
79+
```python
80+
result = session.send("""
81+
Run 'git log --oneline --since="1 month ago" | wc -l' for each week
82+
and show a trend chart of commit activity
83+
""")
84+
```
85+
86+
### 用例 3: 多图表仪表板
87+
88+
```python
89+
result = session.send("""
90+
Create a dashboard with:
91+
1. Line chart: Monthly revenue trend
92+
2. Pie chart: Product category distribution
93+
3. Bar chart: Top 5 customers by sales
94+
""")
95+
```
96+
97+
### 用例 4: 自动选择图表类型
98+
99+
```python
100+
result = session.send("""
101+
Analyze the data in metrics.json and create the most
102+
appropriate visualization to show key insights.
103+
""")
104+
```
105+
106+
---
107+
108+
## 支持的图表类型速查
109+
110+
| 图表类型 | 英文名 | 适用场景 | 数据格式 |
111+
|---------|--------|---------|---------|
112+
| 折线图 | line | 时间序列、趋势 | `{ "time": "...", "value": ... }` |
113+
| 条形图 | bar | 分类对比、排名 | `{ "category": "...", "value": ... }` |
114+
| 饼图 | pie | 占比、百分比 | `{ "category": "...", "value": ... }` |
115+
| 面积图 | area | 数量变化、累积 | `{ "time": "...", "value": ... }` |
116+
| 散点图 | scatter | 相关性、分布 | `{ "x": ..., "y": ..., "size": ... }` |
117+
| 柱状图 | column | 分组对比 | `{ "category": "...", "series": "...", "value": ... }` |
118+
| 热力图 | heatmap | 矩阵数据、密度 | `{ "x": "...", "y": "...", "value": ... }` |
119+
| 雷达图 | radar | 多维对比 | `{ "dimension": "...", "value": ... }` |
120+
121+
---
122+
123+
## 提示词技巧
124+
125+
### ✅ 好的提示词
126+
127+
```
128+
"Create a line chart showing quarterly revenue: Q1=100, Q2=120, Q3=150, Q4=180"
129+
"Visualize the data in sales.json as a bar chart"
130+
"Show me a pie chart of browser market share"
131+
"Generate a trend chart for the last 6 months"
132+
```
133+
134+
### ❌ 不好的提示词
135+
136+
```
137+
"Make a chart" # 太模糊,没有指定数据
138+
"Show data" # 没有说明图表类型
139+
"Visualize" # 缺少数据来源
140+
```
141+
142+
### 💡 最佳实践
143+
144+
1. **明确数据来源**:"from sales.json", "using this data: ..."
145+
2. **指定图表类型**:"line chart", "bar chart", "pie chart"
146+
3. **提供上下文**:"to show trends", "to compare products"
147+
4. **要求格式**:"use vis-chart format"(如果 AI 不自动使用)
148+
149+
---
150+
151+
## 故障排查
152+
153+
### 问题:AI 不生成 vis-chart 格式
154+
155+
**解决方案**
156+
```python
157+
# 方法 1: 明确要求格式
158+
result = session.send("Create a chart using vis-chart markdown format")
159+
160+
# 方法 2: 显式调用 skill
161+
result = session.send("/chart-generator Show sales trend")
162+
163+
# 方法 3: 提供示例
164+
result = session.send("""
165+
Create a chart like this example:
166+
\`\`\`vis-chart
167+
{"type": "line", "data": [...]}
168+
\`\`\`
169+
""")
170+
```
171+
172+
### 问题:生成的 JSON 格式错误
173+
174+
**解决方案**
175+
```python
176+
# 要求验证 JSON
177+
result = session.send("""
178+
Create a vis-chart and validate the JSON syntax before outputting
179+
""")
180+
```
181+
182+
### 问题:图表类型选择不当
183+
184+
**解决方案**
185+
```python
186+
# 明确指定图表类型
187+
result = session.send("Create a LINE chart (not bar or pie) showing...")
188+
```
189+
190+
---
191+
192+
## 下一步
193+
194+
1. **运行测试**`python examples/test_chart_generator.py`
195+
2. **查看文档**`docs/a3s-code-vis-chart-integration.md`
196+
3. **自定义 skill**:编辑 `examples/skills/chart-generator.md`
197+
4. **集成到项目**:在你的 `agent.hcl` 中启用 skill
198+
199+
---
200+
201+
## 相关资源
202+
203+
- **Skill 定义**`crates/code/examples/skills/chart-generator.md`
204+
- **完整文档**`docs/a3s-code-vis-chart-integration.md`
205+
- **SafeClaw 渲染器**`apps/safeclaw/src/components/custom/memoized-markdown/vis-chart.tsx`
206+
- **图表示例**`apps/safeclaw/docs/vis-chart-examples.md`
207+
- **GPT-Vis 官网**https://gpt-vis.antv.vision

examples/agent-chart-generator.hcl

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Agent Configuration with Chart Generator Skill
2+
#
3+
# This configuration enables the chart-generator skill for data visualization
4+
5+
agent "data-analyst" {
6+
# Model configuration
7+
model = "openai/gpt-4o"
8+
9+
# Enable skills
10+
skills {
11+
# Path to skills directory
12+
path = "examples/skills"
13+
14+
# Enable specific skills
15+
enabled = [
16+
"chart-generator" # Data visualization skill
17+
]
18+
}
19+
20+
# Permission policy
21+
permissions {
22+
# Allow read operations for data access
23+
allow = [
24+
"read(*)", # Read any file
25+
"grep(*)", # Search file contents
26+
"glob(*)", # Find files by pattern
27+
"bash(cat *)", # View file contents
28+
"bash(head *)", # View file start
29+
"bash(tail *)", # View file end
30+
"bash(wc *)", # Count lines/words
31+
"bash(jq *)", # Parse JSON
32+
"web_fetch(*)" # Fetch data from URLs
33+
]
34+
35+
# Deny dangerous operations
36+
deny = [
37+
"write(*)", # No file writes
38+
"edit(*)", # No file edits
39+
"bash(rm *)", # No deletions
40+
"bash(mv *)", # No moves
41+
"bash(cp *)" # No copies
42+
]
43+
44+
# Default decision for unlisted operations
45+
default_decision = "ask"
46+
}
47+
48+
# Context configuration
49+
context {
50+
# Include project documentation
51+
include_patterns = [
52+
"**/*.md",
53+
"**/*.json",
54+
"**/*.csv",
55+
"**/*.txt"
56+
]
57+
58+
# Exclude large files
59+
exclude_patterns = [
60+
"**/node_modules/**",
61+
"**/target/**",
62+
"**/.git/**"
63+
]
64+
}
65+
66+
# Memory configuration
67+
memory {
68+
enabled = true
69+
max_entries = 1000
70+
}
71+
}

0 commit comments

Comments
 (0)