Skip to content

Commit 9a38533

Browse files
Ray0907Ray0907
committed
feat: initial release of Nuxt AI Draw.io
 - AI-powered diagram generation with draw.io editor - Support for multiple AI providers (OpenAI, Anthropic, Google, Bedrock, Azure) - Prompt caching for AWS Bedrock - Export to PNG, XML, Mermaid formats - Dark/light mode, close protection
1 parent bb52844 commit 9a38533

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+17150
-0
lines changed

‎.editorconfig‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_size = 2
6+
indent_style = space
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎.env.example‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# ==============================================================================
2+
# AI PROVIDER CONFIGURATION
3+
# ==============================================================================
4+
# Choose one of: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow
5+
AI_PROVIDER=openai
6+
7+
# Model ID (required)
8+
AI_MODEL=gpt-4o
9+
10+
# ==============================================================================
11+
# PROVIDER API KEYS
12+
# ==============================================================================
13+
14+
# OpenAI
15+
OPENAI_API_KEY=
16+
OPENAI_BASE_URL=
17+
18+
# Anthropic
19+
ANTHROPIC_API_KEY=
20+
ANTHROPIC_BASE_URL=
21+
22+
# Google Generative AI
23+
GOOGLE_GENERATIVE_AI_API_KEY=
24+
GOOGLE_BASE_URL=
25+
26+
# AWS Bedrock (uses IAM credentials from environment or ~/.aws/credentials)
27+
AWS_REGION=us-west-2
28+
AWS_ACCESS_KEY_ID=
29+
AWS_SECRET_ACCESS_KEY=
30+
31+
# Azure OpenAI
32+
AZURE_API_KEY=
33+
AZURE_BASE_URL=
34+
AZURE_RESOURCE_NAME=
35+
36+
# Ollama (local) - TODO: Coming soon, provider to be rewritten
37+
# OLLAMA_BASE_URL=http://localhost:11434/api
38+
39+
# OpenRouter
40+
OPENROUTER_API_KEY=
41+
OPENROUTER_BASE_URL=
42+
43+
# DeepSeek
44+
DEEPSEEK_API_KEY=
45+
DEEPSEEK_BASE_URL=
46+
47+
# SiliconFlow
48+
SILICONFLOW_API_KEY=
49+
SILICONFLOW_BASE_URL=
50+
51+
# ==============================================================================
52+
# REASONING MODEL CONFIGURATION
53+
# ==============================================================================
54+
55+
# OpenAI (o1, o3, gpt-5 models)
56+
OPENAI_REASONING_EFFORT=medium
57+
OPENAI_REASONING_SUMMARY=detailed
58+
59+
# Anthropic (Claude with thinking)
60+
ANTHROPIC_THINKING_BUDGET_TOKENS=10000
61+
ANTHROPIC_THINKING_TYPE=enabled
62+
63+
# Google (Gemini 2.5/3 models)
64+
GOOGLE_THINKING_BUDGET=10000
65+
GOOGLE_THINKING_LEVEL=high
66+
GOOGLE_REASONING_EFFORT=medium
67+
68+
# Azure (reasoning models)
69+
AZURE_REASONING_EFFORT=medium
70+
AZURE_REASONING_SUMMARY=detailed
71+
72+
# AWS Bedrock (Claude/Nova reasoning)
73+
BEDROCK_REASONING_BUDGET_TOKENS=10000
74+
BEDROCK_REASONING_EFFORT=medium
75+
76+
# Ollama (local thinking models)
77+
OLLAMA_ENABLE_THINKING=false
78+
79+
# ==============================================================================
80+
# SECURITY
81+
# ==============================================================================
82+
# Comma-separated list of valid access codes (leave empty to disable)
83+
ACCESS_CODE_LIST=
84+
85+
# ==============================================================================
86+
# LANGFUSE TELEMETRY (Optional)
87+
# ==============================================================================
88+
LANGFUSE_PUBLIC_KEY=
89+
LANGFUSE_SECRET_KEY=
90+
LANGFUSE_BASEURL=
91+
92+
# ==============================================================================
93+
# LIMITS AND CONFIGURATION
94+
# ==============================================================================
95+
MAX_OUTPUT_TOKENS=16000
96+
TEMPERATURE=
97+
MAX_EXTRACTED_CHARS=150000

