神威/KAMUIとRoo-clineとSourceSageMCPでRustバックエンドのシンプルダッシュボードを作ってみた！


## はじめに &#x1f3af;

神威/KAMUIとRoo-clineの最新機能を使って、Rustをバックエンドにしたシンプルなダッシュボードアプリケーションを作成してみました。今回はSourceSage MCPを活用して、プロジェクト構造の分析から実装まで自動化しています。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">神威/KAMUI &#x2716; Roo-cline &#x2716; SourceSageMCP で初めて Rustをバックエンドにしたシンプルなダッシュボード作ってみた！<br>これはマジで勉強になる！<br>＊かかった時間は36分！<br>＊8割の部分はRoo-clineのフルオートで作ってくれる！ <a href="https://t.co/DSctPW8Sp9">https://t.co/DSctPW8Sp9</a> <a href="https://t.co/raDZwUtOrb">pic.twitter.com/raDZwUtOrb</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1870717207405334533?ref_src=twsrc%5Etfw">December 22, 2024</a></blockquote> 

## 神威/KAMUIによる設計 &#x1f3af;

まず、神威/KAMUIを使用してプロジェクトの構造を定義しました。KAMUIは`structure.yaml`を生成し、これをもとにRoo-clineが実装を進めていきます。

```yaml
src:
  structure.yaml:
    content: |-
      Nekoneko Technology Management Dashboard
      - バックエンド: Rust (Axum)
      - フロントエンド: Next.js (TypeScript)
      - データベース: PostgreSQL
      - 状態管理: Zustand
      - UI: Shadcn/ui, Tailwind CSS
      
      主要機能:
      - ダッシュボード
      - プロジェクト管理
      - リソース追跡
      - ユーザー認証
      
      agent選定理由: claude-3-5-sonnetは複雑なアーキテクチャの設計と実装に最適
      api選定理由: OpenAI APIを使用し、AIによる高度な分析機能を提供

    dependency: []
    agent: "claude-3-5-sonnet-20241022"
    api: "openai-gpt-4o"
```

この構造定義により、Roo-clineは必要な依存関係やファイル構造を理解し、効率的に実装を進めることができました。

## プロジェクト概要 &#x1f4cb;

- **プロジェクト名**: nekoneko-technology-management-dashboard
- **フロントエンド**: Next.js + TypeScript
- **バックエンド**: Rust (Axum)
- **状態管理**: Zustand
- **UIライブラリ**: shadcn/ui

## 実装プロセス &#x1f504;

### 1. プロジェクト作成とデプロイ

#### 実行されたプロセス:

1. GitHubリポジトリの作成:
```bash
gh repo create nekoneko-technology-management-dashboard --public --description "ねこねこテクノロジー技術管理ダッシュボード" --confirm
```

2. プロジェクト構造の分析（Source Sage MCP使用）:
```bash
generate_structure
Arguments:
{
  "path": "C:/Prj/nekoneko-technology-management-dashboard"
}
```

3. アセットディレクトリの作成とSVGヘッダー生成
4. プロジェクトのREADME.md作成
5. Gitflowの初期化（aira-mcp-server使用）

最初のプロンプト:
```bash
nekoneko-technology-management-dashboard というGithubのリポジトリを作成して公開デプロイして
```

Roo-clineの自動処理:
- GitHubリポジトリの作成
- プロジェクトの初期構造の設定
- README.mdとヘッダー画像の生成
- Gitの初期化とプッシュ

### 2. フロントエンド実装

#### 詳細な実行プロセス:

1. 依存関係のインストール:
```bash
cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer
```

2. shadcn/uiの設定:
```bash
npx shadcn-ui@latest init
```

3. 必要なコンポーネントの生成:
```bash
cd src/frontend && npm install clsx tailwind-merge tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-slot
```

4. TypeScript設定:
```json
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ... その他の設定
  }
}
```

