@creact-labs/creact 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -47
- package/package.json +19 -1
package/README.md
CHANGED
|
@@ -1,65 +1,82 @@
|
|
|
1
1
|
# CReact
|
|
2
2
|
|
|
3
|
-
**Declarative
|
|
3
|
+
**Declarative reactive runtime for AI agents, cloud infrastructure, and automation.**
|
|
4
|
+
|
|
5
|
+
Build complex workflows with JSX. Describe *what* you want — CReact figures out *how*.
|
|
4
6
|
|
|
5
7
|
## Install
|
|
6
8
|
|
|
7
9
|
```bash
|
|
8
|
-
npm install creact
|
|
10
|
+
npm install @creact-labs/creact
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
12
|
-
|
|
13
|
-
```tsx
|
|
14
|
-
// tsconfig.json: "jsxImportSource": "creact"
|
|
13
|
+
## Example: AI Content Pipeline
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
A workflow that generates blog posts and publishes to multiple channels — all reactive and declarative:
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
```tsx
|
|
18
|
+
import { CReact, renderCloudDOM, useInstance, createSignal } from '@creact-labs/creact';
|
|
19
|
+
|
|
20
|
+
// 🤖 AI generates content from a topic
|
|
21
|
+
function AIWriter({ topic, children }) {
|
|
22
|
+
const content = useInstance(OpenAICompletion, {
|
|
23
|
+
model: 'gpt-4',
|
|
24
|
+
prompt: `Write a blog post about: ${topic}`,
|
|
25
|
+
});
|
|
26
|
+
return children(content);
|
|
21
27
|
}
|
|
22
28
|
|
|
23
|
-
|
|
24
|
-
|
|
29
|
+
// 📝 Publish to your blog
|
|
30
|
+
function BlogPost({ title, content }) {
|
|
31
|
+
return useInstance(WordPressPost, { title, content, status: 'published' });
|
|
25
32
|
}
|
|
26
33
|
|
|
27
|
-
//
|
|
28
|
-
function
|
|
29
|
-
|
|
30
|
-
|
|
34
|
+
// 🐦 Share on social
|
|
35
|
+
function Tweet({ content }) {
|
|
36
|
+
return useInstance(TwitterPost, {
|
|
37
|
+
text: content.summary(),
|
|
38
|
+
thread: true,
|
|
39
|
+
});
|
|
31
40
|
}
|
|
32
41
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return
|
|
42
|
+
// 💬 Notify your team
|
|
43
|
+
function SlackNotify({ channel, message }) {
|
|
44
|
+
return useInstance(SlackMessage, { channel, text: message });
|
|
36
45
|
}
|
|
37
46
|
|
|
38
|
-
|
|
47
|
+
// 🔗 Compose the pipeline
|
|
48
|
+
function ContentPipeline({ topic }) {
|
|
39
49
|
return (
|
|
40
|
-
<
|
|
41
|
-
{(
|
|
42
|
-
|
|
43
|
-
{(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
</Mem>
|
|
50
|
+
<AIWriter topic={topic}>
|
|
51
|
+
{(content) => (
|
|
52
|
+
<>
|
|
53
|
+
<BlogPost title={content.title()} content={content.body()} />
|
|
54
|
+
<Tweet content={content} />
|
|
55
|
+
<SlackNotify
|
|
56
|
+
channel="#content"
|
|
57
|
+
message={`✨ New post published: ${content.title()}`}
|
|
58
|
+
/>
|
|
59
|
+
</>
|
|
51
60
|
)}
|
|
52
|
-
</
|
|
61
|
+
</AIWriter>
|
|
53
62
|
);
|
|
54
63
|
}
|
|
55
64
|
|
|
56
|
-
// Run
|
|
57
|
-
|
|
58
|
-
CReact.backend = new FileBackend({ directory: '.state' });
|
|
59
|
-
|
|
60
|
-
await renderCloudDOM(<App prompt="Hello" />, 'agent');
|
|
65
|
+
// Run it
|
|
66
|
+
await renderCloudDOM(<ContentPipeline topic="Why CReact changes everything" />);
|
|
61
67
|
```
|
|
62
68
|
|
|
69
|
+
**Change the topic → everything updates.** The blog post regenerates, tweet updates, Slack notifies.
|
|
70
|
+
|
|
71
|
+
## Why CReact?
|
|
72
|
+
|
|
73
|
+
| Traditional Approach | CReact |
|
|
74
|
+
|---------------------|--------|
|
|
75
|
+
| Imperative scripts that break | Declarative specs that reconcile |
|
|
76
|
+
| Manual dependency tracking | Automatic reactive updates |
|
|
77
|
+
| Scattered state across files | Single source of truth |
|
|
78
|
+
| Hard to test and reason about | Composable, testable components |
|
|
79
|
+
|
|
63
80
|
## The Four Pillars
|
|
64
81
|
|
|
65
82
|
**Declarative** — Describe what you want, not how to get it.
|
|
@@ -72,17 +89,12 @@ await renderCloudDOM(<App prompt="Hello" />, 'agent');
|
|
|
72
89
|
|
|
73
90
|
## Documentation
|
|
74
91
|
|
|
75
|
-
### Getting Started
|
|
76
|
-
|
|
77
92
|
- [Tutorial: Build an AI Agent](./docs/getting-started/1-setup.md)
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
- [
|
|
82
|
-
- [
|
|
83
|
-
- [Components](./docs/concepts/components.md) — Composing with JSX
|
|
84
|
-
- [Reactivity](./docs/concepts/reactivity.md) — When things change
|
|
85
|
-
- [Providers](./docs/concepts/providers.md) — Connecting to the real world
|
|
93
|
+
- [Thinking in CReact](./docs/concepts/thinking-in-creact.md)
|
|
94
|
+
- [Constructs](./docs/concepts/constructs.md)
|
|
95
|
+
- [Components](./docs/concepts/components.md)
|
|
96
|
+
- [Reactivity](./docs/concepts/reactivity.md)
|
|
97
|
+
- [Providers](./docs/concepts/providers.md)
|
|
86
98
|
|
|
87
99
|
## License
|
|
88
100
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@creact-labs/creact",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Declarative universal reactive runtime",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"default": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./jsx-runtime": {
|
|
13
|
+
"types": "./dist/jsx/jsx-runtime.d.ts",
|
|
14
|
+
"default": "./dist/jsx/jsx-runtime.js"
|
|
15
|
+
},
|
|
16
|
+
"./jsx-dev-runtime": {
|
|
17
|
+
"types": "./dist/jsx/jsx-dev-runtime.d.ts",
|
|
18
|
+
"default": "./dist/jsx/jsx-dev-runtime.js"
|
|
19
|
+
},
|
|
20
|
+
"./jsx": {
|
|
21
|
+
"types": "./dist/jsx/index.d.ts",
|
|
22
|
+
"default": "./dist/jsx/index.js"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
7
25
|
"typesVersions": {
|
|
8
26
|
"*": {
|
|
9
27
|
"jsx": [
|