‎.github/workflows/ci.yml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
name: ci
2+
3+
on: push
4+
5+
jobs:
6+
ci:
7+
runs-on: ${{ matrix.os }}
8+
9+
strategy:
10+
matrix:
11+
os: [ubuntu-latest]
12+
node: [22]
13+
14+
steps:
15+
- name: Checkout
16+
uses: actions/checkout@v6
17+
18+
- name: Install pnpm
19+
uses: pnpm/action-setup@v4
20+
21+
- name: Install node
22+
uses: actions/setup-node@v6
23+
with:
24+
node-version: ${{ matrix.node }}
25+
cache: pnpm
26+
27+
- name: Install dependencies
28+
run: pnpm install
29+
30+
- name: Lint
31+
run: pnpm run lint
32+
33+
- name: Typecheck
34+
run: pnpm run typecheck

‎.gitignore‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example
25+
26+
# VSC
27+
.history
28+
.vercel
29+
.env*.local

‎.npmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shamefully-hoist=true

‎README.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
# Nuxt AI Draw.io
2+
3+
[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
4+
5+
AI-powered diagram editor that lets you create and edit draw.io diagrams using natural language. Built with [Nuxt 4](https://nuxt.com), [Nuxt UI 4](https://ui.nuxt.com), and [AI SDK v5](https://sdk.vercel.ai).
6+
7+
## Features
8+
9+
- **AI-Powered Diagram Generation** - Create flowcharts, system architectures, ER diagrams, mind maps, and more using natural language
10+
- **Embedded Draw.io Editor** - Full-featured diagram editor with real-time preview
11+
- **Multiple AI Providers** - Support for OpenAI, Anthropic, Google AI, Azure, AWS Bedrock, OpenRouter, DeepSeek, and SiliconFlow
12+
- **Prompt Caching** - AWS Bedrock prompt caching for Claude models to reduce costs
13+
- **Reasoning Models** - Support for thinking/reasoning models (Claude, Gemini, OpenAI o1/o3)
14+
- **Dark/Light Mode** - Automatic theme detection with manual toggle
15+
- **Close Protection** - Prevent accidental page close with unsaved diagrams
16+
- **Export Options** - Save as PNG, XML (.drawio), or Mermaid format
17+
- **Token Usage Display** - See input/output token counts for each request
18+
- **Access Code Protection** - Optional access code authentication
19+
20+
## Tech Stack
21+
22+
| Category | Technology |
23+
|----------|------------|
24+
| Framework | Nuxt 4 + Vue 3 |
25+
| UI | Nuxt UI 4 (Tailwind CSS) |
26+
| AI SDK | Vercel AI SDK v5 |
27+
| Diagram Engine | Draw.io (embedded iframe) |
28+
| State Management | Vue composables |
29+
| Icons | Lucide |
30+
31+
## Quick Start
32+
33+
### 1. Install Dependencies
34+
35+
```bash
36+
pnpm install
37+
```
38+
39+
### 2. Configure Environment
40+
41+
Copy `.env.example` to `.env` and configure your AI provider:
42+
43+
```env
44+
# AI Provider (openai, anthropic, google, bedrock, azure, openrouter, deepseek, siliconflow)
45+
AI_PROVIDER=openai
46+
47+
# Model ID
48+
AI_MODEL=gpt-4o
49+
50+
# API Key (based on provider)
51+
OPENAI_API_KEY=sk-...
52+
```
53+
54+
See `.env.example` for all available configuration options.
55+
56+
### 3. Start Development Server
57+
58+
```bash
59+
pnpm dev
60+
```
61+
62+
Open [http://localhost:3000](http://localhost:3000) in your browser.
63+
64+
## Supported AI Providers
65+
66+
| Provider | Environment Variables | Notes |
67+
|----------|----------------------|-------|
68+
| OpenAI | `OPENAI_API_KEY` | GPT-4o, o1, o3 models |
69+
| Anthropic | `ANTHROPIC_API_KEY` | Claude 3.5/4 models |
70+
| Google | `GOOGLE_GENERATIVE_AI_API_KEY` | Gemini 2.5/3 models |
71+
| AWS Bedrock | `AWS_REGION`, `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY` | Claude with prompt caching |
72+
| Azure OpenAI | `AZURE_API_KEY`, `AZURE_RESOURCE_NAME` | Azure-hosted models |
73+
| OpenRouter | `OPENROUTER_API_KEY` | Multi-provider routing |
74+
| DeepSeek | `DEEPSEEK_API_KEY` | DeepSeek models |
75+
| SiliconFlow | `SILICONFLOW_API_KEY` | SiliconFlow models |
76+
77+
## Project Structure
78+
79+
```
80+
nuxt-ai-drawio/
81+
├── app/
82+
│ ├── components/
83+
│ │ ├── ChatPanel.vue # Chat interface
84+
│ │ ├── DrawioEditor.vue # Draw.io iframe wrapper
85+
│ │ └── ...
86+
│ ├── composables/
87+
│ │ └── useDiagram.ts # Diagram state management
88+
│ ├── utils/
89+
│ │ └── mermaid-converter.ts # XML to Mermaid conversion
90+
│ └── pages/
91+
│ └── index.vue # Main page (editor + chat)
92+
├── server/
93+
│ ├── api/
94+
│ │ ├── chat.post.ts # AI chat endpoint
95+
│ │ └── verify-access-code.post.ts
96+
│ └── utils/
97+
│ ├── ai-providers.ts # AI provider configuration
98+
│ ├── cached-responses.ts # Response caching
99+
│ ├── diagram-tools.ts # AI tools for diagrams
100+
│ └── system-prompts.ts # System prompts
101+
└── nuxt.config.ts
102+
```
103+
104+
## AI Tools
105+
106+
The AI assistant has access to three tools for diagram manipulation:
107+
108+
1. **display_diagram** - Create a new diagram from scratch
109+
2. **edit_diagram** - Make targeted edits to existing diagrams
110+
3. **append_diagram** - Continue generating truncated output
111+
112+
## Development
113+
114+
```bash
115+
# Start dev server
116+
pnpm dev
117+
118+
# Build for production
119+
pnpm build
120+
121+
# Preview production build
122+
pnpm preview
123+
124+
# Lint code
125+
pnpm lint
126+
127+
# Type check
128+
pnpm typecheck
129+
```
130+
131+
## Credits
132+
133+
Inspired by [Nuxt UI Chat Template](https://github.com/nuxt-ui-templates/chat) and [Next AI Draw.io](https://github.com/anthropics/next-ai-draw-io).
134+
135+
## License
136+
137+
MIT

‎app/app.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default defineAppConfig({
2+
ui: {
3+
colors: {
4+
primary: 'blue',
5+
neutral: 'neutral'
6+
}
7+
}
8+
})

‎app/app.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
const color_mode = useColorMode()
3+
4+
const color = computed(() => color_mode.value === 'dark' ? '#1b1718' : 'white')
5+
6+
useHead({
7+
meta: [
8+
{ charset: 'utf-8' },
9+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
10+
{ key: 'theme-color', name: 'theme-color', content: color }
11+
],
12+
link: [
13+
{ rel: 'icon', href: '/favicon.ico' }
14+
],
15+
htmlAttrs: {
16+
lang: 'en'
17+
}
18+
})
19+
20+
const title = 'Nuxt AI Draw.io'
21+
const description = 'AI-powered diagram editor - create and edit draw.io diagrams with natural language'
22+
23+
useSeoMeta({
24+
title,
25+
description,
26+
ogTitle: title,
27+
ogDescription: description,
28+
twitterCard: 'summary_large_image'
29+
})
30+
</script>
31+
32+
<template>
33+
<UApp :toaster="{ position: 'top-right' }" :tooltip="{ delayDuration: 200 }">
34+
<NuxtLoadingIndicator color="var(--ui-primary)" />
35+
<NuxtPage />
36+
</UApp>
37+
</template>

‎app/assets/css/main.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import "tailwindcss" theme(static);
2+
@import "@nuxt/ui";
3+
4+
@theme static {
5+
--font-sans: 'Public Sans', sans-serif;
6+
7+
--color-green-50: #EFFDF5;
8+
--color-green-100: #D9FBE8;
9+
--color-green-200: #B3F5D1;
10+
--color-green-300: #75EDAE;
11+
--color-green-400: #00DC82;
12+
--color-green-500: #00C16A;
13+
--color-green-600: #00A155;
14+
--color-green-700: #007F45;
15+
--color-green-800: #016538;
16+
--color-green-900: #0A5331;
17+
--color-green-950: #052E16;
18+
}
19+
20+
:root {
21+
--ui-container: var(--container-3xl);
22+
}

0 commit comments

Comments
 (0)