5. Zustandストアの実装:
```typescript
	import { create } from 'zustand';
	interface Project {
	  id: string;
	  name: string;
	  status: string;
	  progress: number;
	}

	interface ProjectStore {
	  projects: Project[];
	  fetchProjects: () => Promise<void>;
	}

	export const useProjectStore = create<ProjectStore>((set) => ({
	  projects: [],
	  fetchProjects: async () => {
		const response = await fetch('http://localhost:3002/projects');
		const data = await response.json();
		set({ projects: data });
	  }
	}));
```

自動実行されたコマンド:
```bash
cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer
```

Roo-clineが自動生成したファイル:
- components.json (shadcn/ui設定)
- tailwind.config.js
- プロジェクトストア (Zustand)
- UIコンポーネント (Card, Button, Dialog)

### 3. バックエンド実装 (Rust)

#### 詳細な実行プロセス:

1. Rustプロジェクトの作成と依存関係の追加:
```bash
cd src && cargo new backend
cd backend && cargo add tokio --features full
cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber
cargo add tower-http --features cors
```

2. メインサーバーコードの実装:
```rust
	use axum::{
		routing::{get, post},
		Router,
		Json,
	};
	use serde::{Deserialize, Serialize};
	use tower_http::cors::{CorsLayer, Any};

	#[derive(Debug, Serialize, Deserialize)]
	struct Project {
		id: String,
		name: String,
		status: String,
		progress: f32,
	}

	#[tokio::main]
	async fn main() {
		let cors = CorsLayer::new()
			.allow_origin(Any)
			.allow_methods(Any)
			.allow_headers(Any);

		let app = Router::new()
			.route("/projects", get(get_projects))
			.layer(cors);

		let listener = tokio::net::TcpListener::bind("127.0.0.1:3002")
			.await
			.unwrap();
		println!("Server running on http://localhost:3002");

		axum::serve(listener, app).await.unwrap();
	}
```

3. CORSの設定とエラーハンドリングの実装
4. エンドポイントの実装（GET /projects）

自動実行されたコマンド:
```bash
cd src && cargo new backend && cd backend && cargo add tokio --features full && cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber
```

### 4. エラー対応と解決

#### 発生したエラーと解決プロセス:

1. idnaクレートの互換性エラー:
```bash
error[E0658]: use of unstable library feature 'error_in_core'
```

解決手順:
- Cargo.tomlの依存関係を調整
- idnaクレートのバージョンを指定
- 一時的にデータベース関連の依存関係を削除

2. フロントエンドのポート競合:
```bash
# バックエンドポートを3002に変更
let listener = tokio::net::TcpListener::bind("127.0.0.1:3002").await.unwrap();
```

3. CORSエラーの解決:
```rust
let cors = CorsLayer::new()
    .allow_origin(Any)
    .allow_methods(Any)
    .allow_headers(Any);
```

4. TypeScript型エラーの解決:
- 適切な型定義の追加
- インターフェースの実装

遭遇したエラー:
```bash
error[E0658]: use of unstable library feature 'error_in_core'
```

Roo-clineによる自動解決:
- Cargo.tomlの依存関係の調整
- idnaクレートのバージョン指定
- データベース関連の依存関係の一時的な削除

## コスト分析 &#x1f4b0;

### フロントエンド実装
- トークン使用量: 160 / 15.0k
- キャッシュヒット: +314.8k / 1.5m
- API費用: $1.8544

### バックエンド実装
- トークン使用量: 112 / 4.3k
- キャッシュヒット: +71.4k / 992.9k
- API費用: $0.6307

**総費用**: $2.4851

## まとめ &#x2728;

Roo-clineとSourceSage MCPを使用することで、以下の利点がありました：

1. プロジェクト構造の自動分析と最適化
2. フロントエンド・バックエンドの自動実装
3. エラーの自動検知と解決
4. GitHubへの自動デプロイ

特に、Rustバックエンドの実装では、依存関係の解決やエラー対応を自動的に行ってくれる点が非常に便利でした。

## リポジトリ &#x1f517;

完成したプロジェクトは以下で確認できます：
[nekoneko-technology-management-dashboard](https://github.com/Sunwood-ai-labs/nekoneko-technology-management-dashboard)

## 使用ツール

https://github.com/RooVetGit/Roo-Cline

https://www.kamui.ai/

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>